Programación Para Tontos


This is the project where everything so far (arrays, functions, events, localStorage) comes together. If you followed the previous tutorials to get here, this will feel surprisingly familiar.

## Step 1: the HTML

```html
<form id="task-form">
  <input type="text" id="new-task" placeholder="New task" />
  <button type="submit">Add</button>
</form>
<ul id="task-list"></ul>
```

## Step 2: your app's state (just an array)

```js
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
```

When the page loads, we try to recover saved tasks. If there's nothing saved yet (first visit), we fall back to an empty array thanks to the `||` operator.

## Step 3: render the tasks on screen

```js
function renderTasks() {
  const list = document.querySelector('#task-list');
  list.innerHTML = '';

  tasks.forEach((task, index) => {
    const item = document.createElement('li');
    item.textContent = task;

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.addEventListener('click', () => deleteTask(index));

    item.appendChild(deleteButton);
    list.appendChild(item);
  });
}
```

## Step 4: add and remove tasks, and save everything

```js
function saveTasks() {
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

function deleteTask(index) {
  tasks = tasks.filter((_, i) => i !== index);
  saveTasks();
  renderTasks();
}

document.querySelector('#task-form').addEventListener('submit', (event) => {
  event.preventDefault();
  const input = document.querySelector('#new-task');
  const text = input.value.trim();

  if (text === '') return;

  tasks.push(text);
  input.value = '';
  saveTasks();
  renderTasks();
});

renderTasks();
```

Every time you add or remove a task: you update the array, save it to `localStorage`, and re-render the whole list. It's a pattern you'll repeat your entire career as a developer, so memorize it well (or just bookmark this tutorial, no shame in that).

## What did you just learn?

- How to combine arrays, DOM events, and `localStorage` in a real project.
- The "update data → save → re-render" pattern you'll use constantly.
- That you can already build something functional with what you know, no frameworks yet.


Combine arrays, events, and localStorage to build a real to-do list that remembers your data.

Tutorial: build a complete to-do list


If you reload your page and everything you did disappears, your app has goldfish memory. `localStorage` is the simplest fix so it remembers something, even if the user closes the browser.

## Step 1: save a value

```js
localStorage.setItem('name', 'Sofia');
```

`localStorage.setItem(key, value)` stores data in the user's own browser, on their own computer, no server required. It survives page reloads and even computer restarts.

## Step 2: read the saved value

```js
const name = localStorage.getItem('name');
console.log(name); // 'Sofia'
```

If the key doesn't exist, `getItem` returns `null` instead of throwing an error. It's always a good idea to check for that before using the value.

## Step 3: save objects (not just text)

`localStorage` only stores strings, so for objects you need to convert them with `JSON`:

```js
const user = { name: 'Sofia', level: 'beginner' };

localStorage.setItem('user', JSON.stringify(user));

const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.level); // 'beginner'
```

`JSON.stringify` turns an object into text so it can be stored. `JSON.parse` does the opposite: turns that text back into a usable object. Without this, JavaScript will hand you the string `"[object Object]"`, which is useless for absolutely everything.

## Step 4: remove saved data

```js
localStorage.removeItem('user'); // deletes just that key
localStorage.clear(); // deletes EVERYTHING saved (careful)
```

## What did you just learn?

- How to save and read data with `setItem` and `getItem`.
- Why you need `JSON.stringify` / `JSON.parse` to store objects.
- How to remove saved data without regretting it later.


Learn to use localStorage to remember user information between visits to your page.

Tutorial: save data in the browser with localStorage


So far your pages only used data you typed yourself. Today we're going to ask the internet for data, live, using `fetch`. Welcome to the real world.

## Step 1: make your first request

```js
fetch('https://api.github.com/users/octocat')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Something went wrong:', error));
```

`fetch(url)` requests data from that address. The response arrives in a format you need to convert to JSON with `.json()` (which, surprise, is also asynchronous, hence the extra `.then`). If something fails (no internet, the API is down), `.catch` warns you instead of silently breaking your page.

## Step 2: the modern version with `async/await`

```js
async function getUser() {
  try {
    const response = await fetch('https://api.github.com/users/octocat');
    const data = await response.json();
    console.log(data.name, data.public_repos);
  } catch (error) {
    console.error('Something went wrong:', error);
  }
}

getUser();
```

`async/await` is the same idea as `.then()`, but reads top to bottom like normal code instead of nesting like a Russian doll. `try/catch` plays the same role as `.catch()`: catching errors before they blow up in the console.

## Step 3: show the data on the page

```html
<div id="user"></div>
```

```js
async function displayUser() {
  const response = await fetch('https://api.github.com/users/octocat');
  const data = await response.json();

  document.querySelector('#user').innerHTML = `
    <h3>${data.name}</h3>
    <p>Public repos: ${data.public_repos}</p>
  `;
}

displayUser();
```

Now your page isn't stuck with fixed data: it shows real, up-to-date information that doesn't even live on your computer. That's, technically, 90% of what modern web apps do.

## What did you just learn?

- How to request data from the internet with `fetch`.
- The difference between `.then()` and `async/await` (same idea, different syntax).
- How to handle errors with `try/catch` so your app doesn't break silently.


Learn to use fetch to request data from the internet and display it on your page.

Tutorial: consuming an API with fetch - live data


The browser already validates some things on its own (`required`, `type="email"`), but for custom error messages you need JavaScript. Let's validate a simple sign-up form.

## Step 1: the HTML

```html
<form id="signup-form">
  <input type="text" id="username" placeholder="Username" />
  <input type="password" id="password" placeholder="Password" />
  <button type="submit">Sign up</button>
  <p id="error" style="color: #ff6b6b;"></p>
</form>
```

## Step 2: listen for the submit event

```js
const form = document.querySelector('#signup-form');
const error = document.querySelector('#error');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  error.textContent = '';

  const username = document.querySelector('#username').value;
  const password = document.querySelector('#password').value;

  if (username.length < 3) {
    error.textContent = 'Username must be at least 3 characters.';
    return;
  }

  if (password.length < 6) {
    error.textContent = 'Password must be at least 6 characters.';
    return;
  }

  console.log('Form is valid, submitting...');
});
```

`event.preventDefault()` stops the page from reloading (a form's default behavior). Without that line, your error message would flash and disappear in a fraction of a second, and you'd think your code was broken when really the browser was "helping" too much.

## Step 3: validate as the user types (optional, extra credit)

```js
document.querySelector('#password').addEventListener('input', (event) => {
  const value = event.target.value;
  error.textContent =
    value.length > 0 && value.length < 6
      ? 'Still too short...'
      : '';
});
```

The `input` event fires every time the user types something. This lets you give instant feedback instead of waiting for them to try submitting the form.

## What did you just learn?

- How to listen for the `submit` event and prevent page reloads with `preventDefault()`.
- How to validate values with simple conditionals.
- How to give real-time feedback with the `input` event.


Add real-time validation to an HTML form using JavaScript, no external libraries needed.

Tutorial: validate a form with JavaScript


A function is a little box of instructions that you give a name to, so you don't have to rewrite it every time. Today you'll build a tip calculator (useful, unlike most "hello world" examples).

## Step 1: declare your first function

```js
function calculateTip(bill, percentage) {
  return bill * (percentage / 100);
}

console.log(calculateTip(200, 15)); // 30
```

`function name(parameters) { ... }` is the classic way to declare a function. `bill` and `percentage` are parameters: values you "lend" the function each time you use it.

## Step 2: use a default value

```js
function calculateTip(bill, percentage = 10) {
  return bill * (percentage / 100);
}

console.log(calculateTip(200)); // 20 (uses 10% by default)
console.log(calculateTip(200, 20)); // 40
```

If you don't pass `percentage`, JavaScript uses the default value instead of giving you `undefined`. Fewer bugs, less drama.

## Step 3: the modern version - arrow functions

```js
const calculateTotal = (bill, tip) => bill + tip;

console.log(calculateTotal(200, 30)); // 230
```

Arrow functions (`=>`) are a shorter way to write functions, very common in modern code. When the body is a single expression, you don't even need `return` or curly braces.

## Step 4: put it all together

```js
function billSummary(bill, tipPercentage = 10) {
  const tip = calculateTip(bill, tipPercentage);
  const total = calculateTotal(bill, tip);
  return `Bill: $${bill}, tip: $${tip}, total: $${total}`;
}

console.log(billSummary(500, 18));
```

A function can call other functions. This is how "big" code is actually a bunch of small functions working together, not one genius typing 500 lines in one sitting.

## What did you just learn?

- How to declare functions with parameters and default values.
- The modern arrow function syntax.
- That functions can be combined to solve bigger problems.


Learn to declare and use JavaScript functions by building a small tip calculator.

Tutorial: functions in JavaScript - package up reusable code


If an array is a list, an object is a profile card: a named set of data, like a business card. Let's build one.

## Step 1: create your object

```js
const person = {
  name: 'Sofia',
  age: 28,
  job: 'Developer',
  greet() {
    return `Hi, I'm ${this.name}`;
  },
};
```

Each `key: value` is a property. `greet` is a method: a function that lives inside the object. `this.name` means "this object's own name".

## Step 2: access and update properties

```js
console.log(person.name); // 'Sofia'

person.age = 29; // happy birthday, congrats

console.log(person.age); // 29
```

You can read and change properties with `object.property`. No permission needed, no forms to sign.

## Step 3: call a method

```js
console.log(person.greet()); // "Hi, I'm Sofia"
```

## Step 4: loop through the object's properties

```js
for (const key in person) {
  if (typeof person[key] !== 'function') {
    console.log(`${key}: ${person[key]}`);
  }
}
```

`for...in` loops through every key on the object. The `if` avoids printing the `greet` method as if it were just another piece of data (nobody wants to see a function's source code on their business card).

## What did you just learn?

- How to create an object with properties and methods.
- How to access and update properties with `object.property`.
- How to loop through an object's keys with `for...in`.


Learn to create and use JavaScript objects by building a digital business card.

Tutorial: objects in JavaScript - build a business card


An array is an ordered list of things: pending tasks, cart items, names of friends who never reply to the group chat. Today you'll actually learn to manipulate them, not just create them.

## Step 1: create an array and add items

```js
const tasks = ['Buy milk', 'Study JavaScript'];

tasks.push('Take out the trash');

console.log(tasks);
// ['Buy milk', 'Study JavaScript', 'Take out the trash']
```

`.push()` adds an item to the end of the array. Simple, direct, no drama.

## Step 2: remove items with `.filter()`

```js
const doneTasks = ['Buy milk'];

const pendingTasks = tasks.filter(
  (task) => !doneTasks.includes(task)
);

console.log(pendingTasks);
// ['Study JavaScript', 'Take out the trash']
```

`.filter()` creates a new array with only the elements that match a condition. Here we keep the tasks that are NOT in the done list. The original array stays untouched (Filter doesn't destroy, it creates).

## Step 3: transform each item with `.map()`

```js
const tasksWithEmoji = tasks.map((task) => `📌 ${task}`);

console.log(tasksWithEmoji);
// ['📌 Buy milk', '📌 Study JavaScript', '📌 Take out the trash']
```

`.map()` loops through the array and returns a new one with each element transformed. It's like running each task through a machine that stamps a label on top.

## Step 4: loop through the array with `.forEach()`

```js
tasks.forEach((task, index) => {
  console.log(`${index + 1}. ${task}`);
});
```

`.forEach()` is for when you just want to "do something" with each item (like printing it), without creating a new array.

## What did you just learn?

- How to add items with `.push()`.
- How to filter with `.filter()` without modifying the original array.
- How to transform data with `.map()` and loop through it with `.forEach()`.


Master the most common array methods (push, filter, map) by building a simple to-do list.

Tutorial: arrays in JavaScript - organize a to-do list


If you've ever copy-pasted the same line of code ten times, changing only a number, congratulations: you just (badly) reinvented the loop. Let's do it properly today.

## Step 1: the `for` loop

```js
for (let i = 1; i <= 5; i++) {
  console.log(`Repetition number ${i}`);
}
```

A `for` has three parts separated by semicolons: where it starts (`let i = 1`), how long it continues (`i <= 5`), and what changes on each pass (`i++`, which adds 1). The result: five printed lines without writing `console.log` five times.

## Step 2: loop over an array with `for`

```js
const names = ['Ana', 'Luis', 'Sofia'];

for (let i = 0; i < names.length; i++) {
  console.log(`Hi, ${names[i]}!`);
}
```

`names.length` gives you the array's size, so the loop stops exactly where it should, no manual counting (or risking an embarrassing "undefined").

## Step 3: the `while` loop

```js
let attempts = 0;

while (attempts < 3) {
  console.log(`Attempt ${attempts + 1}`);
  attempts++;
}
```

`while` repeats the block while the condition is true. It's perfect when you don't know in advance how many times it'll repeat (for example, "until the user guesses the number").

## Watch out for this

```js
// while (true) { console.log('this never stops'); }
```

If you forget to update the variable controlling the condition, your loop never ends and your browser freezes. We've all done it at least once (well, technically at least once a week).

## What did you just learn?

- How to repeat code with `for` and `while`.
- How to loop over an array using its `.length`.
- Why an infinite loop is a bug, not a feature.


Learn for and while by creating a list of repeated greetings without copy-pasting code.

Tutorial: loops in JavaScript - repeat tasks without losing your mind


Your code, just like you, needs to make decisions all day long: "if the user is logged in, show this; if not, show that instead". That's called a conditional, and today you'll build a traffic light with them.

## Step 1: the simplest `if`

```js
const color = 'red';

if (color === 'red') {
  console.log('Stop');
}
```

`if (condition)` runs the block only if the condition is true. If `color` weren't `'red'`, nothing would happen. Thrilling, I know.

## Step 2: add an `else`

```js
if (color === 'red') {
  console.log('Stop');
} else {
  console.log('You can go');
}
```

`else` is plan B: it runs when the `if` is false. Now your code always says something, instead of going silent like when someone asks if you saw their message.

## Step 3: chain multiple options with `else if`

```js
function trafficLight(color) {
  if (color === 'red') {
    return 'Stop';
  } else if (color === 'yellow') {
    return 'Get ready';
  } else if (color === 'green') {
    return 'Go';
  } else {
    return 'Unknown color';
  }
}

console.log(trafficLight('yellow')); // 'Get ready'
```

`else if` lets you check several conditions in order, top to bottom, until one is true. That final `else` is your safety net for when nothing else applies (like when someone passes a color that doesn't exist, because there's always someone).

## Bonus challenge

Update `trafficLight` so that if you pass a color in uppercase (`'RED'`), it still works correctly. Hint: look up the `.toLowerCase()` method.

## What did you just learn?

- How to use `if`, `else`, and `else if` to make decisions.
- That conditions are evaluated in order, top to bottom.
- That a good final `else` keeps your code from going silent.


Learn if, else, and else if by building a traffic light that decides which message to show.

Tutorial: conditionals in JavaScript - a decision-making traffic light


Now that you have a page with HTML and CSS, let's add a button that reacts when someone clicks it. Relax, nothing's going to explode, it's just JavaScript.

## Step 1: add a button to your HTML

In your `index.html` file, inside `<body>`, add:

```html
<button id="greet-button">Say hi</button>
<p id="message"></p>
<script src="script.js"></script>
```

## Step 2: create your JavaScript file

Create `script.js` in the same folder:

```js
const button = document.querySelector('#greet-button');
const message = document.querySelector('#message');

button.addEventListener('click', () => {
  message.textContent = 'Hi! You just ran your first JavaScript.';
});
```

## Step 3: test it in the browser

Open `index.html`, click the "Say hi" button, and watch the message appear. If nothing happens, check the browser console before blaming your computer, it's almost always a typo (we know from experience, no judgment). You just:

1. Selected HTML elements from JavaScript.
2. Listened for an event (`click`).
3. Dynamically changed the page's content.

## Bonus challenge

Update the script so that, instead of a fixed message, it greets using the value of a text field:

```html
<input id="name" type="text" placeholder="Your name" />
```

```js
const input = document.querySelector('#name');

button.addEventListener('click', () => {
  message.textContent = `Hi, ${input.value || 'friend'}!`;
});
```

Congratulations! You just combined HTML, CSS, and JavaScript in a single project. Hold onto that ego boost, you earned it (even if there's a stray console.log hiding in there somewhere).


Add interactivity to your web page with your first JavaScript script, step by step.

JavaScript