-
-
Notifications
You must be signed in to change notification settings - Fork 78
/
Copy pathevent-planner.html
110 lines (96 loc) · 4.38 KB
/
event-planner.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Planner</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.33/moment-timezone-with-data.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
label {
display: block;
margin-top: 10px;
}
input, select, textarea {
width: 100%;
padding: 5px;
margin-top: 5px;
}
button {
margin-top: 10px;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
border: 1px solid #ddd;
padding: 10px;
}
</style>
</head>
<body>
<h1>Event Planner</h1>
<form id="eventForm">
<label for="eventTitle">Event Title:</label>
<input type="text" id="eventTitle" required>
<label for="eventDescription">Event Description:</label>
<textarea id="eventDescription" rows="3"></textarea>
<label for="eventLocation">Event Location (optional):</label>
<input type="text" id="eventLocation">
<label for="eventDate">Date:</label>
<input type="date" id="eventDate" required>
<label for="eventTime">Time:</label>
<input type="time" id="eventTime" required>
<label for="timezone">Timezone:</label>
<select id="timezone" required>
<option value="America/New_York">Eastern Time</option>
<option value="America/Chicago">Central Time</option>
<option value="America/Denver">Mountain Time</option>
<option value="America/Los_Angeles">Pacific Time</option>
<option value="America/Anchorage">Alaska Time</option>
<option value="Pacific/Honolulu">Hawaii-Aleutian Time</option>
</select>
<button type="submit">Create Event</button>
</form>
<div id="result"></div>
<script>
document.getElementById('eventForm').addEventListener('submit', function(e) {
e.preventDefault();
const title = document.getElementById('eventTitle').value;
const description = document.getElementById('eventDescription').value;
const location = document.getElementById('eventLocation').value;
const date = document.getElementById('eventDate').value;
const time = document.getElementById('eventTime').value;
const timezone = document.getElementById('timezone').value;
const eventDateTime = moment.tz(`${date} ${time}`, timezone);
const now = moment();
const duration = moment.duration(eventDateTime.diff(now));
const days = Math.floor(duration.asDays());
const hours = duration.hours();
const minutes = duration.minutes();
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)}`;
const resultHtml = `
<h2>Event Details:</h2>
<p><strong>Title:</strong> ${title}</p>
<p><strong>Description:</strong> ${description}</p>
<p><strong>Location:</strong> ${location || 'N/A'}</p>
<p><strong>Date and Time:</strong> ${eventDateTime.format('MMMM D, YYYY h:mm A')} (${timezone})</p>
<p><strong>Time until event:</strong> ${days} days, ${hours} hours, and ${minutes} minutes</p>
<p><strong>Add to Google Calendar:</strong> <a href="${googleCalendarUrl}" target="_blank">Click here</a></p>
<p>Or copy this URL:</p>
<textarea readonly rows="3" style="width: 100%;">${googleCalendarUrl}</textarea>
`;
document.getElementById('result').innerHTML = resultHtml;
});
</script>
</body>
</html>