-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcode.html
169 lines (151 loc) · 7.24 KB
/
code.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>✈️ TripPlanr - Place Where You Should Visit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-200">
<div class="container mx-auto px-4 py-8">
<form class="bg-white p-4 rounded shadow-md">
<h1 class="text-2xl font-bold mb-4">✈️ TripPlannr - Place Where You Should Visit</h1>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="location">Where are you staying?</label>
<input class="border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="text" id="location" name="location">
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="days">How many days are you staying?</label>
<input class="border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" type="number" id="days" name="days">
</div>
<div style="display: flex; justify-content: center;">
<button id="generate-btn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Generate Trip Plan 📝</button>
</div>
<div id="credits" class="mt-4 text-sm text-gray-600">
<p>Developed by ❤️ :</p>
<ul class="list-disc ml-4">
<li>Siddharth Shinde</li>
</ul>
</div>
</form>
<ul id="results" class="list-disc mt-8 font-bold"></ul>
<p id="click-to-know-more" class="text-sm text-gray-600 mt-4 hidden">Click on the place to know more.</p>
<div id="transportation"></div>
</div>
<div id="videosDiv" class="flex flex-wrap justify-center"></div>
<div id="youtube-videos" class="mt-4">
<div id="youtube-videos" class="mt-4">
<div style="display: flex; justify-content: center;">
<h2 class="text-lg font-bold">Plan Your Trip Effortlessly With TripPlanr</h2>
</div>
<div id="videos-container" class="grid grid-cols-2 gap-4 mt-2"></div>
</div>
<script>
const form = document.querySelector('form');
const resultsDiv = document.querySelector('#results');
const creditsDiv = document.querySelector('#credits');
const transportationDiv = document.querySelector('#transportation');
form.addEventListener('submit', (event) => {
event.preventDefault();
const location = document.querySelector('#location').value;
const days = document.querySelector('#days').value;
// Call OpenTripMap API to get location information
fetch(`https://api.opentripmap.com/0.1/en/places/geoname?name=${location}&apikey="OpenTripMap API Key"`)
.then(response => response.json())
.then(data => {
const lat = data.lat;
const lon = data.lon;
// Call OpenTripMap API to get list of places to visit
fetch(`https://api.opentripmap.com/0.1/en/places/radius?radius=70000&lon=${lon}&lat=${lat}&limit=10&apikey="OpenTripMap API Key"`)
.then(response => response.json())
.then(data => {
// Generate HTML to display trip plan
let html = '';
data.features.forEach(feature => {
if (feature.properties.name) { // check for empty or blank result
html += `<li class="mb-4"><a href="https://www.google.com/search?q=${encodeURIComponent(feature.properties.name + ' ' + location)}" target="_blank">${feature.properties.name}</a></li>`;
}
});
if (html) { // check if there are any results to display
resultsDiv.innerHTML = `<strong>🏕️ 🛕 Don't Forget To Visit These Places 🚙:</strong><br><ul class="list-disc mt-2">${html}</ul><p class="text-sm mt-2">Click on the place to know more.</p>`;
} else {
resultsDiv.innerHTML = '<p class="text-sm">No places found.</p>';
}
transportationDiv.innerHTML = '<p class="text-lg font-bold mt-4">Transportation Options:</p><p class="mt-2"> <a href="https://www.redbus.in/"</a> Bus🚌|<a href="https://www.easemytrip.com/railways"</a> Train🚂 | <a href="https://www.olacabs.com/"</a> Cabs🚗 </p>';
transportationDiv.style.display = 'block';
transportationDiv.style.textAlign = 'center'; // center the text horizontally
const hotelsBtn = document.querySelector('#hotelsBtn');
hotelsBtn.addEventListener('click', () => {
window.open('https://www.skyscanner.net/hotels');
});
})
.catch(error => console.error(error));
// Call YouTube API to get videos
const keyword = `explore ${location} `; // use location and days to search for videos
const apiKey = 'YouTube API Key';
fetch(`https://www.googleapis.com/youtube/v3/search?q=${keyword}&key=${apiKey}&part=snippet&maxResults=4&type=video`)
.then(response => response.json())
.then(data => {
let html = '';
data.items.forEach(item => {
const videoId = item.id.videoId;
const videoTitle = item.snippet.title;
const videoThumbnail = item.snippet.thumbnails.high.url;
html += `
<div class="video">
<a href="https://www.youtube.com/watch?v=${videoId}" target="_blank">
<img src="${videoThumbnail}" alt="${videoTitle}">
<h3 class="video-title">${videoTitle}</h3>
</a>
</div>`;
});
document.querySelector('#videos-container').innerHTML = html;
const hotelsBtn = document.querySelector('#hotelsBtn');
hotelsBtn.addEventListener('click', () => {
window.open('https://www.skyscanner.net/hotels');
});
})
.catch(error => console.error(error));
});
function loadVideos() {
// Call YouTube API to get videos
// Once the videos are loaded, show the button
document.getElementById("hotelsBtnContainer").classList.remove("hidden");
}
loadVideos();
if (location) {
// Select the previous summary element and remove it
const previousSummary = document.querySelector('#wiki-summary');
if (previousSummary) {
previousSummary.remove();
}
// Fetch the new summary from Wikipedia API
fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${location}`)
.then(response => response.json())
.then(data => {
const wikiSummary = data.extract;
// Add Wiki summary to bottom of page
const wikiDiv = document.createElement('div');
wikiDiv.setAttribute('id', 'wiki-summary');
wikiDiv.innerHTML = `
<div class="bg-white p-4 rounded shadow-md mt-8">
<h2 class="text-lg font-bold mb-2">About ${location}</h2>
<p class="text-sm">${wikiSummary}
<a href="https://en.wikipedia.org/wiki/${location}"
target="_blank"
class="text-blue-500 font-bold">
Read more
</a>
</p>
</div>`;
document.body.appendChild(wikiDiv);
});
}
creditsDiv.style.display = 'none'; // hide credits box when generating trip plan
});
</script>
<div class="flex justify-center hidden" id="hotelsBtnContainer">
<button id="hotelsBtn" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4">Find Your Stay 🏠 🛌</button>
</div>
</body>
</html>