The programming language of the web: variables, functions, the DOM, arrays and objects, and fetching data from APIs.

JavaScript Essentials

## Why this matters

HTML describes what is on a page; CSS describes how it looks. JavaScript makes it **change**: a counter going up, a menu opening, an error message appearing under a form field. To change anything, you first have to get hold of it. This lesson is about finding elements on a page and editing them, which is step one of every interactive feature you will build.

## The DOM

When the browser loads your HTML, it builds a tree of objects in memory called the **DOM** (Document Object Model). Every tag becomes a node in that tree, and JavaScript can read and edit those nodes. The entry point is the global `document` object.

```html
<body>
  <h1 id="title">My shop</h1>
  <p class="intro">Welcome!</p>
  <ul>
    <li class="item">Pens</li>
    <li class="item">Paper</li>
  </ul>
</body>
```

Change the DOM and the page updates straight away; you never edit the HTML file itself.

## querySelector and querySelectorAll

Both take a **CSS selector**, the same syntax you already know from stylesheets:

```javascript
const title = document.querySelector("#title");     // by id
const intro = document.querySelector(".intro");     // first match by class
const firstItem = document.querySelector("ul li");  // descendant selector
const items = document.querySelectorAll(".item");   // ALL matches
```

- `querySelector` returns the **first** matching element, or `null` if nothing matches.
- `querySelectorAll` returns a **NodeList** of every match (possibly empty). You can loop over it with `for...of` or `forEach`.

```javascript
for (const item of items) {
  console.log(item.textContent);
}
items.length;  // 2
```

You may also meet older methods such as `getElementById("title")` and `getElementsByClassName("item")`. They work, but `querySelector` covers every case with one consistent syntax.

## Changing what is on the page

Once you have an element, you can change it:

```javascript
title.textContent = "Spring sale";       // replace the text
intro.style.color = "darkgreen";          // set one inline style
title.setAttribute("data-state", "sale"); // set any attribute
const link = document.querySelector("a");
link.href = "https://example.com";        // common attributes are properties
```

### textContent vs innerHTML

`textContent` sets plain text. `innerHTML` parses the string as HTML:

```javascript
intro.textContent = "<b>Hi</b>";  // shows the characters <b>Hi</b>
intro.innerHTML = "<b>Hi</b>";    // shows bold Hi
```

Use **`textContent` for anything that came from a user or a server**. Putting untrusted text into `innerHTML` lets someone inject their own HTML and scripts into your page, a security hole called cross-site scripting (XSS). Use `innerHTML` only for markup you wrote yourself.

### Classes are better than inline styles

Rather than setting lots of `style` properties, define a class in CSS and switch it on and off with `classList`:

```css
.highlight { background: #fff3b0; }
```

```javascript
firstItem.classList.add("highlight");
firstItem.classList.remove("highlight");
firstItem.classList.toggle("highlight");    // add if missing, remove if present
firstItem.classList.contains("highlight");  // true or false
```

This keeps styling in CSS where it belongs, and one class can change many properties at once.

## A worked example

Mark every item and show a count:

```javascript
const items = document.querySelectorAll(".item");
for (const item of items) {
  item.classList.add("highlight");
}
document.querySelector(".intro").textContent =
  `There are ${items.length} items`;
```

## Where to put your script

A script can only select elements that already exist. If your `<script>` is in the `<head>`, the body has not been built yet and `querySelector` returns `null`. Two fixes:

- Put the `<script>` at the **end of the `<body>`** (what this course does), or
- Use `<script src="app.js" defer></script>` in the head, which waits until the page is parsed.

## Common mistakes

- **Forgetting the `#` or `.`** `querySelector("title")` looks for a `<title>` tag, not `id="title"`.
- **Using the result of `querySelector` without checking it.** If it is `null`, `title.textContent = ...` throws "Cannot set properties of null". Check your selector in the console.
- **Treating a NodeList like one element.** `items.textContent = "x"` does nothing useful; loop over the items.
- **Running the script before the elements exist.** Move it to the end of the body or use `defer`.
- **Using `innerHTML` with user input.** Use `textContent`.

## Quick recap

- The DOM is the browser's live tree of your page; `document` is the way in.
- `querySelector` returns the first match or `null`; `querySelectorAll` returns all matches.
- Change text with `textContent`, classes with `classList`, attributes with properties or `setAttribute`.
- Prefer classes over inline styles and `textContent` over `innerHTML`.

## Try it

Open the **Do** tab. A small shop page is ready; you will write the JavaScript that changes its title, highlights every item and shows the item count.


Find elements on a page with querySelector and change their text, classes and attributes.

Selecting elements

Learn DOM Manipulation In 18 Minutes

JavaScript DOM Tutorial #4 - The Query Selector

## Why this matters

A page that only changes once, when it loads, is not very interactive. Real interfaces wait for the user to do something (click a button, type in a box, press Enter) and then respond. The browser announces each of these actions as an **event**, and your code can **listen** for it. Every button, form, menu and game control on the web works this way.

## addEventListener

You attach a listener to an element with `addEventListener(type, handler)`:

```html
<button id="like">Like</button>
<span id="count">0</span>
```

```javascript
const likeButton = document.querySelector("#like");
const countEl = document.querySelector("#count");
let likes = 0;

function handleLike() {
  likes++;
  countEl.textContent = likes;
}

likeButton.addEventListener("click", handleLike);
```

- The first argument is the event **type** as a string: `"click"`, `"input"`, `"keydown"`, `"submit"`, `"change"`...
- The second is a **function** the browser will call each time the event happens.

Notice `handleLike` has **no parentheses**. You are handing the function to the browser to call later. Writing `handleLike()` would call it once, immediately, and pass its return value (`undefined`) as the listener. This is the most common event bug.

Short handlers are often written inline as arrow functions:

```javascript
likeButton.addEventListener("click", () => {
  likes++;
  countEl.textContent = likes;
});
```

## The event object

The browser passes an **event object** to your handler with details about what happened:

```javascript
input.addEventListener("keydown", (event) => {
  console.log(event.key);     // "a", "Enter", "ArrowUp", ...
  console.log(event.target);  // the element the event happened on
});
```

`event.key` tells you which key was pressed, so you can react to Enter only:

```javascript
const nameInput = document.querySelector("#name");
const greeting = document.querySelector("#greeting");

nameInput.addEventListener("keydown", (event) => {
  if (event.key === "Enter") {
    greeting.textContent = `Hello, ${nameInput.value}!`;
  }
});
```

An input's current text is in its **`value`** property, and it is always a string.

### Common event types

| event | fires when |
|---|---|
| `click` | an element is clicked or tapped (also Enter/Space on a focused button) |
| `input` | the value of a text box changes, on every keystroke |
| `change` | a select, checkbox or text box is committed |
| `keydown` | a key is pressed |
| `submit` | a form is submitted |

Prefer `click` on real `<button>` elements over clicks on `<div>`s. A button can be reached with the keyboard and announced by screen readers; a clickable div cannot, unless you rebuild all of that yourself.

## preventDefault

Some events have a **default action**: clicking a link navigates, and submitting a form reloads the page. `event.preventDefault()` cancels that so your code can handle it instead:

```javascript
form.addEventListener("submit", (event) => {
  event.preventDefault();   // stay on this page
  // ...read the inputs and update the page
});
```

## Event delegation

If you have many similar elements, or elements that are added later (like to-do items), you can put **one** listener on their parent and check `event.target`:

```javascript
list.addEventListener("click", (event) => {
  if (event.target.matches("button.delete")) {
    event.target.closest("li").remove();
  }
});
```

This works because most events **bubble**: a click on a button inside an `li` inside a `ul` is also a click on the `li` and the `ul`. You will use this in the next lesson.

## Removing a listener

`removeEventListener` needs the **same function** you added, which is one reason to give handlers names:

```javascript
likeButton.removeEventListener("click", handleLike);
```

## Common mistakes

- **Calling the handler instead of passing it.** `addEventListener("click", handle())` is wrong; use `handle`.
- **Misspelling the event type.** `"onclick"` and `"Click"` silently do nothing. The type is `"click"`.
- **Adding the listener inside a loop or another handler by accident,** so it runs twice per click.
- **Forgetting that `value` is a string.** `"2" + 1` is `"21"`; convert with `Number()`.
- **Clickable divs.** Use `<button>` for anything that acts like a button.

## Quick recap

- `element.addEventListener("type", handler)` runs `handler` every time the event fires.
- Pass the function, do not call it.
- The event object tells you what happened: `event.key`, `event.target`.
- `preventDefault()` stops default actions; delegation handles many children with one listener.

## Try it

Open the **Do** tab: make a Like button that counts clicks, and a name box that greets the user when they press Enter.


Make a page react to clicks and key presses with addEventListener.

Event listeners

Learn JavaScript Event Listeners In 18 Minutes

addEventListener() - Beau teaches JavaScript

## Why this matters

A to-do list is the classic first interactive app for a reason: it uses everything from this module. You read what the user typed, create new elements, react to clicks, and remove things from the page. Once you can build one from scratch, you understand the core loop behind most web interfaces: **user does something, update the data, update the page**.

## The plan

Before writing code, describe the behaviour in plain sentences:

1. The user types a task and clicks **Add** (or presses Enter).
2. If the text is empty, nothing happens.
3. Otherwise a new item appears in the list and the box is cleared.
4. Clicking an item's text marks it done (and clicking again un-marks it).
5. Clicking an item's **Delete** button removes it.

Each sentence will become a few lines of code. Writing the plan first is a habit worth keeping for every project.

## The HTML

```html
<input id="todo-input" type="text" aria-label="New task">
<button id="add-btn" type="button">Add</button>
<ul id="todo-list"></ul>
```

The list starts empty. Each item we add will look like this:

```html
<li>
  <span class="text">Buy milk</span>
  <button class="delete" type="button">Delete</button>
</li>
```

## Creating elements

`document.createElement` makes a new element that is not on the page yet. You fill it in, then attach it with `append`:

```javascript
function addTodo(text) {
  const li = document.createElement("li");

  const span = document.createElement("span");
  span.className = "text";
  span.textContent = text;          // textContent: safe for user input

  const del = document.createElement("button");
  del.type = "button";
  del.className = "delete";
  del.textContent = "Delete";

  li.append(span, del);
  list.append(li);
}
```

Building with `createElement` and `textContent` is safer than gluing together an HTML string for `innerHTML`, because whatever the user types is always shown as text, never run as HTML.

## Reading and validating input

```javascript
const input = document.querySelector("#todo-input");
const addBtn = document.querySelector("#add-btn");
const list = document.querySelector("#todo-list");

function handleAdd() {
  const text = input.value.trim();   // remove spaces at both ends
  if (text === "") return;           // rule 2: ignore empty tasks
  addTodo(text);
  input.value = "";                  // rule 3: clear the box
  input.focus();                     // ready for the next task
}

addBtn.addEventListener("click", handleAdd);
input.addEventListener("keydown", (event) => {
  if (event.key === "Enter") handleAdd();
});
```

`trim()` matters: without it, a task of three spaces would be added as a blank item.

## Done and delete with one listener

Items are created after the page loads, so we cannot attach listeners to them in advance. Instead use **event delegation**: one listener on the list that checks what was clicked.

```javascript
list.addEventListener("click", (event) => {
  const li = event.target.closest("li");
  if (!li) return;

  if (event.target.matches("button.delete")) {
    li.remove();                       // rule 5
  } else if (event.target.matches(".text")) {
    li.classList.toggle("done");       // rule 4
  }
});
```

- `event.target` is the exact element clicked.
- `closest("li")` walks up from there to the nearest `li`.
- `matches(selector)` checks whether an element fits a CSS selector.

The look of a finished task lives in CSS:

```css
.done .text { text-decoration: line-through; opacity: 0.6; }
```

## Keeping the list after a refresh (optional)

On a real site you would save the tasks so they survive a page reload, for example with `localStorage`:

```javascript
localStorage.setItem("todos", JSON.stringify(["Buy milk"]));
JSON.parse(localStorage.getItem("todos") ?? "[]");
```

`localStorage` only stores strings, which is why the data goes through `JSON.stringify` and `JSON.parse` (more on JSON in module 3). The practice area on this site runs your code in a locked-down sandbox where `localStorage` is not available, so the activity skips this step. Try it in your own project, and wrap the calls in `try`/`catch`, because browsers can refuse storage in private windows.

## Common mistakes

- **Adding listeners to items that do not exist yet.** Use delegation on the parent list.
- **Skipping `trim()`.** Blank tasks slip through.
- **Using `innerHTML` with the task text.** Use `createElement` and `textContent`.
- **Forgetting `type="button"`.** Inside a form, a button defaults to submitting the form and reloading the page.
- **Removing the wrong element.** `event.target.remove()` removes just the button; remove its `li` with `closest("li")`.

## Quick recap

- Plan the behaviour in sentences, then turn each into code.
- `createElement`, `textContent` and `append` build new elements safely.
- Validate input with `trim()` and clear the box after adding.
- One delegated listener handles done and delete for every item, even new ones.

## Try it

Open the **Do** tab and build the to-do list: add, ignore empty input, mark done and delete.


Combine selecting, creating and removing elements with event listeners to build a working to-do list.

Build a to-do list

How To Create To-Do List App Using HTML CSS And JavaScript | Task App In JavaScript

Select and change elements, respond to events, and build an interactive to-do list.