From ee8fd727f7a67e58c8ffd6b37f99a7b11a2c697d Mon Sep 17 00:00:00 2001 From: andersontbernal Date: Wed, 9 Jul 2025 11:03:44 +0000 Subject: [PATCH 1/2] proyecto contador en curso --- package-lock.json | 3 +++ src/js/components/Digitos.jsx | 3 +++ src/js/components/Home.jsx | 37 ++++++++++++++++++++--------------- src/js/main.jsx | 30 ++++++++++++++++++---------- 4 files changed, 47 insertions(+), 26 deletions(-) create mode 100644 src/js/components/Digitos.jsx diff --git a/package-lock.json b/package-lock.json index d6b5fd56a..a87d148a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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": { diff --git a/src/js/components/Digitos.jsx b/src/js/components/Digitos.jsx new file mode 100644 index 000000000..4b7c3daab --- /dev/null +++ b/src/js/components/Digitos.jsx @@ -0,0 +1,3 @@ +import React from "react"; + +export const Digitos = ({number}) =>
{number}
\ No newline at end of file diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 74bc8d768..7903eea3e 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -1,28 +1,33 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; //include images into your bundle import rigoImage from "../../img/rigo-baby.jpg"; - +import { Digitos } from "./Digitos.jsx"; //create your first component const Home = () => { + + const [timer, SetTimer] = useState(0) + + useEffect(()=>{},[]) + + setTimeout(()=>{ + SetTimer(value=> value+1) + + }, 1000) return (
- - -

Hello Rigo!

-

- -

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

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

+ }/> + + + + + +
); }; + + + export default Home; \ No newline at end of file diff --git a/src/js/main.jsx b/src/js/main.jsx index 14662105b..6011f6f51 100644 --- a/src/js/main.jsx +++ b/src/js/main.jsx @@ -1,18 +1,28 @@ import React from 'react' import ReactDOM from 'react-dom/client' -//Bootstrap -import "bootstrap/dist/css/bootstrap.min.css"; +// Bootstrap +import "bootstrap/dist/css/bootstrap.min.css" import "bootstrap" -// index.css' +// index.css import '../styles/index.css' -// components -import Home from './components/Home'; +// Components +import Home from './components/Home' + +const reactRender = ReactDOM.createRoot(document.getElementById('root')) + +let counter = 0 + +setInterval(() => { + reactRender.render( + + + + ) + counter++ +}, 1000) + + -ReactDOM.createRoot(document.getElementById('root')).render( - - - , -) From b1caa92b0fd5ecd7afce0ee78052d272ccabb71f Mon Sep 17 00:00:00 2001 From: andersontbernal Date: Sun, 13 Jul 2025 17:54:53 +0000 Subject: [PATCH 2/2] Contador simple done for approving --- .vscode/settings.json | 3 ++ src/js/components/Digitos.jsx | 2 +- src/js/components/Home.jsx | 62 +++++++++++++++++++++++++---------- src/styles/index.css | 34 ++++++++++++------- 4 files changed, 71 insertions(+), 30 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index d83b5ba6c..b4cb7ea09 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -3,5 +3,8 @@ "editor.defaultFormatter": "esbenp.prettier-vscode", "workbench.editorAssociations": { "*.md": "vscode.markdown.preview.editor" + }, + "[javascriptreact]": { + "editor.defaultFormatter": "vscode.typescript-language-features" } } \ No newline at end of file diff --git a/src/js/components/Digitos.jsx b/src/js/components/Digitos.jsx index 4b7c3daab..07e3fb8a2 100644 --- a/src/js/components/Digitos.jsx +++ b/src/js/components/Digitos.jsx @@ -1,3 +1,3 @@ import React from "react"; -export const Digitos = ({number}) =>
{number}
\ No newline at end of file +export const Digitos = ({number}) =>
{number}
\ No newline at end of file diff --git a/src/js/components/Home.jsx b/src/js/components/Home.jsx index 7903eea3e..2f912ac60 100644 --- a/src/js/components/Home.jsx +++ b/src/js/components/Home.jsx @@ -7,27 +7,53 @@ import { Digitos } from "./Digitos.jsx"; const Home = () => { const [timer, SetTimer] = useState(0) - - useEffect(()=>{},[]) - - setTimeout(()=>{ - SetTimer(value=> value+1) + const [active, setActive] = useState(false) - }, 1000) - return ( -
- }/> - - - - - - -
- ); + useEffect(() => { //montar, actualizar y desmontar, esto se ejecuta una sola vez. + if (active) { + setTimeout(() => { + SetTimer(value => value + 1) + + }, 1000) + } + }, [timer, active]) + +const startStop = () => setActive(value => !value) +const resetTimer = () => { + setActive(false); + SetTimer(0); }; + return ( +
+
+ + } /> + + + + + + +
+
+

Counter controller

+
+ + + +
+
+
- + ); +}; +//uso de mathfloor para redondear +//sacamos el primer numero de la izquierda (1 + 6 digitos representados en 0 hasta llegar al ultimo digito del contador) +//uso de evento en el form para que no se reinicie, ya que el submit reinicia la pagina. export default Home; \ No newline at end of file diff --git a/src/styles/index.css b/src/styles/index.css index 50716eb70..69655961a 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -1,11 +1,23 @@ -/* - - You can write your own styles here... - - - ...Or you can use the import command to include - other sylesheets into your bunde as well, e.j: - - import 'relative/path/to/stylesheet.scss'; - -*/ +.counter-holder{ + background-color: whitesmoke; + width: 80%; + display: flex; + justify-content: space-around; + margin: 0 auto; + padding: 1rem; +} +.digito{ + color: black; + font-weight: bold; + font-size: 4rem; + padding: 0.5rem; +} +.fondo-contador { + background-color: orange; + background-size: cover; + background-position: center; + min-height: 100vh; +} +.container { + color: aliceblue; +} \ No newline at end of file