Skip to content

fixed text README #29

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Nov 16, 2023
Merged

fixed text README #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
79db1c4
Update README.md
josemoracard Sep 20, 2023
a51c2eb
Update README.es.md
josemoracard Sep 20, 2023
45f7e49
Update README.md
josemoracard Sep 20, 2023
06b2683
Update README.es.md
josemoracard Sep 20, 2023
539fac4
Update README.md
josemoracard Sep 27, 2023
644e316
Update README.es.md
josemoracard Sep 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 28 additions & 31 deletions README.es.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Programación Orientada a Eventos con Javascript
# 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>

Expand All @@ -8,83 +8,80 @@
[![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)

Este tutorial es parte de un grupo de tutoriales sobre desarrollo web, este repositorio se enfoca solo en los Eventos de Javascript.
Este tutorial es parte de un grupo de tutoriales sobre desarrollo web, este repositorio se enfoca solo en los Eventos de JavaScript.
<!-- endhide -->
#### Aprenderás los siguientes conceptos:

1. Mouse events

2. Keyboard events
### Aprenderás los siguientes conceptos:

3. Frame Events

4. Como reaccioner antes esto eventos para que tu aplicación web sea interactiva.
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.

<!-- hide -->
#### Antes de empezar... hay otros tutoriales relacionados
### Antes de empezar... hay otros tutoriales relacionados

1. [Introducciónn a HTML](https://github.com/4GeeksAcademy/html-tutorial-exercises-course)
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 The DOM](https://github.com/4GeeksAcademy/javascript-dom-tutorial-exercises) ← you are here now 🔥
5. [Uso de eventos & The DOM](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises)
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)

<p align="center">
<img src="https://raw.githubusercontent.com/4GeeksAcademy/react-exercises/master/preview.gif">
</p>
<!-- endhide -->

## 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 abirto 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`
> 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) y `node.js` versión v14+ y jest v27. Este es el comando para instalar learnpack-cli y jest:
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:

```sh
```bash
$ npm i learnpack jest@27.0.6 -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 probar y compilar vanillajs:
3) Instala el plugin de LearnPack para testear y compilar vanillajs:

```sh
```bash
$ learnpack plugins:install learnpack-dom
```

4) Inicializa tutorial/exercises ejecutando el siguiente comando en la raíz del proyecto:
4) Inicializa el tutorial ejecutando el siguiente comando en la raíz del proyecto:

```sh
```bash
$ learnpack start
```

<!-- endhide -->


## ¿Cómo están organizados los ejercicios?

Cada ejercicio es un pequeño sitio web de vanillajs que contiene los siguientes archivos:
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.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 pero es un tanto rígida, te recomiendo ignorar los tests, considéralos como una recomendación o podrías frustrarte.
> 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) 📖
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) 🌎
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 [Curso 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).
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).
45 changes: 23 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Event-Oriented Programming with Javascript
# Event-Oriented Programming with 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>
Expand All @@ -9,81 +9,82 @@
[![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)

This tutorial its 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.
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.

*Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/javascript-events-tutorial-exercises/blob/master/README.es.md) :es:*
<!-- endhide -->


### What you will learn during this tutorial:

1. The first event that triggers on a website
2. make your code react to user clicks on buttons
3. Make a counter that increases when the user clicks
4. Add event listeners
1. The first event that triggers on a website.
2. Make your code react to user clicks on buttons.
3. Make a counter that increases when the user clicks.
4. Add event listeners.
5. What is the event target?

<!-- hide -->
### Before we start... other related tutorials

I strongly recommend doing this tutorials in this order:

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)
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 🔥
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)

## One click installation (recommended):

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).

> 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`
> 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`

## Local Installation

Clone the repository in your local environment and follow the steps below:

1) Make sure you have [learnpack](https://github.com/learnpack/learnpack-cli) installed and `node.js` version v14+ and jest v27. This is the command to install the learnpack-cli and jest:
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:

```sh
```bash
$ npm i learnpack jest@27.0.6 -g
```

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) Install the learnpack plugin to test and compile vanillajs:
```sh
3) Install the LearnPack plugin to test and compile vanillajs:

```bash
$ learnpack plugins:install learnpack-dom
```

4) Start the tutorial/exercises by running the following command from the root of the project:

```sh
```bash
$ learnpack start
```

<!-- endhide -->


## How are the exercises organized?

Each exercise is a small react application containing the following files:
Each exercise is a small React application containing the following files:

1. **app.js:** represents the entry python file that will be executed by the computer.
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
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.

> Note: The exercises have automatic grading but its very rigid and string, my recommendation is to ignore the tests and use them only as a recommendation or you can get frustrated.
> 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.

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖
1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻, (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀, (build-tutorial) ✅, (documentation) 📖

2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, contribution: (coder), (translation) 🌎
2. [Paolo (plucodev)](https://github.com/plucodev), contribution: (bug reports) 🐛, (coder) 💻, (translation) 🌎

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome!

Expand Down