diff --git a/Domains/Frontend/MiniProjects/WeatherApp/._index.html b/Domains/Frontend/MiniProjects/WeatherApp/._index.html new file mode 100644 index 00000000..390f683e Binary files /dev/null and b/Domains/Frontend/MiniProjects/WeatherApp/._index.html differ diff --git a/Domains/Frontend/MiniProjects/WeatherApp/README.md b/Domains/Frontend/MiniProjects/WeatherApp/README.md new file mode 100644 index 00000000..507e3c45 --- /dev/null +++ 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. \ 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..27cdd455 --- /dev/null +++ b/Domains/Frontend/MiniProjects/WeatherApp/index.html @@ -0,0 +1,22 @@ + + + + + + Weather App + + + +
+

Weather App

+
+ + +
+
+

Enter a city to get the weather.

+
+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/WeatherApp/script.js b/Domains/Frontend/MiniProjects/WeatherApp/script.js new file mode 100644 index 00000000..f4594a1c --- /dev/null +++ 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 = '

Please enter a city name.

'; + 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 = '

Loading...

'; // 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 = `

${error.message}

`; + } +} + +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 = ` +

${name}

+ ${description} +

${Math.round(temp)}°C

+

${description.charAt(0).toUpperCase() + description.slice(1)}

+ `; +} + +searchBtn.addEventListener('click', getWeather); +cityInput.addEventListener('keypress', function(e) { + if (e.key === 'Enter') { + getWeather(); + } +}); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/WeatherApp/style.css b/Domains/Frontend/MiniProjects/WeatherApp/style.css new file mode 100644 index 00000000..5e898042 --- /dev/null +++ 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; +} \ No newline at end of file