If you're starting out with Ruby like I did and move on to JavaScript you're warned about how different it's going to be. When beginning this section of the curriculum I got to grasp just how different it really is. Being that my first few projects seemed to be a continuation of what was previously learned, JavaScript was like going into a whole new world.
Been There Done That is an application that acts like a grocery list for all the places a user would want to travel to in the world. All that needs to be done is the user types in the country/state and the city that's wanting to be traveled to. After that the form is submitted with a button to add that location to the list. If that place has been crossed off the list or maybe is just not looking to traveled to anymore there's a delete button provided that will remove it.
Prior to Js, event listeners were just one thing that was unheard of but stuck out to me throughout the material and made a lot of sense upon learning the many ones and ways they're used. The thought of the code listening for certain events to occur in order for an action to be made gave a good idea of all the programs that can be made using them. Of course the ones that immediately come to mind are the click events but the DOMContentLoaded and form events caught my attention. While some events like the click event are pretty straight forward the DOMContentLoaded event is one done behind the scenes to insure that the DOM loads before the entirety of the HTML script is loaded. The form submission event is used when a user submits a form to the server, most likely using a button, making a POST request. With this event extra steps have to be made for it to work. One of those step is when sending a POST request .preventDefault() needs to be added first to the event being passed in to prevent the default submission action of reloading the page.
function addPlace(e) {
e.preventDefault()
const locationInput = e.target.children[0]
const cityInput = e.target.children[1]
fetch("http://localhost:3000/places", {
method: "POST",
headers: {
Those are just a small fraction of the event listeners and the big world that is JavaScript. Even though Js was completely foreign to me the material throughout my learning made it easier to follow along and actually understand how to build a functioning application. There's so much to learn and do in this new language, and I'm looking forward to see just what all can be built.
Top comments (0)