Weather API Challenge

readme.md

Weather Forecast Challenge

En utilisant l'API Open Meteo, récupérer les prévisions météo de Sierre (lat: 46.2941311, lon: 7.5335362) et les afficher sur la page sous la forme d'un joli widget météo.

Source de données

https://api.open-meteo.com/v1/forecast?latitude=46.2941311&longitude=7.5335362&daily=weather_code,temperature_2m_max,temperature_2m_min,rain_sum

Icônes

Utiliser les styles fournis par https://github.com/erikflowers/weather-icons. Le fichier icons.html donne un exemple d'utilisation des styles avec les classes wi-xxx.

Données à récupérer

Aujourd'hui

• Date du jour
• Température min / max
• Pictogramme correspondant
• Texte de la prévision
• Précipitations (mm)
• Vitesse du vent

Jours suivants

• Demain, après-demain, date du jour (pour les suivants)
• Température min / max
• Pictogramme correspondant

Fonctionnement attendu

En PHP, récupérer le flux et afficher les valeurs en HTML.

Le tableau de conversion weather_code.php peut être réutilisé tel-quel.

Pour la journée en cours, afficher les données complètes. Pour les jours suivants, n'afficher que l'cône de la météo et la température max.

Le widget doit être fonctionnel en desktop et mobile.

PHP

• Séparation du code servant à l'affichage du widget et des fonctions dans différents fichiers
• Gestion dynamique des dates
• Utilisation de boucles pour parcourir les données
• Code propre et commenté
• Versionné dans un dépôt tout au long du projet

icons.html

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/2.0.10/css/weather-icons.min.css">

<div class="meteo">
    <i class="wi wi-rain"></i>
    <span>Pluie modérée</span>
</div>

weather_code.php

<?php
$weatherCodes = [
    0  => ['icon' => 'wi-day-sunny',           'label' => 'Ciel clair'],
    1  => ['icon' => 'wi-day-sunny-overcast',  'label' => 'Principalement clair'],
    2  => ['icon' => 'wi-day-cloudy',          'label' => 'Partiellement nuageux'],
    3  => ['icon' => 'wi-cloudy',              'label' => 'Couvert'],
    45 => ['icon' => 'wi-fog',                 'label' => 'Brouillard'],
    48 => ['icon' => 'wi-fog',                 'label' => 'Brouillard givrant'],
    51 => ['icon' => 'wi-sprinkle',            'label' => 'Bruine légère'],
    53 => ['icon' => 'wi-showers',             'label' => 'Bruine modérée'],
    55 => ['icon' => 'wi-rain',                'label' => 'Bruine dense'],
    56 => ['icon' => 'wi-rain-mix',            'label' => 'Bruine verglaçante légère'],
    57 => ['icon' => 'wi-rain-mix',            'label' => 'Bruine verglaçante forte'],
    61 => ['icon' => 'wi-rain',                'label' => 'Pluie faible'],
    63 => ['icon' => 'wi-rain',                'label' => 'Pluie modérée'],
    65 => ['icon' => 'wi-rain-wind',           'label' => 'Pluie forte'],
    66 => ['icon' => 'wi-rain-mix',            'label' => 'Pluie verglaçante légère'],
    67 => ['icon' => 'wi-rain-mix',            'label' => 'Pluie verglaçante forte'],
    71 => ['icon' => 'wi-snow',                'label' => 'Neige faible'],
    73 => ['icon' => 'wi-snow',                'label' => 'Neige modérée'],
    75 => ['icon' => 'wi-snow-wind',           'label' => 'Neige forte'],
    77 => ['icon' => 'wi-sleet',               'label' => 'Grains de neige'],
    80 => ['icon' => 'wi-showers',             'label' => 'Averses faibles'],
    81 => ['icon' => 'wi-showers',             'label' => 'Averses modérées'],
    82 => ['icon' => 'wi-storm-showers',       'label' => 'Averses fortes'],
    85 => ['icon' => 'wi-snow',                'label' => 'Averses de neige faibles'],
    86 => ['icon' => 'wi-snow-wind',           'label' => 'Averses de neige fortes'],
    95 => ['icon' => 'wi-thunderstorm',        'label' => 'Orage léger ou modéré'],
    96 => ['icon' => 'wi-storm-showers',       'label' => 'Orage avec grêle légère'],
    99 => ['icon' => 'wi-storm-warning',       'label' => 'Orage avec grêle forte']
];