JavaScript Webpage Workout - M1 L1 Exercise 4

This exercise follows exercise 3 of Lesson 1. Please do that exercise first for this exercise to make more sense. You can find the beginning of Lesson 1 here.

📺  Also available as a video.

Let’s try an exercise that manipulates the paragraph’s text larger or smaller based on two buttons.

1. Make a button with a plus icon for enlarging the text. When clicked, it calls a function that sets the paragraph font size to 20 pixels.

2. Make a button with a minus icon for reducing the text size. When clicked, it calls a function that sets the paragraph font size to 10 pixels.

   Be creative!

   • Use HTML symbols to make the icons (this doesn’t require a link in the header) or emojis.
   • 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 font size flexibility as well as handling any edge cases that develop.

Font Size Flexibility

3. Make the plus button increment the paragraph font size by 2 pixels on each click. Work with the same event handler function you made in step 1 but just refactor it.
4. Make the minus button decrement the paragraph font size by 2 pixels on each click. Work with the same event handler function you made in step 2 but just refactor it.

HINT: Keep in mind we need to use a Global variable to keep track of the font size as a Number so both buttons can control the font size getting larger and smaller.

Handling Edge Cases

If you’ve gotten that working, what problems do you foresee? For example, the text can become too large or too small, so what would be reasonable maximum and minimum font sizes?

5. Refactor the function that increases the font size so it limits the largest font size to 40 pixels. If the user tries to go past 40px, show an alert that the maximum font size of 40px is reached and make sure the font size stays at 40.
6. Refactor the function that decreases the font size so it limits the smallest font size to 8 pixels. Show an alert that the minimum font size of 8px is reached and make sure the font size doesn’t go under 8.

CREATE - ACCESS - MANIPULATE - EVENTS - LISTENERS

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

Lesson 1 Exercise 4

Keeping practicing by going to Lesson 2 where you’ll get even more practice with CAMEL, querySelector, textContent and more.