Patsy The Pug_dev

Patsy The Pug_dev

PatsyThePug · she/her
Patsy Pugneranian, edición limitada con glitter. Debuggeo emociones, rompo código, duermo en deploy. Mini dev en entrenamiento, caos con patitas. 💻

React Seconds Counter

Advanced timer with countdown, presets, and notifications

00:00:00
Hours : Minutes : Seconds
Ready

⚙️ Counter Mode

⏰ Preset Time

⏱️ minutes

🔔 Alert Settings

📊 Session Stats

Total Sessions: 1
Total Time: 00:00:00
Average: 0
Alerts Triggered: 0

📚 Conceptos de React - Hooks useState y useEffect

Aprende cómo funcionan los hooks principales de React en este contador de segundos

🔄 El Hook useState

Permite añadir estado local a componentes funcionales. Se usa para almacenar datos que cambian con el tiempo:

  • Estado inicial: const [count, setCount] = useState(0)
  • Función de actualización: setCount(count + 1)
  • Múltiples estados: [name], [data], [time]
  • Renderizado automático: React actualiza la UI

⚡ El Hook useEffect

Maneja efectos secundarios y ciclos de vida del componente:

  • Efectos: Se ejecuta después del renderizado
  • Cleanup: Limpia efectos con return
  • Dependencias: Control de cuándo ejecutar
  • Intervalos: setInterval y clearInterval

🛠️ Funciones del Contador

▶️

Cuenta Regresiva

Inicia desde un número específico y cuenta hacia atrás

🎮

Controles

Funciones de pausa, reinicio y reanudación

🚨

Alertas

Notificaciones cuando se cumple el tiempo

Built with React and modern web technologies

⚛️
React
🟨
JavaScript
🔷
CSS3
⚡
Vite
Patsy The Pug .dev