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");
  });
});

Breakouts: Interactive Buttons

At this point, you'll get a chance in breakouts to get all of your buttons working. If this is your first code project, it's likely that you'll have questions or something will not work quite how you expect. In your breakout groups, share your progress!

  • Start by giving everyone in the group 5 minutes to try writing the code above.
  • After that, help anyone in your group who has broken code. See if you can problem-solve together and resolve the error.
  • Take the time to get any questions answered.
  • Finished? Share lessons learned or challenges you encountered in this last section of the project!

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: Group Challenge