JavaScript Webpage Workout - M1 Lesson 3 Exercise 3

This exercise follows exercise 2 of Lesson 3. Please do that exercise first for this exercise to make more sense. You can find the beginning of Lesson 3 here. If this is your first time to the blog, you can find the beginning of the course here.

Your task is to add two more buttons that do the following:

1. Make a button with an ID of brighter with the text content of ‘brighter’ and a plus icon or emoji. When clicked, it sets the brightness filter to 150% to brighten the picture in a handler function called makeBrigher.
2. Make a button with the ID of darker with the text content of ‘darker’ and a minus icon or emoji. When clicked, it sets the mushroom image brightness filter to 90% in a handler function makeDarker.

You can place these new buttons in the first fieldset we created in exercise 1 which has a section element with the class btn-wrapper.

Here’s some CSS you can add to the buttons.

#brighter {
  background-color: #FFEB3B;
  padding-top: 7px;
}
#darker {
  background-color: #FFA000;
  padding-top: 7px;
}

• Be creative!

  • Use HTML symbols to make the icons or emojis (this doesn’t require a link in the header) or try Font Awesome or Google Material icons.
  • Create hover and active rules in the CSS for these buttons to change the background and text colors.

Once you get that working, let’s develop this further by adding more brightness and darkness flexibility as well as handling any ‘edge’ cases that develop.

3. Make the plus button increment the brightness percentage for the mushroom image by 10% on each click. Work with the same event handler function you’ve already made, makeBrigher, just refactor it.
4. Make the minus button decrement the brightness percentage for the mushroom image by 10% on each click. Work with the same event handler function you’ve already made, makeDarker, just refactor it.

NOTE: Keep in mind you can use a Global variable for both buttons to control the brightness filter getting brighter and darker.

Extension exercise

If you’ve gotten this working, what problems do you see? For example, after the image turns totally black the button keeps clicking but there is no change. If so, what would be good maximum and minimum brightness and darkness percentages to limit the user?

5. Refactor the function that increases the brightness filter so it limits the largest percentage to 1000. Show an alert that the maximum brightness is reached.
6. Refactor the function that decreases the brightness filter so it limits the smallest percentage to 0. Show an alert that the minimum brightness is reached.

You can compare your work with mine here at CodePen or watch the video.

M1 L3 Exercise 3 Solution

Congratulations on getting this far with the CAMEL work sequence. If you followed all the warm-ups and exercises, this work sequence is probably very natural for you now.

Next, we will take these same concepts further and work on toggle states which are very common with web design: show a menu ---> hide a menu, show a sidebar --->hide a sidebar, show a form ---> hide a form, show informative paragraphs ----> hide them.

Up to this point, we manipulated the webpage with the style property but we can do even cooler, more complex changes by adding and removing classes using CSS and JavaScript!

Move on to Lesson 4 with Toggling and classList, className, add(), remove(), toggle().