Chance of Precipitation: -%
Cloud Cover: -%
+ + + diff --git a/script.js b/script.js index 2e197b1..99bb17b 100644 --- a/script.js +++ b/script.js @@ -8,9 +8,17 @@ const weatherCondition = document.getElementById('weather-condition'); const precipitation = document.getElementById('precipitation'); const cloudCover = document.getElementById('cloud-cover'); const weatherIcon = document.getElementById('weather-icon'); +const backButton = document.getElementById('back-button'); +const forecastContainer = document.getElementById('forecast-container'); +const forecastSlider = document.getElementById('forecast-slider'); +const prevHourButton = document.getElementById('prev-hour'); +const nextHourButton = document.getElementById('next-hour'); + +let hourlyData = []; +let currentIndex = 0; async function getWeatherData(location) { - const url = `https://api.weatherapi.com/v1/current.json?key=${apiKey}&q=${location}&aqi=yes`; + const url = `https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${location}&hours=24`; try { const response = await fetch(url); @@ -21,6 +29,8 @@ async function getWeatherData(location) { if (data.error) { weatherInfo.textContent = `Error: ${data.error.message}`; + forecastContainer.style.display = 'none'; // Hide the forecast box on error + backButton.style.display = 'none'; // Hide the back button on error } else { const city = data.location.name; const temperatureValue = data.current.temp_c; @@ -29,15 +39,13 @@ async function getWeatherData(location) { const precip = data.current.precip_mm; const cloud = data.current.cloud; - // Get current local time at the searched location - const localTime = data.location.localtime; - - // Format the local time using toLocaleTimeString - const formattedTime = new Date(localTime).toLocaleTimeString('en-US', { hour12: true }); + // Get hourly forecast data + hourlyData = data.forecast.forecastday[0].hour; + currentIndex = 0; // Reset index - // Display current weather + // Update weather info weatherInfo.innerHTML = ` -Temperature: ${temperatureValue}°C
Weather: ${weatherConditionValue}
@@ -45,15 +53,52 @@ async function getWeatherData(location) {Cloud Cover: ${cloud}%
`; - // Make weather icon visible - weatherIcon.style.visibility = 'visible'; + // Display hourly forecast + displayHourlyForecast(); + forecastContainer.style.display = 'block'; // Show forecast box + backButton.style.display = 'block'; // Show back button } } catch (error) { console.error(error); weatherInfo.textContent = 'Error fetching weather data.'; + forecastContainer.style.display = 'none'; // Hide the forecast box on error + backButton.style.display = 'none'; // Hide the back button on error } } +function displayHourlyForecast() { + forecastSlider.innerHTML = ''; + const numberOfHours = hourlyData.length; + const itemsToShow = 6; + + for (let i = currentIndex; i < Math.min(currentIndex + itemsToShow, numberOfHours); i++) { + const hourData = hourlyData[i]; + const forecastElement = document.createElement('div'); + forecastElement.classList.add('forecast-hour'); + forecastElement.innerHTML = ` +${hourData.time.split(' ')[1]}
+${hourData.temp_c}°C
+${hourData.condition.text}
+ `; + forecastSlider.appendChild(forecastElement); + } +} + +prevHourButton.addEventListener('click', () => { + if (currentIndex > 0) { + currentIndex -= 6; + displayHourlyForecast(); + } +}); + +nextHourButton.addEventListener('click', () => { + if (currentIndex + 6 < hourlyData.length) { + currentIndex += 6; + displayHourlyForecast(); + } +}); + searchButton.addEventListener('click', () => { const searchTerm = searchInput.value.trim(); @@ -64,3 +109,18 @@ searchButton.addEventListener('click', () => { getWeatherData(searchTerm); }); + +backButton.addEventListener('click', () => { + searchInput.value = ''; + weatherInfo.innerHTML = ` +Temperature: -°C
+Current Weather:
+Chance of Precipitation: -%
+Cloud Cover: -%
+ `; + forecastSlider.innerHTML = ''; // Clear forecast data + forecastContainer.style.display = 'none'; // Hide the forecast box + backButton.style.display = 'none'; // Hide the back button +}); diff --git a/style.css b/style.css index 1f90dc5..83ec8b4 100644 --- a/style.css +++ b/style.css @@ -85,3 +85,111 @@ h1 { margin: 10px auto; } +#forecast-container { + display: flex; + align-items: center; + margin-top: 20px; + overflow: hidden; + position: relative; + background-color: rgba(255, 255, 255, 0.9); + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); + color: #000; + width: 100%; + max-width: 800px; + box-sizing: border-box; +} + +#forecast-slider { + display: flex; + overflow: hidden; + white-space: nowrap; + gap: 10px; + flex: 1; + justify-content: center; /* Center the forecast items */ +} + +.forecast-hour { + display: inline-block; + width: 150px; /* Fixed width for forecast items */ + box-sizing: border-box; + padding: 5px; + background: #fff; + border-radius: 5px; + text-align: center; + font-size: 0.8em; + height: 120px; /* Adjusted height */ + overflow: hidden; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.forecast-hour img { + width: 50px; + height: auto; + margin-bottom: 5px; +} + +.forecast-hour p { + margin: 2px 0; +} + +.arrow-button { + background-color: #007bff; + color: #fff; + border: none; + border-radius: 5px; + padding: 10px; + cursor: pointer; + transition: background-color 0.2s ease-in-out; + position: absolute; + top: 50%; + transform: translateY(-50%); + z-index: 2; +} + +#prev-hour { + left: 0; +} + +#next-hour { + right: 0; +} + +.arrow-button:hover { + background-color: #0062cc; +} + +.arrow-button:focus { + outline: none; +} + +#back-button { + padding: 10px 20px; + background-color: #28a745; + color: #fff; + border: none; + border-radius: 5px; + font-size: 16px; + cursor: pointer; + transition: background-color 0.2s ease-in-out; + display: none; + position: below; + bottom: 10px; + left: 10px; + text-align: center; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +#back-button:hover { + background-color: #218838; +} + +#back-button:active { + background-color: #1e7e34; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); +} + +#back-button:focus { + outline: none; +}