Animate task count number when it changes 🔢
Los mantenedores suelen responder en 2 días
Evaluación
- Dificultad
- 1/5
- Tiempo estimado
- 1-3 horas
- Aptitud para principiantes
- 95/100
- Tipo de issue
- Nueva funcionalidad
- Claridad
- Bien especificado
- Estado de actividad
- Activo
- Stack tecnológico
- javascript, react, tailwindcss
- Área
- frontend
Línea de trabajo
Empieza por client/src/pages/Dashboard.jsx y busca el elemento span del contador de tareas en la barra de navegación. Usa el enfoque propuesto en el issue con useState, useRef y useEffect para activar la animación cuando cambie tasks.length; después, confirma que el contador siga mostrándose correctamente y que la clase de animación se elimine tras el timeout.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
Animate task count number when it changes 🔢
File: client/src/pages/Dashboard.jsx
Task count in navbar just instantly
changes with no animation 💀 fr!!
Fix:
const [countAnim, setCountAnim] = useState(false)
const prevCount = useRef(tasks.length)
useEffect(() => {
if (prevCount.current !== tasks.length) {
setCountAnim(true)
setTimeout(() => setCountAnim(false), 400)
prevCount.current = tasks.length
}
}, [tasks.length])
<span className={text-xs transition-transform ${countAnim ? 'scale-125 text-purple-400' : 'text-[#666]'}}>
{tasks.length} tasks
~8 lines! No backend needed 🎯
- Lenguaje dominante
- JavaScript
- Estrellas
- 39
- Forks
- 105
- Merge medio
- 1 d 13 h
- PR fusionados (30 d)
- 41
Preparar el entorno
- Sin Dockerfile ni archivo de Docker Compose
- Sin plantilla de pull request
- Leer la guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de anoopcodehack/DevBoard
-
good first issue
Dificultad 1/5 Menos de una hora Aptitud para principiantes 96/100
anoopcodehack/DevBoard#639 ·
Los mantenedores suelen responder en 2 días
-
Improve tags input placeholder with examples 🏷️Posiblemente ocupada @SwatiManjari la tomó hoy. Abiertogood first issue
Dificultad 1/5 Menos de una hora Aptitud para principiantes 96/100
anoopcodehack/DevBoard#638 ·
Los mantenedores suelen responder en 2 días
-
Add "Clear" link next to done count in column header 🗑️Posiblemente ocupada Un pull request vinculado a esta issue está abierto o ya se fusionó. Abiertogood first issue
Dificultad 1/5 Menos de una hora Aptitud para principiantes 96/100
anoopcodehack/DevBoard#637 ·
Los mantenedores suelen responder en 2 días
-
Show current task name in browser tab during Pomodoro ⏱️Posiblemente ocupada @SwatiManjari la tomó hoy. Abiertogood first issue
Dificultad 1/5 Menos de una hora Aptitud para principiantes 95/100
anoopcodehack/DevBoard#636 ·
Los mantenedores suelen responder en 2 días
-
enhancement good first issue
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
anoopcodehack/DevBoard#630 ·
Los mantenedores suelen responder en 2 días
Todos los issues de anoopcodehack/DevBoard
Issues similares
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 82/100
Los mantenedores suelen responder en 1 día
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
-
fix(套件): test_bundle 往仓库的 preset/skills 写哨兵，并发跑的 test_installer 拷贝时撞 ENOENT（CI 红）Posiblemente ocupada @Miaotofu01 la tomó hoy. Abiertoneeds-triage
Dificultad 2/5 1-3 horas Aptitud para principiantes 78/100
Miaotofu01/Study-Mate#216 · 1 comentario ·
Los mantenedores suelen responder en 1 día
-
Dificultad 1/5 Menos de una hora Aptitud para principiantes 78/100
-
beginner-friendly category:fixtures community enhancement first-timers-only good first issue hacktoberfest help wanted low hanging fruit micro-contribution type: task up-for-grabs
Dificultad 1/5 Menos de una hora Aptitud para principiantes 85/100
Berserk-hub150/skillhawk#229 · 1 comentario ·
Los mantenedores suelen responder en 8 días