human (Oct 10, 2024, 07:13 PM)
Build me an artifact (no react) that allows someone to pick a date and time - using native date and time widgets, then select a timezone from a dropdown list that has all of the US timezones
It should also have a field for an event title and for an event description and an optional field for location as well
It should then display that time, show how far away that is in days, hours and minutes, and provide a link to add that event to Google Calendar - as copy and paste URLs - which will set the correct start time and date and timezone information
assistant (Oct 10, 2024, 07:13 PM)
Certainly! I'll create an HTML artifact with the functionality you've described. This will include native date and time widgets, a dropdown for US timezones, fields for event details, and the requested output.
<!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>I've created an HTML artifact that includes all the functionality you requested. Here's a breakdown of the main features:
-
The form includes fields for:
- Event title (required)
- Event description
- Event location (optional)
- Date picker (required)
- Time picker (required)
- Timezone dropdown with US timezones (required)
-
When the form is submitted, it calculates:
- The selected date and time in the chosen timezone
- The time difference between now and the event (in days, hours, and minutes)
-
It displays:
- All entered event details
- The formatted date and time
- The time until the event
-
It generates a Google Calendar link that:
- Sets the correct start time, date, and timezone
- Includes the event title, description, and location
-
The Google Calendar link is provided both as a clickable link and as a copyable URL.
To use this artifact:
- Fill out the form with your event details.
- Click the "Create Event" button.
- The event details and Google Calendar link will appear below the form.
- Click the link to open Google Calendar with the event details pre-filled, or copy the URL to share with others.
This HTML file uses Moment.js and Moment Timezone libraries to handle date, time, and timezone calculations accurately. The styling is simple and responsive, making it easy to use on various devices.
Let me know if you'd like any modifications or have any questions about the implementation!