JavaScript Webpage Workout - M1 Lesson 4 exercise 2

August 03, 2020

This exercise follows Lesson 4 exercise 1. 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 4 Exercise 2 is also available as a video.

Exercise with Font Awesome

This exercise will make use of the font-awesome library to toggle between a ‘thumbs-up’ icon and a ‘thumbs-down’ icon. Let’s first copy/paste the CSS link to the library in the <head> element of the HTML document.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
</head>

Or, within the Settings and CSS tab of CodePen, type ‘awesome’ in the search input and select the Font Awesome library. Click Save & Close.

Create

The sequence of CAMEL always begins with CREATE an element, so start by making a DIV element with an id of status. Then add a child element using the <i> tag that Font Awesome uses and then add a class of “fas fa-thumbs-up”.

<div id="status">
  <i class="fas fa-thumbs-up"></i>
</div>

Add some CSS.

#status {
  width: 80px;
  height: 80px;
  border: 1px solid black;
  box-shadow: 0 0 2px black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: yellow;
}

#status:active {
  box-shadow: inset 0 0 3px black;
}

.fas,
.fa {
  cursor: pointer;
}

.fa-thumbs-up {
  font-size: 3.3rem;
  color: indigo;
  margin: 0 0 5px 3px;
  transition: .1s all;
}

Access

Access the div using .querySelector() and store it in the variable statusIcon.

const statusIcon = document.querySelector('#status');

You should see a circle with a yellow background and a purple ‘thumbs-up’ icon in the center of it.

Click on it and…nothing happens…yet.

Manipulate

Which brings us to the MANIPULATE part. Let’s think about how we’re going to do this first by stating the goal:

click on the ‘thumbs-up’ icon to turn it to a ‘thumbs-down’ icon, then vice versa.

So, how does an icon change with the Font Awesome library?

First let’s consider how the ‘thumbs-up’ content is made. With Font Awesome, it’s the class name which sets the icon. To demonstrate this, change the class name to “fas fa-thumbs-down” and it becomes a thumbs-down icon.

So, one way to execute this is to change the className of the icon after its parent div receives a click event.
But isn’t a thumbs-down really just a thumbs-up but flipped 180 degrees. So we could also rotate the thumbs-up icon 180 degrees so it becomes a thumbs-down icon by adding a class to transform: rotate(180deg) the div element. Again, we would only rotate the icon by adding or removing the special class after the div receives a click event.

Let’s give the first way a try by changing the className on a click event.

Access

ACCESS the thumbs-up element with .querySelector() and store it the camelCased variable ‘thumbsUp’.

const thumbsUp = document.querySelector('.fa-thumbs-up');

Manipulate

Set up the event handler function using the JavaScript property className which isn’t as extensive and flexible as classList. Though className can still help us to set the class of an HTML element with very little code. Because its a property we assign (=) it a value. Unlike classList which can make use of methods such as classList.add() or classList.contains(). When we use className we set all the classes the element should have, including the ‘fas’ class, in the case of the Font Awesome icon. HTML elements can have multiple classes; they just need to be separated by a space.

function status() {
  thumbsUp.className = "fas fa-thumbs-down"
}

Events and Listeners

The event target is the element that will be clicked which is the div. So let’s add the addEventListener method to it then indicate the event type and the event handler function.

statusIcon.addEventListener('click', status)

Try it out. The icon should change from ‘thumbs-up’ to ‘thumbs-down’. The only problem is that we can’t change it back to ‘thumbs-up’ with this function yet. We have to add more logic to our function to be able to change it back to ‘thumbs-up’.

That logic can look something like this:

function status() {
  // If thumbsup's class contains the class "fa-thumbs-up"
  // set thumbsup's className to "fas fa-thumbs-down"
  // else set thumbsup's className to "fas fa-thumbs-up"
}

Give it a try and see if you can get it to work.

Here’s what I did using the methods and properties we know.

function status() {
  if (thumbsUp.classList.contains("fa-thumbs-up")) {
    thumbsUp.className = "fas fa-thumbs-down"
  } else {
    thumbsUp.className = "fas fa-thumbs-up"
  }
}

Exercise with Google Material Icons library

Now let’s try a similar exercise but with the Google Material Icons library which is a little bit different than Font Awesome. Font Awesome uses classes to indicate which icon to display but Material Icon uses textContent to specify which icon to show.

Let’s first copy/paste the CSS link to the Google Material Icons library in the <head> element of the HTML document.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-icons/3.0.1/iconfont/material-icons.min.css">
</head>

Or, within the Settings and CSS tab of CodePen, type ‘material’ in the search input and select the Material Design Icons library. Click Save & Close.

The goal with this exercise is to toggle between a sun icon and a cloud when the icon is clicked.

Create

Let’s start by creating a div element with the id weather. Then give the div a child element of an i element with the class material-icons and text content of “wb_sunny”.

<div id="weather">
  <i class="material-icons">wb_sunny</i>
</div>

If we change the “wbsunny” to “wbcloudy” you can see the icon changes.

<div id="weather">
  <i class="material-icons">wb_cloudy</i>
</div>

Your Turn

Now, see if you can make this change happen when the icon is clicked.

Access

With JavaScript, access the div and the i tags.

Manipulate

Make an event handler function with similar logic as the Font Awesome icon exercise but adjust it to fit the Material Icons.

Events and Listeners

Finally add your event listener to the div with the id of weather. Add the event type and event handler. You can then compare what you did with my solution.

My Solution

/* Access */
const weather = document.querySelector('#weather');
const icon = document.querySelector('.material-icons');

/* Manipulate */
// Using a conditional statement to change textContent
function changeWeather() {
  if (icon.textContent === "wb_sunny") {
    icon.textContent = "wb_cloudy"
  } else {
    icon.textContent = "wb_sunny"
  }
}

/* Events and Listeners */
weather.addEventListener('click', changeWeather)

Check out my code at CodePen.

Keep practicing and go on to Lesson 4 exercise 3.

SixStringsCoder {6}

JavaScript Webpage Workout - M1 Lesson 4 exercise 2

📺 This Lesson 4 Exercise 2 is also available as a video.

Exercise with Font Awesome

Create

Access

Manipulate

Access

Manipulate

Events and Listeners

Exercise with Google Material Icons library

Create

Your Turn

Access

Manipulate

Events and Listeners

My Solution

This blog exercise in video format.