proyecto contador en curso

.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"
     }
 }

src/js/components/Digitos.jsx

@@ -0,0 +1,3 @@
+import React from "react";
+
+export const Digitos = ({number}) => <div className="digito">{number}</div>

src/js/components/Home.jsx

@@ -1,28 +1,59 @@
-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)
+	const [active, setActive] = useState(false)
+
+	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 (
-		<div className="text-center">
-
-
-			<h1 className="text-center mt-5">Hello Rigo!</h1>
-			<p>
-				<img src={rigoImage} />
-			</p>
-			<a href="#" className="btn btn-success">
-				If you see this green button... bootstrap is working...
-			</a>
-			<p>
-				Made by{" "}
-				<a href="http://www.4geeksacademy.com">4Geeks Academy</a>, with
-				love!
-			</p>
-		</div>
+		<main className="text-center fondo-contador">
+			<section className="counter-holder">
+
+				<Digitos number={<span className="fa fa-clock"></span>} />
+				<Digitos number={Math.floor((timer / 100000) % 10)} />
+				<Digitos number={Math.floor((timer / 10000) % 10)} />
+				<Digitos number={Math.floor((timer / 1000) % 10)} />
+				<Digitos number={Math.floor((timer / 100) % 10)} />
+				<Digitos number={Math.floor((timer / 10) % 10)} />
+				<Digitos number={Math.floor(timer % 10)} />
+
+			</section>
+			<section className="container text-center my-5">
+				<h2>Counter controller</h2>
+				<div>
+					<button 
+					disabled={active}
+					onClick={startStop} className="mx-1 btn btn-success btn-lg">Start</button>
+					<button
+					disabled={!active} 
+					onClick={startStop} className="mx-1 btn btn-secondary btn-lg">Stop</button>
+					<button onClick={resetTimer} className="mx-1 btn btn-danger btn-lg">Reset</button>
+				</div>
+			</section>
+		</main>
+
 	);
 };
 
+//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;

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(
+    <React.StrictMode>
+      <Home counter={counter} />
+    </React.StrictMode>
+  )
+  counter++
+}, 1000)
+
+
 
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <Home/>
-  </React.StrictMode>,
-)

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;   
+}