From f091d7e608d3fdd24f5e73459ee98586cb5de7ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:10:43 +0200
Subject: [PATCH 1/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines

---
 README.md | 245 ++++++++++++++++++++++++++++++++++++++++++------------
 1 file changed, 191 insertions(+), 54 deletions(-)

diff --git a/README.md b/README.md
index b2ab513..f13ae70 100644
--- a/README.md
+++ b/README.md
@@ -1,91 +1,228 @@
-# Event-Oriented Programming with JavaScript
+<!-- hide -->
+<div align="center">
+
+# Javascript Events
+
+[![certified by 4Geeks Academy](https://img.shields.io/badge/certified%20by-4Geeks%20Academy-2563eb)](https://4geeks.com/en/interactive-exercise/javascript-events-exercises)
+[![built with LearnPack](https://img.shields.io/badge/built%20with-LearnPack-2563eb)](https://github.com/learnpack/learnpack)
+[![open in Codespaces](https://img.shields.io/badge/open%20in-Codespaces-fb5a1f)](https://codespaces.new/?repo=4GeeksAcademy/javascript-events-tutorial-exercises)
+
+![Cover image of the tutorial: the text "Learn Javascript Events interactive" next to the yellow JavaScript hexagon logo](https://raw.githubusercontent.com/4GeeksAcademy/javascript-events-tutorial-exercises/master/.learn/assets/js-events.jpeg)
+
+</div>
+
+*These instructions are [also available in 🇪🇸 Spanish](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/HEAD/README.es.md).*
+<!-- endhide -->
+
+This interactive tutorial covers event handling in vanilla JavaScript across 10 exercise folders: one introduction plus 9 hands-on challenges. You practise the `onclick` attribute, `addEventListener`, the `load` event, `event.target`, and changing CSS from JavaScript. Each of the 9 challenges ships an `index.html`, an `index.js`, instructions in English and Spanish, and a reference solution file. Estimated time: 8 hours. Difficulty: beginner.
 
 <!-- hide -->
-<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/master/.learn/assets/badge.svg?raw=true"></a>
+## 📋 About this tutorial
+
++ **Difficulty:** beginner — it is the fifth step of the 4Geeks Academy web development track, right after The DOM.
 
-> By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/graphs/contributors) at [4Geeks Academy](https://4geeksacademy.co/)
++ **Estimated duration:** 8 hours.
 
-![last commit](https://img.shields.io/github/last-commit/4geeksacademy/javascript-arrays-exercises-tutorial)
-[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de)
-[![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy)
++ **Exercises:** 10 folders inside `exercises/` — `00-introduction` (reading only) plus 9 exercises where you write code.
 
-This tutorial is part of a bigger group of tutorials about web development, this repository focuses only on JavaScript Events, you will learn Mouse Events, Keyboard events, Frame Events and how to react to those events to make your web application interactive.
++ **Technologies:** vanilla JavaScript, HTML and CSS. No frameworks, no build step, no `npm install` inside the exercises.
 
-*Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/master/README.es.md) :es:* 
++ **Grading:** disabled. `learn.json` sets `"disableGrading": true` and no exercise contains a test file, so nothing marks your answer automatically.
+
++ **Solutions:** each of the 9 coding exercises ships a reference solution: `solution.hide.js` in all of them except `01`, and `solution.hide.html` in `01`, `02`, `05` and `07`, the four where the HTML changes.
+
++ **Languages:** every exercise has both `README.md` (English) and `README.es.md` (Spanish).
 <!-- endhide -->
 
+## 🎯 What will you learn?
+
+An event is anything that happens on the page and that your code can react to: a click, a key press, the window finishing its load. Handling events is what turns a static document into an application. By the end of these exercises you will be able to:
+
++ Attach a handler straight from the HTML with the [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event) attribute, which is how exercises `01`, `02`, `03`, `04`, `07` and `07.1` wire their buttons.
+
++ Register handlers at runtime with [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), the technique used in exercises `06` and `08`.
+
++ Wait for the [`load`](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event) event before touching the page, either with `window.onload` or with the `onload` attribute of the `<body>` tag.
+
++ Read what the user typed with `input.value`, convert it with `parseInt`, and write the result back into another input.
+
++ Change CSS from JavaScript through the `element.style` object, for instance hiding a `<div>` with `style.display = "none"`.
+
++ Keep state between clicks in a global variable and repaint the screen with `innerHTML` after every change.
+
++ Use the [event object](https://developer.mozilla.org/en-US/docs/Web/API/Event/target) that the browser passes to your handler, and identify the exact element the user clicked with `event.target`.
+
+## 👀 What will you build?
+
+`exercises/00-introduction` is a short welcome page with no code. The other 9 folders are small websites you have to finish:
+
++ **`01` Alert onclick** — the page has two buttons and `myClickFunction` already alerts "Your first function!". You add the same function as the `onclick` listener of `#button2`.
+
++ **`02` onclick Hello World** — nothing is wired yet: you declare the listener function in `index.js` and set it as the `onclick` property of the `#hello` input so a click alerts "Hello World".
+
++ **`03` Sum Values** — complete `calculateSumListener` so the sum of the `#firstNumber` and `#secondNumber` inputs is written into the `value` of the `#resultNumber` input.
+
++ **`04` Hide onclick** — complete `myEventListener` so clicking the button hides the green `#firstDiv` while the yellow `#secondDiv` stays visible.
+
++ **`05` The load Event** — create a function called `loadListener` that alerts "Loading finished..." and make the `<body>` run it on load.
+
++ **`06` Add Listener With JS** — the page already alerts when it finishes loading. You use `addEventListener` on the `#theGreen` button so clicking it alerts "woohoo!".
+
++ **`07` Count onclick** — the counter only goes up. You add a Decrease button and a handler that subtracts one from the global `counter` and refreshes the `#screen` heading.
+
++ **`07.1` Change Turn on Click** — the turn switches between Mario and Juan. You extend the `turnChanger` function so a third player, Josh, joins the rotation.
+
++ **`08` Event Target** — a single click listener sits on the `#container` div, which holds a button, a link and an image. You alert the `id` of the element that was actually clicked.
+
+Each exercise is a real page you can run and click on while you read the instructions next to it:
+
+![Animated capture of exercise 06 running inside the LearnPack editor: the index.html and index.js tabs with the run button on the left, the green button rendered in the preview underneath, and the exercise instructions on the right](https://raw.githubusercontent.com/4GeeksAcademy/javascript-events-tutorial-exercises/master/.learn/assets/a1mgdPD.gif)
+
+## 🎓 What do you need before starting?
+
+No previous knowledge of events is required, but the exercises assume you are comfortable with:
+
++ **Basic HTML** — tags such as `<button>`, `<input>` and `<div>`, the `id` attribute, and the `<script>` tag, because every exercise selects elements by id.
+
++ **Basic CSS** — properties like `display` and `background`, since you will change them from JavaScript instead of from a stylesheet.
 
-### What you will learn during this tutorial:
++ **Basic JavaScript** — variables, functions, `if / else if / else`, string concatenation and `parseInt`.
 
-1. The first event that triggers on a website.
-2. Make your code react to user clicks on buttons.
-3. Create a counter that increases when the user clicks.
-4. Add event listeners.
-5. What is the event target?
++ **Basic DOM** — `document.getElementById`, `document.querySelector`, `innerHTML`, `.value` and `.style`. If those look unfamiliar, do [Learn how to manipulate The DOM with JS](https://4geeks.com/en/interactive-exercise/the-dom-exercises) first.
+
+## ✅ How do you check your answers?
+
+There is no autograder here. `learn.json` sets `"disableGrading": true` and none of the 10 folders contains a test file, so the feedback loop is visual instead of automatic:
+
++ **Run the page.** LearnPack renders `index.html` next to the instructions, so you click your own button and see whether the alert fires, the div disappears or the counter moves.
+
++ **Read the expected result carefully.** Several exercises ask for an exact string: "Hello World" in `02`, "Loading finished..." in `05`, "woohoo!" in `06`. Match them literally.
+
++ **Compare with the reference solution.** Eight of the nine coding exercises have a `solution.hide.js` file in their folder, and `01`, `02`, `05` and `07` ship a `solution.hide.html` too, because their HTML changes as well. Exercise `01` is solved entirely in the HTML, so `solution.hide.html` is its only solution file.
+
+> 💡 Because nothing is checked automatically, the honest test is whether the page behaves as described. Read the instructions, run it, and only then peek at the solution.
+
+## 💡 What mistakes should you avoid?
+
+These are the traps that cost beginners the most time in this specific tutorial:
+
++ **Dropping the `window.` prefix that the starter code uses.** Files like `03` and `04` declare their handler as `window.calculateSumListener = function() {...}` and `window.myEventListener = function() {...}` on purpose: the HTML calls those functions from an inline `onclick` attribute, so they must live in the global scope.
+
++ **Concatenating instead of adding in `03`.** An input always returns a string, so `"2" + "2"` gives `"22"`. Wrap both values in `parseInt` before adding them.
+
++ **Writing the result with `innerHTML` in `03`.** `#resultNumber` is an `<input>`, and an input shows what is in its `value` property, not what is between its tags.
+
++ **Only declaring the function in `05`.** Creating `loadListener` is half the job: the listener has to be attached to the body, which is why the reference solution also edits `index.html` and adds `onload="loadListener()"` to the `<body>` tag.
+
++ **Calling the handler instead of passing it in `06`.** `addEventListener("click", myClickFunction())` runs the function immediately and registers its return value; the correct form passes the reference, without parentheses.
+
++ **Changing the counter but not the screen in `07`.** The `#screen` heading does not update by itself: after `counter--` you have to rewrite its `innerHTML`, exactly as `increaseCounter` already does.
+
++ **Using `else` instead of `else if` in `07.1`.** With only two branches Josh never gets a turn. You need a chained condition so the rotation goes Mario, then Juan, then Josh, and back to Mario.
+
++ **Alerting the container in `08`.** The listener is attached to `#container`, but the answer is `event.target.id`, the element that was actually clicked: `btn1`, `anchor1` or `img1`.
+
+## ❓ Frequently asked questions
+
+### What is the difference between the `onclick` attribute and `addEventListener`?
+
+Both run your function when the user clicks. The `onclick` attribute lives in the HTML, is easy to read, and holds a single handler: assigning a second one replaces the first. `addEventListener` is called from JavaScript at runtime, accepts many handlers on the same element and the same event, and can be undone with `removeEventListener`. This tutorial makes you practise both, first the attribute and then the method.
+
+### Why do I need to wait for the `load` event?
+
+Because the browser reads your HTML from top to bottom. If your script runs before the element exists, `document.getElementById` returns `null` and your code breaks. Exercise `05` introduces the `load` event and exercises `06`, `07`, `07.1` and `08` already put their setup code inside `window.onload` for the same reason.
+
+### What is `event.target` and why is it useful?
+
+Every handler receives an event object with information about what just happened, and `target` is the element that originated it. That lets one listener serve many elements: in exercise `08` a single listener on the container tells you whether the user clicked the button, the link or the image.
+
+### Do these exercises correct themselves automatically?
+
+No. Grading is disabled in `learn.json` and the repository contains no test files, so nothing scores your code. You verify by running the page and, if you get stuck, by comparing your file with the `solution.hide.js` (or the `solution.hide.html`, in exercise `01`) shipped in each exercise folder.
+
+### Do I need to install anything to run the tutorial?
+
+No. Opening the repository in GitHub Codespaces gives you a ready container based on the Node.js 22 image, with LearnPack and its DOM plugin installed by the devcontainer, and the exercises start on their own. Installing locally only makes sense if you prefer to work offline.
+
+### Is this tutorial free, and who owns the code I write?
+
+Access costs nothing and the JavaScript you write in the exercises is yours. The tutorial material itself is not published as open source: the repository is public but ships no LICENSE file, so all rights over the content remain with its authors.
 
 <!-- hide -->
-### Before we start... other related tutorials
+## 📚 Related tutorials
 
-1. [Introduction to HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course)
-2. [Introduction to CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
-3. [Introduction to JavaScript](https://github.com/4GeeksAcademy/javascript-beginner-exercises-tutorial)
-4. [Introduction to The DOM](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises)
-5. [Using events & The DOM](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises) ← You are here now 🔥
-6. [Object Oriented Programming](https://github.com/4GeeksAcademy/object-oriented-javascript-tutorial-exercises)
+This tutorial is one step of a longer web development series. The recommended order is:
 
-## One click installation (recommended):
+1. [Introduction to HTML](https://4geeks.com/en/interactive-exercise/html-exercises)
+2. [Introduction to CSS](https://4geeks.com/en/interactive-exercise/css-exercises)
+3. [Introduction to JavaScript](https://4geeks.com/en/interactive-exercise/javascript-beginner-exercises)
+4. [Introduction to The DOM](https://4geeks.com/en/interactive-exercise/the-dom-exercises)
+5. [Using events and The DOM](https://4geeks.com/en/interactive-exercise/javascript-events-exercises) ← you are here 🔥
+6. [Object Oriented Programming in JavaScript](https://4geeks.com/en/interactive-exercise/object-oriented-programing-in-javascript)
 
-You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-events-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises).
+Two good follow-ups once you finish: [HTML Forms](https://4geeks.com/en/interactive-exercise/forms-exercises) and [Master JavaScript by practising](https://4geeks.com/en/interactive-exercise/master-javascript-exercises).
 
-> Once you have VSCode open, the LearnPack exercises should start automatically. If exercises don't run automatically you can try typing on your terminal: `$ learnpack start`
+## 🚀 How to start
 
-## Local Installation
+The fastest way is the one-click option, with no local setup.
 
-Clone the repository in your local environment and follow the steps below:
+1. Open the repository in [GitHub Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-events-tutorial-exercises) and wait for the container to build.
 
-1) Make sure you have [LearnPack](https://github.com/learnpack/learnpack-cli), `node.js` version v14+, and jest v27 installed. This is the command to install the learnpack-cli and jest:
+2. LearnPack should start by itself once VSCode is ready. If it does not, run it from the terminal:
 
-```bash
-$ npm i learnpack jest@29.7.0 jest-environment-jsdom@29.7.0 -g
-```
+    ```bash
+    learnpack start
+    ```
 
-2) Clone or download this repository. Once you finish downloading, you will find a new folder with a subdirectory "exercises" that contains all the exercises within.
+3. Read the instructions, edit `index.js` (and `index.html` when the exercise asks for it), and press the build button to preview the page.
 
-3) Install the LearnPack plugin to test and compile vanillajs:
+> 💡 Do the exercises in order: each one reuses the technique introduced by the previous one, and `07.1` practises the same global-state idea as `07`.
 
-```bash
-$ learnpack plugins:install @learnpack/dom
-```
+## 💻 Local installation
 
-4) Start the tutorial/exercises by running the following command from the root of the project:
+If you prefer to work on your own machine:
 
-```bash
-$ learnpack start
-```
+1. Install Node.js 22, which is the version used by the container and the repository CI, and then LearnPack plus its DOM plugin:
 
-<!-- endhide -->
+    ```bash
+    npm i -g @learnpack/learnpack@5.0.348
+    learnpack plugins:install @learnpack/dom@1.1.7
+    ```
+
+2. Clone the repository and move into the folder it creates:
+
+    ```bash
+    git clone https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises.git
+    cd javascript-events-tutorial-exercises
+    ```
 
+3. Start the tutorial from the root of the project:
 
-## How are the exercises organized?
+    ```bash
+    learnpack start
+    ```
 
-Each exercise is a small React application containing the following files:
+## 📚 How the exercises are organized
 
-1. **index.js:** represents the entry JavaScript file that will be executed by the computer.
-1. **index.html:** represents the entry website.
-1. **style.css:** your website styles, they have to be imported from the index.html.
-2. **README.md:** contains exercise instructions.
-3. **test.js:** you don't have to open this file, it contains the testing script for the exercise.
+Every exercise lives in its own folder inside [`exercises/`](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/tree/HEAD/exercises) and is a small standalone website:
 
-> Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated.
++ **`index.html`** — the page. It already contains the elements you have to react to, and the `<script>` tag that loads your JavaScript.
 
-## Contributors
++ **`index.js`** — the file you edit. Almost every exercise gives you starter code with a comment marking the spot where your code goes.
 
-Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
++ **`styles.css`** — only in exercise `04`, imported from the HTML.
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀, (build-tutorial) ✅, (documentation) 📖
++ **`README.md`** and **`README.es.md`** — the instructions, in English and Spanish.
 
-2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, (coder) 💻, (translation) 🌎
++ **`solution.hide.js`** and **`solution.hide.html`** — the reference solution, which LearnPack keeps hidden in the editor and you can always read in the repository.
 
-This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!
+Found a bug or something out of date? Open an issue at [learnpack/learnpack](https://github.com/learnpack/learnpack/issues/new).
 
-This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and  [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
+## 🤝 Contributors
+
++ [Alejandro Sánchez (@alesanchezr)](https://github.com/alesanchezr) — code 💻, idea 🤔, tutorial 📖.
+
++ [Paolo (@plucodev)](https://github.com/plucodev) — bug reports 🐛, code 💻, translation 🌎.
+
+Thanks to [everyone else who has contributed](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/graphs/contributors). This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification, and contributions of any kind are welcome.
+<!-- endhide -->

From 667225fa1a1a2c935eab3eecc926f264d58f3e0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:10:45 +0200
Subject: [PATCH 2/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines

---
 README.es.md | 247 ++++++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 194 insertions(+), 53 deletions(-)

diff --git a/README.es.md b/README.es.md
index 00f9f69..353c19f 100644
--- a/README.es.md
+++ b/README.es.md
@@ -1,87 +1,228 @@
-# Programación Orientada a Eventos con JavaScript
 <!-- hide -->
-<a href="https://www.4geeksacademy.co"><img height="280" align="right" src="https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/master/.learn/assets/badge.svg?raw=true"></a>
+<div align="center">
 
-> Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/graphs/contributors) en [4Geeks Academy](https://4geeksacademy.co/)
+# Eventos de Javascript
 
-![last commit](https://img.shields.io/github/last-commit/4geeksacademy/javascript-arrays-exercises-tutorial)
-[![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de)
-[![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy)
+[![certificado por 4Geeks Academy](https://img.shields.io/badge/certificado%20por-4Geeks%20Academy-2563eb)](https://4geeks.com/es/interactive-exercise/javascript-events-exercises-es)
+[![hecho con LearnPack](https://img.shields.io/badge/hecho%20con-LearnPack-2563eb)](https://github.com/learnpack/learnpack)
+[![abrir en Codespaces](https://img.shields.io/badge/abrir%20en-Codespaces-fb5a1f)](https://codespaces.new/?repo=4GeeksAcademy/javascript-events-tutorial-exercises)
 
-Este tutorial es parte de un grupo de tutoriales sobre desarrollo web, este repositorio se enfoca solo en los Eventos de JavaScript.
+![Imagen de portada del tutorial: el texto "Learn Javascript Events interactive" junto al logo hexagonal amarillo de JavaScript](https://raw.githubusercontent.com/4GeeksAcademy/javascript-events-tutorial-exercises/master/.learn/assets/js-events.jpeg)
+
+</div>
+
+*Estas instrucciones [también están disponibles en 🇺🇸 inglés](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/HEAD/README.md).*
 <!-- endhide -->
 
+Este tutorial interactivo enseña a manejar eventos con JavaScript puro a lo largo de 10 carpetas de ejercicios: una introducción y 9 retos para escribir código. Practicas el atributo `onclick`, `addEventListener`, el evento `load`, `event.target` y cómo cambiar el CSS desde JavaScript. Cada uno de los 9 retos trae su `index.html`, su `index.js`, instrucciones en español e inglés y un fichero con la solución de referencia. Duración estimada: 8 horas. Dificultad: principiante.
+
+<!-- hide -->
+## 📋 Sobre este tutorial
+
++ **Dificultad:** principiante — es el quinto paso de la ruta de desarrollo web de 4Geeks Academy, justo después de El DOM.
+
++ **Duración estimada:** 8 horas.
+
++ **Ejercicios:** 10 carpetas dentro de `exercises/` — `00-introduction` (solo lectura) y 9 ejercicios en los que escribes código.
+
++ **Tecnologías:** JavaScript puro, HTML y CSS. Sin frameworks, sin proceso de build y sin `npm install` dentro de los ejercicios.
+
++ **Corrección:** desactivada. `learn.json` tiene `"disableGrading": true` y ningún ejercicio incluye fichero de tests, así que nada califica tu respuesta de forma automática.
+
++ **Soluciones:** cada uno de los 9 ejercicios de código trae su solución de referencia: `solution.hide.js` en todos menos en el `01`, y `solution.hide.html` en el `01`, el `02`, el `05` y el `07`, que son los cuatro en los que cambia el HTML.
+
++ **Idiomas:** todos los ejercicios tienen `README.es.md` (español) y `README.md` (inglés).
+<!-- endhide -->
+
+## 🎯 ¿Qué vas a aprender?
+
+Un evento es cualquier cosa que ocurre en la página y a la que tu código puede reaccionar: un clic, una tecla, la ventana que termina de cargar. Manejar eventos es justo lo que convierte un documento estático en una aplicación. Al terminar estos ejercicios vas a saber:
+
++ Asignar una función directamente desde el HTML con el atributo [`onclick`](https://developer.mozilla.org/es/docs/Web/API/Element/click_event), que es como conectan sus botones los ejercicios `01`, `02`, `03`, `04`, `07` y `07.1`.
+
++ Registrar funciones en tiempo de ejecución con [`addEventListener`](https://developer.mozilla.org/es/docs/Web/API/EventTarget/addEventListener), la técnica que se practica en los ejercicios `06` y `08`.
+
++ Esperar al evento [`load`](https://developer.mozilla.org/es/docs/Web/API/Window/load_event) antes de tocar la página, ya sea con `window.onload` o con el atributo `onload` de la etiqueta `<body>`.
+
++ Leer lo que escribió la persona usuaria con `input.value`, convertirlo con `parseInt` y devolver el resultado a otro input.
+
++ Cambiar el CSS desde JavaScript a través del objeto `element.style`, por ejemplo ocultando un `<div>` con `style.display = "none"`.
+
++ Guardar estado entre clics en una variable global y repintar la pantalla con `innerHTML` después de cada cambio.
+
++ Usar el [objeto del evento](https://developer.mozilla.org/es/docs/Web/API/Event/target) que el navegador le pasa a tu función e identificar con `event.target` el elemento exacto en el que se hizo clic.
+
+## 👀 ¿Qué vas a construir?
+
+`exercises/00-introduction` es una bienvenida corta, sin código. Las otras 9 carpetas son pequeñas webs que tienes que terminar:
+
++ **`01` Alert onclick** — la página tiene dos botones y la función `myClickFunction` ya muestra la alerta "Your first function!". Tú añades esa misma función como listener del `onclick` de `#button2`.
+
++ **`02` onclick Hello World** — aquí no hay nada conectado: declaras la función en `index.js` y la asignas a la propiedad `onclick` del input `#hello` para que al hacer clic aparezca "Hello World".
+
++ **`03` Sum Values** — completas `calculateSumListener` para que la suma de los inputs `#firstNumber` y `#secondNumber` se escriba en el `value` del input `#resultNumber`.
+
++ **`04` Hide onclick** — completas `myEventListener` para que, al pulsar el botón, desaparezca el div verde `#firstDiv` y siga visible el amarillo `#secondDiv`.
+
++ **`05` The load Event** — creas una función llamada `loadListener` que muestre la alerta "Loading finished..." y haces que el `<body>` la ejecute al cargar.
+
++ **`06` Add Listener With JS** — la página ya avisa cuando termina de cargar. Tú usas `addEventListener` sobre el botón `#theGreen` para que al pulsarlo salga la alerta "woohoo!".
+
++ **`07` Count onclick** — el contador solo sube. Añades un botón para restar y una función que baje en uno la variable global `counter` y refresque el titular `#screen`.
+
++ **`07.1` Change Turn on Click** — el turno alterna entre Mario y Juan. Amplías la función `turnChanger` para que entre en la rotación un tercer jugador, Josh.
+
++ **`08` Event Target** — hay un único listener de clic sobre el div `#container`, que contiene un botón, un enlace y una imagen. Tienes que mostrar en una alerta el `id` del elemento que se pulsó de verdad.
+
+Cada ejercicio es una página real que puedes ejecutar y clicar mientras lees las instrucciones al lado:
+
+![Captura animada del ejercicio 06 dentro del editor de LearnPack: las pestañas index.html e index.js con el botón de ejecutar a la izquierda, el botón verde renderizado en la vista previa debajo y las instrucciones del ejercicio a la derecha](https://raw.githubusercontent.com/4GeeksAcademy/javascript-events-tutorial-exercises/master/.learn/assets/a1mgdPD.gif)
+
+## 🎓 ¿Qué necesitas saber antes de empezar?
+
+No hace falta que sepas nada de eventos, pero los ejercicios dan por hecho que te manejas con:
+
++ **HTML básico** — etiquetas como `<button>`, `<input>` y `<div>`, el atributo `id` y la etiqueta `<script>`, porque todos los ejercicios seleccionan elementos por su id.
+
++ **CSS básico** — propiedades como `display` y `background`, ya que las vas a cambiar desde JavaScript y no desde una hoja de estilos.
 
-### Aprenderás los siguientes conceptos:
++ **JavaScript básico** — variables, funciones, `if / else if / else`, concatenación de cadenas y `parseInt`.
 
-1. Eventos del ratón.
-2. Eventos del teclado.
-3. Eventos de ventana.
-4. Como reaccionar ante estos eventos para que tu aplicación web sea interactiva.
++ **DOM básico** — `document.getElementById`, `document.querySelector`, `innerHTML`, `.value` y `.style`. Si eso te suena raro, haz antes [Aprende cómo manipular el DOM con JavaScript](https://4geeks.com/es/interactive-exercise/the-dom-exercises-es).
+
+## ✅ ¿Cómo compruebas que tu respuesta es correcta?
+
+Aquí no hay corrección automática. `learn.json` tiene `"disableGrading": true` y ninguna de las 10 carpetas incluye fichero de tests, así que la comprobación es visual:
+
++ **Ejecuta la página.** LearnPack muestra el `index.html` junto a las instrucciones, así que pulsas tu propio botón y ves si salta la alerta, si desaparece el div o si se mueve el contador.
+
++ **Fíjate en el resultado esperado.** Varios ejercicios piden un texto exacto: "Hello World" en el `02`, "Loading finished..." en el `05` y "woohoo!" en el `06`. Cópialos tal cual.
+
++ **Compara con la solución de referencia.** Ocho de los nueve ejercicios de código tienen un `solution.hide.js` en su carpeta, y el `01`, el `02`, el `05` y el `07` traen además un `solution.hide.html`, porque también cambia su HTML. El `01` se resuelve entero en el HTML, así que su única solución es el `solution.hide.html`.
+
+> 💡 Como nada se corrige solo, la prueba de verdad es que la página se comporte como dice el enunciado. Léelo, ejecútalo y solo entonces mira la solución.
+
+## 💡 ¿Qué errores conviene evitar?
+
+Estas son las trampas que más tiempo cuestan en este tutorial concreto:
+
++ **Quitar el `window.` que trae el código inicial.** Ficheros como el del `03` y el `04` declaran su función como `window.calculateSumListener = function() {...}` y `window.myEventListener = function() {...}` a propósito: el HTML llama a esas funciones desde un atributo `onclick`, así que tienen que existir en el ámbito global.
+
++ **Concatenar en vez de sumar en el `03`.** Un input siempre devuelve texto, así que `"2" + "2"` da `"22"`. Pasa los dos valores por `parseInt` antes de sumarlos.
+
++ **Escribir el resultado con `innerHTML` en el `03`.** `#resultNumber` es un `<input>`, y un input muestra lo que hay en su propiedad `value`, no lo que va entre etiquetas.
+
++ **Quedarte solo en declarar la función en el `05`.** Crear `loadListener` es la mitad del trabajo: el listener tiene que quedar asignado al body, por eso la solución de referencia también edita el `index.html` y añade `onload="loadListener()"` a la etiqueta `<body>`.
+
++ **Llamar a la función en lugar de pasarla en el `06`.** `addEventListener("click", myClickFunction())` la ejecuta al momento y registra lo que devuelve; lo correcto es pasar la referencia, sin paréntesis.
+
++ **Cambiar el contador y olvidarte de la pantalla en el `07`.** El titular `#screen` no se actualiza solo: después de `counter--` hay que reescribir su `innerHTML`, igual que ya hace `increaseCounter`.
+
++ **Usar `else` en vez de `else if` en el `07.1`.** Con solo dos ramas Josh nunca llega a jugar. Necesitas encadenar la condición para que la rotación sea Mario, luego Juan, luego Josh y de vuelta a Mario.
+
++ **Mostrar el contenedor en el `08`.** El listener está puesto en `#container`, pero la respuesta es `event.target.id`, el elemento que se pulsó realmente: `btn1`, `anchor1` o `img1`.
+
+## ❓ Preguntas frecuentes
+
+### ¿Qué diferencia hay entre el atributo `onclick` y `addEventListener`?
+
+Los dos ejecutan tu función cuando alguien hace clic. El atributo `onclick` vive en el HTML, se lee de un vistazo y admite una sola función: si asignas otra, sustituye a la anterior. `addEventListener` se llama desde JavaScript en tiempo de ejecución, permite varias funciones sobre el mismo elemento y el mismo evento, y se puede deshacer con `removeEventListener`. En este tutorial practicas los dos, primero el atributo y después el método.
+
+### ¿Por qué hay que esperar al evento `load`?
+
+Porque el navegador lee tu HTML de arriba abajo. Si tu script se ejecuta antes de que exista el elemento, `document.getElementById` devuelve `null` y todo se rompe. El ejercicio `05` presenta el evento `load`, y los ejercicios `06`, `07`, `07.1` y `08` ya traen su código de arranque dentro de `window.onload` por ese mismo motivo.
+
+### ¿Qué es `event.target` y para qué sirve?
+
+Cada función manejadora recibe un objeto de evento con información de lo que acaba de pasar, y `target` es el elemento que lo originó. Eso permite que un solo listener atienda a muchos elementos: en el ejercicio `08`, un único listener en el contenedor te dice si se pulsó el botón, el enlace o la imagen.
+
+### ¿Estos ejercicios se corrigen solos?
+
+No. La corrección está desactivada en `learn.json` y el repositorio no contiene ficheros de tests, así que nada puntúa tu código. Lo compruebas ejecutando la página y, si te atascas, comparando tu fichero con el `solution.hide.js` (o con el `solution.hide.html`, en el ejercicio `01`) que hay en cada carpeta de ejercicio.
+
+### ¿Necesito instalar algo para hacer el tutorial?
+
+No. Al abrir el repositorio en GitHub Codespaces obtienes un contenedor basado en la imagen de Node.js 22, con LearnPack y su plugin de DOM ya instalados por el devcontainer, y los ejercicios arrancan solos. Instalarlo en tu máquina solo compensa si prefieres trabajar sin conexión.
+
+### ¿Es gratis y de quién es el código que escribo?
+
+Acceder no cuesta nada y el JavaScript que escribas en los ejercicios es tuyo. El material del tutorial no está publicado como código abierto: el repositorio es público pero no incluye fichero LICENSE, así que todos los derechos sobre el contenido siguen siendo de sus autores.
 
 <!-- hide -->
-### Antes de empezar... hay otros tutoriales relacionados
+## 📚 Tutoriales relacionados
 
-1. [Introducción a HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course)
-2. [Introducción a CSS](https://github.com/4GeeksAcademy/css-tutorial-exercises-course)
-3. [Introducción a JavaScript](https://github.com/4GeeksAcademy/javascript-beginner-exercises-tutorial)
-4. [Introducción a El DOM](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises) 
-5. [Uso de eventos & El DOM](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises) ← Estás aquí 🔥
-6. [Programación Orientada a Objetos](https://github.com/4GeeksAcademy/object-oriented-javascript-tutorial-exercises)
+Este tutorial es un paso de una serie más larga sobre desarrollo web. El orden recomendado es:
 
-## Instalación en un clic (recomendado)
+1. [Introducción a HTML](https://4geeks.com/es/interactive-exercise/html-exercises-es)
+2. [Introducción a CSS](https://4geeks.com/es/interactive-exercise/css-exercises-es)
+3. [Introducción a JavaScript](https://4geeks.com/es/interactive-exercise/ejercicios-javascript-para-principiantes)
+4. [Introducción a El DOM](https://4geeks.com/es/interactive-exercise/the-dom-exercises-es)
+5. [Uso de eventos y El DOM](https://4geeks.com/es/interactive-exercise/javascript-events-exercises-es) ← estás aquí 🔥
+6. [Programación Orientada a Objetos en JavaScript](https://4geeks.com/es/interactive-exercise/object-oriented-programing-in-javascript-es)
 
-Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-events-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises.git).
+Dos buenas continuaciones al terminar: [Formularios en HTML](https://4geeks.com/es/interactive-exercise/forms-exercises-es) y [Domina JavaScript practicando](https://4geeks.com/es/interactive-exercise/master-javascript-exercises-es).
 
-> Una vez ya tengas abierto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start`
+## 🚀 Cómo empezar
 
-## Instalación local
+La vía más rápida es la instalación en un clic, sin configurar nada en tu equipo.
 
-Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
+1. Abre el repositorio en [GitHub Codespaces](https://codespaces.new/?repo=4GeeksAcademy/javascript-events-tutorial-exercises) y espera a que se construya el contenedor.
 
-1) Asegúrate de tener instalado [LearnPack](https://github.com/learnpack/learnpack-cli), `node.js` versión v14+ y jest v27. Este es el comando para instalar learnpack-cli y jest:
+2. LearnPack debería arrancar solo en cuanto VSCode esté listo. Si no lo hace, ejecútalo desde la terminal:
 
-```bash
-$ npm i learnpack jest@27.0.6 -g
-```
+    ```bash
+    learnpack start
+    ```
 
-2) Clona o descarga este repositorio. Una vez que termines de descargar, encontrarás una nueva carpeta con un subdirectorio "exercises" que contiene todos los ejercicios dentro.
+3. Lee las instrucciones, edita el `index.js` (y el `index.html` cuando el ejercicio lo pida) y pulsa el botón de build para ver la página.
 
-3) Instala el plugin de LearnPack para testear y compilar vanillajs:
+> 💡 Haz los ejercicios en orden: cada uno reutiliza la técnica del anterior, y el `07.1` practica la misma idea de estado global que el `07`.
 
-```bash
-$ learnpack plugins:install learnpack-dom
-```
+## 💻 Instalación local
 
-4) Inicializa el tutorial ejecutando el siguiente comando en la raíz del proyecto:
+Si prefieres trabajar en tu propia máquina:
 
-```bash
-$ learnpack start
-```
+1. Instala Node.js 22, que es la versión que usan el contenedor y la CI del repositorio, y después LearnPack con su plugin de DOM:
 
-<!-- endhide -->
+    ```bash
+    npm i -g @learnpack/learnpack@5.0.348
+    learnpack plugins:install @learnpack/dom@1.1.7
+    ```
+
+2. Clona el repositorio y entra en la carpeta que se crea:
+
+    ```bash
+    git clone https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises.git
+    cd javascript-events-tutorial-exercises
+    ```
+
+3. Arranca el tutorial desde la raíz del proyecto:
 
+    ```bash
+    learnpack start
+    ```
 
-## ¿Cómo están organizados los ejercicios?
+## 📚 Cómo están organizados los ejercicios
 
-Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
+Cada ejercicio vive en su propia carpeta dentro de [`exercises/`](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/tree/HEAD/exercises) y es una pequeña web independiente:
 
-1. **index.js:** representa el archivo JavaScript de entrada que se ejecutará cuando se cargue el sitio web.
-1. **index.html:** representa la entrada HTML para el sitio web.
-1. **style.css:** los estilos de tu sitio web, deben importarse desde index.html
-2. **README.md:** contiene las instrucciones de los ejercicios.
-3. **test.js:** no tienes que abrir este archivo, contiene el script de test para el ejercicio.
++ **`index.html`** — la página. Ya contiene los elementos a los que tienes que reaccionar y la etiqueta `<script>` que carga tu JavaScript.
 
-> Nota: Estos ejercicios tienen calificación automática. Los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte.
++ **`index.js`** — el fichero que editas. Casi todos traen código inicial con un comentario que marca el sitio donde va tu código.
 
-## Colaboradores
- 
-Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
++ **`styles.css`** — solo en el ejercicio `04`, importado desde el HTML.
 
-1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review), 🤓 (build-tutorial), ✅ (documentación) 📖
++ **`README.es.md`** y **`README.md`** — las instrucciones, en español e inglés.
 
-2. [Paolo (plucodev)](https://github.com/plucodev), contribución: (bug reports) 🐛, (programador) 💻, (traducción) 🌎
++ **`solution.hide.js`** y **`solution.hide.html`** — la solución de referencia, que LearnPack mantiene oculta en el editor y que siempre puedes leer en el repositorio.
 
-Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
+¿Has encontrado un fallo o algo desactualizado? Abre un issue en [learnpack/learnpack](https://github.com/learnpack/learnpack/issues/new).
 
-Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
+## 🤝 Colaboradores
+
++ [Alejandro Sánchez (@alesanchezr)](https://github.com/alesanchezr) — código 💻, idea 🤔, tutorial 📖.
+
++ [Paolo (@plucodev)](https://github.com/plucodev) — reporte de bugs 🐛, código 💻, traducción 🌎.
+
+Gracias también a [todas las demás personas que han contribuido](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/graphs/contributors). Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors) y toda contribución es bienvenida.
+<!-- endhide -->

From b06e32e9c6c2b415c51b09c2a816c123127e88fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:12:41 +0200
Subject: [PATCH 3/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines


From d12043ff492ab5dd8f7a1fc04ca2b7477a18738d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nacho=20L=C3=B3pez?=
 <145539062+KrilinZ@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:12:42 +0200
Subject: [PATCH 4/4] docs(readme): rewrite for clarity, SEO and AI answer
 engines