Day 3: JavaScript Basics

Time commitment: 15 minutes (+ video)

Today you'll add JavaScript to make your webpage interactive. Follow along with the video, then complete the exercises.

What is JavaScript?

JavaScript makes webpages interactive and dynamic. It lets you:

Respond to user clicks
Change content dynamically
Work with data from APIs
Update the page without reloading

The pattern: Select element → Listen for event → Do something

A Reality Check

JavaScript is where things get difficult. HTML and CSS are relatively straightforward, but JavaScript is where most people get stuck — and that’s completely normal. Learning JavaScript is like learning to drive a car: you can’t just read about it; you have to practice. It’s complex, and mastery takes time.

Don’t give up. If it feels difficult, that’s how it’s supposed to feel. We’ll cover the basics to give you a foothold, and you’ll keep building from there.

🎥 Watch: Your First JavaScript Interaction

See how we connect HTML, CSS, and JavaScript together — and make a button actually do something. This video walks through adding script.js, using console.log(), and writing your first event listener.

Setup JavaScript

Create script.js in your folder.
Link it at the bottom of your HTML (right before </body>):

<script src="script.js"></script>
</body>
</html>

Why at the bottom? JavaScript interacts with HTML elements. If the script loads before the elements, there’s nothing to interact with. Putting it at the bottom ensures the page loads first.

Button-Driven Development

Add this section to your HTML before the closing </body> tag:

<section>
  <input id="content" type="text" />
  <button id="myButton">Click Me</button>
  <p id="message"></p>
</section>

Then in script.js:

const btn = document.getElementById('myButton');
const input = document.getElementById('content');
const message = document.getElementById('message');

Each variable stores a reference to an HTML element you’ll use later.

Key JavaScript Concepts

Variables: const, let, and var

var input = "something";
let count = 0;
const name = "Alice";

Which to use?

const – default choice; can’t reassign
let – when value will change
var – older; avoid

The Core Pattern

Select elements
Listen for events
Do something

Making It Interactive

const btn = document.getElementById('myButton');
const input = document.getElementById('content');
const message = document.getElementById('message');

// when a user clicks the button:
btn.addEventListener('click', function() {
  message.textContent = input.value;
  input.value = '';
});

Test it: Save and refresh, type in the box, click the button — your message appears!

Console and Debugging

Method 1: console.log()

btn.addEventListener('click', function() {
  console.log('HERE');
  console.log(input.value, 'VALUE');
  message.textContent = input.value;
  input.value = '';
});

Method 2: The Debugger

btn.addEventListener('click', function() {
  debugger;
  message.textContent = input.value;
  input.value = '';
});

Add debugger; to pause execution and inspect variable values step-by-step.

Practice Challenges

Make comments stack instead of replace.
Create a counter with + / – buttons.
Color changer: button toggles background color.
Show/hide paragraph with a button.

Common Mistakes

“Cannot read property of null” – wrong ID or script in head.
Nothing happens – check console for errors.
Red text – read and fix the message!

How to Get Unstuck

Check the console (F12).
Use console.log().
Use debugger;.
Google it.
Break it on purpose and learn.

Key Takeaways

JavaScript is hard — and that’s normal.
Pattern: Select → Listen → Do
Use const by default, let when reassigning
getElementById() selects elements
.addEventListener('click') responds to clicks
.value gets input text
Console (F12) is your best friend
debugger; is powerful

Tomorrow: Build your first project using everything you’ve learned.... with AI!