The Work That Was Completed for This Chapter

For this chapter, I began as I typically do, by reviewing all of the online chapter material and suggested websites. From there, I dove deeper and completed my own research regarding the JavaScript functions that I wanted to implement. This was discussed briefly in my previous post, I will be reviewing this in more depth shortly. At this point, I completed the unit quiz and began developing my JavaScript program. 

Upon learning the various capabilities of different 'in-browser' JavaScript programs, I knew immidiately that I wanted to design an interactive image slider on my home page. Originally, the homepage of my website was quite simple. It may have been difficult for certain users to quickly understand what the site is about. I wanted the user-controlled image slider to improve the user experience while being introduced to the contents of the site overall. 

My goal for the implementation was to have a basic image slideshow that could be controlled by user interaction. I only wanted the image to change when the arrow bars are clicked. I also wanted to have reactive dots underneath the image slideshow in order to indicate which image the user is on. I learned that in order to achieve this functionality, I would have to link my buttons in HTML to call certain JavaScript methods. This will be discussed in more detail below. Lastly, to improve the "look & feel" of the image display, I wanted to fade between the images. I soon learned that this can easily be accomplished in CSS with the fade animation tool that works by changing the opacity of the images. This effectively acts as a slow transition between images.  

As discussed in my previous post, I soon learned that this implementation required me to make an array that stored the information of all the divs with classname "image." Storing this information in an array structure makes it easy to pull information to be displayed, and also to keep track of the index that is being observed.  

The JavaScript code is linked to the HTML by function calls in the HTML file. This works such that, when an arrow button is pushed, depending on if it was the "prev" or "next" button, the plusSlides function is called and given an integer parameter. This parameter is set to negative one for the "previous" button and positive one for the "next" button. This would allow us to effectively increment or decrement through the array as the user pleases. The plusSlides function then calls the main showSlide function, passing it the updated index value as a parameter.

The first thing that the showSlide function does is construct two arrays to store the slides and dots. This is done by storring all divs with classnames "slides" & "dots." The next task that the function completes is to check if the parameter passed is within range of the max and min indicies, this is done with two if statements. Then, two for-loops traverse the entire array, resetting the image display properties and "deactivating" the dots. This hides all of the images and makes all of the dots "unactive." From here, two statements are used, firstly to display the correct index contents (the image), then to make the corresponding dot "active." Ultimately, all of the information is handled appropriatley upon a push of either button. 

By the end of this unit, I was able to implement the JavaScript code successfully. After reviewing and determining that it fits my sites purpose quite well, I truly hope that it improves user experience when being introduced to my page.

What Went Well:

Overall, I found this unit to be quite simple. I didn't exactly get held up anywhere in particular. Especially since this chapter was more so focused on JavaScript research, I found myself mainly recycling and repurposing existing code that I was learning about. One thing that I thought went particularly well was the implementation of the image fade in CSS. Although this was not done in JavaScript, I was very satisfied with learning that a few simple lines of CSS code could vary image opacity and mimic a fade animation. In addition, I am very satisfied with how the overall homepage looks now. Before this unit, I was not happy with how plain the introduction page to my website was. Including the image slider really adds to the look of the page, it will also give users a better idea of what to expect while exploring the remainder of the website.

What Didn't Go Well:

Despite the fact that I found this unit to be quite straight forward. While completing this chapter and getting introduced to JavaScript, I was suprised at how much it resembles other programming languages such as Python, Java, and C. Although I have experience programming in these languages it took a little bit of time to jog my memory before really understanding JavaScript code. With some basic review of the syntax similarities, I was ready to finish this unit with very few headaches. 

What is Something That I Would do Differently?

When looking back, one that I would do differently to make my life easier is base my code off of a JavaScript example that was more thorough with commenting. Especially being someone with very little JavaScript experience, it would have been easier to understand exactly what the code is doing if comments were written by the original programmer. Additionally, with my first attempt at this, I had centered my image slider based on pixel number. With my second implementation, I chose to make it more reactive by centering the slider using %. This means that the image slider would be centered regardless of the screen size that it is being viewed on. That is something that I should have done from the start.

Link to Updated Website: