JavaScript: How it is done behind the scenes

When you look at a website, you might wonder "what is the reason that this was created and how was it created?" Well you can thank JavaScript for a majority of the click-clack features that are on a website! Every industry uses JavaScript to create any and all types of applications that ranges from web, mobile, and game development. At Flat-Iron school/bootcamp of coding, I learned the 3 main pillars for the use of JavaScript and how to write using the coding language. "The 3 pillars are?" you may ask and they are:

1. Manipulating the DOM
2. Recognizing JavaScript events
3. Communication with the server

These 3 pillars are extremely important when going into JavaScript and understanding how they work is a great feature to know. Now let us dive into some usage with of JavaScript in my first assignment project.

My project was to create a simple single page application that integrated everything that I have learned thus far. And I decided to do something on the funny side and make it to do with jokes! It was both fun and challenging, which always bring joy to a coder. Challenges cause you to really think on the problem and try and either look or think of the solution and work it out. And you can also ask for help or ideas to the challenge.

To start using the 3 pillar resources, you need to create the JavaScript sheet that will run in the background of any website. This element is called the DOM and it will always run first and load the content. You can do this two different ways: through html or through the JavaScript code itself. For the JavaScript, you must add an eventlistener in the document and anonymous functions within the code. If you do it with html, you add it as stated in the photo above. and you always add it to the bottom of the html sheet. It is all up to preference for what route you choose.

Once you finish that, you can get started with the actual coding part.

Listed above is the start of my code. I started out with the addEventListener document to start the DOM in the background. Then I created variables. You can use three types of names for identifying variables: const, let, and var. For me, I used const because it also means "constant" and has been easier for me to remember variable identifications. Within those variables, I set them to equal elements that get the id value of the html in order to use them later. But in order get it to properly work, we need events and functions.

Since I wanted to make Chuck Norris jokes for my project, I needed to get the jokes from somewhere. So I used a fetch function that will get any Chuck Norris related joke from a public API that also tied with a .json to communicate between the web and the code. See how I used some more const as variables? Very mindful of me, very demure. This is so we can return the joke once it grabs one from the API.

Once the joke has been secured, where does it go? Well, that is what the display joke function is for. It takes the joke and creates a space for it on the webpage to be viewed and it goes through the whole function and makes it go from a value into a string to show words. The quotes are not seen on the page but that is where you would type words, numbers, or phrases and BAM on the page. Then at the end it will appear on the webpage.

In the background of all of this, a different function is running and that is the get new joke function. I created another eventListener which is toggled by clicking on the button and then calls to the function afterwards. This will get a new joke every time you click on the "Get New Joke" and do the whole process stated above.

Now what if you want dark mode? Some websites do allow the user to switch between light and dark mode and it is all from JavaScript! It is quite simple by making a new eventlistener and including a 'click' like what you would do when you click on something. When you do this, it goes through a short snip of code that takes the class list and toggles it between the dark and light mode. Short and sweet!

Finally, the ability to search within an application. A majority of sites have this feature if you want to find something else that is related to the topic. For this, you can search your already sent Chuck Norris jokes to find similarities within the jokes. If you search a word that was not said then it will not display anything. It will automatically set everything to lowercase so you can try to get around it!

Doing this project was both fun and challenging and I would highly recommend anyone to get into coding because you might find something that is both frustrating but fun at the same time.