Back to Setup Page

Interactive Buttons

We have a webpage, but there’s no way for the user to see the definitions! It’s not very interactive for the user. Before JavaScript, websites used to be built with only HTML and CSS. You could maybe click a button and go to another page, but that’s about it. Now, we can do so much more thanks to JavaScript!

Apply Event Listeners to Your Project

We will use what we learned about event listeners to make our buttons interactive. For this next part of the project, watch me first, and then I’ll give you a chance to implement the same functionality in your project. The steps are listed below for your reference as well as the code that I’ll be writing.

Creating Interactive Buttons

We want to dynamically add the “show-text” class when the user clicks the button so that it stays hidden until the user clicks the button.

  1. Create a new variable called cards and use document.querySelectorAll to store an array of all of the HTML elements with the card class.
  2. Use the forEach method on the array of cards and pass in each card as the argument.
  3. Inside of the forEach block, create a new variable called button and store a reference to the button on that card using card.querySelector(".card-btn").
  4. Use the addEventListener method on the button variable to wait for a click and then add the “show-text” class to the classList on that card. We will use the keyword toggle instead of add, so that the class will be removed if the user clicks on the button again!
  5. Remove any console.log statements → these are not usually included in the final production. They are only used as a tool for developers.

The code below shows what we added to our script.js file up to this point. If not everything makes sense right now, that’s to be expected. Some of this is still going to feel like magic, but as you get more familiar with writing code, it will start to make sense. You can also check your work with this replit.

var cards = document.querySelectorAll(".card");

cards.forEach(function (card) {
  var button = card.querySelector(".card-btn");
  button.addEventListener("click", function() {
    card.classList.toggle("show-text");
  });
});

Interactive Buttons

At this point, it's your turn to make your buttons interactive! Remember, it's likely that you'll have questions or something will not work quite how you expect. Share your progress and we can work together to get it resolved!

  • First, take 5 minutes to try and implement the code above.
  • Then, we'll start by working through projects that have broken code. There are lots of small places where things can go wrong, so don't be surprised if yours isn't working as expected! We will use these small mistakes as opportunities to learn.

Use this replit to compare with yours and check your work.

JavaScript Interactions Summary

  • Everything that changes dynamically on the screen as the user interacts with the web page is all written in JavaScript! It’s a powerful tool and one of the most popular programming languages in the world right now.
  • You likely have some gaps in fully understanding the final solution - again, that is OKAY - the goal of this was not to go deep, but spark some curiosity for what is possible!

Next Section: Wrap-Up