diff --git a/Domains/Frontend/MiniProjects/WeatherApp/README.md b/Domains/Frontend/MiniProjects/WeatherApp/README.md deleted file mode 100644 index 507e3c45..00000000 --- a/Domains/Frontend/MiniProjects/WeatherApp/README.md +++ /dev/null @@ -1,18 +0,0 @@ -**Contributor:** Aaditya-2407 - -## Description -A simple web application that fetches and displays the current weather for a city using the OpenWeatherMap API. - -## Tech Stack -- HTML -- CSS -- JavaScript (Vanilla) -- Fetch API (OpenWeatherMap) - -## Setup -1. Get a free API key from [OpenWeatherMap](https://openweathermap.org/appid). -2. Open the `script.js` file. -3. Replace the placeholder `'YOUR_API_KEY'` with your actual API key. - -## How to Run -1. After adding your API key, open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/WeatherApp/index.html b/Domains/Frontend/MiniProjects/WeatherApp/index.html deleted file mode 100644 index 27cdd455..00000000 --- a/Domains/Frontend/MiniProjects/WeatherApp/index.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - Weather App - - - -
-

Weather App

-
- - -
-
-

Enter a city to get the weather.

-
-
- - - \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/WeatherApp/._index.html b/Domains/Frontend/MiniProjects/weather-app/._index.html similarity index 100% rename from Domains/Frontend/MiniProjects/WeatherApp/._index.html rename to Domains/Frontend/MiniProjects/weather-app/._index.html diff --git a/Domains/Frontend/MiniProjects/weather-app/README.md b/Domains/Frontend/MiniProjects/weather-app/README.md new file mode 100644 index 00000000..fca26cb4 --- /dev/null +++ b/Domains/Frontend/MiniProjects/weather-app/README.md @@ -0,0 +1,64 @@ +<<<<<<< HEAD +# 🌦️ 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 +======= +**Contributor:** Aaditya-2407 + +## Description +A simple web application that fetches and displays the current weather for a city using the OpenWeatherMap API. + +## Tech Stack +- HTML +- CSS +- JavaScript (Vanilla) +- Fetch API (OpenWeatherMap) + +## Setup +1. Get a free API key from [OpenWeatherMap](https://openweathermap.org/appid). +2. Open the `script.js` file. +3. Replace the placeholder `'YOUR_API_KEY'` with your actual API key. + +## How to Run +1. After adding your API key, open the `index.html` file in your web browser. +>>>>>>> main diff --git a/Domains/Frontend/MiniProjects/weather-app/index.html b/Domains/Frontend/MiniProjects/weather-app/index.html new file mode 100644 index 00000000..77cf4776 --- /dev/null +++ b/Domains/Frontend/MiniProjects/weather-app/index.html @@ -0,0 +1,50 @@ + + + +<<<<<<< HEAD + + + Weather App + + + +
+

🌤️ Weather App

+
+ + +
+ +
+ + + + +======= + + + Weather App + + + +
+

Weather App

+
+ + +
+
+

Enter a city to get the weather.

+
+
+ + + +>>>>>>> main diff --git a/Domains/Frontend/MiniProjects/WeatherApp/script.js b/Domains/Frontend/MiniProjects/weather-app/script.js similarity index 52% rename from Domains/Frontend/MiniProjects/WeatherApp/script.js rename to Domains/Frontend/MiniProjects/weather-app/script.js index f4594a1c..fb130629 100644 --- a/Domains/Frontend/MiniProjects/WeatherApp/script.js +++ b/Domains/Frontend/MiniProjects/weather-app/script.js @@ -1,3 +1,53 @@ +<<<<<<< HEAD +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`; +} +======= const cityInput = document.getElementById('city-input'); const searchBtn = document.getElementById('search-btn'); const weatherInfoDiv = document.getElementById('weather-info'); @@ -55,4 +105,5 @@ cityInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { getWeather(); } -}); \ No newline at end of file +}); +>>>>>>> main diff --git a/Domains/Frontend/MiniProjects/WeatherApp/style.css b/Domains/Frontend/MiniProjects/weather-app/style.css similarity index 61% rename from Domains/Frontend/MiniProjects/WeatherApp/style.css rename to Domains/Frontend/MiniProjects/weather-app/style.css index 5e898042..3c445a13 100644 --- a/Domains/Frontend/MiniProjects/WeatherApp/style.css +++ b/Domains/Frontend/MiniProjects/weather-app/style.css @@ -1,3 +1,74 @@ +<<<<<<< HEAD +* { + 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; +} +======= body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; @@ -85,4 +156,5 @@ h1 { .error { color: #ff3b30; font-weight: 500; -} \ No newline at end of file +} +>>>>>>> main