JavaScript Webpage Workout - M1 Lesson 3 Warm-up

This lesson follows Lesson 2. Please do that lesson first for this exercise to make more sense or start from Lesson 1 if this is your first time to the course.

📺 This Lesson 3 warm-up is also available as a video.

In this lesson we are going to explore using the filter property which comes with a number of functions such as blur, invert, brightness, grayscale, and sepia. We’ll also explore some border style properties and the options available to us: solid, inset, dashed, double, etc.

Create

Make a section element with an id of image-wrapper.

<!-- make a square -->
<section id="image-wrapper"></section>

Add an img element with an id of img-mushrooms. The link to the image is provided below. Don’t forget to include your alt attribute.

<!-- make a square -->
<section id="image-wrapper">
  <img id="img-mushrooms" src='https://images.unsplash.com/photo-1577186606264-8bc8d1fdf9e5?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='mushrooms'>
</section>

Let’s add some CSS.

body {
  height: 100vh;
  background: #9e9e9e;
}

/*--- mushroom image ---*/
#image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 60%;
  margin: 1rem auto 0;
}

#img-mushrooms {
  width: 100%;
  transition: 1.5s all;
}

Access

Let’s play with a CSS property called filter by adding the blur effect on our mushroom image. First let’s access the element with the id img-mushrooms using getElementById. Assign it to the variable mushroomImage.

const mushroomImage = document.getElementById('img-mushrooms');

Next, let’s console.log the variable mushroomImage to see what we have accessed.

console.log(mushroomImage);
// returns "<img id="img-mushrooms" src='https://images.unsplash.com/photo-1577186606264-8bc8d1fdf9e5?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='mushrooms'>"

Manipulate

With that done, let’s use the style property with the filter property to blur the image by 5px. Let’s chain the filter property and style property to the mushroomImage variable. Set the value to the blur() function with an argument of 5px.

mushroomImage.style.filter = 'blur(5px)';

Now the image should be blurred. Let’s tuck this into an event handler function so we can let a button control this filter effect later on. Name the handler blurImg.

const blurImg = () => {
  mushroomImage.style.filter = 'blur(5px)';
}

Call the function to make sure it works. With that now working, remove the function call and let’s use a button to make this effect happen.

We are going to make several of these buttons so let’s make a container to hold them.

First, under the section with the image, make a section with the id ‘btn-area-container’.

<section id="btn-area-container"></section>

Then add a button as a child of the section. Give it an id of blur and the text content of ‘blur’.

<!-- make a button for blur -->
<section id="btn-area-container">
  <button id="blur">blur</button>
</section>

Next we’ll add a general CSS rule for all of the buttons as well as a background color for the blur button.

#btn-area-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  margin: 1.3rem 0.5rem;
  width: 7.5rem;
  height: 2.5rem;
  padding: 0.5rem;
  font-size: 1.3rem;
  box-shadow: 0 0 3px #333;
  cursor: pointer;
}

#blur {
  background-color: #ef9a9a;
}

Now let’s add some Javascript to make the button interactive. Access the button with the id of blur using .getElementById and assign it to the camel-case variable blurBtn.

const blurBtn = document.getElementById('blur');

Next let’s console.log the variable blurBtb to see what we have accessed.

console.log(mushroomImage);
// returns "<button id='blur'>blur</button>"

Events and Listeners

Add an event listener method to the event target, ‘blurBtn’. This button will call the event handler function ‘blurImg’ when a click event happens on the button.

blurBtn.addEventListener('click', blurImg);

Click the button and you should see the mushroom image blur.

Now, let’s set up a ‘reset’ button so we can remove this image effect. Use the same work sequence by creating a button element. Inside of the btn-area-container add a button with the id of ‘reset’ and the text content of ‘reset’.

CREATE the button

<button id="reset">Reset</button>

With CSS rule for the reset button.

#reset {
  background-color: rgba( 255, 255, 255, .5);
  margin: 1rem;
}

Access the button with the id of reset using .getElementById and assign it to the camel cased variable resetBtn.

ACCESS the button

const resetBtn = document.getElementById('reset');

Console.log resetBtn.

console.log(resetBtn);
// returns "<button id="reset">Reset</button>"

Now let’s make the reset handler function where we set the mushroomImg filter value to none.

MANIPULATE the image

// Event Handler Function
const reset = () => {
  mushroomImage.style.filter = 'none';
}

Add an event listener method to the event target, ‘resetBtn’. This button will call the event handler function ‘reset’ when a click event happens on the button.

// Add event listener to the reset button
// Call the event handler function when the button is clicked.
resetBtn.addEventListener('click', reset);

Click the ‘blur’ button then click the ‘reset’ button. It works!

Now let’s get more creative and add more effects. Within the btn-area-container add some more buttons.
Add a button with an id of invert and text content of ‘invert’.

This is a very cool effect! Just a reminder to type this all out; don’t just copy and paste the code. You’re trying to make this become muscle memory. You can even speak it out loud as you type it.

CREATE the button

<button id="invert">invert</button>

Now the CSS.

#invert {
  background-color: #81C784;
}

Access the button with the id of invertBtn using .getElementById and assign it to the camel cased variable invertBtn.

ACCESS the button

const invertBtn = document.getElementById('invert');

Console log it.

console.log(invertBtn);
// returns "<button id="invert">invert</button>"

Now let’s make the makeInvert handler function where we set the mushroomImg filter value to invert(100%). Make sure to include the quotation marks around the invert function.

MANIPULATE the image

// Event Handler Function
const makeInvert = () => {
  // 100% is the full effect.  0% is no effect at all.
  mushroomImage.style.filter = 'invert(100%)';
}

Add an event listener method to the event target, ‘invertBtn’. This button will call the event handler function ‘makeInvert’ when a click event happens on the button.

// Add event listener to the reset button
// Call the event handler function when the button is clicked.
invertBtn.addEventListener('click', makeInvert);

Click the ‘invert’ button and admire the image effect. Now click the reset button. Hey, it work! But why? Because this effect is still using the CSS property ‘filter’ which we are resetting to ‘none’.

Let’s add some more HTML and CSS to help shape the layout of the webpage. We’ll place our two buttons, blur and invertin afieldsetelement with alegend` element with the text content of ‘Filter Effects’.

Just after the legend element, add a <section> tag with a class of btn-wrapper. Cut and paste the button elements inside of the btn-wrapper.

Cut and paste the reset button after the fieldset element and before the closing section.

<section id="btn-area-container">
    <fieldset>
        <legend>Filter Effects</legend>
        <section class="btn-wrapper">
          <button id="blur">blur</button>
          <button id="invert">invert</button>
        </section>
      </fieldset>
      <button id="reset">Reset</button>
</section>
  

Let’s style these elements.

fieldset {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 1rem;
  font-size: 1.5rem;
}

.btn-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#reset {
  width: 60%;
}

In some browsers the fieldset and legend elements will come with some default styling of a border and the legend aligned to the left.

Now it’s your turn! Keep practicing! Go on to Lesson 3 exercise 1.

This blog lesson in video format.