Skip to content

Commit 1d19215

Browse files
simonwsimonw
authored
Create event-planner.html
https://gist.github.com/simonw/f2a2edb67acdb354961a733a6cee1b41
1 parent 4ff37f2 commit 1d19215

File tree

1 file changed

+110
-0
lines changed

1 file changed

+110
-0
lines changed

‎event-planner.html

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Event Planner</title>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
8+
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
9+
<style>
10+
body {
11+
font-family: Arial, sans-serif;
12+
max-width: 600px;
13+
margin: 0 auto;
14+
padding: 20px;
15+
}
16+
label {
17+
display: block;
18+
margin-top: 10px;
19+
}
20+
input, select, textarea {
21+
width: 100%;
22+
padding: 5px;
23+
margin-top: 5px;
24+
}
25+
button {
26+
margin-top: 10px;
27+
padding: 10px;
28+
background-color: #4CAF50;
29+
color: white;
30+
border: none;
31+
cursor: pointer;
32+
}
33+
#result {
34+
margin-top: 20px;
35+
border: 1px solid #ddd;
36+
padding: 10px;
37+
}
38+
</style>
39+
</head>
40+
<body>
41+
<h1>Event Planner</h1>
42+
<form id="eventForm">
43+
<label for="eventTitle">Event Title:</label>
44+
<input type="text" id="eventTitle" required>
45+
46+
<label for="eventDescription">Event Description:</label>
47+
<textarea id="eventDescription" rows="3"></textarea>
48+
49+
<label for="eventLocation">Event Location (optional):</label>
50+
<input type="text" id="eventLocation">
51+
52+
<label for="eventDate">Date:</label>
53+
<input type="date" id="eventDate" required>
54+
55+
<label for="eventTime">Time:</label>
56+
<input type="time" id="eventTime" required>
57+
58+
<label for="timezone">Timezone:</label>
59+
<select id="timezone" required>
60+
<option value="America/New_York">Eastern Time</option>
61+
<option value="America/Chicago">Central Time</option>
62+
<option value="America/Denver">Mountain Time</option>
63+
<option value="America/Los_Angeles">Pacific Time</option>
64+
<option value="America/Anchorage">Alaska Time</option>
65+
<option value="Pacific/Honolulu">Hawaii-Aleutian Time</option>
66+
</select>
67+
68+
<button type="submit">Create Event</button>
69+
</form>
70+
71+
<div id="result"></div>
72+
73+
<script>
74+
document.getElementById('eventForm').addEventListener('submit', function(e) {
75+
e.preventDefault();
76+
77+
const title = document.getElementById('eventTitle').value;
78+
const description = document.getElementById('eventDescription').value;
79+
const location = document.getElementById('eventLocation').value;
80+
const date = document.getElementById('eventDate').value;
81+
const time = document.getElementById('eventTime').value;
82+
const timezone = document.getElementById('timezone').value;
83+
84+
const eventDateTime = moment.tz(`${date} ${time}`, timezone);
85+
const now = moment();
86+
const duration = moment.duration(eventDateTime.diff(now));
87+
88+
const days = Math.floor(duration.asDays());
89+
const hours = duration.hours();
90+
const minutes = duration.minutes();
91+
92+
const googleCalendarUrl = `https://www.google.com/calendar/render?action=TEMPLATE&text=${encodeURIComponent(title)}&details=${encodeURIComponent(description)}&location=${encodeURIComponent(location)}&dates=${eventDateTime.format('YYYYMMDDTHHmmss')}/${eventDateTime.format('YYYYMMDDTHHmmss')}&ctz=${encodeURIComponent(timezone)}`;
93+
94+
const resultHtml = `
95+
<h2>Event Details:</h2>
96+
<p><strong>Title:</strong> ${title}</p>
97+
<p><strong>Description:</strong> ${description}</p>
98+
<p><strong>Location:</strong> ${location || 'N/A'}</p>
99+
<p><strong>Date and Time:</strong> ${eventDateTime.format('MMMM D, YYYY h:mm A')} (${timezone})</p>
100+
<p><strong>Time until event:</strong> ${days} days, ${hours} hours, and ${minutes} minutes</p>
101+
<p><strong>Add to Google Calendar:</strong> <a href="${googleCalendarUrl}" target="_blank">Click here</a></p>
102+
<p>Or copy this URL:</p>
103+
<textarea readonly rows="3" style="width: 100%;">${googleCalendarUrl}</textarea>
104+
`;
105+
106+
document.getElementById('result').innerHTML = resultHtml;
107+
});
108+
</script>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)