JavaScript: The Wild West
So far in my coding journey, things have felt very neat and tidy. Ruby has lovely conventions and fairly regular patterns that I felt I could get a hold of quite easily. JavaScript has felt like a free-for-all of element creation and event listeners and a seemingly endless way of accomplishing the same task. It does afford me a lot of freedom to figure things out, which can be very fun but is also frankly terrifying. The things that helped me get the best handle on my use of JavaScript were the use of very specific HTML id’s, and the help of object-oriented JavaScript.
One of my greatest challenges with JavaScript has been small typos, if you can believe it (obviously every coder knows this is the greatest pain you will ever feel). At one point, I had spent days attempting to go through my code line-by-line to figure out why my form wasn’t submitting data into my fetch request for creating a new book. I changed so much about my project and nothing would work, until one day a friend noticed that I had left the “s” off of “headers” in my config object. I was both relieved and horrified that I had spent so much of my life on a problem that turned out to have that simple of a solution.
Another big issue I had regarded my wish to only display book titles inside the genre card, and when clicked, a book would display it’s information like author and whether the user had read it or not. Well, getting the information to display was easy enough, the information had already been fetched, so I just had to add an event listener that would load the info upon clicking the book title. The issue arose when you clicked the book title for a second or third or tenth time: it just kept adding the information again and again. I quickly found online that I needed to toggle the class name to be “active” when clicked and then go away when clicked again. Being that I’m very new to JavaScript, I thought that “toggle” would mean that the state of “active” shifted when clicked again or when something else was clicked. But it doesn’t! All I had to do though was add an “if-else” statement that added the “active” class name if it wasn’t already present, and take it away using “classList.remove()” when it was!
I know that my first project with JavaScript is quite simple, but it is exciting to see how much you can do! As long as you have a good handle on the HTML you want to create with each action, it is much more smooth. I’m sure the more I practice, the more clearly I’ll be able to define Div’s and give more specific id’s to each element. Another extremely helpful part of this process was simply inspecting my webpage to see what HTML property I wanted to access. When you can look at your page and see where you want things added and then just grab that element and append something to it using JavaScript, it becomes a lot simpler than rifling through your code to find what class you gave that one element.
I found JavaScript to be the most challenging language to learn so far, but it’s also the most free-wheeling, fun language. You can play around any way you want to, pretty much, and create a functioning website on just one page. So giddy up coders, because JavaScript is like the Wild West!
