Application Météo

À propos du projet

WeatherScope est une application météo développée en JavaScript vanilla (sans framework). L'utilisateur entre le nom d'une ville et l'application interroge l'API OpenWeatherMap pour récupérer les données météo en temps réel : température, humidité, vitesse du vent et conditions atmosphériques.

En parallèle, l'API TimezoneDB est consultée à partir des coordonnées GPS de la ville pour afficher l'heure locale exacte, mise à jour toutes les secondes via setInterval.

Fonctionnalités

🌡️

Données météo en temps réel

Température en °C, humidité en %, vitesse du vent en km/h et description des conditions (nuageux, pluvieux, ensoleillé…).

🕐

Heure locale en direct

Affichage de l'heure locale de la ville recherchée, calculée à partir du décalage GMT et mise à jour chaque seconde.

🎨

Icônes dynamiques

Icône Font Awesome adaptée selon les conditions météo : soleil, nuage, pluie, neige, orage, brume.

⌨️

Recherche au clavier

Lancement de la recherche au clic sur le bouton ou en appuyant sur la touche Entrée.

🖼️

Design immersif

Fond photo plein écran, conteneur glassmorphism avec backdrop-filter, boîtes de résultats avec effet zoom au survol.

🔄

Mise à jour automatique

L'intervalle d'heure locale est arrêté et relancé à chaque nouvelle recherche pour éviter les conflits.

Étapes de développement

Appel API OpenWeatherMap

Construction de l'URL avec la clé API, paramètres units=metric et lang=fr. Parsing de la réponse JSON pour extraire température, humidité, vent, coordonnées GPS et description.

Heure locale via TimezoneDB

Envoi des coordonnées lat/lon à TimezoneDB pour récupérer le gmtOffset. Calcul de l'heure locale : new Date().getTime() + gmtOffset * 1000 et affichage formaté HH:MM:SS.

Icônes météo conditionnelles

Fonction getWeatherIcon() avec un switch sur la condition météo (Clear, Clouds, Rain, Snow, Thunderstorm…) renvoyant la classe Font Awesome correspondante.

Interface et CSS

Layout flexbox centré plein écran, fond image avec background-size: cover, boîtes résultats en glassmorphism (backdrop-filter: blur), transitions hover.

Extrait de code — appel API

let apiCall = function(city) {
    let url = `https://api.openweathermap.org/data/2.5/weather
               ?q=${city}&appid=${APIKEY}&units=metric&lang=fr`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            document.querySelector('#temp').innerHTML =
                `<i class="fas fa-thermometer-half"></i> ${data.main.temp}°C`;
            document.querySelector('#humidity').innerHTML =
                `<i class="fas fa-tint"></i> ${data.main.humidity}%`;
            // Récupère lat/lon pour l'heure locale
            getLocalTime(data.coord.lat, data.coord.lon);
        });
};

Compétences acquises

Consommation d'API REST avec fetch() et chaînage de Promises
Parsing et exploitation de réponses JSON
Manipulation du DOM : querySelector, innerHTML
Gestion du temps avec setInterval / clearInterval
Utilisation de Font Awesome pour les icônes dynamiques
CSS avancé : glassmorphism, transitions, layout flexbox

🌤️ Application Météo