Revisiòn de proyecto con tutor

.vscode/settings.json

@@ -3,5 +3,8 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "workbench.editorAssociations": {   
         "*.md": "vscode.markdown.preview.editor"
-    }
+    },
+    "githubPullRequests.ignoredPullRequestBranches": [
+        "main"
+    ]
 }

src/js/App.css

@@ -0,0 +1,68 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    font-family: Arial, sans-serif;
+    background-image: url("../img/vector-cartoon-style-illustration-kitchen-260nw-2257872349.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+
+.controls {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+
+.pomodoro {
+    width: 200px;
+    height: 200px;
+    border-radius: 50%;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 20px;
+    background-image: url("../img/pomodoro.png");
+    background-size: cover;
+}
+
+
+.time-display {
+    position: absolute;
+    color: white;
+    font-size: 36px;
+    font-weight: bold;
+}
+
+
+.buttons {
+    margin-top: 20px;
+    text-align: center;
+}
+
+
+button {
+    background-color: greenyellow;
+    border: none;
+    border-radius: 5px;
+    margin: 10px;
+    padding: 10px 20px;
+    cursor: pointer;
+}
+
+
+button:disabled {
+    background-color: #f0f0f0;
+    cursor: not-allowed;
+}
+
+
+button:hover:not(:disabled) {
+    background-color: #ffd700;
+}

src/js/App.jsx

@@ -0,0 +1,73 @@
+import React, { useState, useEffect } from 'react';
+import './App.css';
+
+
+const App = () => {
+    const [timeLeft, setTimeLeft] = useState(0);
+    const [running, setRunning] = useState(false);
+
+
+    useEffect(() => {
+        let timer;
+        if (running && timeLeft > 0) {
+            timer = setInterval(() => {
+                setTimeLeft(prev => prev - 1);
+            }, 1000);
+        } else if (timeLeft === 0 && running) {
+            alert('¡Tiempo de cocción ha terminado!');
+            setRunning(false);
+        }
+        return () => clearInterval(timer);
+    }, [running, timeLeft]);
+
+
+    const handleStart = (minutes) => {
+        const totalSeconds = minutes * 60;
+        setTimeLeft(totalSeconds);
+        setRunning(true);
+    };
+
+
+    const handleExtraMinute = () => {
+        setTimeLeft(prev => prev + 60);
+    };
+
+
+    const handleToggle = () => {
+        setRunning(prev => !prev);
+    };
+
+
+    const handleReset = () => {
+        setTimeLeft(0);
+        setRunning(false);
+    };
+
+
+    return (
+        <div className="container">
+            <h1>¡A cocinar!</h1>
+            <div className="controls">
+                <div className="pomodoro">
+                    <div
+                        className="time-display"
+                        style={{ color: timeLeft <= 10 ? 'yellow' : 'white' }}
+                    >
+                        {Math.floor(timeLeft / 60)}:{('0' + (timeLeft % 60)).slice(-2)}
+                    </div>
+                </div>
+                <div className="buttons">
+                    <button onClick={() => handleStart(10)} disabled={running}>10 min (Pasta) 🍝</button>
+                    <button onClick={() => handleStart(15)} disabled={running}>15 min (Carne) 🍖</button>
+                    <button onClick={() => handleStart(20)} disabled={running}>20 min (Galletas) 🍪</button>
+                    <button onClick={handleExtraMinute} disabled={!running}>Minuto Extra ⏰</button>
+                    <button onClick={handleToggle}>{running ? 'Parar ⏸️' : 'Continuar ▶️'}</button>
+                    <button onClick={handleReset}>Borrar 🚫</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+
+export default App;

src/js/index.css

@@ -0,0 +1,72 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+
+body {
+  margin: 0;
+}
+
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+  background-color: whitesmoke;
+}
+
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

src/js/main.jsx

@@ -1,18 +1,11 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
 
-//Bootstrap
-import "bootstrap/dist/css/bootstrap.min.css";
-import "bootstrap"
 
-// index.css'
-import '../styles/index.css'
-
-// components
-import Home from './components/Home';
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-  <React.StrictMode>
-    <Home/>
-  </React.StrictMode>,
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
 )