Lab 04
Lab 04: JavaScript
This lab accomplish one goals.
- Use your newly acquired JS skills to add dynamic effect to the element
Save the URL in .ipynb file, ensuring that the link is clikable. Then export the file as HTML or PDF file. Submit the HTML or PEF file to Canvas by midnight (11:29 PM) on September 29.
This lab is worth a total of 65 points and contributes 6.5% toward the final grade.
1. Create a button (25 points)¶
In exercises (1, 2, 3, and 4), you learned about four different dynamic effects that can be applied to buttons using JavaScript.
Your Task: Create a button on your webpage and apply a dynamic effect to it using JavaScript. You may reference the code demonstrated in class, but be sure to modify it and make it your own. Explore creative ways to enhance the button's interactivity and style!
Make a screenshot of your code and attach below
2. Dynamic effect for close button (35 points)¶
For Step 4 in Exercise 6, we've created a close button but haven't yet added functionality to close the pop-up window. Please add a dynamic effect to the button so that when the user clicks it, the pop-up window will close.
Hints:
Create a const
variable called close_button and use getElementById
or getElementsByClassName
to reference the button.
Use .onclick
on the close_button to handle the click event.
Refer to the code example showing how to change the display
property in the style
of an element.
Make a screenshot of your code and attach below