From 4d98fedac06904107519aff5eb2930f3ceca007f Mon Sep 17 00:00:00 2001 From: Nandit Kalaria Date: Sat, 19 Oct 2024 15:48:26 +0530 Subject: [PATCH 1/2] Added Required Components --- css/style.css | 213 +++++++++++++++++++++++++++++++++++++++++--------- index.html | 68 +++++++++++++--- index.js | 47 +++++++++++ 3 files changed, 281 insertions(+), 47 deletions(-) diff --git a/css/style.css b/css/style.css index f6fe32b..7711c1e 100644 --- a/css/style.css +++ b/css/style.css @@ -18,8 +18,15 @@ body { background-color: rgba(255, 255, 255, 0.9); border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); - margin-top: 80px; - margin-bottom: 80px; + margin: 40px auto; +} + +header { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + margin-bottom: 30px; } .search-box, .features-box { @@ -36,13 +43,60 @@ body { background-color: #e6f3ff; } +.city-info { + text-align: center; + margin-bottom: 40px; /* Increased margin */ +} + +#city-name { + color: #2193b0; + font-size: 1.8em; + margin: 0; +} + +#current-date { + color: #555; + font-size: 1em; + margin: 15px 0 0; /* Increased top margin */ +} + +#change-city-btn { + padding: 10px 20px; + font-size: 14px; + font-family: 'Poppins', sans-serif; + font-weight: 600; + background-color: #2193b0; + color: white; + border: none; + border-radius: 25px; + cursor: pointer; + transition: background-color 0.3s ease; +} + +#change-city-btn:hover { + background-color: #1c7a94; +} + +main section { + background-color: #f0f8ff; + border-radius: 15px; + padding: 25px; + margin-bottom: 40px; /* Increased margin */ + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); + transition: transform 0.3s ease, background-color 0.3s ease; +} + +main section:hover { + transform: translateY(-5px); + background-color: #e6f3ff; +} + h1 { color: #2193b0; - margin-bottom: 20px; - text-align: center; - font-size: 3.5em; + font-size: 2.5em; font-weight: 700; text-shadow: 2px 2px 4px rgba(0,0,0,0.1); + margin: 0; } p { @@ -98,60 +152,126 @@ h2 { font-weight: 600; } -ul { - list-style-type: none; - padding: 0; +h3 { + color: #2193b0; + margin-bottom: 15px; + font-size: 1.5em; + font-weight: 600; } -li { - margin-bottom: 12px; +footer { + text-align: center; color: #555; + font-size: 0.9em; + margin-top: 30px; +} + +.hidden { + display: none; +} + +#weather-data { + opacity: 0; + transform: translateY(20px); + transition: opacity 0.3s ease, transform 0.3s ease; +} + +#weather-data.visible { + opacity: 1; + transform: translateY(0); +} + +.weather-details { display: flex; align-items: center; - font-size: 1.1em; - font-weight: 300; + justify-content: space-around; + padding: 20px; + flex-wrap: wrap; } -li:before { - content: "✓"; +.weather-icon { color: #2193b0; - font-weight: bold; - margin-right: 10px; - background-color: #e0f7fa; - width: 24px; - height: 24px; - border-radius: 50%; + margin-bottom: 15px; +} + +.weather-text { + text-align: center; +} + +.temperature { + font-size: 2.5em; + font-weight: 600; + color: #2193b0; + margin: 0; +} + +.description { + font-size: 1.2em; + color: #555; + margin: 5px 0 0; +} + +.forecast-container { display: flex; - justify-content: center; - align-items: center; + justify-content: space-between; + flex-wrap: wrap; } -@media screen and (max-width: 480px) { - h1 { - font-size: 2em; - } +.forecast-day { + text-align: center; + padding: 10px; + background-color: rgba(33, 147, 176, 0.1); + border-radius: 10px; + margin: 5px; + flex: 1; + min-width: 80px; +} - .container { - padding: 15px; - } +.forecast-day p { + margin: 5px 0; +} - .search-box, .features-box { - padding: 20px; - } +.forecast-day i { + font-size: 1.5em; + color: #2193b0; + margin: 10px 0; } + +.detail-item { + display: flex; + align-items: center; + margin-bottom: 10px; +} + +.detail-item i { + font-size: 1.5em; + color: #2193b0; + margin-right: 10px; +} + @media screen and (max-width: 768px) { .container { width: 95%; padding: 20px; + margin: 20px auto; } h1 { - font-size: 2.5em; + font-size: 2em; + } + + h2 { + font-size: 1.5em; + } + + h3 { + font-size: 1.3em; } p { font-size: 1em; } + .search-input { flex-direction: column; } @@ -169,11 +289,30 @@ li:before { #search-btn { border-radius: 25px; } - h2 { - font-size: 1.5em; + + .weather-details { + flex-direction: column; } - li { - font-size: 1em; + .forecast-day { + min-width: calc(50% - 10px); + } +} + +@media screen and (max-width: 480px) { + .container { + padding: 15px; + } + + h1 { + font-size: 1.8em; + } + + .search-box, .features-box { + padding: 20px; + } + + .forecast-day { + min-width: calc(100% - 10px); } } diff --git a/index.html b/index.html index 830a41b..1f9125b 100644 --- a/index.html +++ b/index.html @@ -4,27 +4,75 @@ + Weather.io
+
+

Weather.io

+
+
-

Weather.io

-

Experience the power of precise weather forecasting at your fingertips. Weather.io brings you real-time, accurate weather information from around the globe. Whether you're planning a trip, preparing for your day, or just curious about the conditions outside, we've got you covered with detailed forecasts and user-friendly features.

+

Enter a City

-
-

Features

-
    -
  • Real-time weather data
    • -
  • 5-day forecast
    • -
  • Temperature, humidity, and wind information
    • -
  • Beautiful weather icons
    • -
+ + + +
+

© 2023 Weather.io. All rights reserved.

+
diff --git a/index.js b/index.js index e69de29..fefbe48 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,47 @@ +document.addEventListener('DOMContentLoaded', () => { + const searchBtn = document.getElementById('search-btn'); + const cityInput = document.getElementById('city-input'); + const weatherData = document.getElementById('weather-data'); + + searchBtn.addEventListener('click', () => { + const city = cityInput.value.trim(); + if (city) { + fetchWeatherData(city); + } + }); + + cityInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') { + const city = cityInput.value.trim(); + if (city) { + fetchWeatherData(city); + } + } + }); + + function fetchWeatherData(city) { + // Here you would typically make an API call to get weather data + // For this example, we'll just show the weather data div + weatherData.classList.remove('hidden'); + setTimeout(() => { + weatherData.classList.add('visible'); + }, 10); + + // Update city name and date + document.getElementById('city-name').textContent = city; + updateCurrentDate(); + + // Populate weather info + // This is where you would update the weather, forecast, and rain/humidity info + // based on the API response + } + + function updateCurrentDate() { + const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; + const now = new Date(); + const dayName = days[now.getDay()]; + const dateString = now.toLocaleDateString(); // This will give you the date in the local format + + document.getElementById('current-date').textContent = `${dayName}, ${dateString}`; + } +}); From 0e60304e252615dd02463ccdf66f654df588e2c6 Mon Sep 17 00:00:00 2001 From: Nandit Kalaria Date: Sat, 19 Oct 2024 22:07:42 +0530 Subject: [PATCH 2/2] Created New HTML File and Cleared JS File --- index.html | 49 -------------------------------------- index.js | 47 ------------------------------------- weather_info.html | 60 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 60 insertions(+), 96 deletions(-) create mode 100644 weather_info.html diff --git a/index.html b/index.html index 1f9125b..60f0824 100644 --- a/index.html +++ b/index.html @@ -21,55 +21,6 @@

Enter a City

- - diff --git a/index.js b/index.js index fefbe48..e69de29 100644 --- a/index.js +++ b/index.js @@ -1,47 +0,0 @@ -document.addEventListener('DOMContentLoaded', () => { - const searchBtn = document.getElementById('search-btn'); - const cityInput = document.getElementById('city-input'); - const weatherData = document.getElementById('weather-data'); - - searchBtn.addEventListener('click', () => { - const city = cityInput.value.trim(); - if (city) { - fetchWeatherData(city); - } - }); - - cityInput.addEventListener('keypress', (e) => { - if (e.key === 'Enter') { - const city = cityInput.value.trim(); - if (city) { - fetchWeatherData(city); - } - } - }); - - function fetchWeatherData(city) { - // Here you would typically make an API call to get weather data - // For this example, we'll just show the weather data div - weatherData.classList.remove('hidden'); - setTimeout(() => { - weatherData.classList.add('visible'); - }, 10); - - // Update city name and date - document.getElementById('city-name').textContent = city; - updateCurrentDate(); - - // Populate weather info - // This is where you would update the weather, forecast, and rain/humidity info - // based on the API response - } - - function updateCurrentDate() { - const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; - const now = new Date(); - const dayName = days[now.getDay()]; - const dateString = now.toLocaleDateString(); // This will give you the date in the local format - - document.getElementById('current-date').textContent = `${dayName}, ${dateString}`; - } -}); diff --git a/weather_info.html b/weather_info.html new file mode 100644 index 0000000..b25a952 --- /dev/null +++ b/weather_info.html @@ -0,0 +1,60 @@ + + + + + + + + Weather Information + + +
+
+
+

City Name

+

Day, Current Date

+
+ +
+
+

Current Weather

+
+
+ +
+
+

25°C

+

Sunny

+
+
+
+ +
+

5-Day Forecast

+
+ +
+
+ +
+

Rain & Humidity

+
+
+ +

Chance of Rain: 20%

+
+
+ +

Humidity: 60%

+
+
+
+
+
+ + +
+ +