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

Work Done For This Unit

In this unit, I added 3 high level JavaScript functionalities to my website. This started with me generally submitting ideas to the TA on what could be implemented on my website. Then, I also roughly designed each JavaScript functionality in pseudocode to understand the program flow and required variables and functions to implement each.

The first JavaScript functionality was form validation. I added this because the personas I identified in Unit 1 have scenarios that will go to my form to try to contact me on the Connect page. This form validation is useful for those like John or Linda who want to get in further contact with me quickly. Secondly, I also added a functionality to dynamically resize the navbar elements based on the size of the webpage. For users who are accessing my website from different devices with different screen sizes. This functionality allows easy access of the navigation elements and the dark theme toggle if their screen is not wide enough to fit the elements across the screen. Lastly, I also added an image zoom feature when clicking on design gallery images. This feature is helpful for users like Linda who may have trouble seeing due to visibility issues, and wants to zoom into the image to see more detail. It’s also helpful for Eric who might find this an interesting piece of code to adapt to his portfolio for his extracurriculars.

Learning Outcomes 

1. general appearance and form: well-commented, properly laid out, appropriate capitalization.

   The JavaScript code I wrote is commented at every main decision point in the code, to ensure the reader has a good understanding of each function and its functionality. Any design decisions are properly referenced in the comments. I also used logging statements to output the program’s state to the console.

2. structure: modular, using functions, classes and objects effectively, making effective use of variables.

   I initialized variables for document elements and IDs that are reused within the functions. Functions are modular and separate concerns where necessary. 

3. standards-compliant: avoiding proprietary elements where possible and working with the vast majority of web browsers.

   My code avoids proprietary elements and works on the majority of web browsers.

4. accessible: usable in some form by people with a wide range of disabilities or, if not, failing gracefully and offering alternatives to achieve similar functionality.

   The JavaScript functionalities I added help users with visible disabilities so that they can view details in close detail and view the website in different themes to adjust to their preference. 

5. make effective and efficient use of a full range of programming constructs including sequence, selection and iteration.

   My code effectively uses selections and iterations in JavaScript to achieve the JavaScript functionalities.

6. effectively use variables, including passed parameters, local and global variables and arrays, to improve the efficiency, re-use, and maintainability of the code.

   My functions use passed parameters and variables to help the efficiency, readability and maintainability of the code. The variables used have readable and meaningful names that help the readability of the code.

7. use a wide range of programming features and commands to improve the efficiency, re-use and maintainability of the code.

   My code uses a variety of programming features and commands such as functions and variables, as well as built-in JavaScript functionalities to help the reusability and maintainability of the code written.

8. write JavaScript code that works in all major browsers (including IE, Mozilla-based browsers such as Firefox, Opera, Konqueror, Safari, Chrome).

   My code is compatible with all major web browsers and is non-browser specific.

9. effectively debug JavaScript code, making use of good practice and debugging tools.

   I used log statements at every decision point that are posted to the console. This helps remain maintainability and code readability for developers in the future, and for those who are debugging later.

What Went Well and What Didn’t

Overall, the work for this unit was challenging. I had a lot of trouble getting the right elements, using the right selectors, and actually implementing them in my code structure. This was a lot harder than the HTML and CSS that I was doing until now, which I felt a bit more comfortable with. I have used TypeScript in the past, but JavaScript is a little bit different and was used in a different context to how I did, so I found there to be a learning curve. It was nice that the JavaScript functionalities were thought out well, however, as the pseudocode helped me get a good start. I had to change the pseudocode I originally wrote, and my code started to deviate from what I originally planned. I also had to add some HTML and CSS elements to work with my JavaScript functionalities, such as the popup window that houses the image that is zoomed in when clicked in the design gallery.

I had a lot of changes that were made, and a lot of challenges that I faced, but overall I am happy with the final version of my JavaScript changes and how they impact the usability of my website. Next time, I would spend more time building out the pseudocode through JavaScript research so that it’s easier to translate into the actual file when working on it. I went through a lot of trial and error with JavaScript since my pseudocode didn’t fully talk about what in-built JavaScript functions would make things easier, such as DOM listening and localStorage. Next time, I would build out a program flow using structure diagrams to help give a more visual approach to the code.