|
CSC 230: The Week beginning Jan. 20 |
|
|
|
CSC 230: The Week beginning Jan. 20 |
|
Design a page like that seen below. It should have a text (or number) input that allows the user to enter the amount of a restaurant bill. It should have a drop-down select that allows the user to choose the percentage tip he/she would like to give. It should have a button which when clicked calculates the amount to pay [amount=bill*(1+percentage) where the percentage is in a decimal format .20 as opposed to 20%].
If you want to do a little extra then add the following functionality: clear out the answer when the user changes the bill amount and clear out the answer when the user changes the tip percentage. (For a hint see EventDemo.)
Look at the example program Magritte_s20.htm and the example code at https://www.w3schools.com/tags/tag_select.asp and https://www.w3schools.com/jsref/event_onchange.asp. Then pick out a few youtube videos and make a page that adapts the above code to have a user select a video title from a drop-down select and have the video embedded on your page. (Some youtube videos -- especially popular music ones -- cannot be embedded.)
The onmouseover and onmouseout eventsLook at the example program MLK_mouse_event_demo.html and the example code found at http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover, then adapt it as follows: have one <img> element but two possible image files; one image file will serve as the default source whereas the second image file will be used when the user placed the mouse over the image. When the user's mouse is no longer over the image the source file should revert back to the default.
The onfocus and onblur eventsLook at the example program SomeInputEvents_s20.html
as well as the example code found at
http://www.w3schools.com/jsref/event_onfocus.asp
and
http://www.w3schools.com/jsref/event_onblur.asp.
Then make a page with two text inputs, use the onfocus and onblur events and code like the following
document.getElementById("txtInput1").style.backgroundColor="#ffff99";
that changes the color of a text input. Make your page so that when the user puts the cursor in a
textbox that it changes color and when the user puts the cursor elsewhere the textbox changes
back to some default color.
(You might also want to look at
http://www.w3schools.com/html/html_colors.asp
)
Look at the code
http://www.w3schools.com/jsref/event_onload.asp.
Look at the examples on using the body's onload (near the top) and an image's onload (near the bottom). Make
a page with an image with an onload and a body onload -- each function should have a console.log.
It can be used to determine which event (page load or image load) happens first.