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:
- Follow my screen and do a live code-along.
- Use this replit to copy and paste the JavaScript code into your project and then watch as I code.
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!