Phase 1 at Flatiron (JavaScript)

Phase 1 quick summary:

The start of my first phase at Flatiron School has been quite the experience. The first week was overwhelming to say the least due to the amount of JavaScript that we had to learn in such a short period of time.

Then during the second week, everything started to click as we were applying the concepts such as arrays, objects, functions, etc. into our practice labs.

Going into the 3rd week, working on the website project was an exciting challenge that tested me on what I learned with JavaScript and CSS and being able to create a functional website, made it all the worthwhile.

What I learned:
Within my phase-1 experience, there were many different concepts that I learned within JavaScript and CSS. Below is one thing I have learned that I felt what was most intriguing and stood out during my journey through JavaScript for phase-1.

.addEventListener():

One of the most useful codes that I have learned has involved using an .addEventListener(). This form of method uses an "event", which will then trigger a callback function or object. When the event is used, then it will perform the action that the developer intended. Some of the events that are used for event listeners are submit, click, etc. As most users would recognize from some of the example events, submit would be the event that is using information a user enters in a form and is submitted. Click occurs when a user clicks an element within the webpage, like clicking a link within the webpage and being sent to the link that has been clicked.

For example:

Through the example from my phase-1 project with an event listener, this event listener will submit a new form adding a new character into the array of current characters for our website.
We start with a variable in order to target the form. Then we use that variable and add the .addEventListener(). Within the event listener, we used the "submit" event and added a function that targets "e". The e.preventDefault() is placed for "submit" events in order for the page to not refresh.

Then we create another variable for the new character that needs to be added an create an array with objects with the information of the character. After, we make a new array by putting the new character before the existing characters from the API with spread syntax. The newCharacter variable is placed into our renderCharacters function, which the function will show the information for our new character in our website.

Wrap-up:

Just from this one example, it shows how important event listeners are for the daily user experience with simple tasks. Such as submitting information for creating an account or clicking on images/links to access more information.