przekwas / lab1-for-jqueryfundamentals

First Lab

Info

This lab asks you to perform various tasks, first using only the DOM, and then using only JQuery. Your project folder should consist of 2 folders, DOM and JQuery, each containing an index.html, JS file, and any CSS files. You should complete the tasks first in the DOM folder using only the DOM, and then complete the same tasks again in the JQuery folder using only JQuery. Number each example in your html page to correspond with the objective numbers below.

Objectives

Make a button appear on the page when it's first loaded. The button cannot already be in your html. When the button is clicked, you should display an Alert box with any (nice) message. Make a button and text box (you can just put them in your HTML). When the button is clicked, display an alert with the message that is typed in the text box. Create a div in HTML. Without using CSS :hover, make the div change to a different background color when your mouse hovers over it. The div should return to its original color when the mouse exits the div. Put some text in a paragraph. Make it where when you click on the paragraph, the color of the text switches to red. Once you get that working, try to rewrite your code to make it switch to a random color each click (you don't have to show the code for just red once you get random working). Add a button and an empty div. When the button is clicked, add a span that contains your name to the empty div. Create a button and a ul in your HTML. In JavaScript, create an array containing the names of your friends (at least 10. If you don't have that many, include your imaginary ones). When the button is clicked, add each friend's name as an li to the ul on the page.