https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises
https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises
- Owner: 4GeeksAcademy
- Created: 2020-05-07T23:21:43.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-14T21:45:42.000Z (5 months ago)
- Last Synced: 2024-11-14T22:29:59.753Z (5 months ago)
- Language: HTML
- Size: 572 KB
- Stars: 26
- Watchers: 4
- Forks: 217
- Open Issues: 3
-
Metadata Files:
- Readme: README.es.md
Awesome Lists containing this project
- jimsghstars - 4GeeksAcademy/javascript-events-tutorial-exercises - (HTML)
README
# Programación Orientada a Eventos con JavaScript
> 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/)
[](https://breatheco.de)
[](https://twitter.com/4geeksacademy)
Este tutorial es parte de un grupo de tutoriales sobre desarrollo web, este repositorio se enfoca solo en los Eventos de JavaScript.
### Aprenderás los siguientes conceptos:
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.
### Antes de empezar... hay otros 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)
## Instalación en un clic (recomendado)
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).
> 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`
## Instalación local
Clona el repositorio en tu ambiente local y sigue los siguientes pasos:
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:
```bash
$ npm i learnpack [email protected] -g
```
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) Instala el plugin de LearnPack para testear y compilar vanillajs:
```bash
$ learnpack plugins:install learnpack-dom
```
4) Inicializa el tutorial ejecutando el siguiente comando en la raíz del proyecto:
```bash
$ learnpack start
```
## ¿Cómo están organizados los ejercicios?
Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos:
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.
> 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.
## Colaboradores
Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (programador) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review), 🤓 (build-tutorial), ✅ (documentación) 📖
2. [Paolo (plucodev)](https://github.com/plucodev), contribución: (bug reports) 🐛, (programador) 💻, (traducción) 🌎
Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas!
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).