Table des matières

Une SPA à la main

Vous allez développer une première SPA. Voici le squelette depuis lequel vous allez partir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Application météo</title>
    <script src="weather.js" defer></script>
</head>
<body>
    <div id="menu">
			<input type="text">
			<button type="button">afficher</button>
	</div>
	<div id="data"></div>
</body>
</html>

Votre objectif est de réagir aux clics sur les boutons pour aller chercher sur le site de prevision-meteo.ch le flux de données JSON qui correspond au texte saisi par l’utilisateur, et afficher dans l’élément div les données météos récupérées depuis l’API. Une fois que vous avez réussi, essayer d’améliorer l’ergonomie autant que possible.

Conseils

Vous êtes fortement invité à tester le plugin Live Server sous VScode et utiliser le mode développeur de Chrome

Afficher une carte

Vous pouvez afficher une carte (service google) et quand vous cliquez, récupérer les coordonnées GPS pour ensuite afficher la météo de cet endroit.

Vous pouvez utiliser OpenStreetMap pour afficher une carte et l’API https://nominatim.openstreetmap.org/reverse?lat=LATITUDE&lon=LONGITUDE&format=json pour récupérer le nom d’une ville à partir de coordonnées.