Here we are. I'm wrapping up m first major project at Flatiron School. Maybe this feeling won't fade away, but early in my software development journey, coding still feels a little like learning magic. That may sound silly but think of it this way: In books and movies, magic is expressed with words of power--with expressions and phrases that are filled with such potent meaning, they alter the world around them. With coding, you're using a language filled with words of power, that can alter the behavior of a computer, giving it instructions to do incredible things. Typing in the right words in the right order and somehow it works. Your vision becomes reality.
And in a more mundane way, learning to code is just like learning any other language. You learn the syntax and grammar, the meaning. Currently, I feel a little like I did in French class back in high school: I can read the language just fine. I can follow the logic and decipher the meaning, but when it comes to speaking it, much of the time, my mind just goes blank. I've been told many times that there's no shame in Googling answers to problems. Everyone does it all the time. But I do hope I manage to build the mental muscle memory for some of these simpler problems sooner rather than later.
This first project was where I felt both feelings really clash for me. A sense of elation when, oh wow, the code I wrote worked! It was doing just what I envisioned! And a sense of dread when I would hit a roadblock in my knowledge or would see an error pop up while my website would refuse to do what I wanted it to do. But going back to the idea of Googling, I will say, the programming community has a willingness to share knowledge and an eagerness to help its fellows in a way I've never seen in any other community.
Taking these steps, following the path laid by other programmers, I found my way through and around every roadblock I came across.
First, I should probably lay out what the function of my project is: I found an API called TV Maze and decided to build a search that would fetch a list of TV shows from their database. The results of the search would be rendered as "cards" and appended to an empty element. Each card would have a button that would add the show to another section on the page called "Watch List." If I were to build a server myself, this would be accomplished with a POST request, but since the site didn't need to be persistent, I needed to find a way to clone the card to this watch list. Most of the objectives I needed to make this project a reality, I already had an idea of how to do. The means to clone elements, however, was something I need to figure out how to do from scratch.
I went about writing the code for the things I already knew how to do: Making the bare bones of the HTML, adding important ids to elements I knew my script would be frequently working with through the DOM. Writing the FETCH request to interact with TV Maze's API, and the function to render the received data in HTML elements (This was tricky, and I ended up having to rely heavily on the innerHTML property, which I have since discovered has the potential to be a security risk; in the future, I will have to use other means to a achieve this), and the event listeners for the search input and the "Add to Watch List" buttons. When I got stuck, I referred to the videos and lessons Flatiron had provided on whatever subject I needed help with. And when I had nothing left to do, I had to confront the biggest blank in my knowledge: How to copy elements in the DOM.
I was expecting a lot of finagling, but instead, it turned out good ol' Javascript had my back. I came across a node method called (wait for it) cloneNode. All I had to do was capture an element in the DOM, call this method and then append the cloned element wherever I wanted on the page. The only thing that threw me for a loop was an optional parameter in the method called "deep." When "true," it would copy the entire node, including its entire subtree (minus any event listeners). Otherwise, it would default to "false," and the node would be cloned, but it would be essentially empty.
Here's an example:
const el = document.querySelector('#example')
const elCopy = el.cloneNode(true)
elCopy.setAttribute('id', 'example2')
body.append(elCopy)
There is an issue with cloning elements with ids, but any attribute, content, etc., can be modified by normal means before it is appended to the page, as seen above.
Next, I had to learn the basics of Bootstrap because I decided I would challenge myself to learn a CSS framework. But perhaps I'll save that for another blog post.
In any case, this first project is wrapping up and I'm ready to face my next challenge--whatever it may be.
Top comments (0)