Make It Do Something: Your First Interaction
Make It Do Something
Your profile card looks great — but it just sits there. Click it, poke it, nothing happens. That's because HTML is structure and Tailwind is style. Behavior is the job of JavaScript.
Here's the secret nobody tells beginners: in vibe coding, you don't memorize JavaScript. You describe what should happen, and AI writes the code. Behavior is just a sentence:
"When someone clicks the like button, the number next to the heart goes up by 1."
Give that prompt to AI, and it produces something tiny like this:
const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
likes = likes + 1;
count.textContent = likes;
});
That's it. Three moves, every time:
- Find the element (
getElementById) - Listen for an event (
addEventListener("click", ...)) - Change something (
textContent, a class, anything)
Find, listen, change. Almost every interaction on every website you've ever used — dropdowns, dark mode toggles, like buttons — is some version of this pattern.
In this lesson you'll add a like counter to your card. By the end, you'll click a heart and watch a number you control go up. That's the moment a page becomes an app.
Instructions
Add a <button id="like-btn"> below the CTA link, with a heart emoji and a <span id="like-count">0</span> inside it
Hint: Try: `<button id="like-btn" class="mt-4 w-full flex items-center justify-center gap-2 bg-white/10 hover:bg-white/20 border border-white/20 font-bold py-3 rounded-xl transition-all">❤️ <span id="like-count">0</span></button>`
Add an empty <script> tag just before </body> — this is where the behavior lives
Inside the script, grab both elements: the button and the counter. Use document.getElementById with the ids you gave them
Listen for clicks: addEventListener("click", ...) on the button — increase likes by 1 and update the counter's textContent
Your Code
Describe what you want to build for this step and I'll write the code — then click Apply to drop it into your editor. This step: Add a <button id="like-btn"> below the CTA link, with a heart emoji and a <span id="like-count">0</span> inside it