Coder un timer (pomodoro) animé avec SVG, HTML, CSS et JavaScript en partant de zéro - Partie 1/2
Vous avez du mal à gérer votre temps lorsque vous travaillez sur l'ordi ?
Et si on pouvait se créer un timer "pomodoro" qui nous préviendra du temps passer sur une tâche ?
Eh bien, c'est exactement ce que nous allons lors de ce live. Et ce en moins de 2h !
On va utiliser les technologies du web :
Et on va apprendre les concepts des :
Et si on pouvait se créer un timer "pomodoro" qui nous préviendra du temps passer sur une tâche ?
Eh bien, c'est exactement ce que nous allons lors de ce live. Et ce en moins de 2h !
On va utiliser les technologies du web :
- HTML5 avec SVG
- CSS3
- et JavaScript (sans framework)
Et on va apprendre les concepts des :
- timers (setTimeout et setInterval)
- animations CSS (keyframes)
- et les bonnes pratiques CSS et JavaScript
Dans la partie 1 (18min), on va :
- créer un compte à rebours de 10 à 0
- utiliser setTimeout()
Dans la partie 2 (1h47min), on va :
- Fin du timer élégante (avec setTimeout)
- Intégrer du SVG de Adobe XD ou Illustrator dans sa page web
- Cercle SVG animée
- Importer une police d'écriture
- Créer un mini algo pour transformer les secondes au format mm:ss
- Lier le 2è compte à rebours qui va démarrer à la fin du premier
- Ajouter du joli CSS pour harmoniser le tout
- BONUS : on intégrera le code dans un design totalement différent
Vidéo partie 1 (18min) :
Pour optimiser le code et devenir un champion du lancé-franc, ça se passe dans la partie 2.
Pour avoir accès à la partie 2 :
- avec la vidéo (1h47min)
- le code final
Vous pouvez créer un compte de membre gratuit.