Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: added weather widget #1643

Merged
merged 2 commits into from
Nov 16, 2024
Merged

feat: added weather widget #1643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9e61cd
added weather widget to destinations
advika31 Nov 15, 2024
1030d35
added weather widget
advika31 Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
110 changes: 109 additions & 1 deletion dedicated destinations/Ladakh/ladakh.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -347,4 +347,112 @@
#btn-style {
font-size: 0.6rem;
}
}
}

/* #weather-widget {
border: 1px solid #ddd;
margin-top: 80px;
background: linear-gradient(135deg, #4a90e2, #1c1e21);
color: #fff;
padding: 15px;
height: 900px;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
font-family: 'Arial', sans-serif;
display: inline-flex;
flex-direction: column;
align-items: center;
}

#weather-widget h3 {
margin-bottom: 8px;
font-size: 1.2rem;
color: #ffeb3b;
}

#weather-widget .weather-description {
font-size: 1rem;
font-weight: 500;
color: #ffdd57;
}

#weather-widget .temperature {
font-size: 1.4rem;
font-weight: bold;
margin: 10px 0;
}

#weather-widget .humidity {
font-size: 0.9rem;
color: #b3e5fc;
}

#weather-widget .icon {
margin-top: 10px;
} */
#weather-widget .heading {
font-size: 1rem;
font-weight: bold;
color: #d4f3c5; /* Yellow for headings */
}

#weather-widget .value {
font-size: 1 rem;
font-weight: bold;
color: #b3e5fc; /* Light blue for values */
}
#weather-widget {
margin-top: 80px;
padding: 15px;
background: linear-gradient(135deg, #4a90e2, #1c1e21);
color: #d4f3c5;
font-weight: bold;
font-size: 1 rem;
text-align: center;
font-family: 'Arial', sans-serif;
height: 750px;
border-radius: 12px;
position: relative;
border: 2px solid;
border-image-slice: 1;
border-width: 3px;
border-image-source: linear-gradient(to right, #7688e3, #2e023b);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
animation: glowing 2s infinite alternate;
}

@keyframes glowing {
0% {
box-shadow: 0 0 10px #7688e3, 0 0 20px #7688e3;
}
100% {
box-shadow: 0 0 20px #7688e3, 0 0 30px #7688e3;
}
}

#weather-widget h3 {
font-size: 1.3rem;
color: #ffeb3b;
margin: 0;
}

.weather-icon {
width: 100px;
height: 100px;
animation: bounce 1.5s infinite ease-in-out;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

#weather-widget:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}
57 changes: 47 additions & 10 deletions dedicated destinations/Ladakh/ladakh.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@
</ul>

<a href="../../index.html#cnt-form" class="contact-btn">
<button class="btn aos-init aos-animate" id="btn-style" style="margin: 0;" data-aos="fade-down" fdprocessedid="kglas">Contact Us</button>
<button class="btn aos-init aos-animate" id="btn-style" style="margin: 0;" data-aos="fade-down"
fdprocessedid="kglas">Contact Us</button>
</a>
<div class="hamburger" data-aos="fade-down">
<div class="line"></div>
Expand All @@ -65,10 +66,15 @@

<div class="features">
<h3><i title="BBQ meal included" class="fa fal fa-utensils"></i> Food Items</h3>
<p> Food is a means to provide important insights into the culture and history of a place. Since Ladakh is rich in culture and history, eating food in Ladakh is similar to taking a trip down the memory lane and reliving the history that this
<p> Food is a means to provide important insights into the culture and history of a place. Since Ladakh
is rich in culture and history, eating food in Ladakh is similar to taking a trip down the memory
lane and reliving the history that this
region has to offer.
<br> <br> One of the best parts of travelling in Ladakh is to savour different dishes and cuisines prepared by the locals. Tibetan influence on Ladakhi cuisine is palpable, especially thukpa and momos. Ladakhi food is not spicy as
Indian cuisine and is simple but healthy.</p>
<br> <br> One of the best parts of travelling in Ladakh is to savour different dishes and cuisines
prepared by the locals. Tibetan influence on Ladakhi cuisine is palpable, especially thukpa and
momos. Ladakhi food is not spicy as
Indian cuisine and is simple but healthy.
</p>


</p>
Expand Down Expand Up @@ -96,16 +102,24 @@ <h3><i class="fa fa-undo"></i> Free cancellation</h3>
</div>

<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3388038.7392918067!2d74.80360265649291!3d33.976307729493044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38fd86bce37d7139%3A0xc6c2990fdad28ac7!2sLadakh!5e0!3m2!1sen!2sin!4v1717735048609!5m2!1sen!2sin"
width="800" height="200" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3388038.7392918067!2d74.80360265649291!3d33.976307729493044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x38fd86bce37d7139%3A0xc6c2990fdad28ac7!2sLadakh!5e0!3m2!1sen!2sin!4v1717735048609!5m2!1sen!2sin"
width="800" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

<div class="description">
<h1><u>Description</u></h1> <br>
<p>
Ladakh is most famous for breathtaking landscapes, the crystal clear skies, the highest mountain passes, thrilling adventure activities, Buddhist Monasteries and festivals. Not only is it the only place in India where the graceful Double Hump camels found,
but it is also the place where you will find the Magnetic Hill, the one-of-a-kind phenomena that defies gravity. Ladakh gains a lot of popularity for being the only cold desert in India apart from bordering the World’s highest saltwater
Lake Pangong Lake. Riding up the highest motorable road in the world, Khardung la is a dream come true for many. The Hunder sand dunes, frozen river trek and snow leopards all find their only home in Ladakh.
Ladakh is most famous for breathtaking landscapes, the crystal clear skies, the highest mountain
passes, thrilling adventure activities, Buddhist Monasteries and festivals. Not only is it the only
place in India where the graceful Double Hump camels found,
but it is also the place where you will find the Magnetic Hill, the one-of-a-kind phenomena that
defies gravity. Ladakh gains a lot of popularity for being the only cold desert in India apart from
bordering the World’s highest saltwater
Lake Pangong Lake. Riding up the highest motorable road in the world, Khardung la is a dream come
true for many. The Hunder sand dunes, frozen river trek and snow leopards all find their only home
in Ladakh.



Expand All @@ -117,6 +131,21 @@ <h1><u>Description</u></h1> <br>

</div>

<div id="weather-widget">
<h3>Weather in <span id="city-name"></span></h3>
<p id="temperature">Temperature: --°C</p>
<p id="feels-like">Feels Like: --°C</p>
<p id="humidity">Humidity: --%</p>
<p id="weather-description">Condition: --</p>
<p id="wind-speed">Wind Speed: -- m/s</p>
<p id="wind-gust">Wind Gust: -- m/s</p>
<p id="cloudiness">Cloudiness: --%</p>
<p id="pressure">Pressure: -- hPa</p>
<p id="sea-level-pressure">Sea Level Pressure: -- hPa</p>
<p id="snow-volume">Snow Volume (1h): -- mm</p>
<div id="weather-icon"></div>
</div>


</section>

Expand Down Expand Up @@ -146,7 +175,10 @@ <h4>Support</h4>
<div class="footer__col">
<h4>Address</h4>
<div class="mapouter">
<div class="gmap_canvas"><iframe width="200" height="200" id="gmap_canvas" src="https://maps.google.com/maps?q=wellington%20street%20kolkata&t=k&z=11&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a href="https://embedgooglemap.net/124/">invincible 123movies</a><br>
<div class="gmap_canvas"><iframe width="200" height="200" id="gmap_canvas"
src="https://maps.google.com/maps?q=wellington%20street%20kolkata&t=k&z=11&ie=UTF8&iwloc=&output=embed"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><a
href="https://embedgooglemap.net/124/">invincible 123movies</a><br>
<style>
.mapouter {
position: relative;
Expand Down Expand Up @@ -179,5 +211,10 @@ <h4>Reach Out To Us</h4>


<script src="ladakh.js"></script>
<script>
const cityName = "Ladakh";
fetchWeather(cityName);

</script>

</html>
47 changes: 46 additions & 1 deletion dedicated destinations/Ladakh/ladakh.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,49 @@ fetch(url, options)

weatherInfoContainer.innerHTML = weatherInfoHTML;
})
.catch(error => console.error('Error fetching weather data:', error));
.catch(error => console.error('Error fetching weather data:', error));

const apiKey = 'e4636933701791149c0636b03c135f71';
const cityName = 'Ladakh';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=35.1526&lon=77.5771&appid=e4636933701791149c0636b03c135f71&units=metric`;

// Function to fetch weather data
function fetchWeather() {
fetch(apiUrl)
.then(response => response.json())
.then(data => {
// Extract data from the API response
const temperature = data.main.temp; // Temperature in Celsius
const feelsLike = data.main.feels_like; // Feels-like temperature in Celsius
const humidity = data.main.humidity; // Humidity in %
const weatherDescription = data.weather[0].description; // Weather description
const iconCode = data.weather[0].icon; // Icon code for weather condition
const windSpeed = data.wind.speed; // Wind speed in m/s
const windGust = data.wind.gust; // Wind gust in m/s
const cloudiness = data.clouds.all; // Cloudiness in %
const pressure = data.main.pressure; // Atmospheric pressure in hPa
const seaLevelPressure = data.main.sea_level; // Sea level pressure
const snowVolume = data.snow ? data.snow['1h'] : 0; // Snow volume in last 1 hour

// Update HTML elements with the fetched data
document.getElementById('city-name').textContent = cityName;
document.getElementById('temperature').innerHTML = `<span class="heading">Temperature: </span> <span class = "value">${temperature}°C`;
document.getElementById('feels-like').innerHTML = `<span class="heading">Feels Like: </span> <span class = "value">${feelsLike}°C`;
document.getElementById('humidity').innerHTML = `<span class="heading">Humidity: </span> <span class = "value">${humidity}%`;
document.getElementById('weather-description').textContent = weatherDescription.charAt(0).toUpperCase() + weatherDescription.slice(1);
document.getElementById('wind-speed').innerHTML = `<span class="heading">Wind Speed: </span> <span class = "value">${windSpeed} m/s`;
document.getElementById('wind-gust').innerHTML = `<span class="heading">Wind Gust: </span> <span class = "value">${windGust || 'N/A'} m/s`;
document.getElementById('cloudiness').innerHTML = `<span class="heading">Cloudiness: </span> <span class = "value">${cloudiness}%`;
document.getElementById('pressure').innerHTML = `<span class="heading">Pressure: </span> <span class = "value">${pressure} hPa`;
document.getElementById('sea-level-pressure').innerHTML = `<span class="heading">Sea Level Pressure: </span> <span class = "value">${seaLevelPressure || 'N/A'} hPa`;
document.getElementById('snow-volume').innerHTML = `<span class="heading">Snow Volume (1h): </span> <span class = "value">${snowVolume} mm`;

// Set the weather icon (from OpenWeatherMap's icon set)
const iconUrl = `https://openweathermap.org/img/wn/${iconCode}@2x.png`;
document.getElementById('weather-icon').innerHTML = `<img src="${iconUrl}" alt="Weather Icon" class="weather-icon">`;
})
.catch(error => console.error('Error fetching weather data:', error));
}

// Call the function to load weather data when the page loads
window.onload = fetchWeather;
69 changes: 68 additions & 1 deletion dedicated destinations/Taj_Mahal/Taj.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -348,4 +348,71 @@
#btn-style {
font-size: 0.6rem;
}
}
}

#weather-widget .heading {
font-size: 1rem;
font-weight: bold;
color: #d4f3c5; /* Yellow for headings */
}

#weather-widget .value {
font-size: 1 rem;
font-weight: bold;
color: #b3e5fc; /* Light blue for values */
}
#weather-widget {
margin-top: 80px;
padding: 15px;
background: linear-gradient(135deg, #4a90e2, #1c1e21);
color: #d4f3c5;
font-weight: bold;
font-size: 1 rem;
text-align: center;
font-family: 'Arial', sans-serif;
height: 750px;
border-radius: 12px;
position: relative;
border: 2px solid;
border-image-slice: 1;
border-width: 3px;
border-image-source: linear-gradient(to right, #7688e3, #2e023b);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
animation: glowing 2s infinite alternate;
}

@keyframes glowing {
0% {
box-shadow: 0 0 10px #7688e3, 0 0 20px #7688e3;
}
100% {
box-shadow: 0 0 20px #7688e3, 0 0 30px #7688e3;
}
}

#weather-widget h3 {
font-size: 1.3rem;
color: #ffeb3b;
margin: 0;
}

.weather-icon {
width: 100px;
height: 100px;
animation: bounce 1.5s infinite ease-in-out;
}

@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}

#weather-widget:hover {
transform: scale(1.05);
transition: transform 0.3s ease-in-out;
}

20 changes: 20 additions & 0 deletions dedicated destinations/Taj_Mahal/Taj.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,21 @@ <h1><u>Description</u></h1> <br>

</div>

<div id="weather-widget">
<h3>Weather in <span id="city-name"></span></h3>
<p id="temperature">Temperature: --°C</p>
<p id="feels-like">Feels Like: --°C</p>
<p id="humidity">Humidity: --%</p>
<p id="weather-description">Condition: --</p>
<p id="wind-speed">Wind Speed: -- m/s</p>
<p id="wind-gust">Wind Gust: -- m/s</p>
<p id="cloudiness">Cloudiness: --%</p>
<p id="pressure">Pressure: -- hPa</p>
<p id="sea-level-pressure">Sea Level Pressure: -- hPa</p>
<p id="snow-volume">Snow Volume (1h): -- mm</p>
<div id="weather-icon"></div>
</div>


</section>

Expand Down Expand Up @@ -178,5 +193,10 @@ <h4>Reach Out To Us</h4>


<script src="Taj.js"></script>
<script>
const cityName = "Taj Mahal";
fetchWeather(cityName);

</script>

</html>
Loading
Loading