From 68febf370981cc19fc9e4fd8e2404f5f775f7ff0 Mon Sep 17 00:00:00 2001 From: EliSepulveda Date: Fri, 14 Mar 2025 18:03:55 -0700 Subject: [PATCH 1/2] =?UTF-8?q?Agregu=C3=A9=20un=20temporizador=20simple.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 57 +++++++++++- package.json | 2 + src/js/components/Home.jsx | 94 +++++++++++++++----- src/js/components/TarjetaTemporizadora.jsx | 22 +++++ src/js/components/TemporizadorDeSegundos.jsx | 38 ++++++++ src/styles/index.css | 22 +++++ 6 files changed, 211 insertions(+), 24 deletions(-) create mode 100644 src/js/components/TarjetaTemporizadora.jsx create mode 100644 src/js/components/TemporizadorDeSegundos.jsx diff --git a/package-lock.json b/package-lock.json index d6b5fd56a..8991183f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "project", "version": "0.0.0", "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "bootstrap": "^5.2.2", "react": "^18.2.0", "react-dom": "^18.2.0" @@ -21,6 +23,9 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "vite": "^5.2.0" + }, + "engines": { + "node": ">=20.0.0" } }, "node_modules/@eslint-community/eslint-utils": { @@ -137,6 +142,53 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz", + "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz", + "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==", + "license": "MIT", + "peer": true, + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.2", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.2.tgz", + "integrity": "sha512-GsBrnOzU8uj0LECDfD5zomZJIjrPhIlWU82AHwa2s40FKH+kcxQaBvBo3Z4TxyZHIyX8XTDxsyA33/Vx9eFuQA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.2" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -11347,7 +11399,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -11358,7 +11409,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -11366,8 +11416,7 @@ "node_modules/prop-types/node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, "node_modules/react": { "version": "18.2.0", diff --git a/package.json b/package.json index 00c2157f5..ac58b1fbc 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ "preview": "vite preview" }, "dependencies": { + "@fortawesome/free-solid-svg-icons": "^6.7.2", + "@fortawesome/react-fontawesome": "^0.2.2", "bootstrap": "^5.2.2", "react": "^18.2.0", "react-dom": "^18.2.0" diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 74bc8d768..4e29fafb3 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -1,26 +1,80 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import TemporizadorDeSegundos from "./TemporizadorDeSegundos" +import { faPlay, faPause, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'; -//include images into your bundle -import rigoImage from "../../img/rigo-baby.jpg"; - -//create your first component const Home = () => { + const [timerSeconds, setCount] = useState(0); + const [estaPausa, setEstaPausa] = useState(false); + const [estaAlertado, setEstaAlertado] = useState(false); + const [alertaEnEntrada, setAlertaEnEntrada] = useState("100"); + + useEffect(() => { + const interval = setInterval(() => { + if (!estaPausa) { + setCount(timerSeconds => timerSeconds + 1); + } + }, 1000); + + const alertaEnNumero = Number(alertaEnEntrada); + if (timerSeconds >= alertaEnNumero && !estaAlertado) { + setEstaAlertado(true); + } else if (timerSeconds < alertaEnNumero && estaAlertado) { + setEstaAlertado(false) + } + + return () => clearInterval(interval); + }, [estaPausa, timerSeconds, alertaEnEntrada, estaAlertado]); + + const manejarCambioEntrada = (event) => { + setAlertaEnEntrada(event.target.value); + }; + + const alternarPausa = () => { + setEstaPausa(!estaPausa); + }; + + const temporizadorDeReinicio = () => { + setCount(0); + setEstaAlertado(false); + }; + return ( -
- - -

Hello Rigo!

-

- -

- - If you see this green button... bootstrap is working... - -

- Made by{" "} - 4Geeks Academy, with - love! -

+
+ {estaAlertado && +
+ {'Alerta!! El temporizador ha alcanzado ' + alertaEnEntrada + ' segundos.'} +
+ } + + +
+
+ + +
+
+ +
+
+
+
+ Alerta en +
+ +
+
+
); }; diff --git a/src/js/components/TarjetaTemporizadora.jsx b/src/js/components/TarjetaTemporizadora.jsx new file mode 100644 index 000000000..3a3910619 --- /dev/null +++ b/src/js/components/TarjetaTemporizadora.jsx @@ -0,0 +1,22 @@ +import React from "react"; +import PropTypes from "prop-types"; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faClock } from '@fortawesome/free-solid-svg-icons' + +const TarjetaTemporizadora = (props) => { + return ( +
+ {props.isIcon && } + { + !props.isIcon && props.numero + } +
+ ); +}; + +TarjetaTemporizadora.propTypes = { + isIcon: PropTypes.bool, + numero: PropTypes.number +}; + +export default TarjetaTemporizadora; \ No newline at end of file diff --git a/src/js/components/TemporizadorDeSegundos.jsx b/src/js/components/TemporizadorDeSegundos.jsx new file mode 100644 index 000000000..cce03fd45 --- /dev/null +++ b/src/js/components/TemporizadorDeSegundos.jsx @@ -0,0 +1,38 @@ +import React from "react"; +import PropTypes from "prop-types"; +import TarjetaTemporizadora from "./TarjetaTemporizadora"; + +function ObtenerSegundosCadena(seconds) { + let text = seconds.toString(); + if (text.length > 6) { + return text + } + return "0".repeat(6-text.length) + text + +} + + +const TemporizadorDeSegundos = (props) => { + const segundos = ObtenerSegundosCadena(props.segundos) + console.log("seconds: " + segundos) + return ( + <> +
+
+ +
+ {segundos.split("").map((num, i) => ( +
+ +
+ ))} +
+ + ); +}; + +TemporizadorDeSegundos.propTypes = { + segundos: PropTypes.number +}; + +export default TemporizadorDeSegundos; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 50716eb70..0228fee93 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -9,3 +9,25 @@ import 'relative/path/to/stylesheet.scss'; */ + +.timer-container { + gap: 50px; + background-color: black; +} + +.timer-container img { + height: 85%; + width: 100%; + } + +.TarjetaTemporizadora { + color: white; + background-color: rgb(42, 42, 42); + height: 175px; + width: 150px; + text-align: center; + font-size: 150px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file From 17399aa5563e5d52b2a796f1802c99cf8caf39f0 Mon Sep 17 00:00:00 2001 From: josh1999 Date: Wed, 19 Mar 2025 19:32:37 -0700 Subject: [PATCH 2/2] cambios --- src/js/components/Home.jsx | 153 +++++++++++++++++++------------------ 1 file changed, 80 insertions(+), 73 deletions(-) diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 4e29fafb3..67b64055f 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -1,82 +1,89 @@ -import React, { useState, useEffect } from "react"; +import React, { Component } from "react"; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import TemporizadorDeSegundos from "./TemporizadorDeSegundos" +import TemporizadorDeSegundos from "./TemporizadorDeSegundos"; import { faPlay, faPause, faArrowsRotate } from '@fortawesome/free-solid-svg-icons'; -const Home = () => { - const [timerSeconds, setCount] = useState(0); - const [estaPausa, setEstaPausa] = useState(false); - const [estaAlertado, setEstaAlertado] = useState(false); - const [alertaEnEntrada, setAlertaEnEntrada] = useState("100"); +class Home extends Component { + constructor(props) { + super(props); + this.state = { + timerSeconds: 0, + estaPausa: false, + estaAlertado: false, + alertaEnEntrada: "100" + }; + this.interval = setInterval(this.incrementarTemporizador, 1000); + } - useEffect(() => { - const interval = setInterval(() => { - if (!estaPausa) { - setCount(timerSeconds => timerSeconds + 1); - } - }, 1000); - - const alertaEnNumero = Number(alertaEnEntrada); - if (timerSeconds >= alertaEnNumero && !estaAlertado) { - setEstaAlertado(true); - } else if (timerSeconds < alertaEnNumero && estaAlertado) { - setEstaAlertado(false) - } + incrementarTemporizador = () => { + if (!this.state.estaPausa) { + this.setState(prevState => { + const nuevoTiempo = prevState.timerSeconds + 1; + const alertaEnNumero = Number(prevState.alertaEnEntrada); + return { + timerSeconds: nuevoTiempo, + estaAlertado: nuevoTiempo >= alertaEnNumero + }; + }); + } + }; - return () => clearInterval(interval); - }, [estaPausa, timerSeconds, alertaEnEntrada, estaAlertado]); + manejarCambioEntrada = (event) => { + const nuevoValor = event.target.value; + this.setState(prevState => ({ + alertaEnEntrada: nuevoValor, + estaAlertado: prevState.timerSeconds >= Number(nuevoValor) + })); + }; - const manejarCambioEntrada = (event) => { - setAlertaEnEntrada(event.target.value); - }; + alternarPausa = () => { + this.setState(prevState => ({ estaPausa: !prevState.estaPausa })); + }; - const alternarPausa = () => { - setEstaPausa(!estaPausa); - }; + temporizadorDeReinicio = () => { + this.setState({ timerSeconds: 0, estaAlertado: false }); + }; - const temporizadorDeReinicio = () => { - setCount(0); - setEstaAlertado(false); - }; + render() { + return ( +
+ {this.state.estaAlertado && +
+ {'Alerta!! El temporizador ha alcanzado ' + this.state.alertaEnEntrada + ' segundos.'} +
+ } + + +
+
+ + +
+
+ +
+
+
+
+ Alerta en +
+ +
+
+
+
+ ); + } +} - return ( -
- {estaAlertado && -
- {'Alerta!! El temporizador ha alcanzado ' + alertaEnEntrada + ' segundos.'} -
- } - - -
-
- - -
-
- -
-
-
-
- Alerta en -
- -
-
-
-
- ); -}; - -export default Home; \ No newline at end of file +export default Home;