How did this code improve the experiences of your personas in these scenarios?

The image slideshow code improved the experiences of my personas in their scenarios by allowing them to digest information in more variety (project images), keeping the audience engaged when looking for new talent and project inspiration in our portfolio. The dark mode code improved the experiences of my personas in their scenarios by providing the option to reduce eye strain via dark mode compared to light mode while looking for new talent and project inspiration in our portfolio.

Image slideshows

• URL: https://alvarotrigo.com/blog/javascript-slider-how-to-make-one/ 

• Author: Warren Davies (https://x.com/WarrenDaviesDev)

• Date Accessed: 11/11/2024

• What the JavaScript does:

• Lines 1-3, they set up variables. 

• Slides variable stores all elements of the class “slider__slide” defined in the css file. These are all of the slides that we want to show, and we show instances of them in the html file.

• Navlinks variable stores all elements of the class “slider__navlink” defined in the css file. These are all of the navigation links that you can see and click to lead you across the slideshow.

• currentSlide variable keeps track of the currently displayed slide.

Lines 5-10, they set up an “event listener” 

• This checks for when a “click” event  happens on these elements. For example, when a click event happens on the “nav-button–next” element, then the “currentSlide” variable increments. Similarly for the “nav-button–prev” element.

Lines 12-22, defines changeSlide(moveTo) function

• Takes an integer that tells the function which slide to go to.

• “Turns off” the current slide (ie. slides[currentSlide]) and navlink by toggling their “active” classes

• Similarly turns on the desired slide by toggling their “active” classes

• Updates what the current slide is by updating the variable “currentSlide”

Lines 25-31, creates an “event listener” for each navlink

• Iterates over all bullets, and changes the current slide to be that of the index chosen.

Critique:

• Good: Mostly well indented, except for lines 13 and 14. I feel like the bodies of these conditional statements could be explicit. The variable names are meaningful and well-named.

• Bad: There is a lack of comments. This is reasonable because the blog post walks through much of the code process. However, if we were to just see the code snippets, this would be hard to read.

Improvements:

• Replaced lines 13 and 14 with using a modulus operator for simplicity.

• Added a conditional to check if currentSlide !== moveTo, improves the efficiency of our code by not doing unnecessary work.

Theme pickers

• URL: https://www.w3schools.com/howto/howto_js_toggle_dark_mode.asp 

• Author: W3 schools (unsure exact author)

• Date Accessed: 11/11/2024

• What the JavaScript does:

• Lines 1-4, they declare a function

• This function declares a variable “element” as the body of the document.

• The function accesses the classes of the body and toggles the “dark-mode” element.

Critique:

• Good: Is very simple. It is well indented.

• Bad: The function name is not descriptive. The code lacks comments.

  Here is the zipped version of the website: https://drive.google.com/file/d/1wQFnwal8Ybk9ISYzx79jcX-6ENwbi_Pb/view?usp=sharing