Please view the .zip file for Unit 4 here: Unit 4 - Google Drive

Work Done For This Unit

In this unit, I added a JavaScript function to toggle between dark and light mode. I accompanied it with CSS changes that helped the dark and light mode come to life, by adding dark mode selectors in the referenced stylesheet. The reason I chose to add this is due to one of the personas I linked in Unit 1, Linda, who is visually limited and requires more functionality from the website to see. A dark mode toggle on websites helps users like her and improves the website’s accessibility. It can also apply to Eric, who is a student looking for inspiration for their website and portfolio. Since Eric is a younger student who lives in a modern age of technology, it’s important for him to build solutions that adhere to modern day theme standards, and a dark theme is a huge one. This is why I thought adding a dark theme toggle to my website would be useful and helpful for users such as Linda and Eric. Also, since all my personas are involved in scenarios where they are coming back to revisit the website, I thought it would be good to include JavaScript that keeps the user’s viewing preference when they revisit.

Critique of Referenced JavaScript

Below is the referenced JavaScript I used, taken from https://www.codemzy.com/blog/dark-mode-to-static-site:

The referenced code allows the user to enable dark mode by toggling a dark mode button. Overall, this code was relatively easy to follow along with, after doing some reading up on the DOM and what localStorage are. It provided me with the basic functionality of adding the dark theme to my website, and them removing it. In general, the code I referenced from was well-indented, used good variable names, and was modular by splitting up the dark mode toggle into a separate function from the window.onload function when clicking the dark mode toggle button. This made it a generally good reference to grab inspiration from. However, I adjusted on one thing in my adapted code below:

I noticed that the reference was uncommented, so it took a little longer to understand the flow of the logic. In my version, I added comments to each section to briefly explain what it does. This increases the code’s maintainability and readability, and ensures that developers in the future can understand the functionalities as well. Additionally, I added more code on top to improve the toggle between dark and light, which is changing the text of the button from “Dark” to “Light”. I used the same CSS selector of “button-dark-mode” and changed its colors to better reflect the user experience and toggle functionality.

Learning Outcomes

1. Critique JavaScript code written by others, identifying examples of both good and bad practice.

   - I was able to gather JavaScript content that was written by another developer, and used it as a basis to implement a dark theme in my own website. I was able to point out the good and bad of their coding practices, such as indenting, code commenting, and modularity. 

2. Use JavaScript to add dynamic content to pages.

   - I was able to successfully implement a JavaScript function that dynamically changes the colours of the page backgrounds, content backgrounds and text colours when toggled.

   - Additionally, the code stores the user’s preferences in localStorage for use when reopening the site, like my scenarios highlight.

3. Modify existing JavaScript code to extend and alter its functionality and, where appropriate, to correct errors and cases of poor practice.

   - I extended the referenced JavaScript code functionality by changing the button’s text from Dark to Light dynamically when clicked.

   - Although there were no syntactic errors in the referenced code, I added semantic improvements through code commenting to improve readability and maintainability of the code in the future.

What Went Well and What Didn’t

This unit, instead of having to build the solution from the ground up, I found it enjoyable to find how I could implement the given code within what I already had, modifying my CSS to fit. Additionally, it was immediately apparent to me that Linda would be a very good receiver of a website change like this for readability, and was a no brainer, considering a lot of webpages and applications offer themed viewing experiences these days. It took a little bit of time to find a dark mode implementation that was robust enough for my website (i.e. more than just a few lines), but the version I found went above and beyond by also being able to store the user’s preference locally. However, it was still really frustrating when trouble shooting with the CSS in my website, as it took many MANY tries to get the code working in a way that I wanted it to. This is more of a CSS issue than a JavaScript one, but the nature of the JavaScript and how it was applied meant that my CSS also had to be changed to fit it. In the end, it all paid off though, and I’m happy with how the dark theme toggle looks and acts on my website.

References

- https://www.codemzy.com/blog/dark-mode-to-static-site is where I referenced the original dark theme toggle JS script.

- I am already familiar with JS, so I didn't use many resources to 'learn', but I did reference W3 schools for how to change the text of a button using the textContent property: HTML DOM Element textContent Property