Complete all the task below in separate tabs and then show your instructor when you finish the last task. Do not refresh or close your browser or you will lose your work.
Open the following link in a new tab:
Instead of outputting the current date, use the navigator object to output the name of the browser, the version, and the platform.
Hint:
Open the following link in a new tab:
Instead of outputting the current date in the #demo paragraph, fetch the content of the h1 element and place it inside the #demo paragraph.
Hint: You have to use getElementsByTagName, which returns an array of elements, not a single element. Thus, you must figure out how to get the first "item."
Open the following link in a new tab:
Add another button to hide the date.
Hint: You just have to create another button and "connect it" to a function called hideDate() that sets the innerHTML of the demo paragraph to a blank, i.e., "".
Open the following link in a new tab:
Instead of writing the name to the document, insert the name into an h1 header above the input button.
Hint: Add an empty h1 element above the input button and give it a unique id. Then, use getElementByID to set the innerHTML.
Open the following link in a new tab:
Instead of writing the name to the document, create an h1 element, insert the name, and append the h1 as a child of the body.
Hints:
Remember to show your instructor all the tasks before continuing.
Complete all the task below in separate tabs and then show your instructor when you finish the last task. Do not refresh or close your browser or you will lose your work.
Open the following link in a new tab:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p
Instead of hiding the paragraphs, change the contents to the word "poop."
Hint: The innerHTML field will not work because $("p") actually refers to all the paragraphs, i.e, an array of elements. However, jQuery provides a function called .html("new content") that will change the innerHTML of single elements or arrays of elements.
Open the following link in a new tab:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_p
Instead of having one button that hides both paragraphs, create two buttons. One button should hide the first paragraph and the other button should hide the second paragraph.
Hint: You can give each button and each paragraph unique id's. Then you have to create two click functions, one for each button. Alternatively, you can use $("button:eq(0)") to specify a single button.
Open the following link in a new tab:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeout
Change the fadeOut so that it takes 3000 milliseconds and use the callback parameter to show the paragraph after the fadeOut completes.
Hint: See
Open the following link in a new tab:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_css_change_p_and_font
Remove the button and modify the code so that the css changes when the mouse moves over the two paragraphs. Each paragraph should change independently. On mouse out, the paragraphs should change back.
Hint: The mouseover and mouseout should be detected for all paragraphs, i.e., $("p"), but the css should only be changed for the one you moved over, i.e., $(this).
Remember to show your instructor all the tasks before continuing.
Download the following files:
Modify callout.html and add a third anchor with a completely new callout box. This callout box should be green with both a border radius (implements rounded corners) and a box shadow, and it should appear above the anchor, i.e., position equals top.
Consider this improved way of generating callout boxes
Modify callout_improved.html so that the position can be "passed" from the anchor element rather than hard coding it into the JavaScript code.
By next lab,
1. Show your instructor your working callout.html and callout_improved.html
2. Describe in your own words, why callout_improved.html is superior to callout.html. Email your answer to your instructor and include the name of your partner.