From ecc725a9d5fd422292f917ff848e4fc8d517509a Mon Sep 17 00:00:00 2001 From: Tanvi2307 Date: Thu, 23 Oct 2025 11:37:43 +0530 Subject: [PATCH] Added WeatherApp under Frontend/MiniProjects --- .../MiniProjects/WeatherApp/README.md | 43 ++++++++++++ .../MiniProjects/WeatherApp/index.html | 28 ++++++++ .../MiniProjects/WeatherApp/script.js | 48 +++++++++++++ .../MiniProjects/WeatherApp/style.css | 69 +++++++++++++++++++ 4 files changed, 188 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/WeatherApp/README.md create mode 100644 Domains/Frontend/MiniProjects/WeatherApp/index.html create mode 100644 Domains/Frontend/MiniProjects/WeatherApp/script.js create mode 100644 Domains/Frontend/MiniProjects/WeatherApp/style.css diff --git a/Domains/Frontend/MiniProjects/WeatherApp/README.md b/Domains/Frontend/MiniProjects/WeatherApp/README.md new file mode 100644 index 00000000..998c3abf --- /dev/null +++ b/Domains/Frontend/MiniProjects/WeatherApp/README.md @@ -0,0 +1,43 @@ +# 🌦️ Weather App + +**Contributor:** [Tanvi2307](https://github.com/Tanvi2307) + +A simple weather application built with **HTML**, **CSS**, and **JavaScript** that fetches real-time weather data using the [OpenWeatherMap API](https://openweathermap.org/api). + +--- + +## 🚀 How to Run +1. Get a free API key from [OpenWeatherMap](https://openweathermap.org/api). +2. Replace `"YOUR_API_KEY"` in `script.js` with your actual key. +3. Open `index.html` in your browser. +4. Type a city name and click **Search** to view weather details. + +--- + +## 🧰 Features +✅ Fetches real-time weather using OpenWeatherMap API +✅ Displays temperature, humidity, wind speed, and description +✅ Dynamic weather icons based on current condition +✅ Responsive and beginner-friendly design +✅ Error handling for invalid city names + +--- + +## 🧩 Tech Stack + +| Technology | Purpose | +|-------------|----------| +| **HTML5** | Structure of the app and content layout | +| **CSS3** | Styling and responsive design | +| **JavaScript (ES6)** | Logic, API integration, and dynamic content updates | +| **OpenWeatherMap API** | Provides real-time weather data (temperature, humidity, wind, etc.) | + +--- + +## 📂 Project Structure +WeatherApp +│ +├── index.html +├── style.css +├── script.js +└── README.md \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/WeatherApp/index.html b/Domains/Frontend/MiniProjects/WeatherApp/index.html new file mode 100644 index 00000000..e61cc96f --- /dev/null +++ b/Domains/Frontend/MiniProjects/WeatherApp/index.html @@ -0,0 +1,28 @@ + + + + + + Weather App + + + +
+

🌤️ Weather App

+
+ + +
+ +
+ + + + diff --git a/Domains/Frontend/MiniProjects/WeatherApp/script.js b/Domains/Frontend/MiniProjects/WeatherApp/script.js new file mode 100644 index 00000000..4c56e64b --- /dev/null +++ b/Domains/Frontend/MiniProjects/WeatherApp/script.js @@ -0,0 +1,48 @@ +const apiKey = "YOUR_API_KEY"; // Get your free API key from https://openweathermap.org/api + +const searchBtn = document.getElementById("searchBtn"); +const cityInput = document.getElementById("cityInput"); +const weatherInfo = document.getElementById("weatherInfo"); + +const cityName = document.getElementById("cityName"); +const temperature = document.getElementById("temperature"); +const description = document.getElementById("description"); +const humidity = document.getElementById("humidity"); +const wind = document.getElementById("wind"); +const weatherIcon = document.getElementById("weatherIcon"); + +searchBtn.addEventListener("click", () => { + const city = cityInput.value.trim(); + if (city === "") { + alert("Please enter a city name"); + return; + } + getWeather(city); +}); + +async function getWeather(city) { + const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`; + try { + const res = await fetch(url); + if (!res.ok) { + alert("City not found. Please check the spelling."); + return; + } + const data = await res.json(); + updateWeather(data); + } catch (error) { + console.error(error); + alert("Error fetching weather data"); + } +} + +function updateWeather(data) { + weatherInfo.classList.remove("hidden"); + + cityName.textContent = `${data.name}, ${data.sys.country}`; + temperature.textContent = `🌡️ ${data.main.temp} °C`; + description.textContent = `☁️ ${data.weather[0].description}`; + humidity.textContent = `💧 Humidity: ${data.main.humidity}%`; + wind.textContent = `💨 Wind Speed: ${data.wind.speed} m/s`; + weatherIcon.src = `https://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`; +} diff --git a/Domains/Frontend/MiniProjects/WeatherApp/style.css b/Domains/Frontend/MiniProjects/WeatherApp/style.css new file mode 100644 index 00000000..d8a16de1 --- /dev/null +++ b/Domains/Frontend/MiniProjects/WeatherApp/style.css @@ -0,0 +1,69 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Poppins", sans-serif; +} + +body { + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(135deg, #74b9ff, #a29bfe); +} + +.container { + background-color: #fff; + padding: 2rem; + border-radius: 10px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); + text-align: center; + width: 320px; +} + +h1 { + margin-bottom: 1rem; +} + +.search-box { + display: flex; + justify-content: space-between; + margin-bottom: 1.5rem; +} + +.search-box input { + width: 70%; + padding: 0.5rem; + border: 1px solid #ccc; + border-radius: 5px; + font-size: 1rem; +} + +.search-box button { + padding: 0.5rem 1rem; + background: #0984e3; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +} + +.search-box button:hover { + background: #74b9ff; +} + +.weather-info img { + width: 80px; + margin: 1rem 0; +} + +.weather-info p { + margin: 0.3rem 0; + font-size: 1rem; + color: #333; +} + +.hidden { + display: none; +}