Added weather page

ComputerTech312 · May 10, 2023 · 52d33e6 · 52d33e6
1 parent 8a5c8e8
commit 52d33e6
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 0 deletions.
diff --git a/weather.css b/weather.css
@@ -0,0 +1,107 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: Arial, sans-serif;
+  background-color: #F9F9F9;
+}
+
+.container {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 40px;
+  text-align: center;
+}
+
+h1 {
+  font-size: 36px;
+  margin-bottom: 20px;
+}
+
+.input-wrapper {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 40px;
+}
+
+input {
+  width: 70%;
+  padding: 10px;
+  border: 2px solid #ccc;
+  border-radius: 4px 0 0 4px;
+  font-size: 16px;
+}
+
+button {
+  width: 30%;
+  background-color: #4CAF50;
+  color: white;
+  border: none;
+  border-radius: 0 4px 4px 0;
+  padding: 10px;
+  font-size: 16px;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #3E8E41;
+}
+
+#weather-data {
+  background-color: white;
+  padding: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+}
+
+/* Animations */
+.animate__animated {
+  animation-duration: 1s;
+}
+
+.animate__bounceIn {
+  animation-name: bounceIn;
+}
+
+.animate__fadeIn {
+  animation-name: fadeIn;
+}
+
+.animate__fadeInUp {
+  animation-name: fadeInUp;
+}
+
+.animate__fadeOut {
+  animation-name: fadeOut;
+}
+
+@keyframes bounceIn {
+  from {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    transform: translateY(50px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY
diff --git a/weather.html b/weather.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="weather.css">
+  </head>
+  <body>
+    <div class="container">
+      <h1 class="animate__animated animate__bounceIn">Weather App</h1>
+      <div class="input-wrapper animate__animated animate__fadeInUp">
+        <input type="text" id="location-input" placeholder="Enter location" class="animate__animated animate__fadeIn">
+        <button id="search-button" class="animate__animated animate__fadeIn">Search</button>
+      </div>
+      <div id="weather-data" class="animate__animated animate__fadeIn"></div>
+    </div>
+
+    <script src="weather.js"></script>
+  </body>
+</html>
diff --git a/weather.js b/weather.js
@@ -0,0 +1,29 @@
+const searchButton = document.getElementById('search-button');
+
+searchButton.addEventListener('click', () => {
+  const locationInput = document.getElementById('location-input');
+  const location = locationInput.value;
+
+  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=8c2a600d5d63d7fb13432fd58dcc419b&units=metric`)
+    .then(response => response.json())
+    .then(data => {
+      const weatherData = document.getElementById('weather-data');
+      weatherData.innerHTML = `
+        <h2>${data.name}, ${data.sys.country}</h2>
+        <div>
+          <img src="http://openweathermap.org/img/w/${data.weather[0].icon}.png" alt="${data.weather[0].description}">
+          <span>${data.main.temp}&deg;C</span>
+        </div>
+        <p>${data.weather[0].description}</p>
+        <p>Feels like ${data.main.feels_like}&deg;C</p>
+        <p>Humidity: ${data.main.humidity}%</p>
+        <p>Wind speed: ${data.wind.speed} m/s</p>
+      `;
+    })
+    .catch(error => {
+      const weatherData = document.getElementById('weather-data');
+      weatherData.innerHTML = `
+        <p>Error: Unable to retrieve weather data for ${location}</p>
+      `;
+    });
+});