Création d'une application météo d'une seule page avec JavaScript

Une application météorologique à une page à une page à propulsion JavaScript

Ce projet, achevé dans le cadre de la mission finale de la phase 1 de Flatiron School, a consisté à construire une application météorologique d'une seule page en utilisant uniquement HTML, CSS et JavaScript. L'application récupère les données météorologiques en temps réel d'une API publique pour afficher dynamiquement les conditions actuelles et une prévision. L'application "votre prévision météo" est conçue pour être réactive et conviviale, fournissant des informations météorologiques précises pour toute ville mondiale. Ce projet s'est avéré à la fois gratifiant et stimulant, solidifiant ma compréhension des concepts de phase 1 par l'application pratique.

Exigences et implémentation du projet:

Le projet a adhéré à plusieurs exigences clés:

1. Application à une seule page: L'application fonctionne entièrement sur une seule page, mettant dynamiquement le DOM via JavaScript en réponse aux interactions utilisateur et aux données de l'API.

2. Intégration de l'API: L'application utilise une API publique (OpenWeatherMap) renvoyant au moins cinq objets de données distincts, chacun avec au moins trois attributs. Ces objets englobent des informations météorologiques détaillées, des conditions de vent, des descriptions météorologiques, des détails de la ville et des points de données prévus.

3. Écouteurs d'événements: Trois écouteurs d'événements ont été implémentés à l'aide de .addEventListener(): un pour les clics du bouton de recherche, un pour "Entrer" les pressions de touches (déclenchement des recherches) et un pour les événements d'entrée (fournissant des aperçus de la ville dynamique pendant la saisie).

4. Itération du tableau: La section prévisionnelle itère sur le tableau data.list de l'API à l'aide de la méthode .map() pour afficher les informations de prévision.

Caractéristiques de l'application:

• Mises à jour météorologiques en temps réel: affiche la température actuelle (Celsius), l'humidité, la vitesse du vent, une icône de condition météorologique et les coordonnées géographiques.

• Prévisions à 5 points: Fournit une prévision de 3 heures pour les 15 prochaines heures, y compris la date / heure, la température et les conditions météorologiques.

• Mises à jour dynamiques: Les données sont récupérées et affichées dynamiquement sans rechargement de page, assurant une expérience utilisateur fluide.

• Gestion des erreurs: L'application gère gracieusement les entrées de la ville non valides, fournissant des commentaires des utilisateurs pour les erreurs.

Défis et solutions:

Les défis clés inclus:

• Manipulation de l'API: La récupération des données asynchrones et la gestion de la réponse de l'API ont nécessité une étude minutieuse de la documentation et de la pratique OpenWeathermap avec fetch et async/await.

• Style CSS : L'amélioration de mes compétences CSS était un objectif pour créer une interface utilisateur attrayante et fonctionnelle.

• Gestion des erreurs : Une gestion robuste des erreurs a été mise en œuvre pour gérer les noms de villes non valides et les entrées vides, améliorant ainsi l'expérience utilisateur.

Conclusion :

Ce projet a considérablement amélioré mes compétences en programmation asynchrone, en interaction API et en conception réactive. L'application « Vos prévisions météorologiques » sert de démonstration pratique des connaissances acquises au cours de la phase 1.

Pour une révision du code ou des commentaires, veuillez visiter le référentiel GitHub :

https://www.php.cn/link/16b5e60b803fb3925ea88833ff398caf

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!