First project phase 1.

First project phase 1.

The project I am working on is a travel website. The company is a small family owned business that does not currently have a site. The goals of the site are to show the available tours customers can sign up for & get them to call for more information. After planning the features and designing the site I began to code the basic structure in HTML. Going in, I figured I would make it easier for myself by writing the larger parts of the code that is repetitive using JavaScript. Needless to say I was wrong about that. Let me give you a little history about the process I went through.

To get started I needed around 30 buttons. Each of them having 3 lines of data all on separate lines. I thought this was a perfect first opportunity to use JavaScript to save me some time from repeating this process over & over in the HTML. I put all the main site data in objects. I gave each object a different variable name. Then I put each variable name in an array to make it easier to extract the data from each object when I needed it. Good, I was on a roll at this point and things were going well. Next, I created a for loop to extract the information I needed for the buttons. At this point is when I first started to run into issues. I was able to get the data to print to the button but it wasn’t on 3 different lines like my goal intended for, I literally spent almost two weeks trying to figure it out. I wanted to do it on my own with no help. I Googled so much that my Safari stopped working I probably had close to 200 tabs open and I was able to get through a lot of the dense information on the MDN but something was still going wrong. Unfortunately, I deleted the code I wrote originally after I was able to get a solution from a couple of people in the same Slack chatroom as me. Of course the solution was easy once I seen it and it only took a few lines of code. It turns out I just had the for loop body structured wrong. It also didn’t help that in the console I wasn’t getting any errors so I really didn’t have a direction to go in.

I learned some valuable information during this time. 1). Searching Google is an art form. Knowing how to word a search query is half the battle. 2). Creating large chunks of HTML with Javascript is definitely a no-no unless you have a good reason to. 3). It is OK to ask questions if you really are stuck and have exhausted all other options. As mentioned I spent 2 weeks trying to solve this problem on my own. I used Google, the MDN & I read the Dom & Maintaining chapters of “Professional Javascript for Web Developers 3rd edition”. (Prior to starting this project I was reading Eloquent Javascript but since right now my main goal is set for web development. I am switching back over to Professional Javascript for Web Developers 3rd edition. I tried to read it once but things were flying over my head. That is when I got into FCC and Eloquent JS. Now that I have a strong foundation in JS, the book is exactly what I need to improve to going forward).

While reading those chapters, I was presented with an idea that made a lot of sense to me. The idea made me reconsider how I write my code for web pages now and in the future with a new perspective.

You want to keep the HTML, CSS, & JavaScript separate as much as possible. Mainly because when you run across an error, it will make it easier to find the offender. When Javascript is creating large chunks of HTML and/or CSS. When you go to look for the bug you don’t really know if you should be looking at the JS, HTML, or CSS. For this reason alone it persuaded me to keep them all separate as much as possible. I want to leave the Javascript for interaction & not HTML creation, which will also benefit my page load times greatly. Although all the research and work I done for the 2 weeks trying to figure out the original problem would not be used on this particular project. I still learned a lot. More than what I have ever learned in any tutorial or code along. Now for me it is back to code and writing the rest of the HTML by hand instead of using JS as I originally intended. Lesson learned for me!


Leave a Reply

Your email address will not be published. Required fields are marked *