Lab 11- Day & Night

In lab 11, we had to change the content of an HTML page by using jQuery for the first time. The first step of this lab was to attach our jQuery file to it otherwise, it wouldn't work. The "day" button is for a sunny background while, the "night" button is for a dark background and the reset button changes the background to the                                                                                 original background of the page.
Day:

For the "day" button I used the coding, "<input type="button" onclick="day();" value="Day" />", I named the button "Day" and a user can click it. I added javscript to it, "function day() { body.className = "lightSwitch";" I named the day function lightSwitch. Inside, my CSS coding, I added the image I wanted it to go to when the user clicks the day button using, ".lightSwitch { background-image: url("sunny.jpg"); }" and as you can see, the function name is "lightSwitch" to tell the CSS code which function I want this image to go to.

                                                          Night:

I did the same coding to create the "night" button but instead of naming the function "lightSwitch", I named it "darkSwitch" and I added a darker image inside my CSS coding.

My HTML coding:

This lab taught me how to change the background with a click of a button using jQuery. I can use this in my future work to let a user choose which background they want to see. This is a very useful tool because you can add not 1 background but 2 or more and you can do so much with creating different buttons.

My CSS coding: