acesdit · Tejas-Santosh-Nalawade · Oct 20, 2025 · Oct 20, 2025
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/._index.html b/Domains/Frontend/MiniProjects/WeatherApp/._index.html
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/README.md b/Domains/Frontend/MiniProjects/WeatherApp/README.md
@@ -0,0 +1,18 @@
+**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.
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/index.html b/Domains/Frontend/MiniProjects/WeatherApp/index.html
@@ -0,0 +1,22 @@
+<!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="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>
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/script.js b/Domains/Frontend/MiniProjects/WeatherApp/script.js
@@ -0,0 +1,58 @@
+const cityInput = document.getElementById('city-input');
+const searchBtn = document.getElementById('search-btn');
+const weatherInfoDiv = document.getElementById('weather-info');
+
+// IMPORTANT: Replace 'YOUR_API_KEY' with your actual OpenWeatherMap API key
+const apiKey = 'YOUR_API_KEY'; 
+
+async function getWeather() {
+    const city = cityInput.value.trim();
+    if (city === '') {
+        weatherInfoDiv.innerHTML = '<p class="error">Please enter a city name.</p>';
+        return;
+    }
+
+    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`; // Use metric units for Celsius
+
+    try {
+        weatherInfoDiv.innerHTML = '<p>Loading...</p>'; // Show loading state
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+            if (response.status === 404) {
+                throw new Error('City not found.');
+            } else {
+                throw new Error(`Error fetching weather: ${response.statusText}`);
+            }
+        }
+
+        const data = await response.json();
+        displayWeather(data);
+
+    } catch (error) {
+        console.error('Error fetching weather:', error);
+        weatherInfoDiv.innerHTML = `<p class="error">${error.message}</p>`;
+    }
+}
+
+function displayWeather(data) {
+    const { name, main, weather } = data;
+    const temp = main.temp;
+    const description = weather[0].description;
+    const icon = weather[0].icon;
+    const iconUrl = `https://openweathermap.org/img/wn/${icon}@2x.png`;
+
+    weatherInfoDiv.innerHTML = `
+        <h2>${name}</h2>
+        <img src="${iconUrl}" alt="${description}" class="weather-icon">
+        <p>${Math.round(temp)}°C</p> 
+        <p>${description.charAt(0).toUpperCase() + description.slice(1)}</p> 
+    `;
+}
+
+searchBtn.addEventListener('click', getWeather);
+cityInput.addEventListener('keypress', function(e) {
+    if (e.key === 'Enter') {
+        getWeather();
+    }
+});
diff --git a/Domains/Frontend/MiniProjects/WeatherApp/style.css b/Domains/Frontend/MiniProjects/WeatherApp/style.css
@@ -0,0 +1,88 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: linear-gradient(to bottom, #87CEEB, #4682B4); /* Sky blue gradient */
+    margin: 0;
+}
+
+.weather-container {
+    width: 90%;
+    max-width: 400px;
+    padding: 2rem;
+    background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
+    border-radius: 16px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
+    text-align: center;
+}
+
+h1 {
+    color: #333;
+    margin-bottom: 1.5rem;
+}
+
+.input-container {
+    display: flex;
+    margin-bottom: 1.5rem;
+}
+
+#city-input {
+    flex-grow: 1;
+    padding: 0.75rem;
+    border: 1px solid #ccc;
+    border-radius: 8px 0 0 8px;
+    font-size: 1rem;
+    outline: none;
+}
+
+#search-btn {
+    padding: 0.75rem 1.25rem;
+    border: none;
+    background-color: #007aff;
+    color: white;
+    font-weight: 600;
+    cursor: pointer;
+    border-radius: 0 8px 8px 0;
+    font-size: 1rem;
+    transition: background-color 0.2s ease;
+}
+
+#search-btn:hover {
+    background-color: #0056b3;
+}
+
+.weather-info {
+    margin-top: 1.5rem;
+    font-size: 1.1rem;
+    line-height: 1.6;
+    background-color: rgba(240, 240, 240, 0.7);
+    padding: 1rem;
+    border-radius: 8px;
+    min-height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.weather-info h2 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.5rem;
+}
+
+.weather-info p {
+    margin: 0.3rem 0;
+}
+
+.weather-icon {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 0.5rem;
+}
+
+.error {
+    color: #ff3b30;
+    font-weight: 500;
+}