Skip to content

Commit

Permalink
added weather widget to destinations
Browse files Browse the repository at this point in the history
  • Loading branch information
@advika31
advika31 committed Nov 15, 2024
1 parent 12ed131 commit e9e61cd
Show file tree
Hide file tree
Showing 9 changed files with 469 additions and 16 deletions.
110 changes: 109 additions & 1 deletion dedicated destinations/Ladakh/ladakh.css
View file
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
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
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
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
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

0 comments on commit e9e61cd

Please sign in to comment.