Skip to content

Commit

Permalink
hh
Browse files Browse the repository at this point in the history
  • Loading branch information
@tonmoy7722
tonmoy7722 committed Aug 25, 2024
1 parent f5b91b0 commit f3df826
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 10 deletions.
9 changes: 9 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,15 @@ <h2>Get the weather details of any city, Right Now!</h2>
<p id="precipitation">Chance of Precipitation: -%</p>
<p id="cloud-cover">Cloud Cover: -%</p>
</div>
<div id="forecast-container" style="display: none;">
<button id="prev-hour" class="arrow-button">←</button>
<div id="forecast-slider">
<!-- Forecast hours will be dynamically added here -->
</div>
<button id="next-hour" class="arrow-button">→</button>
</div>
<button id="back-button" onclick="goBack()" style="display: none;">← Back</button>
<div id="weather-widget-container"></div> <!-- Widget Container -->
</main>
</div>
<script src="script.js"></script>
Expand Down
80 changes: 70 additions & 10 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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;
Expand All @@ -29,31 +39,66 @@ 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 = `
<h3>${formattedTime} - ${city} (${data.location.country})</h3>
<h3>${city} (${data.location.country})</h3>
<img id="weather-icon" src="${weatherIconUrl}" alt="${weatherConditionValue}">
<p id="temperature">Temperature: ${temperatureValue}°C</p>
<p id="weather-condition">Weather: ${weatherConditionValue}</p>
<p id="precipitation">Chance of Precipitation: ${precip}%</p>
<p id="cloud-cover">Cloud Cover: ${cloud}%</p>
`;

// 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 = `
<p>${hourData.time.split(' ')[1]}</p>
<img src="${hourData.condition.icon}" alt="${hourData.condition.text}">
<p>${hourData.temp_c}°C</p>
<p>${hourData.condition.text}</p>
`;
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();

Expand All @@ -64,3 +109,18 @@ searchButton.addEventListener('click', () => {

getWeatherData(searchTerm);
});

backButton.addEventListener('click', () => {
searchInput.value = '';
weatherInfo.innerHTML = `
<h2>Get the weather details of any city, Right Now!</h2>
<img id="weather-icon" src="" alt="Weather Icon" style="visibility: hidden;">
<p id="temperature">Temperature: -°C</p>
<p id="weather-condition">Current Weather: </p>
<p id="precipitation">Chance of Precipitation: -%</p>
<p id="cloud-cover">Cloud Cover: -%</p>
`;
forecastSlider.innerHTML = ''; // Clear forecast data
forecastContainer.style.display = 'none'; // Hide the forecast box
backButton.style.display = 'none'; // Hide the back button
});
108 changes: 108 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

0 comments on commit f3df826

Please sign in to comment.