Codes (08/06/2024)

EDM115 · Jun 8, 2024 · b3aba5e · b3aba5e
1 parent 0c92977
commit b3aba5e
Show file tree

Hide file tree

Showing 63 changed files with 28,640 additions and 0 deletions.
diff --git a/BUT2/Codes/S4/R4.A.10/TP1/README.md b/BUT2/Codes/S4/R4.A.10/TP1/README.md
@@ -0,0 +1,34 @@
+# R4.A.10 - TP1
+
+## Application web Météo
+
+### Description
+- Une page simple en thème sombre
+- Un champ de recherche pour une ville (qui s'active également avec la touche <kbd>↩</kbd>)
+- Affichage d'informations simples :
+  - ville
+  - pays
+  - température
+  - icône
+  - description
+- Un bouton pour afficher les informations détaillées :
+  - nuageosité
+  - température ressentie
+  - humidité
+  - pression atmosphérique
+  - vitesse du vent
+  - direction du vent (avec une icône)
+  - heure du lever du soleil
+  - heure du coucher du soleil
+- Possibilité de cacher ces informations détaillées
+- 3 boutons sympas
+
+### Comment lancer l'application
+**Méthode simple (serveur web)**
+1. Avoir Python installé
+2. Ouvrir un terminal
+3. Se placer dans le dossier de l'application
+4. Lancer la commande `python -m http.server`
+
+**Méthode encore plus simple**
+1. Ouvrir le fichier `index.html` avec un navigateur web
diff --git a/BUT2/Codes/S4/R4.A.10/TP1/index.html b/BUT2/Codes/S4/R4.A.10/TP1/index.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="./weather-icons/css/weather-icons.min.css" />
+    <link rel="stylesheet" href="./weather-icons/css/weather-icons-wind.min.css" />
+    <title>TP1 - Météo</title>
+  </head>
+  <body>
+    <div class="flex-container">
+      <menu class="horizontal-container top">
+        <h1>Météo</h1>
+        <div class="horizontal-separator"></div>
+        <button id="home" onclick="window.location.reload()">Home</button>
+        <button id="about" onclick="window.location.href = 'https://www.youtube.com/watch?v=h2csePLbahQ'">About</button>
+        <button id="contact" onclick="window.location.href = 'https://github.com/EDM115'">Contact</button>
+      </menu>
+      <div class="row">
+        <div class="horizontal-container flex-item">
+          <input type="text" id="city" placeholder="Saisir une ville">
+          <button id="submit">Submit</button>
+        </div>
+      </div>
+      <div class="row">
+        <div class="flex-item">
+          <div class="load" id="load"></div>
+          <div id="unload">
+            <h2 id="cityName">Ville</h2>
+            <p>Température : <span id="temp">Température</span></p>
+            <i id="icon" class="wi wi-day-sunny"><span id="description">Description</span></i>
+            <button id="more">Plus d'informations</button>
+            <div id="moreLoad" class="load"></div>
+            <div id="moreUnload" class="moreUnload">
+              <p>Nuageosité : <span id="clouds">Nuageosité</span></p>
+              <p>Température ressentie : <span id="tempFeel">Température ressentie</span></p>
+              <p>Humidité : <span id="humidity">Humidité</span></p>
+              <p>Pression atmosphérique : <span id="pressure">Pression atmosphérique</span></p>
+              <p>Vitesse du vent : <span id="windSpeed">Vitesse du vent</span></p>
+              <p>Direction du vent : <span id="windDeg">Direction du vent</span> <i id="windIcon" class="wi wi-wind towards-0-deg"></i></p>
+              <p>Heure du lever du soleil : <span id="sunrise">Heure du lever du soleil</span></p>
+              <p>Heure du coucher du soleil : <span id="sunset">Heure du coucher du soleil</span></p>
+            </div>
+          </div>
+          <div id="error">
+            <h2>Erreur</h2>
+            <p id="err">La ville n'existe pas</p>
+          </div>
+        </div>
+      </div>
+      <div class="row bottom">
+        <div class="horizontal-container">
+          <p>© 2024 - Lussandre Lederrey</p>
+        </div>
+      </div>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/BUT2/Codes/S4/R4.A.10/TP1/main.js b/BUT2/Codes/S4/R4.A.10/TP1/main.js
@@ -0,0 +1,97 @@
+const apiKey = "REDACTED"
+
+let more = false;
+
+document.getElementById("submit").addEventListener("click", function() {
+  let city = document.getElementById("city").value;
+  more = false;
+  getWeather(city, "weather");
+})
+
+document.getElementById("city").addEventListener("keypress", function(e) {
+  if (e.key === "Enter") {
+    let city = document.getElementById("city").value;
+    more = false;
+    getWeather(city, "weather");
+  }
+})
+
+document.getElementById("more").addEventListener("click", function() {
+  let city = document.getElementById("cityName").innerText.split(",")[0];
+  more = !more;
+  getWeather(city, "advanced");
+})
+
+document.getElementById("more").addEventListener("keypress", function(e) {
+  if (e.key === "Enter") {
+    let city = document.getElementById("cityName").innerText.split(",")[0];
+    more = !more;
+    getWeather(city, "advanced");
+  }
+})
+
+document.getElementById("load").style.display = "none";
+document.getElementById("moreLoad").style.display = "none";
+document.getElementById("unload").style.display = "none";
+document.getElementById("moreUnload").style.display = "none";
+document.getElementById("error").style.display = "none";
+
+function getWeather(city, mode = "weather") {
+  if (mode === "weather") {
+    document.getElementById("load").style.display = "block";
+    document.getElementById("unload").style.display = "none";
+  } else if (mode === "advanced") {
+    document.getElementById("moreLoad").style.display = "block";
+    document.getElementById("moreUnload").style.display = "none";
+  }
+  document.getElementById("error").style.display = "none";
+  let res = fetch(`https://api.openweathermap.org/data/2.5/weather?q=${encodeURIComponent(city)}&lang=fr&units=metric&appid=${apiKey}`)
+  .then(response => response.json())
+  .then(data => {
+    console.log(data);
+    res = data;
+    if (mode === "weather") {
+      showWeather(data);
+      document.getElementById("load").style.display = "none";
+      document.getElementById("unload").style.display = "block";
+    } else if (mode === "advanced") {
+      showAdvancedWeather(data);
+      document.getElementById("moreLoad").style.display = "none";
+      if (more) {
+        document.getElementById("moreUnload").style.display = "block";
+        document.getElementById("more").innerText = "Moins d'informations";
+      } else {
+        document.getElementById("moreUnload").style.display = "none";
+        document.getElementById("more").innerText = "Plus d'informations";
+      }
+    }
+  })
+  .catch(error => {
+    console.error(error)
+    document.getElementById("load").style.display = "none";
+    document.getElementById("moreLoad").style.display = "none";
+    document.getElementById("moreUnload").style.display = "none";
+    document.getElementById("error").style.display = "block";
+    document.getElementById("err").innerText = res.message;
+    more = false;
+  })
+}
+
+function showWeather(data) {
+  document.getElementById("cityName").innerText = data.name + ", " + data.sys.country;
+  document.getElementById("temp").innerText = data.main.temp + "°C";
+  document.getElementById("icon").className = "wi wi-owm-" + data.weather[0].id;
+  document.getElementById("description").innerText = " " + data.weather[0].description.charAt(0).toUpperCase() + data.weather[0].description.slice(1);
+}
+
+function showAdvancedWeather(data) {
+  document.getElementById("clouds").innerText = data.clouds.all + " %";
+  document.getElementById("tempFeel").innerText = data.main.feels_like + "°C";
+  document.getElementById("humidity").innerText = data.main.humidity + " %";
+  document.getElementById("pressure").innerText = data.main.pressure + " hPa";
+  document.getElementById("windSpeed").innerText = data.wind.speed + " m/s";
+  document.getElementById("windIcon").className = "wi wi-wind towards-" + data.wind.deg + "-deg";
+  document.getElementById("windDeg").innerText = data.wind.deg + "°";
+  document.getElementById("sunrise").innerText = new Date(data.sys.sunrise * 1000).toLocaleTimeString();
+  document.getElementById("sunset").innerText = new Date(data.sys.sunset * 1000).toLocaleTimeString();
+}
diff --git a/BUT2/Codes/S4/R4.A.10/TP1/style.css b/BUT2/Codes/S4/R4.A.10/TP1/style.css
@@ -0,0 +1,189 @@
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background-color: #282A36;
+  color: #F8F8F2;
+}
+
+button {
+  background-color: #50FA7B;
+  color: #282A36;
+  padding: 10px 5px;
+  margin: 8px;
+  border: none;
+  cursor: pointer;
+  width: 100%;
+  border-radius: 15px;
+}
+
+input {
+  padding: 10px 5px;
+  margin: 8px;
+  width: 100%;
+  border-radius: 15px;
+  background: transparent;
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover, 
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus,
+select:-webkit-autofill,
+select:-webkit-autofill:hover,
+select:-webkit-autofill:focus {
+  border: 1px solid #50FA7B;
+  -webkit-text-fill-color: #F8F8F2;
+  -webkit-box-shadow: 0 0 0px 1000px #00000000 inset;
+  box-shadow: 0 0 0px 1000px #00000000 inset;
+  transition: background-color 5000s ease-in-out 0s;
+}
+
+.flex-container {
+  height: 100%;
+  padding: 50px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.horizontal-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.horizontal-separator {
+  margin: 50px;
+}
+
+.row {
+  width: auto;
+}
+
+.flex-item {
+  padding: 5px;
+  margin: 10px;
+  text-align: center;
+}
+
+.top {
+  position: fixed;
+  top: 0;
+  z-index: 1000;
+  backdrop-filter: blur(5px);
+}
+
+.bottom {
+  position: fixed;
+  bottom: 0;
+  z-index: 1000;
+}
+
+@media (max-width: 768px) {
+  .horizontal-container {
+    flex-direction: column;
+  }
+
+  .horizontal-separator {
+    margin: auto 0;
+  }
+
+  button, input {
+    width: 90%;
+    margin: 8px auto;
+  }
+}
+
+/* @keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to { 
+    transform: rotate(360deg);
+  }
+}
+
+
+@-webkit-keyframes rotate {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to { 
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+.load {
+  width: 100px;
+  height: 100px;
+  margin: 110px auto 0;
+  border: solid 10px #F1FA8C;
+  border-radius: 50%;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  -webkit-transition: all 0.5s ease-in;
+  -webkit-animation-name: rotate; 
+  -webkit-animation-duration: 1.0s; 
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: linear;
+  transition: all 0.5s ease-in;
+  animation-name: rotate; 
+  animation-duration: 1.0s; 
+  animation-iteration-count: infinite;
+  animation-timing-function: linear; 
+} */
+
+.load {
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: inline-block;
+  position: relative;
+  border: 3px solid;
+  border-color: #BD93F9 #BD93F9 transparent;
+  box-sizing: border-box;
+  animation: rotation 1s linear infinite;
+}
+.load::after {
+  content: '';  
+  box-sizing: border-box;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  border: 3px solid;
+  border-color: transparent #F1FA8C #F1FA8C;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  animation: rotationBack 0.5s linear infinite;
+  transform-origin: center center;
+}
+
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+} 
+
+@keyframes rotationBack {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}