JavaScript Webpage Workout - M1 L1 Exercise 3
July 10, 2020
This exercise follows exercise 2 of Lesson 1. Please do that exercise first for this exercise to make more sense. You can find the beginning of Lesson 1 here.
📺 This lesson also available as a video.
Current websites and apps are allowing two-view modes when looking at a screen in a brightly lit environment versus a dark environment; it also helps for the visually impaired to provide two high-contrast settings. In this assignment make two buttons to view the webpage in ‘night-time’ mode and ‘day time’ mode.
- Make a Night-time mode
button. When clicked, it turns the body background color dark and text light. - Make the Day-time mode
button. When clicked, it turns the body background color light and text dark. -
Be creative!
- Use Font Awesome icons or Google Material icons for the buttons instead of text. Don’t forget to add the links to these libraries in the
<head>or else they won’t show up on the webpage. (Look under Settings in CodePen.) - Create
hoverandactiverules in the CSS for these buttons to change their backgrounds and text colors, font sizes, or even the border-radius.
- Use Font Awesome icons or Google Material icons for the buttons instead of text. Don’t forget to add the links to these libraries in the
CREATE - ACCESS - MANIPULATE - EVENTS - LISTENERS
You can compare your work with mine here at CodePen or watch the video.
Lesson 1 Exercise 3 Solution (no audio)
Keeping practicing! Go to Exercise 4.