acesdit · Tejas-Santosh-Nalawade · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/README.md b/Domains/Frontend/MiniProjects/WeatherApp/README.md
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/index.html b/Domains/Frontend/MiniProjects/WeatherApp/index.html
diff --git a/...tend/MiniProjects/WeatherApp/._index.html → ...end/MiniProjects/weather-app/._index.html b/...tend/MiniProjects/WeatherApp/._index.html → ...end/MiniProjects/weather-app/._index.html
diff --git a/Domains/Frontend/MiniProjects/weather-app/README.md 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
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<<<<<<< HEAD
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Weather App</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="container">
+    <h1>🌤️ Weather App</h1>
+    <div class="search-box">
+      <input type="text" id="cityInput" placeholder="Enter city name..." />
+      <button id="searchBtn">Search</button>
+    </div>
+    <div class="weather-info hidden" id="weatherInfo">
+      <h2 id="cityName"></h2>
+      <img id="weatherIcon" alt="Weather icon" />
+      <p id="temperature"></p>
+      <p id="description"></p>
+      <p id="humidity"></p>
+      <p id="wind"></p>
+    </div>
+  </div>
+
+  <script src="script.js"></script>
+</body>
+</html>
+=======
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Weather App</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="weather-container">
+        <h1>Weather App</h1>
+        <div class="input-container">
+            <input type="text" id="city-input" placeholder="Enter city name...">
+            <button id="search-btn">Search</button>
+        </div>
+        <div id="weather-info" class="weather-info">
+            <p>Enter a city to get the weather.</p>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
+>>>>>>> main
diff --git a/...rontend/MiniProjects/WeatherApp/script.js → ...ontend/MiniProjects/weather-app/script.js b/...rontend/MiniProjects/WeatherApp/script.js → ...ontend/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();
     }
-});
+});
+>>>>>>> main
diff --git a/...rontend/MiniProjects/WeatherApp/style.css → ...ontend/MiniProjects/weather-app/style.css b/...rontend/MiniProjects/WeatherApp/style.css → ...ontend/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;
-}
+}
+>>>>>>> main