JavaScript Webpage Workout - M1 Lesson 3 Exercise 1

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

From this point on we will add several more buttons to explore the ‘filter’ image effects. Add them all to the <section> element with the class=btn-wrapper.

Instructions:

1. Add a button with an id of ‘bright’ and text content of ‘bright’
2. Add a button with an id of ‘dark’ and text content of ‘dark’
3. Add a button with an id of ‘grayscale’ and text content of ‘grayscale’
4. Add a button with an id of ‘sepia’ and text content of ‘sepia’
5. Add the CSS below to give each button a different background color

#bright {
  background-color: #FFEB3B;
}
#dark {
  background-color: #FFA000;
}
#grayscale {
  background-color: #90a4ae;
}
#sepia {
  background-color: #bcaaa4;
}

6. ACCESS each button by its ID using getElementById and assign each to its own variable. Feel free to use a console.log to console log each variable to make sure the value is what you think it is.

   • access the bright button and assign it to brightBtn
   • access the dark button and assign it to darkBtn
   • access the grayscale button and assign it to grayscaleBtn
   • access the sepia button and assign it to sepiaBtn

7. Add an event handler function for each of these new effects. Check the docs to see how to use each effect.

   • Make a function called makeBright which raises the brightness of the image. Set the argument of the filter's brightness() function to 500%.
   • Make a function called makeDark which lowers the brightness of the image. Set the argument of the filter's brightness() function to 50%.
   • Make a function called makeBlackWhite to adjust the grayscale of the image. Set the argument of the filter's grayscale() function to 100%.
   • Make a function called makeSepia to adjust the sepia of the image. Set the argument of the filter's sepia() function to 100%.
8. Add an event listener method to each button (a.k.a the event target - what we perform the event on). For its parameters, use ‘click’ and its matching event handler function.

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

M1 L3 Exercise 1 Solution

Keep practicing! Go on to exercise 2 of Lesson 3.