JavaScript Webpage Workout - M1 Lesson 2 Exercise 1

This exercise follows the warm-up of Lesson 2. Please do that warm-up first for this exercise to make more sense. You can find the beginning of the course here.

Add two more buttons for Rectangle and Oval. Add them all beneath the circle button. Use the same CAMEL sequence.

Instructions:

1. Add a button with an id of ‘rect-btn’ and text content of ‘RECTANGLE’
2. Add a button with an id of ‘oval-btn’ and text content of ‘OVAL’
3. Add a class attribute with a value of ‘btn’ to both buttons. NOTE: there’s no additional CSS for these new buttons.

4. ACCESS each button by its ID using querySelector() or getElementById() and assign each to its own variable

   • access the rectangle button and assign it to rectBtn
   • access the oval button and assign it to ovalBtn

5. Add an event handler function for each of these new shapes. Check the docs to see how to make each.

   • make a function called makeRect which adjusts the width and borderRadius properties.
   • make a function called makeOval which adjusts the width and borderRadius properties.
6. Add the event listener method addEventListener() to each button variable. For their parameters, use ‘click’ and the matching event handler function.

When you click each of the four buttons, you should see that particular shape.

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

M1 L2 Exercise 1 Solution

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