Rôle
Développeuse Web
Outils
HTML, CSS, JS, API OpenWeather
Contexte et Recherche
Caelio est une application web météo, entièrement codée en HTML, CSS et JavaScript, utilisant l’API OpenWeather, pour récupérer en temps réel les données météorologiques de la ville recherchée.
L’objectif était de créer une interface moderne, fluide et immersive, tout en développant une logique JavaScript complète, permettant d’afficher la météo actuelle, les prévisions horaires et les prévisions sur plusieurs jours.
Avant de commencer le développement, j’ai étudié la documentation de l’API OpenWeather, afin de comprendre les différents endpoints disponibles : géocodage, météo actuelle, prévisions sur 5 jours, gestion des unités, fuseaux horaires et codes météo.
J’ai également réalisé une recherche UI, pour concevoir une interface claire, inspirée des applications météo modernes, avec un design sobre, des dégradés, et des animations légères.
Difficultés
La principale difficulté a été de gérer les appels à l’API OpenWeather et les différentes données renvoyées (géolocalisation, météo actuelle, prévisions et fuseau horaire). Il a aussi fallu afficher les bonnes icônes météo et optimiser l’application, pour gérer les erreurs et offrir une interface fluide sur tous les appareils.
Compétences transversales
Ce projet m’a permis de renforcer ma maîtrise du JavaScript moderne, d’apprendre à exploiter une API complexe et d’améliorer mes compétences en UI/UX. Il m’a également aidé à développer mon autonomie, ma rigueur et une meilleure organisation du code, grâce à des fonctions modulaires.
Identité visuelle
TYPOGRAPHIE
Arial et Georgia
Sobre et lisible
Elles offrent un bon équilibre entre élégance et lisibilité. Georgia apporte un style classique et raffiné, idéal pour les titres ou les textes de présentation, tandis que Arial assure une lecture fluide, moderne et claire sur tous les supports.
PALETTE DE COULEURS
Définition d’une palette de couleurs avec des dégradés de violets, bleus et dorés. Elle donne une ambiance nocturne, immersive et élégante, renforcée par des effets de lumière.
Développement
Caelio est une application météo développée entièrement en HTML, CSS et JavaScript, sans framework, avec une architecture organisée et des fonctions JavaScript modulaires. Le projet s’appuie sur des appels API pour récupérer, traiter et afficher les données météo de manière dynamique.
const geocodingURL =
https://api.openweathermap.org/geo/1.0/direct?q=${encodeURIComponent(ville)}&limit=1&appid=${API_KEY};
const weatherURL =
https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&units=metric&lang=fr&appid=${API_KEY};
Architecture du code
Séparation claire entre HTML (structure), CSS (interface) et JavaScript (logique et fonctionnalités).
Développement JavaScript
Traitement des données de l’API OpenWeather.
Code modulaire
Fonctions réutilisables, pour gérer les appels API, les calculs météo, l’affichage dynamique et la gestion des erreurs.
Conclusion et résultat final
Caelio est un projet complet qui m’a permis de développer une application météo moderne, fonctionnelle et entièrement codée en JavaScript.
Il met en valeur ma capacité à exploiter une API, à structurer un projet front‑end complexe et à concevoir une interface professionnelle.
Ce projet constitue une étape importante dans mon apprentissage du développement web, notamment dans la manipulation d’API et la création d’expériences utilisateur fluides et intuitives.
Pour des raisons de sécurité liées à l’API OpenWeather (clé API exposée côté client), la démonstration en ligne n’est pas fonctionnelle. L’application reste néanmoins totalement opérationnelle en environnement local, où la clé peut être protégée.
