JavaScript — The Muscles

HTML says what things are. CSS says how they look. JavaScript says what happens when someone interacts with them.

You click a button. JavaScript responds. You type in a text box. JavaScript sees it. You scroll the page. JavaScript can react to that. JavaScript is the only one of the three that can do things based on user actions.

Real example from PetKarma: when someone clicks the "schedule appointment" button, what happens? HTML made the button. CSS made it look right. But JavaScript is what catches that click and says "okay, now open the appointment form" or "now send this data to the backend" or "now update the calendar."

Without JavaScript, the button just sits there. It's pretty. It's structured correctly. But it does nothing.

Declarative vs imperative

HTML and CSS are declarative. You declare what something is or how it should look, and the browser handles it.

JavaScript is imperative. You give it instructions. Step by step. Do this. Then do that. Then check if this happened. Then do something else.

document.getElementById("schedule-button").addEventListener("click", function() {
  openAppointmentForm()
})

Translation: "Find the element with the id schedule-button. Listen for when someone clicks it. When they do, run the openAppointmentForm function."

That's imperative. Step by step instructions. Compare that to HTML where you just declare "this is a button" and the browser figures out the rest.

JavaScript has memory

HTML doesn't remember anything. It just describes structure. CSS doesn't remember anything. It just applies looks.

But JavaScript can say "the user clicked the button 3 times" or "the user typed their email here" or "this appointment is scheduled for Tuesday at 2pm." It can hold that information and do something with it.

That's why JavaScript is where the real logic lives. That's why apps feel alive — because JavaScript is making decisions based on what the user does.

let clickCount = 0

Translation: "Create a container called clickCount and put the number 0 in it."

Then JavaScript can change what's in that container:

clickCount = clickCount + 1

Now clickCount holds 1. Click again, it's 2. Click again, it's 3.

But where is this actually stored?

It's stored in the browser's memory. Your computer's RAM. Temporary. Fast. But temporary.

The moment the user refreshes the page or closes the browser, all that information disappears. Gone. Because it was only living in RAM.

That's why apps have backends and databases. If you need to remember that the user scheduled an appointment for Tuesday at 2pm even after they close their browser, you can't just use JavaScript variables. You need to send that information to a server, which stores it in a database. A permanent place.

A note about writing code

Every step in JavaScript has to be exact and intentional. That sounds insane — and it would be, if developers wrote every single step from scratch every time.

But that's not what happens. You write code once, then you reuse it. You build functions. You build components. You build patterns. Then you use those patterns over and over. You don't rewrite the click counter logic 500 times. You write it once, abstract it into a reusable piece, and plug it in wherever you need it.

That's actually what frameworks like Next.js do — they handle the heavy lifting so you don't have to write every instruction from scratch.

Use it: The same button, now with JavaScript

On the HTML page, you saw a plain button. On the CSS page, it got styled. Now JavaScript gives it a job. Click the button.

<button id="schedule-btn">
  Schedule Appointment
</button>

/* CSS */
button { background: #4CAF50; color: white; ... }

// JavaScript
document.getElementById("schedule-btn")
  .addEventListener("click", function() {
    alert("Appointment form opened!")
  })

That's all three layers working together. HTML made the button exist. CSS made it look good. JavaScript made it respond to your click. Each layer added something the previous one couldn't.