Dans ce cours en vidéo nous allons réaliser une application météo sur navigateur en JavaScript, étape par étape. Grâce à cette application nous allons afficher :
- la localisation,
- la température,
- les prévisions pour les 7 prochains jours,
- ainsi que les prévisions pour les 24 prochaines heures.
Un petit QCM de fin vous permettra de tester vos nouvelles connaissances.
Ce genre de projet pratique est extrêmement formateur. En effet, vous apprendrez à faire appel à une API, puis à décortiquer les données renvoyées par cette API pour les afficher sur l'interface de notre app.
Qui plus est, nous allons utiliser du Javascript natif, chose que trop peu développeurs débutants utilisent et finissent complètement perdus face aux Frameworks Javascript.
Ce projet sera également l'occasion d'utiliser CSS Grid !
Enfin ce projet est très fun à faire, avec un design pro. Vous pourrez l'afficher dans votre portoflio/CV.
Je reste disponible pour répondre à vos éventuelles questions dans le salon d'entraide.
Bonne formation !
Table des matières de cette formation JavaScript (durée : 1h36m)
-
Introduction
- Introduction 00:02:38
-
Création de l'App
- Mise en place 00:01:55
- Partie HTML 00:03:08
- Partie CSS 00:08:42
- Appel de l'API 00:08:21
- Attention aux erreurs 429 ! 00:02:02
- Partie Description JS 00:07:44
- Icone avec Skycons 00:08:10
-
Partie Prévision
- Prévision HTML 00:03:49
- Prévision CSS 00:06:23
- Mise en place des jours en JS 00:13:18
- Mise en place des icônes de prévision 00:03:50
-
Partie prévision toutes les 3h
- HTML CSS, prévision 3h 00:05:33
- Mettre les heures 00:06:03
- Mettre les températures 00:04:33
-
Finition
- Créer un Loader 00:04:49
- En cas de refus de géolocalisation 00:05:25
- Fichiers sourcestélécharger
- QCMaccéder
- Certificat
Formateur : Enzo Ustariz
-
Excellent tuto. Rythme très (trop pour moi) soutenu. Très utile pour approfondire certaines techniques javascript. Résultat sympa et utile. Bravo.
-
Avec quelle version de logiciel ce tuto est-il compatible ?JavaScript
-
Quel est le niveau requis pour suivre ce tuto ?débutant
note moyenne
avis laissé