JavaScript Phase1 Project: Flatiron School

Never thought I’d make it this far, but here I am! I’ll be going over the aspects of my project that I’ve had the most trouble with (one out of many, but the most difficult for me). CREATING WORKING BUTTONS!

Two buttons for generating and saving memes.

To start, I made two button elements in my ‘index.html’ file with different ID’s for each, this makes it easy to select them in JavaScript (Meaningful names are very important, and makes it easier to debug):

As you can see, the first button has an id=”button” , whereas the second has an id=”save-button”.

Once I created these two buttons, I then used JavaScript to save them into a variable:

Here I am using ‘document.getElementById()’ to access all my ID’s! More specifically, the ‘reloadMemeBttn’ and the ‘saveMemeBttn’. (camelCaseFtw!)

Now that I have my buttons saved in a variable, I can call an ‘eventListener’ on them to respond to any JS event (i.e. “click”, “dblclick”, “mouseover”, etc.). In this case, especially for a button, I used the “click” event listener. The word ‘click’ itself is the first parameter of the listener, while the second parameter points to a function I created! Once you click, BOOM! function gets executed. See more below: 👇

In my ‘saveMeme()’ function, I’m doing all this variable assigning right? Yes, but let’s focus on the topic at hand. ALL this is doing (button wise) is creating a button (with an ‘x’) that is attached to whatever is saved from the “click” event (in this case it would be saving an Image or Gif). This is for the “Save Meme URL” button from earlier.

The ‘Generate New Meme’ button, once “clicked”, will fire up this function! Essentially all this is doing is utilizing an API saved in the “URL” variable, making sure it’s in the right format, and gives us back data! (In this case, a random image or gif!)

Clearly there is A LOT more going on with this code than just creating and adding functionality to buttons, but for me the idea of buttons were the most difficult to fully grasp. I will continue on this incredible journey in becoming a software engineer, and create even more badass websites in the future! Thank you for reading, and I hope you got something out of it! 😁