simple js code to show the weather

nxr-dine · nxr-dine · commit a2735756c493 · 2024-11-03T10:57:41.000+01:00
diff --git a/Project 6 - Weather app/app.js b/Project 6 - Weather app/app.js
@@ -0,0 +1,22 @@
+var button = document.querySelector('.button')
+var inputValue = document.querySelector('.inputValue')
+var desc = document.querySelector('.desc');
+var name = document.querySelector('.name');
+var temp = document.querySelector('.temp');
+
+button.addEventListener('click', function () {
+  fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputValue.value+'&appid=c983aed69b497603ff80d72814dbadd1')
+  .then(response => response.json())
+    .then(data => {
+      var nameValue = data['name'];
+      var tempValue = data['main']['temp'];
+      var descValue = data['weather'][0]['description'];
+
+      name.innerHTML = nameValue;
+      temp.innerHTML = tempValue;
+      desc.innerHTML = descValue;
+    })
+    
+
+  .catch(err => alert("Wrong city name!"))
+})
diff --git a/Project 6 - Weather app/index.html b/Project 6 - Weather app/index.html
@@ -9,7 +9,7 @@
 <body>
   <div class="input">
     <input type="text" class="inputValue" placeholder="Enter a city">
-    <input type="submit" value="submit">
+    <input type="submit" value="submit" class="button">
   </div>
 
   <div class="display">
