├── preview.gif
├── .github
    └── workflows
    │   └── validate-integrity.yml
├── learn.json
├── README.md
└── README.es.md


/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/breatheco-de/exercise-simple-counter-react/HEAD/preview.gif


--------------------------------------------------------------------------------
/.github/workflows/validate-integrity.yml:
--------------------------------------------------------------------------------
 1 | name: Validate Integrity
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 |     runs-on: ubuntu-latest
 8 | 
 9 |     steps:
10 |       - uses: actions/checkout@v3
11 |       - uses: actions/setup-node@v3
12 |         with:
13 |           node-version: '14.x'
14 |       - run: npm install @learnpack/learnpack -g
15 |       - run: learnpack audit


--------------------------------------------------------------------------------
/learn.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"gitpod": true,
 3 | 	"title" : {
 4 |     "us": "Simple Counter",
 5 |     "es": "Contador simple"
 6 | },
 7 | 	"slug" : "simple-counter-react",
 8 | 	"video-id": "CMMNdoTJMJM",
 9 | 	"solution": "https://github.com/breatheco-de/exercise-simple-counter-react/tree/solution",
10 | 	"status": "published",
11 | 	"preview": "https://github.com/breatheco-de/exercise-simple-counter-react/blob/master/preview.gif?raw=true",
12 | 	"translations": ["es", "us"],
13 | 	"technologies": ["reactjs", "react-components", "componetes-react", "javascript", "HTML"],
14 | 	"difficulty": "beginner",
15 |         "template_url": "https://github.com/4GeeksAcademy/react-hello",
16 | 	"syntax": "jsx",
17 | 	"duration" : 4,
18 | 	"template_url": "https://github.com/4GeeksAcademy/react-hello",
19 | 	"description" : {
20 |     "us": "Enhance your React.js skills by building a simple counter component that dynamically tracks elapsed time. This project reinforces React Components, props, and setInterval() usage. Display elapsed seconds, customize countdowns, and add reset or alert functionalities.",
21 |     "es": "Mejora tus habilidades en React.js creando un componente de contador simple que rastree el tiempo transcurrido dinámicamente. Este proyecto refuerza el uso de Componentes de React, props y setInterval(). Muestra los segundos transcurridos, personaliza cuentas regresivas y añade funciones de reinicio o alertas."
22 | },
23 | 	"talents": [
24 | 		{ "badge": "functional-developer", "points": 6 }
25 | 	],
26 |     "autoPlay": false,
27 |     "projectType": "project",
28 | 	"telemetry": {
29 |     "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=194"
30 | }
31 | }
32 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <!--hide-->
  2 | # Create a simple counter Using React.js
  3 | <!--endhide-->
  4 | 
  5 | A simple counter is the perfect project web you are in your early steps of learning the React.js library.
  6 | 
  7 | We are going to create a visual countdown to showcase the concept of [`React Components`](https://4geeks.com/lesson/making-react-components#the-component-props) and how you can leverage component properties (props) to reuse those components easily.
  8 | 
  9 | A custom component allows you to "divide and conquer", separating logical and visual challenges into smaller pieces- giving you greater control over the display and functionalities of each part of the web-app.
 10 | 
 11 | For example, to create a bootstrap `<Card />` component you'd code this:
 12 | 
 13 | ```jsx
 14 | function Card(props){
 15 |     return (
 16 |         <div className="card">
 17 |             <img className="card-img-top" src="http://via.placeholder.com/350x150" alt="Card image cap" />
 18 |             <div className="card-body">
 19 |                 <h5 className="card-title">Card title</h5>
 20 |                 <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
 21 |                 <a href="#" className="btn btn-primary">Go somewhere</a>
 22 |             </div>
 23 |         </div>
 24 |     );
 25 | }
 26 | ```
 27 | 
 28 | After declaring it, you can **import** and **use** it in your webapp like this:
 29 | 
 30 | ```jsx
 31 | // Import react into the bundle
 32 | import React from 'react';
 33 | import ReactDOM from 'react-dom';
 34 | import Card from './component/Card.jsx'
 35 | 
 36 | const root = ReactDOM.createRoot(document.querySelector('#root'));
 37 | root.render(<App />);
 38 | 
 39 | // If you are using a previous version from React v18
 40 | // you have to use ReactDOM.render instead of createRoot
 41 | // like this:
 42 | // ReactDOM.render(<Card />, document.querySelector('#root'));
 43 | ```
 44 | 
 45 | > 💡 Note how `ReactDOM.createRoot` is a function you have to use only one time in your entire application
 46 | 
 47 | Additionally, you can pass information through the Card component using **props**:
 48 | 
 49 | ```jsx
 50 | // Use of the custom component
 51 | <Card imageUrl="http://via.placeholder.com/350x150" title="A nice image" />
 52 | ```
 53 | 
 54 | For usage within the render method of your Card component (notice the image src and card title):
 55 | 
 56 | ```jsx
 57 | // Declaration of a custom component (Card.jsx)
 58 | 
 59 | function Card(props){
 60 |     return (
 61 |         <div className="card">
 62 |             <img className="card-img-top" src={props.imageUrl} alt="Card image cap" />
 63 |             <div className="card-body">
 64 |                 <h5 className="card-title">{props.title}</h5>
 65 |                 <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
 66 |                 <a href="#" className="btn btn-primary">Go somewhere</a>
 67 |             </div>
 68 |         </div>
 69 |     );
 70 | }
 71 | ```
 72 | 
 73 | <onlyfor saas="false" withBanner="false">
 74 |     
 75 | ## 🌱 How to start this project
 76 | 
 77 | Do not clone this repository because we are going to be using a different template.
 78 | 
 79 | We recommend opening the `react boilerplate` using a provisioning tool like [Codespaces](https://4geeks.com/lesson/what-is-github-codespaces) (recommended) or [Gitpod](https://4geeks.com/lesson/how-to-use-gitpod). Alternatively, you can clone it on your local computer using the `git clone` command.
 80 | 
 81 | This is the repository you need to open or clone:
 82 | 
 83 | ```text
 84 | https://github.com/4GeeksAcademy/react-hello
 85 | ```
 86 | 
 87 | **👉 Please follow these steps on** [how to start a coding project](https://4geeks.com/lesson/how-to-start-a-project).
 88 | 
 89 | > 💡 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.
 90 | 
 91 | </onlyfor>
 92 | 
 93 | ## 📝 Instructions
 94 | 
 95 | Create a seconds-counter component, called `SecondsCounter`. It should look [like this one](https://github.com/breatheco-de/exercise-simple-counter-react/blob/master/preview.gif).
 96 | 
 97 | - The whole purpose of the component is to display how many seconds have passed since the website finished loading (onLoad).
 98 | - Use the [***ReactDOM.createRoot***](https://4geeks.com/lesson/react-createroot-vs-render) to render the component into the web-app.
 99 | - Use the ***setInterval()*** function to re-render the component every second.
100 | - The component does not need a local state, you can pass the number of seconds as **props**, like this:
101 | 
102 | ```jsx
103 | <SecondsCounter seconds={3434} />
104 | ```
105 | 
106 | - You can find the clock icon on the left of the component in [Font Awesome](https://fontawesome.com/).
107 | 
108 | ## 🔥 Bonus
109 | 
110 | - Create an option to countdown from a given number.
111 | - Create stop, reset, and resume functionality.
112 | - Create an alert when the user reaches a specified time. If the user enters "10", an alert should render, notifying the user that their time was reached.
113 | 
114 | 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).
115 | 


--------------------------------------------------------------------------------
/README.es.md:
--------------------------------------------------------------------------------
  1 | <!--hide-->
  2 | # Contador Simple con React
  3 | <!--endhide-->
  4 | 
  5 | React mejora la creación de componentes personalizados, que puedes representar a través de tu aplicación web utilizando el método **ReactDOM.createRoot()**. Un componente personalizado te permite dividir y conquistar, separando los desafíos lógicos y visuales en partes más pequeñas, lo que te brinda un mayor control sobre la pantalla y las funcionalidades de cada parte de la aplicación web.
  6 | 
  7 | Por ejemplo, para crear un componente bootstrap `<Card />` codificarías esto:
  8 | 
  9 | ```jsx
 10 | function Card(props){
 11 |     return (
 12 |         <div className="card">
 13 |             <img className="card-img-top" src="http://via.placeholder.com/350x150" alt="Card image cap" />
 14 |             <div className="card-body">
 15 |                 <h5 className="card-title">Card title</h5>
 16 |                 <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
 17 |                 <a href="#" className="btn btn-primary">Go somewhere</a>
 18 |             </div>
 19 |         </div>
 20 |     );
 21 | }
 22 | ```
 23 | 
 24 | Después de declararlo, puedes **importar** y **utilizar** en tu aplicación web de esta manera:
 25 | 
 26 | ```jsx
 27 | // Importa react al bundle
 28 | import React from 'react';
 29 | import ReactDOM from 'react-dom';
 30 | import Card from './component/Card.jsx'
 31 | 
 32 | const root = ReactDOM.createRoot(document.querySelector('#root'));
 33 | root.render(<App />);
 34 | 
 35 | // Si usas una version de react anterior a la 18 puedes usar
 36 | // ReactDOM.render de esta manera
 37 | // ReactDOM.render(<Card />, document.quertSelector('#root'));
 38 | ```
 39 | 
 40 | Adicionalmente, puedes pasar información a través de **props**:
 41 | 
 42 | ```jsx
 43 | // Uso de componente personalizado
 44 | <Card imageUrl="http://via.placeholder.com/350x150" title="A nice image" />
 45 | ```
 46 | 
 47 | Para uso dentro del método de renderización de su componente:
 48 | 
 49 | ```jsx
 50 | // Declaración de componente personalizado (Card.jsx)
 51 | 
 52 | function Card(props){
 53 |     return (
 54 |         <div className="card">
 55 |             <img className="card-img-top" src={props.imageUrl} alt="Card image cap" />
 56 |             <div className="card-body">
 57 |                 <h5 className="card-title">{props.title}</h5>
 58 |                 <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
 59 |                 <a href="#" className="btn btn-primary">Go somewhere</a>
 60 |             </div>
 61 |         </div>
 62 |     );
 63 | }
 64 | ```
 65 | 
 66 | <onlyfor saas="false" withBanner="false">
 67 |     
 68 | ## 🌱 Cómo comenzar este proyecto
 69 | 
 70 | No clones este repositorio porque vamos a usar una plantilla diferente.
 71 | 
 72 | Recomendamos abrir el `react 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`.
 73 | 
 74 | Este es el repositorio que necesitas abrir o clonar:
 75 | 
 76 | ```text
 77 | https://github.com/4GeeksAcademy/react-hello
 78 | ```
 79 | 
 80 | **👉 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).
 81 | 
 82 | > 💡 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.
 83 | 
 84 | </onlyfor>
 85 | 
 86 | ## 📝 Instrucciones
 87 | 
 88 | Crea un componente de contador de segundos, llamado ***SecondsCounter***. Debería verse [como este](https://github.com/breatheco-de/exercise-simple-counter-react/blob/master/preview.gif).
 89 | 
 90 | - El propósito principal del componente es mostrar cuántos segundos han pasado desde que el sitio web terminó de cargarse (onLoad).
 91 | - Usa [***ReactDOM.createRoot()***](https://4geeks.com/es/lesson/la-funcion-react-createroot-vs-render) para representar el componente en la aplicación web.
 92 | - Usa la función ***setInterval()*** para volver a renderizar el componente cada segundo.
 93 | - El componente no necesita un estado local, puede pasar la cantidad de segundos como **props** de la siguiente manera:
 94 | 
 95 | ```jsx
 96 | <SecondsCounter seconds={3434} />
 97 | ```
 98 | 
 99 | - Puedes encontrar el icono del reloj a la izquierda del componente en [Font Awesome](https://fontawesome.com/).
100 | 
101 | ## 🔥 Bonus
102 | 
103 | - Crear una opción de cuenta regresiva a partir de un número dado.
104 | - Crear funciones de parar, reiniciar y resumir el contador.
105 | - Crear una alerta cuando el usuario llega a un tiempo específico, es decir, el usuario ingresa "10", y una alerta debería mostrarse notificando al usuario que se alcanzó su tiempo.
106 | 
107 | 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).
108 | 


--------------------------------------------------------------------------------