From 9e1ff3894d17ee3d76727c12d9f57fae86023526 Mon Sep 17 00:00:00 2001 From: CyberSphinxxx Date: Sun, 22 Sep 2024 23:08:48 +0800 Subject: [PATCH] added show more info button --- index.html | 29 +++++++++++++++------ script.js | 76 +++++++++++++++++++++++++++++++++++++++++------------- styles.css | 70 ++++++++++++++++++++++++++++++------------------- 3 files changed, 122 insertions(+), 53 deletions(-) diff --git a/index.html b/index.html index 47e017f..af48fd5 100644 --- a/index.html +++ b/index.html @@ -8,30 +8,43 @@ -
-
+
+

Weather App☀️

- + - - +
-

-

-

+ +
+ + +
+ + +
+ + +
+
diff --git a/script.js b/script.js index 7f8c2f3..e690d48 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,3 @@ - const apiKey = '4525a9ec3053fd7b173e9195f33778f1'; // Function to get weather based on the city input @@ -11,22 +10,33 @@ async function getWeatherByCity(city) { if (data.cod === 200) { // Successfully fetched weather data - document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`; - document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`; - document.getElementById('weatherDescription').textContent = `Weather: ${data.weather[0].description}`; + document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`; + document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`; + document.getElementById('weatherDescription').textContent = `Weather: ${data.weather[0].description}`; + + + // More detailed weather info + document.getElementById('humidity').textContent = `Humidity: ${data.main.humidity}%`; + document.getElementById('windSpeed').textContent = `Wind Speed: ${data.wind.speed} m/s`; + document.getElementById('weatherIcon').src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`; + + // Show more info container + document.getElementById('moreInfoContainer').style.display = 'none'; // Initially hide } else { // Handle the error, city not found, etc. - document.getElementById('cityName').textContent = 'City not found'; - document.getElementById('temperature').textContent = ''; - document.getElementById('weatherDescription').textContent = ''; + document.getElementById('cityName').textContent = 'City not found'; + document.getElementById('temperature').textContent = ''; + document.getElementById('weatherDescription').textContent = ''; + document.getElementById('humidity').textContent = ''; + document.getElementById('windSpeed').textContent = ''; } - } catch (error) { + } + + catch (error) { console.error('Error fetching the weather data:', error); document.getElementById('cityName').textContent = 'Error fetching weather data'; - document.getElementById('temperature').textContent = ''; - document.getElementById('weatherDescription').textContent = ''; } } @@ -36,18 +46,28 @@ async function getWeatherByLocation(lat, lon) { try { const response = await fetch(url); - const data = await response.json(); + const data = await response.json(); if (data.cod === 200) { // Successfully fetched weather data for location - document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`; - document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`; + document.getElementById('cityName').textContent = `${data.name}, ${data.sys.country}`; + document.getElementById('temperature').textContent = `Temperature: ${data.main.temp}°C`; document.getElementById('weatherDescription').textContent = `Weather: ${data.weather[0].description}`; - } else { + + + // More detailed weather info + document.getElementById('humidity').textContent = `Humidity: ${data.main.humidity}%`; + document.getElementById('windSpeed').textContent = `Wind Speed: ${data.wind.speed} m/s`; + document.getElementById('weatherIcon').src = `http://openweathermap.org/img/wn/${data.weather[0].icon}@2x.png`; + } + + else { // Handle errors document.getElementById('cityName').textContent = 'Location not found'; } - } catch (error) { + } + + catch (error) { console.error('Error fetching the weather data:', error); document.getElementById('cityName').textContent = 'Error fetching weather data'; } @@ -58,7 +78,9 @@ document.getElementById('getWeatherBtn').addEventListener('click', function () { const city = document.getElementById('cityInput').value; if (city) { getWeatherByCity(city); - } else { + } + + else { document.getElementById('cityName').textContent = 'Please enter a city name'; } }); @@ -83,7 +105,25 @@ window.onload = function () { } } ); - } else { + + } + + else { document.getElementById('cityName').textContent = 'Geolocation not supported by this browser'; } -}; \ No newline at end of file +}; + +// Function to handle the button click for showing more info +document.getElementById('showMoreBtn').addEventListener('click', function () { + const moreInfoContainer = document.getElementById('moreInfoContainer'); + + if (moreInfoContainer.style.display === 'none' || moreInfoContainer.style.display === '') { + moreInfoContainer.style.display = 'block'; // Show the container + document.getElementById('showMoreBtn').textContent = 'Hide More Info'; + } + + else { + moreInfoContainer.style.display = 'none'; // Hide the container + document.getElementById('showMoreBtn').textContent = 'Show More Info'; + } +}); diff --git a/styles.css b/styles.css index 6759e44..59ee259 100644 --- a/styles.css +++ b/styles.css @@ -12,6 +12,19 @@ body { background-size: cover; } +/* Universal Box Sizing */ +* { + box-sizing: border-box; /* Ensures padding and border are included in width */ +} + +/* Main Wrapper for Flexbox Layout */ +#containerWrapper { + display: flex; + justify-content: center; /* Center the items */ + width: 90%; /* Full width */ + margin: 0 auto; /* Center the container on the page */ +} + /* Main Container */ #bg_container { background-color: rgba(255, 255, 255, 0.85); @@ -20,11 +33,21 @@ body { box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); max-width: 400px; text-align: center; + margin-right: 20px; /* Space between containers */ + border: 1px, rgb(0, 0, 0); + border-style: solid; } -/* Universal Box Sizing */ -* { - box-sizing: border-box; /* Ensures padding and border are included in width */ +/* More Info Container */ +#moreInfoContainer { + background-color: rgba(255, 255, 255, 0.85); + padding: 40px 30px; + border-radius: 15px; + box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); + max-width: 400px; + text-align: center; + border: 1px, rgb(0, 0, 0); + border-style: solid; } /* Input and Button Styling */ @@ -50,6 +73,7 @@ button:hover { background-color: #004d40; } +/* Weather Info Styles */ .weather-info { margin-top: 25px; color: #333; @@ -74,17 +98,7 @@ button:hover { margin-top: 5px; } -@media (max-width: 600px) { - #bg_container { - padding: 30px 20px; - width: 90%; - } - - #temperature { - font-size: 2em; - } -} - +/* Footer Styles */ .footer { position: fixed; bottom: 10px; @@ -97,18 +111,6 @@ button:hover { box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); } -.footer_name { - position: fixed; - bottom: 10px; - right: 10px; - font-size: 14px; - color: #ffffff; - background-color: rgba(0, 0, 0, 0.5); - padding: 5px 10px; - border-radius: 5px; - box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); -} - .footer_github { position: fixed; bottom: 10px; @@ -119,4 +121,18 @@ button:hover { padding: 5px 10px; border-radius: 5px; box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); -} \ No newline at end of file +} + +/* Media Queries */ +@media (max-width: 600px) { + #bg_container, #moreInfoContainer { + max-width: 90%; /* Full width on smaller screens */ + margin-right: 0; /* Remove right margin */ + } +} + +@media (min-width: 600px) { + #bg_container, #moreInfoContainer { + max-width: 45%; /* Adjust width for larger screens */ + } +}