Copy of https://github.com/berthelol/19-20_TWOIng4_TP3

Nazza77 · Oct 5, 2020 · 2557517 · 2557517
commit 2557517
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,29 @@
+# TP 3
+
+A lire impérativement avant de commencer quoi que ce soit, ce sont les règles que vous devrez appliquer tout au long du semestre:
+
+<p align="center">
+ <a href="https://github.com/clementAC/Instructions-Technologies-Web-OCRES-Ing4/blob/master/README.md">Règles pour le semestre</a>
+</p>
+
+## Instructions
+
+1. Comprendre le code en HTML et JS
+
+2. Faire en sorte que la fonction start() soit executée sans appuyer sur le bouton #button-load-forecast.
+Le bouton se sert donc plus à rien, il faut l'enlever.
+*Hint: Voir la propriété onload.*
+
+3. Par défault la ville choisi pour les prédictions météo est Paris. Faire en sorte que votre user puisse rentrer le nom d'une ville dans l'input. Lorsqu'il appuit sur **Actualiser** cela actualise les informations avec la bonne ville. Il faut donc faire une requete différente.
+*Hint: [Comment récupérer la valeur d'un input](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript)*
+
+4. Chercher les prévisions météo pour les trois jours à venir.
+*Hint: utiliser [la même API mais un end point différent](https://openweathermap.org/forecast16)*
+
+* Créer une autre fonction ei: ```function getThreeDayForecast(){...}```
+* Cette API retourne les prévisions sur les **16 prochains jours.** Prennez donc les trois premiers. 
+* Utilisez les fonctions map, filter, sort pour manipuler la data.
+* Je vous conseille vivement d'afficher ce que retourne cette API afin de voir ou chercher l'information.
+* Afficher les mêmes informations que pour la météo d'aujourd'hui, a savoir : le temps principal 'main', la description, la température en Celsius, l'icon.
+
+5. Le code inital est responsive, faire en sorte qu'il le reste...
diff --git a/index.html b/index.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>TP 3</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+    <!-- bootstrap -->
+    <link
+      rel="stylesheet"
+      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+      crossorigin="anonymous"
+    />
+    <script
+      src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+      integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+      crossorigin="anonymous"
+    ></script>
+    <!-- Axios -->
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+  </head>
+  <body>
+    <div
+      class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm"
+    >
+      <h5 class="my-0 mr-md-auto font-weight-normal">METEO PREDICTION TP3</h5>
+    </div>
+
+    <div class="px-3 py-3 pt-md-5 pb-md-4 mx-auto text-center">
+      <h2 class="display-4">Méteo App</h2>
+      <p class="lead">
+        Application de prédiction méteo
+      </p>
+    </div>
+
+    <div class="container">
+      <div class="input-group mb-5 offset-4 col-4">
+        <input id="city-input" type="text" class="form-control" placeholder="Rentrer le nom d'une ville">
+        <div class="input-group-append">
+          <button id="city-input-button" class="btn btn-success" type="submit">Actualiser</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="container">
+        <div class="card-deck mb-3 text-center">
+          <div class="card mb-4 shadow-sm offset-sm-1">
+            <div class="card-header">
+              <h4 class="my-0 font-weight-normal">Aujourd'hui</h4>
+            </div>
+            <div class="card-body">
+              <h2 id="today-forecast-main" class="card-title">
+              </h2>
+              <div>
+                <p id="today-forecast-more-info"></p>
+                <div id="icon-weather-container" ></div>
+                <h3 id="today-forecast-temp"> </h3>
+              </div>
+              <button type="button" class="btn btn-lg btn-block btn-primary button-load-forecast" onclick='start()'>
+                Quel temps fait'il aujourd'hui ?
+              </button>
+            </div>
+          </div>
+        </div>
+
+    <div class="container">
+      <div class="card-deck mb-3 text-center">
+        <div class="card mb-4 shadow-sm offset-sm-1">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Demain</h4>
+          </div>
+          <div class="card-body">
+            <h2 id="today-forecast-main" class="card-title">
+            </h2>
+            <div>
+              <p id="today-forecast-more-info"></p>
+              <div id="icon-weather-container" ></div>
+              <h3 id="today-forecast-temp"> </h3>
+            </div>
+          </div>
+        </div>
+        <div class="card mb-4 shadow-sm offset-sm-1">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Après demain</h4>
+          </div>
+          <div class="card-body">
+            <h2 id="today-forecast-main" class="card-title">
+            </h2>
+            <div>
+              <p id="today-forecast-more-info"></p>
+              <div id="icon-weather-container" ></div>
+              <h3 id="today-forecast-temp"> </h3>
+            </div>
+          </div>
+        </div>
+        <div class="card mb-4 shadow-sm offset-sm-1">
+          <div class="card-header">
+            <h4 class="my-0 font-weight-normal">Encore après demain</h4>
+          </div>
+          <div class="card-body">
+            <h2 id="today-forecast-main" class="card-title">
+            </h2>
+            <div>
+              <p id="today-forecast-more-info"></p>
+              <div id="icon-weather-container" ></div>
+              <h3 id="today-forecast-temp"> </h3>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="js/API_Weather.js"></script>
+    <script src="js/script.js"></script>
+  </body>
+</html>
diff --git a/js/API_Weather.js b/js/API_Weather.js
@@ -0,0 +1,32 @@
+// API : https://openweathermap.org/api
+
+// Clé api
+const API_KEY = "4081444b7b90198136fefe6ed4ccf35b";
+// Url API
+const API_URL = "https://api.openweathermap.org/data/2.5/weather";
+// Base source icon
+const API_URL_ICON = "http://openweathermap.org/img/wn/";
+
+
+class API_WEATHER{
+  constructor(city){
+    // Si la ville n'est pas définit alors la ville par défault est Paris
+    if(city === undefined){
+      city = "paris";
+    }
+    this.city = city;
+  }
+
+  // Faire la requete à l'API openweathermap
+  // Retourne une promise
+  fetchTodayForecast(){
+    return axios
+    .get(`${API_URL}?q=${this.city}&units=metric&appid=${API_KEY}`, {
+      crossdomain: true
+    })
+  }
+  // Retourne l'element HTML de l'icon symbolisant la méteo.
+  getHTMLElementFromIcon(icon){
+    return `<img src=${API_URL_ICON}${icon}@2x.png class="weather-icon"/>`
+  }
+}
diff --git a/js/exampleTodayForecast.json b/js/exampleTodayForecast.json
@@ -0,0 +1,30 @@
+{
+  "coord": { "lon": 2.35, "lat": 48.86 },
+  "weather": [
+    { "id": 501, "main": "Rain", "description": "moderate rain", "icon": "10n" }
+  ],
+  "base": "stations",
+  "main": {
+    "temp": 15.71,
+    "pressure": 1006,
+    "humidity": 87,
+    "temp_min": 14.44,
+    "temp_max": 17.22
+  },
+  "visibility": 10000,
+  "wind": { "speed": 5.1, "deg": 210 },
+  "clouds": { "all": 100 },
+  "dt": 1571085173,
+  "sys": {
+    "type": 1,
+    "id": 6550,
+    "message": 0.0074,
+    "country": "FR",
+    "sunrise": 1571033314,
+    "sunset": 1571072670
+  },
+  "timezone": 7200,
+  "id": 2988507,
+  "name": "Paris",
+  "cod": 200
+}
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,31 @@
+
+// Fonction appelée lors du click du bouton
+function start() {
+  // Création de l'objet apiWeather
+  const apiWeather = new API_WEATHER();
+  // Appel de la fonction fetchTodayForecast
+
+  apiWeather
+    .fetchTodayForecast()
+    .then(function(response) {
+      // Récupère la donnée d'une API
+      const data = response.data;
+
+      // On récupère l'information principal
+      const main = data.weather[0].main;
+      const description = data.weather[0].description;
+      const temp = data.main.temp;
+      const icon = apiWeather.getHTMLElementFromIcon(data.weather[0].icon);
+
+      // Modifier le DOM
+      document.getElementById('today-forecast-main').innerHTML = main;
+      document.getElementById('today-forecast-more-info').innerHTML = description;
+      document.getElementById('icon-weather-container').innerHTML = icon;
+      document.getElementById('today-forecast-temp').innerHTML = `${temp}°C`;
+
+    })
+    .catch(function(error) {
+      // Affiche une erreur
+      console.error(error);
+    });
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,14 @@
+.weather-icon {
+  width: 100px;
+}
+
+#today-forecast-more-info {
+  margin: 0px;
+}
+
+@media screen and (min-width: 425px) {
+  .button-load-forecast {
+    width: 50% !important;
+    margin: auto;
+  }
+}