From ZERO to Web Developer in 3 weeks…
I want to share a little background information about me before we proceed. I am currently a full-time software engineering student at Flatiron School and Just 3 weeks ago when I started at Flatiron, I had zero programming experience. I had never seen a line of JavaScript code. Fast forward 3 weeks to today (May 20th, 2021) and am proud to show you my first JavaScript project. Let’s jump right in, shall we?
Below you can see the video link about my project and how it works.
What you see in front of you is very simple web page. It is a single page. It has no redirects to other pages, and it does not have many static HTML elements that a client might usually encounter when visiting a webpage. My intention was to be as minimalistic as possible. Not only did I think the overall theme of this web application needed to be simple, but I also wanted the JavaScript delivering the experience to the client to be front and center. To the average person, this may look very simple at first. And if that was your first impression, then I was successful in my delivery of the content. However, if you actually look under the hood, there are several things going on here. Let me explain…
I want to stress that everything that is happening on the page is dynamic. In other words, the browser Document Object Model (DOM) on the client computer is being manipulated dynamically based on the user’s interaction with the page. On page load, the JavaScript behind the scenes is automatically called upon to fetch an API (Application Program Interface) from a remote server. This data is then passed into the JavaScript code. Using what is known as JSON, the response from the server is transformed into an object that JavaScript can now read. Inside this object that we transformed form the server, are multiple forms of data that we as programmers can access, and then use. The JavaScript then separates the information dynamically and then displays it in two different areas on the Document Object Model that the client computer is displaying to the user. From this point the use has the option to find another quote or add the current quote to their favorites. If the user select find another quote, the code described above is then ran once more and dynamically displayed for the user. If the user chooses to add to favorites, the page dynamically creates a series of list elements and appends them to a hidden <div> element at the bottom of the screen. At the same time, the JavaScript code is also adding an event listener to each <li> list element containing the quote information. This event listener is constantly listening for a user mouse click. If the user clicks on the quote, it is removed from their favorites list and the user can continue to find more quotes that they would like to add to their favorites.
In closing, I would like to thank you for your interest in my first JavaScript project. The three weeks prior to this project have been some of the most stressful learning experiences of my life. There were times when I was hard on myself because I felt like I was “just not getting it”. Or times when others seemed to absorb the material a lot faster than I did. I remember on particular day where I sat down for 17 straight hours reading, coding, and trying to solve coding issues with members of my cohort to 1:30am. I was trying to understand certain concepts and my brain literally shut down and would not take in any more information. Those days were stressful, and I often questioned my decision to choose coding as a profession. I think most people have the same emotions when learning something as challenging as coding. But something happened when I was challenged to create this project. The week leading up to project week was stressful because I did not know what I wanted to do. But as I completed my project, something inside happened to me. I felt a sense of satisfaction that I had not felt in a long time. I looked back over the past 3 weeks and thought “WOW…I went from ZERO JavaScript knowledge to building my first JavaScript app in just 3 short weeks”. That’s and accomplishment! And the satisfaction of creating something from nothing felt amazing. It solidified that my decision to choose coding as a career was the correct one. I’m excited to learn more and see what the future holds for me.
