Skip to content

Commit

Permalink
Merge pull request #16 from josemoracard/jose1-README
Browse files Browse the repository at this point in the history
fixed text README
  • Loading branch information
tommygonzaleza authored Oct 25, 2023
2 parents 2e9c0d2 + 89d84f2 commit 98ac33d
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 19 deletions.
22 changes: 11 additions & 11 deletions README.es.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<!-- hide -->
# Applicación de TODO (tareas) con React.js
# Aplicación de TODO (tareas) con React.js
<!-- endhide -->

<p align="center">
<img height="200" src="https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true" />
<img height="450" src="https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true" />
</p>

Crea una aplicación de lista de TODO que permita a los usuarios agregar y eliminar tareas.
Expand All @@ -12,34 +12,34 @@ Crea una aplicación de lista de TODO que permita a los usuarios agregar y elimi

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el `react.js boilerplate` usando una herramienta de aprovisionamiento como [Codespaces](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.
Recomendamos abrir el `react.js boilerplate` usando un entorno de desarrollo como [Codespaces](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.

Este es el repositorio que necesitas abrir o clonar:

```
```text
https://github.com/4GeeksAcademy/react-hello
```

**👉 Por favor sigue estos pasos** [cómo comenzar un proyecto de codificación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).
**👉 Por favor sigue estos pasos sobre** [cómo comenzar un proyecto de programación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).


💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (`git remote set-url origin <your new url>`) y subiendo el código a tu nuevo repositorio usando los comandos `add`, `commit` y `push` desde la terminal de git.
> 💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (`git remote set-url origin <your new url>`) y subiendo el código a tu nuevo repositorio usando los comandos `add`, `commit` y `push` desde la terminal de git.
## 📝 Instrucciones:

- Tu aplicación debe verse [como esta imagen](https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true).
- Tu aplicación debería [verse así](https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true).
- Las tareas se agregan cuando el usuario presiona enter en el teclado.
- El icono de eliminar solo se muestra cuando la tarea está activada.
- El ícono de eliminar solo se muestra cuando pasas el ratón encima de la tarea (hover).
- El usuario puede agregar tantas tareas como desee.
- Cuando no haya tareas pendientes, la lista debería decir "No hay tareas, añadir tareas"
- No hay forma de actualizar una tarea, el usuario tendrá que eliminarla y crearla de nuevo.

## 💡 Tips para terminar este proyecto

No te pongas a codificar de inmediato, piensa primero y prepara una estrategia viable.
No te pongas con el código de inmediato, piensa primero y prepara una estrategia viable.

- ¿Qué componentes crearás? Dibuja tu proyecto en una hoja de papel e identifica los componentes.
- ¿Dónde se almacenarán las tareas en tu componente?
- Lee sobre [controlled components inputs in react.js](https://www.youtube.com/watch?v=A6YxkyR_T8c&t=15s), ya que deberás comprender el concepto.
- Lee sobre [entradas controladas en react.js](https://4geeks.com/es/lesson/controlled-vs-uncontrolled-inputs-react-js-es), ya que deberás comprender el concepto.

Este y otros proyectos 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 proyectos 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).
16 changes: 8 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<!-- endhide -->

<p align="center">
<img height="200" src="https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true" />
<img height="450" src="https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true" />
</p>

Create a TODO list application that allows users to add and delete tasks.
Expand All @@ -16,30 +16,30 @@ We recommend opening the `react.js boilerplate` using a provisioning tool like [

This is the repository you need to open or clone:

```
```text
https://github.com/4GeeksAcademy/react-hello
```

**👉 Please follow these steps on** [how to start a coding project](https://4geeks.com/lesson/how-to-start-a-project).


💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (`git remote set-url origin <your new url>`), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal.
> 💡 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (`git remote set-url origin <your new url>`), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal.
## 📝 Instructions

- You app needs to look [like this](https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true).
- The tasks are added when the user press enter on the keyboard, or you can have your own button.
- Your app needs to look [like this](https://github.com/breatheco-de/exercise-todo-list/blob/master/preview.gif?raw=true).
- The tasks are added when the user presses enter on the keyboard, or you can have your own button.
- The delete icon shows only when the task is hovered.
- The user can add as many tasks as he/she wants.
- The user can add as many tasks as they want.
- When there are no tasks the list should say "No tasks, add a task"
- There is no way to update a task, the user will have to delete and create again.

## 💡 Tips to finish this project

Do not go straight to the code, think first and have a viable strategy.

- What components will you create? Draw the project on white paper and identify components.
- What components will you create? Draw the project on white paper and identify the components.
- Where are the tasks going to be stored in your component?
- Read about [controlled components inputs in react.js](https://www.youtube.com/watch?v=A6YxkyR_T8c), you will need to understand the concept.
- Read about [controlled inputs in react.js](https://4geeks.com/lesson/controlled-vs-uncontrolled-inputs-react-js), you will need to understand the concept.

This and many other projects are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](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).

0 comments on commit 98ac33d

Please sign in to comment.