Describe briefly what you have done as work for that unit.

Throughout this unit, I worked towards adding various JQuery functionalities to my website. I also spent time during this unit to “tidy-up” sections of my JavaScript code. This includes condensing existing .js programs using JQuery libraries and pre-built methods.

I began this chapter by researching JQuery quite heavily. I did this in an attempt to learn more about the capabilities of JQuery, and how it can be used to improve the experience of my target visitors. Before designing and implementing my ideas, I also chose to review JavaScript syntax. JQuery is simply pre-written JavaScript libraries that make it easier to implement js functionality to your webpages. Since JQuery essentially builds atop of JavaScript, it is a “write-less, do more” library. 

First thing that I worked on in this chapter was the brainstorming and idea component. After researching and learning about the capabilities of JQuery, I came up with five ideas that were discussed previously in the “Ideas: Learning Diary.” At first, I planned on implementing each of the JQuery ideas that I initially thought of. However, when I began implementing the concepts, I realized that only three of them truly improved the experience of my identified personas. 

The first idea which I chose to implement was that of the image slider on my websites ‘Home Page.’ This was meant to replace my initial design of this feature that was built using JavaScript and CSS. The original transitions were created myself in CSS and controlled using JavaScript. This original implementation had several visual bugs, particularly, the transitions were never quite seamless. Thus, I redesigned this idea using JQuery to switch between various images. This is done with a function that effectively uses JQuery methods addClass() and removeClass() to shift priorities of images upon a button click. This implementation is fully explained in the comments of the code. 

The second idea that I chose to implement was a user-ended font size changer. This allows users to choose the text size for the page they’re reading. I built this idea into the headings of all of my webpages. The way that I chose to design this is to have three interactable buttons that the user can click that will impact the font size. One increases the font-size property in CSS by three, another decreases the property, and the last resets the CSS font-size to its original value of 16. This is of course explained in more detail throughout the comments in my JQuery code. 

The last idea that I integrated to my site is the use of JQuery to toggle my drop-down navigation menu. The prior JavaScript implementation, had several bugs in its functionality. The new design uses JQuery method toggleClass() to toggle CSS classes for the burger and drop-down nav. This only occurs when a click on the “burger” element is detected. The code switches .css classes upon a button push to activate the navigation links in the drop-down. This feature takes advantage of the ‘pointer-events’ property in CSS that controls how HTML elements respond to mouse interaction. This JS function also uses the toggle method to provide user feedback by changing the burger shape when it is clicked. The specifics of this code is described in more depth in my code comments. 

Although I did not create all of the ideas that I initially planned to, I feel as though the other concepts would not greatly improve website experience for my identified personas. Further, I believe that the programs that I decided to integrate demonstrate what is possible with JQuery, as they are considerably complex. 

Describe the rationale for what you have done, relating your work explicitly to the personas and scenarios you developed in Unit 1.

It is very clear that several of the JQuery functionalities that I integrated to my website are meant to clean up and improve the ‘look & feel.’ This was in an effort to make my web pages more reputable to the target visitors that are looking for trustworthy information. A persona which relates to this is Gregory Lamb, he is detail oriented and prefers to analyze factual, in-depth work. This connects with my websites image slider because it helps add context to the landing page of my site, making it more detailed and believable. By making these JQuery changes I was able to improve the overall credibility of the site, making it appear more glossy and official. This also applies to the case of the improved dropdown navigation. This change was also targeted to improve the experience of one of my identified personas, Ashley Scarpelli. Ashley tends to be very thorough when surfing  the web, she is also in the process of planning her wedding photos. Since she is dealing with professionals, she only wants information (for possible photo shoot locations) from seemingly professional looking sites. The last JQuery improvement is meant to improve the quality of experience for  individuals who struggle with vision issues. This is the integration of a user-ended font size changer. Not all of my identified users have the same quality of vision. More specifically, Sam Martella is a senior citizen who has poor vision, he struggles to read small fonts. Thus, I felt it was important to include this JQuery built feature in order to increase website accessibility for a significant chunk of my target visitors. 

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

For this chapter, I am exceedingly confident that I met the learning outcome of creating a dynamic website using JQuery. I utilized a number of JavaScript libraries to implement the functionalities that I chose. The specific JQuery libraries which I utilized were 1.11.2, 3.1.1, & 3.2.1. It's also important to note that these libraries are saved in the JS folder that is with all of my other website files. Each of these include various pre-written methods that were used to increase functionality of my site and condense/simplify previously written JavaScript code. I also believe that I met the learning outcomes because I completely explained the JQuery code that was implemented in the included comments. 

The first piece of work which displays what I have completed is ImgSlider.js, this program controls the image slider on the home page as discussed earlier. In a nutshell, when the DOM of the HTMl page is loaded and a click is detected on the “next” class, a function is called which does the following. Saves the currently displayed element to a variable, and using JQuery classes addClass() & removeClass() the “active” image can be switched. This same principle is used when then “prev” button is clicked. This was a considerably complex code that I am quite proud of. 

My second implementation was also quite difficult to complete. My JQuery font size changer program interacts with the CSS ‘font-size’ parameter. Integrating the three buttons was also time consuming. I chose to program it is so that all button clicks trigger the same JS function, except they feed it different parameters. 

Lastly I utilized the JQuery toggle functions, which was not very difficult. However, it was a great example of simplifying dense programs using pre-built JQuery methods. My prior JavaScript function for this was considerably beefy. Using toggleClass() allowed me to drastically reduce the complexity of my implementation. 

Explain and analyze what went well and what didn’t.

While working on this unit, several things went considerably well while other things didn’t go exactly as planned. One thing that that went very well was the implementation of my drop-down and burger animation toggle. I was able to find a JQuery method (toggleClass()) that fit my needs exactly. Thus, I was able to directly swap this method in for the existing code that I was using. I was also very happy with how my image slider code came together. Using the two functions that are called upon clicks of the “prev” and “next” classes, my implementation is now more robust for scrolling through images. I also took out the visual transition for the slider which I believe helps it look much cleaner. 

Something which didn’t go exactly as planned was the implementation of the text size changer. More specifically the CSS design of its integration. I was experiencing trouble with laying out the buttons in a tasteful way. The drop-down nav would interfere with the buttons for the font size changer. I was having trouble with this until I discovered the ‘pointer-events’ property. This controls the priority of links between various HTML divs. This is how I was able to toggle priority between the drop-down and text size changer links.  

Describe what you would do differently if you had to do it again.

If I were to start from square one in this chapter, I would begin with smaller ambitions for the upgrades that were going to be made. I started with five ideas that I wanted to integrate into my site. I later figured that the additional animations would make the site too busy and distract from its real purpose. Thus, the only thing that I would do differently is start off with fewer ideas that I planned on integrating. This would have allowed me to focus on what was important from an earlier point.

This is the link to my Website: