Describe What Was Done For this Chapter:

In this unit, I worked on implementing my three ideas that were pitched at the beginning of the unit, this was then followed by the program design stage then by the programming and integration stage. The three ideas that I worked on were the form validation, the reactive navigation bar and lastly, the collapsible accordion. I ended up deciding to implement all three since none of which were very substantial. Overall, throughout this chapter, I covered and explored many new JavaScript concepts that were used to implement these ideas as efficiently as possible.

Describe the Rationale for what you have done, relating your work to the personas and scenarios you developed in unit 1:

Over the following paragraph I will discuss the reasons why I decided to choose my ideas and how these relate to the personas identified in unit one. Firstly, I implemented a form validation program to the “contact-us” page on my website because it is meant to assist visitors when interacting with the contact form on my site. I chose to integrate this to my website because many of my identified users are not very “computer savvy.” One of which being, Sam Martella, an individual who has little experience with computers and surfing the web. Thus, I believe this idea makes the experience of users like Sam more pleasurable, reducing possible headaches. Secondly, I implemented a reactive navigation bar that can be used on all pages of my website. The main reason why I did this is to make an overall more accessible experience for users that access my website through various sized devices. This is particularly important for the visitors trying to access via smartphones and tablets. In unit one, I identified a visitor named Ashley that would be accessing my website using her iPhone 7. This is why I needed my navigation bar to adapt to any display size. Lastly, I implemented a collapsible list/accordion to organically “unveil” information to users. As discussed above, several of the identified personas for my site are noted as not being “computer savvy.” This is why I thought it was important to make ideas easier to navigate for target visitors. This idea was designed to make the page more interactive, helping to guide the users through cohesive flow of concepts.

For each learning outcome of the unit, explain how you have met it, with reference to the content that you produce (code or other design artifacts):

The primary learning outcome for this unit was to analyze a problem related to the website, design a solution, then code it. Additionally, it was necessary to include the following in our JavaScript code; arrays, functions, classes & objects, comments, sequence, selection, iteration, variables & declarations. The following paragraph serves as proof to my completion of these elements. In my JavaScript files, each function is given a brief comment explaining what it does, additionally, certain lines were given comment descriptions throughout my code. This was done in hopes of making my code easier to follow and maintain in the future. An instance of this is seen on line 19 of my scripts.js program, as I describe the purpose and placement of an if/else statement within an anonymous function. Next, I achieved sequence, selection, and iteration by utilizing a for loop to iterate through the number of nodes in an array representing the buttons and content in an accordion on line eleven of scripts.js. This loop performs an anonymous function upon a button click for each iteration of the array. I have also declared several variables, particularly in test.js, where I initialized constant, local variables to get elements from the DOM. I implemented an array to hold all of the node elements given the class name accordion in the scripts.js file. This array was used to represent all of the topics in the accordion. I implemented several titled functions, an example of which is navSlide(). I also utilized anonymous functions like the one seen in scripts.js. Lastly, objects were created and used for instance on line 16 of scripts.js, an object is defined that takes multiple parameters. Overall, I believe my implementations were a success considering that I did not need to stray from my design plan while building the program.

Explain and Analyze what went well and what didn’t:

While implementing my three ideas, certain things definitely came together more seamlessly than others. More specifically, I was pleased with the results of the reactive navigation bar. While building the program I figured that it was important for my navigation menu to disappear and reappear upon click of the “burger” icon. After experimenting with various transitions that shifted the menu in and out of view, I found that it was difficult to make the nav fully hidden. From here, I utilized a toggle in my JavaScript function in order to switch between .css classes that would change the menu’s opacity from 0 to 1. Thus, I am satisfied with the aesthetic of the navigation section and also with the effectiveness of the transitioning burger icon. An aspect that was quite difficult to overcome was the implementation of the accordion. In particular, when attempting to make a JavaScript code that detects a button click and expands a certain topic accordion. At first, I had thought that this could simply be done by detecting a button click on a variable that “watched” the accordions. I quickly found out that I would have to hold each “accordion” class name in an array that would have to be looped through. Then, for each iteration of the loop, we would check for a button click. This took some time to figure out that the divs had to be held in an array of elements. I was also exceedingly satisfied with how well my design plan translated into code while I was implementing each of the ideas. Lastly, when implementing the form validation feature to my website, I wanted to test that the JavaScript alert() was functional in all applicable browsers. In my initial tests I found that the program was completely functional in Google Chrome and FireFox, however, it failed to give an alert notification when using Internet Explore. With a little bit of research, I found that this is a browser sided issue. At some point prior to testing, I had accidentally clicked “Prevent this page from creating additional dialogue.” This explains why Internet Explorer failed my first test. Despite this causing me some minor headaches, the issue did not lie in my code and was relatively quick to resolve.

Describe what you would do differently if you were to do it again:

The biggest thing that I would do differently if I were to do this chapter a second time is include the collapsible list/accordion in my idea list from the start. Initially, I had discussed in my idea stage that I would like to implement a weather application in my website. When it then came to the design stage, I found out that the weather app would require the use of a JavaScript API which I did not want to focus on in this chapter. Thus, at the design stage I had to go back and re-submit the new idea of the accordion. This prolonged the time until I could start coding and led to several delays. If this was not the case, I could have completed this unit in a more timely fashion.

Link To My Website: