Merge pull request #2 from Keshabkjha/Weather-App

Weather App
Keshabkjha · Aug 22, 2024 · b465035 · b465035
2 parents a4db69e + 067b8b3
commit b465035
Show file tree

Hide file tree

Showing 10 changed files with 183 additions and 0 deletions.
diff --git a/Weather/Cloud.jpg b/Weather/Cloud.jpg
diff --git a/Weather/clear.jpg b/Weather/clear.jpg
diff --git a/Weather/default.jpg b/Weather/default.jpg
diff --git a/Weather/fog.jpg b/Weather/fog.jpg
diff --git a/Weather/index.html b/Weather/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Weather App</h1>
+        <input type="text" id="locationInput" placeholder="Enter a city">
+        <button id="searchButton">Search</button>
+        <div class="weather-info">
+            <h2 id="location"></h2>
+            <p id="temperature"></p>
+            <p id="description"></p>
+        </div>
+        <p id="p1"></p>
+    </div>
+    <div class="containerme">
+        <div class="row" id="me">
+          <p id="pBy"><span class="Keshab Kumar"></span><span> Made by</span></p>
+          <p id="pMe"><a href="https://github.com/Keshabkjha">Keshab Kumar</a></p>
+        </div>
+      </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Weather/rain.jpg b/Weather/rain.jpg
diff --git a/Weather/script.js b/Weather/script.js
@@ -0,0 +1,86 @@
+const apiKey = 'ba49b0ebd03dd496854f2123d3bf0407';
+const apiUrl = 'https://api.openweathermap.org/data/2.5/weather';
+
+const locationInput = document.getElementById('locationInput');
+const searchButton = document.getElementById('searchButton');
+const locationElement = document.getElementById('location');
+const temperatureElement = document.getElementById('temperature');
+const descriptionElement = document.getElementById('description');
+const p=document.getElementById('p1');
+
+searchButton.addEventListener('click', () => {
+    const location = locationInput.value;
+    if (location) {
+        fetchWeather(location);
+    }
+});
+
+// Reset to default when the input is edited
+locationInput.addEventListener('input', () => {
+    resetToDefault();
+});
+//k
+locationInput.addEventListener("keypress",function(event){
+
+    if (event.key === "Enter") {
+        fetchWeather(locationInput.value);
+
+        document.getElementById("searchButton").click();
+      }
+})
+//k
+function fetchWeather(location) {
+    const url = `${apiUrl}?q=${location}&appid=${apiKey}&units=metric`;
+
+    fetch(url)
+        .then(response => response.json())
+        .then(data => {
+            const weather = data.weather[0].main.toLowerCase();
+
+            locationElement.textContent = data.name;
+            temperatureElement.textContent = `${Math.round(data.main.temp)}°C`;
+            descriptionElement.textContent = data.weather[0].description;
+
+            // Update background image based on weather
+            switch (weather) {
+                case 'clear':
+                    document.body.style.backgroundImage = "url('clear.jpg')";
+                    break;
+                case 'clouds':
+                    document.body.style.backgroundImage = "url('Clouds.jpg')";
+                    break;
+                case 'rain':
+                    document.body.style.backgroundImage = "url('rain.jpg')";
+                    break;
+                case 'snow':
+                    document.body.style.backgroundImage = "url('snow.jpg')";
+                    break;
+                case 'thunderstorm':
+                    document.body.style.backgroundImage = "url('thunderstorm.jpg')";
+                    break;
+                case 'fog':
+                case 'mist':
+                case 'haze':
+                    document.body.style.backgroundImage = "url('fog.jpg')";
+                    break;
+                default:
+                    document.body.style.backgroundImage = "url('default.jpg')"; // Default background
+                    break;
+            }
+        })
+        .catch(() => {
+           // console.error('Error fetching weather data:', error);
+           p.textContent = "Please check your location or try again later.";
+        });
+}
+
+function resetToDefault() {
+    // Clear weather information
+    locationElement.textContent = '';
+    temperatureElement.textContent = '';
+    descriptionElement.textContent = '';
+    p.textContent = '';
+
+    // Reset background image to default
+    document.body.style.backgroundImage = "url('default.jpg')";
+}
diff --git a/Weather/snow.jpg b/Weather/snow.jpg
diff --git a/Weather/styles.css b/Weather/styles.css
@@ -0,0 +1,68 @@
+body {
+    font-family: Arial, sans-serif;
+    background-image: url('default.jpg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    height: 100vh; /* Fill the viewport */
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between; /* Space between top and bottom containers */
+}
+
+.container {
+    max-width: 500px;
+    margin: 0 auto;
+    text-align: center;
+    padding: 35px;
+    background-color: rgba(255, 255, 255, 0.5);
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+    margin-top: 105px;
+}
+
+.containerme {
+    text-align: center;
+    padding: 35px;
+    margin: 0 auto;
+    width: 100%;
+    box-sizing: border-box;
+    background-color: transparent;
+}
+
+h1 {
+    font-size: 24px;
+}
+
+input[type="text"] {
+    width: 90%;
+    padding: 10px;
+    margin: 10px 0;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+}
+
+button {
+    background-color: #007BFF;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.weather-info {
+    margin-top: 20px;
+}
+
+/* Footer alignment */
+footer {
+    background-color: rgba(255, 255, 255, 0.5);
+    padding: 10px;
+    text-align: center;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+}
diff --git a/Weather/thunderstorm.jpg b/Weather/thunderstorm.jpg