B'Weather | Portfolio

Capture de l'application B'Weather — Image de représentation du projet B'Weather.

Aperçu du projet

B'Weather est un site vitrine interactif qui permet de consulter la météo d’une ville en temps réel à partir de l’API OpenWeatherMap.

L’objectif est de proposer une interface rapide, lisible et responsive pour afficher des informations utiles comme la température, l’humidité, le vent et la description météo.

Contexte du projet

Ce projet personnel m’a permis de travailler l’intégration d’API REST en JavaScript, le traitement de données JSON et l’affichage dynamique des résultats côté frontend.

Langages utilisés

Technologies mobilisées pour ce projet.

HTML5

CSS3

JavaScript

Outils utilisés

Environnement et outils mobilisés pendant le projet.

VS Code

Chrome Debugging

GitHub

OpenWeatherMap

Intégration OpenWeatherMap

Fonctionnement de la récupération des données météo.

Requête API

L’application envoie une requête HTTP à l’API OpenWeatherMap avec le nom de la ville saisi par l’utilisateur.

Récupération des données en format JSON
Gestion des erreurs (ville invalide, API indisponible)
Affichage dynamique des informations météo

Affichage utilisateur

Les données essentielles sont affichées de façon claire pour une consultation immédiate.

Aperçu de l'affichage météo de B'Weather — Interface de consultation météo en temps réel.

Météo temps réel

Captures d’écran et extraits de code du projet B'Weather.

Interface principale

Affichage en temps réel des données météo pour la ville recherchée : température, humidité, vent et conditions.

Code — Récupération météo

Extrait du code JavaScript gérant la requête à l'API OpenWeatherMap et l'injection dynamique des données dans le DOM.

Extrait du code source — récupération météo — Extrait du code de récupération des données météo via l'API.

Carte météo

Intégration d'une carte interactive pour visualiser les conditions météorologiques de la ville recherchée.

Résultat de recherche

Résultat affiché après la saisie d'une ville : données météo complètes avec icône, température ressentie et description.

Code — Carte météo

Extrait du code JavaScript gérant l'intégration de la carte météo interactive et la géolocalisation de la ville saisie.

Extrait du code source — intégration carte météo — Extrait du code d'intégration de la carte météo interactive.

Fonctionnalités principales

Recherche météo par nom de ville
Affichage de la température et du ressenti
Consultation de l’humidité et des conditions climatiques
Affichage de la vitesse du vent
Interface responsive mobile / desktop