Lab 17- JavaScript/Jquery Included Together (Labs 11-16)

In lab 17, we had to included everything we learned through labs 12-16. In lab 12, we learned to create sliders where the information appears on the bottom when a user moves their mouse arrow on top of it. I did this by adding javascript where I included it to slide down and slide up. Through my labs, I added jquery to make my labs work.




 

   On the top of my HTML coding, I included all the CSS from my labs 12-16 including day and night, contact form, etc.

In lab 11, we had to create day/night where the background changed when a user clicked on the different buttons. The function "lightSwitch" stands for the day button, "darkSwitch" stands for the night button, and "resetSwitch" stand for the reset button.










In lab 13, we had to create a cloning where the image clones when a user click on it. Inside my javascipt, it says if the image is clicked, clone it and I included 6 images so, whenever a user clicks on one of these 6 images, it will clone it.



In lab 14, we had to create an article using blockquotes. Inside my CSS, I included the width of my article/blockquote. Uisng Javascript, I created the blockquotes and kept the function names the same 'span.co'. Inside, my article I used the tag <span class=co> </span> to create the blockquotes.

In lab 15, we learned to create contact form. inside the CSS, I told how I want it to look like defining the color, width, etc. I included the speed of it to appear inside my javascript script.





We learned to do so much using jquery/javascript and one of the things was to make the text appear fast/slow. I create two revealing text: slow revealing text and fast revealing text. Inside my javscript, I included "slow" function to appear slowly and "fast" function to appear fast.

In lab 16, we learned to make box adjustments. I made 5 box adjustments: increase, decrease, center, fade out, and fade in.

I kept the same function names: <button id="dec"> (Increase) , <button id="cen"> (Decrease) , <button class="btn1"> (Fade Out), and <button class="btn2"> (Fade In). Inside my javascript coding, I told what the button to do. For example, the "btn1" fadeOut and "btn2" fadeIn. In addition, "cen" decreases the box while, "inc" increases the box.