From e9e61cdc19f4ebf90b814071b9b25f7b37d10595 Mon Sep 17 00:00:00 2001
From: advika31 <advikasinghal31@gmail.com>
Date: Fri, 15 Nov 2024 13:48:04 +0530
Subject: [PATCH 1/2] added weather widget to destinations
---
dedicated destinations/Ladakh/ladakh.css | 110 +++++++++++++++++++++-
dedicated destinations/Ladakh/ladakh.html | 57 +++++++++--
dedicated destinations/Ladakh/ladakh.js | 47 ++++++++-
dedicated destinations/Taj_Mahal/Taj.css | 69 +++++++++++++-
dedicated destinations/Taj_Mahal/Taj.html | 20 ++++
dedicated destinations/Taj_Mahal/Taj.js | 47 ++++++++-
dedicated destinations/thailand/t.css | 68 ++++++++++++-
dedicated destinations/thailand/t.html | 19 ++++
dedicated destinations/thailand/t.js | 48 +++++++++-
9 files changed, 469 insertions(+), 16 deletions(-)
diff --git a/dedicated destinations/Ladakh/ladakh.css b/dedicated destinations/Ladakh/ladakh.css
index 8ab5f2b1..b3daa22c 100644
--- a/dedicated destinations/Ladakh/ladakh.css
+++ b/dedicated destinations/Ladakh/ladakh.css
@@ -347,4 +347,112 @@
#btn-style {
font-size: 0.6rem;
}
-}
\ No newline at end of file
+}
+
+/* #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;
+}
diff --git a/dedicated destinations/Ladakh/ladakh.html b/dedicated destinations/Ladakh/ladakh.html
index 66c14eff..a430930e 100644
--- a/dedicated destinations/Ladakh/ladakh.html
+++ b/dedicated destinations/Ladakh/ladakh.html
@@ -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>
@@ -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>
@@ -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.
@@ -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>
@@ -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;
@@ -179,5 +211,10 @@ <h4>Reach Out To Us</h4>
<script src="ladakh.js"></script>
+ <script>
+ const cityName = "Ladakh";
+ fetchWeather(cityName);
+
+ </script>
</html>
\ No newline at end of file
diff --git a/dedicated destinations/Ladakh/ladakh.js b/dedicated destinations/Ladakh/ladakh.js
index 074cf12d..cbd25755 100644
--- a/dedicated destinations/Ladakh/ladakh.js
+++ b/dedicated destinations/Ladakh/ladakh.js
@@ -49,4 +49,49 @@ fetch(url, options)
weatherInfoContainer.innerHTML = weatherInfoHTML;
})
- .catch(error => console.error('Error fetching weather data:', error));
\ No newline at end of file
+ .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;
\ No newline at end of file
diff --git a/dedicated destinations/Taj_Mahal/Taj.css b/dedicated destinations/Taj_Mahal/Taj.css
index 103562aa..08d732aa 100644
--- a/dedicated destinations/Taj_Mahal/Taj.css
+++ b/dedicated destinations/Taj_Mahal/Taj.css
@@ -348,4 +348,71 @@
#btn-style {
font-size: 0.6rem;
}
-}
\ No newline at end of file
+}
+
+#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;
+}
+
diff --git a/dedicated destinations/Taj_Mahal/Taj.html b/dedicated destinations/Taj_Mahal/Taj.html
index 5c6723e8..3f894f85 100644
--- a/dedicated destinations/Taj_Mahal/Taj.html
+++ b/dedicated destinations/Taj_Mahal/Taj.html
@@ -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>
@@ -178,5 +193,10 @@ <h4>Reach Out To Us</h4>
<script src="Taj.js"></script>
+ <script>
+ const cityName = "Taj Mahal";
+ fetchWeather(cityName);
+
+ </script>
</html>
\ No newline at end of file
diff --git a/dedicated destinations/Taj_Mahal/Taj.js b/dedicated destinations/Taj_Mahal/Taj.js
index 074cf12d..c69d1adc 100644
--- a/dedicated destinations/Taj_Mahal/Taj.js
+++ b/dedicated destinations/Taj_Mahal/Taj.js
@@ -49,4 +49,49 @@ fetch(url, options)
weatherInfoContainer.innerHTML = weatherInfoHTML;
})
- .catch(error => console.error('Error fetching weather data:', error));
\ No newline at end of file
+ .catch(error => console.error('Error fetching weather data:', error));
+
+ const apiKey = 'e4636933701791149c0636b03c135f71';
+ const cityName = 'Taj Mahal';
+ const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=27.1751&lon=78.0421&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;
diff --git a/dedicated destinations/thailand/t.css b/dedicated destinations/thailand/t.css
index 8ab5f2b1..bd6989a9 100644
--- a/dedicated destinations/thailand/t.css
+++ b/dedicated destinations/thailand/t.css
@@ -347,4 +347,70 @@
#btn-style {
font-size: 0.6rem;
}
-}
\ No newline at end of file
+}
+
+#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;
+}
diff --git a/dedicated destinations/thailand/t.html b/dedicated destinations/thailand/t.html
index 76cb4119..13c407b9 100644
--- a/dedicated destinations/thailand/t.html
+++ b/dedicated destinations/thailand/t.html
@@ -111,6 +111,20 @@ <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>
@@ -173,5 +187,10 @@ <h4>Reach Out To Us</h4>
<script src="t.js"></script>
+ <script>
+ const cityName = "Thailand";
+ fetchWeather(cityName);
+
+ </script>
</html>
\ No newline at end of file
diff --git a/dedicated destinations/thailand/t.js b/dedicated destinations/thailand/t.js
index 074cf12d..4cd77dc8 100644
--- a/dedicated destinations/thailand/t.js
+++ b/dedicated destinations/thailand/t.js
@@ -49,4 +49,50 @@ fetch(url, options)
weatherInfoContainer.innerHTML = weatherInfoHTML;
})
- .catch(error => console.error('Error fetching weather data:', error));
\ No newline at end of file
+ .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=15.8700&lon=100.9925&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;
\ No newline at end of file
From 1030d35a8a800ea34833db2107604a26f1358a69 Mon Sep 17 00:00:00 2001
From: advika31 <advikasinghal31@gmail.com>
Date: Fri, 15 Nov 2024 17:13:48 +0530
Subject: [PATCH 2/2] added weather widget
---
dedicated destinations/thailand/t.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/dedicated destinations/thailand/t.js b/dedicated destinations/thailand/t.js
index 4cd77dc8..3266bacf 100644
--- a/dedicated destinations/thailand/t.js
+++ b/dedicated destinations/thailand/t.js
@@ -53,7 +53,7 @@ fetch(url, options)
const apiKey = 'e4636933701791149c0636b03c135f71';
-const cityName = 'Ladakh';
+const cityName = 'Thailand';
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=15.8700&lon=100.9925&appid=e4636933701791149c0636b03c135f71&units=metric`;
// Function to fetch weather data