dhairyagothi · shruti-codes-design · Jun 7, 2026
diff --git a/public/OpenWeatherForecastApp/README.md b/public/OpenWeatherForecastApp/README.md
diff --git a/public/OpenWeatherForecastApp/index.html b/public/OpenWeatherForecastApp/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Open Weather Forecast App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div class="container">
+        <h1>🌤 Weather Forecast App</h1>
+
+        <div class="search-box">
+            <input type="text" id="cityInput" placeholder="Enter city name">
+            <button onclick="getWeather()">Search</button>
+        </div>
+
+        <div id="weatherData"></div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/public/OpenWeatherForecastApp/script.js b/public/OpenWeatherForecastApp/script.js
@@ -0,0 +1,54 @@
+const API_KEY = "YOUR_API_KEY";
+async function getWeather() {
+    const city = document.getElementById("cityInput").value.trim();
+    const weatherData = document.getElementById("weatherData");
+
+    if (city === "") {
+        weatherData.innerHTML = "<p class='error'>Please enter a city name.</p>";
+        return;
+    }
+
+    weatherData.innerHTML = "<p>Loading...</p>";
+
+    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`;
+
+    try {
+        const response = await fetch(url);
+
+        if (!response.ok) {
+            throw new Error("City not found");
+        }
+
+        const data = await response.json();
+
+        weatherData.innerHTML = `
+    <h2>${data.name}, ${data.sys.country}</h2>
+
+    <img
+        class="weather-icon"
+        src="https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png"
+        alt="Weather Icon"
+    >
+
+    <p><strong>${data.weather[0].main}</strong></p>
+    <p>${data.weather[0].description}</p>
+
+    <p>🌡 Temperature: ${data.main.temp} °C</p>
+    <p>🌡 Feels Like: ${data.main.feels_like} °C</p>
+    <p>💧 Humidity: ${data.main.humidity}%</p>
+    <p>🌬 Wind Speed: ${data.wind.speed} m/s</p>
+`;
+    } catch (error) {
+    console.log(error);
+    weatherData.innerHTML =
+        `<p class='error'>${error.message}</p>`;
+    }
+  }
+  document
+  .getElementById("cityInput")
+  .addEventListener("keypress", function(event) {
+      if (event.key === "Enter") {
+          getWeather();
+      }
+  });
+
diff --git a/public/OpenWeatherForecastApp/style.css b/public/OpenWeatherForecastApp/style.css
@@ -0,0 +1,69 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: Arial, sans-serif;
+}
+
+body {
+    min-height: 100vh;
+    background: linear-gradient(135deg, #4facfe, #00f2fe);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.container {
+    width: 90%;
+    max-width: 450px;
+    background: white;
+    padding: 25px;
+    border-radius: 15px;
+    text-align: center;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
+}
+
+h1 {
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.search-box {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+.search-box input {
+    flex: 1;
+    padding: 10px;
+    border: 2px solid #ddd;
+    border-radius: 8px;
+    outline: none;
+}
+
+.search-box button {
+    padding: 10px 15px;
+    border: none;
+    background: #0077ff;
+    color: white;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.search-box button:hover {
+    background: #005edb;
+}
+
+#weatherData {
+    margin-top: 20px;
+}
+
+.weather-icon {
+    width: 100px;
+    height: 100px;
+}
+.error {
+    color: red;
+    font-weight: bold;
+}