JavaScript Webpage Workout - M1 Lesson 3 Exercise 2

This exercise follows exercise 1 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.

In this lesson we are going to explore using the border property to enhance our image by framing it.

Before we start, inside of the section with id="btn-area-container, let’s add a second fieldset and legend just like we did for the filter effect fieldset. Make sure to place this new fieldset under the reset button. Set the text content for the legend to Border Effects.

Next, add a section tag with a class of ‘btn-wrapper’ under the legend tag.

Lastly, within this section tag add a button tag with an id of ‘photo-border’ and text content of ‘photo’.

<fieldset>
  <legend>Border Effects</legend>
  <section class="btn-wrapper">
    <button id="photo-border">photo</button>
  </section>
</fieldset>

For the CSS, we’ve already included the CSS for fieldset, legend, and #btn-wrapper, so let’s just take care of the #photo-border button.

#photo-border {
  background-color: #1b5e20;
  color: white;
}

Now, let’s ACCESS the button element with the id photo-border using getElementById() or querySelector(). Assign it to the camel-cased variable photoBtn.

ACCESS

const photoBtn = document.getElementById('photo-border');

Console.log the variable photoBtn to see what we have accessed.

console.log(photoBtn);
// returns "<button id='photo-border'>photo</button>"

With that done let’s make a function named makePhoto. This function adds a solid white border of ’10px’ to the ‘mushroomImage’ making it look like a printed photograph.

MANIPULATE

const makePhoto = () => {
  mushroomImage.style.border = '10px solid white';
}

Now attach an addEventListener to the photoBtn event target that calls the function makePhoto when the user ‘clicks’ the button.

photoBtn.addEventListener('click', makePhoto);

Click the button and watch the image change.

Then let’s update the reset button. Currently the reset button resets the filter property to ‘none’. To clear the border property, we do the same but by changing the border property’s value to ‘none’.

const reset = () => {
  mushroomImage.style.filter = 'none';
  mushroomImage.style.border = 'none'; // Removes the border style
}

Click the photo button and then the reset button. The border should disappear.

Your Turn

Now it’s your turn to add three more buttons inside of the second fieldset after the photo button.

Instructions:

1. Add a button with anid of ‘inset-border’ and text content of ‘inset’
2. Add a button with anid of ‘dashed-border’ and text content of ‘dashed’
3. Add a button with anid of ‘double-border’ and text content of ‘double’

Add some CSS for the background colors of these new buttons

#inset-border {
  background-color: #6200ea;
  color: white;
}
#dashed-border {
  background-color: #304ffe;
  color: white;
}
#double-border {
  background-color: #dd2c00;
  color: white;
}

6. ACCESS each button by its id using the document method getElementById() or querySelector() and assign it to a variable:

   • access the inset button and assign it to insetBtn
   • access the dashed button and assign it to dashedBtn
   • access the double button and assign it to doubleBtn

7. Add an event handler function for each of these new border effects. Check the docs.

   • make a function called makeInset which adds an inset border to the mushroomImage with the values of 20px inset #BDBDBD
   • make a function called makeDashed which adds a dashed border to the mushroomImage with the values of 5px dashed #000
   • make a function called makeDouble which adds a double border to the mushroomImage with the values of 10px double #C0CA33

8. Add an event listener method to each button (i.e. the event target). For its parameters, use ‘click’ and its matching event handler function.

   Now try each button to see the effect. Click the ‘reset’ button to see the image return back to its initial state. (Note: there’s no need to update the reset button because it already sets the border style to none.)

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

M1 L3 Exercise 2 Solution

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