Apply Today to our Front End or Back End Programs & check out our scholarships!

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 engaging as a 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. You have two options for the next steps on your project:

  1. Follow my screen and do a live code-along.
  2. Use this replit to copy and paste the JavaScript code into your project and then watch as I code.

Live Code-Along Steps

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. 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

You did it! At this point, all of your buttons should be working. However, if this is your first code project, it's likely that you have questions or you missed something and it's not working quite how you expected. In your breakout groups, share your progress!

  • Start with 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!

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
Wrap Up