From b531d9d8c77e0788e8831d815f8ee6e1dcf5cafe Mon Sep 17 00:00:00 2001 From: 23WH1A0513 <150132045+23wh1a0513@users.noreply.github.com> Date: Fri, 1 Nov 2024 12:14:31 +0530 Subject: [PATCH] Create Travel Alert (Issue #254) The Travel Alert Reminder is a web application that allows users to set alerts for upcoming travels. Users can input a travel alert message and a specific date and time for the reminder. The application maintains a list of alerts, displaying them in order of their scheduled times. When it's time for an alert, a notification pop-up appears to remind the user of their travel plans. --- Travel Alert (Issue #254) | 181 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 181 insertions(+) create mode 100644 Travel Alert (Issue #254) diff --git a/Travel Alert (Issue #254) b/Travel Alert (Issue #254) new file mode 100644 index 0000000..bd2f4b1 --- /dev/null +++ b/Travel Alert (Issue #254) @@ -0,0 +1,181 @@ +######html######## + + + + + + + + Travel Alert Reminder + + +
+

Travel Alert Reminder

+

Stay informed about your upcoming travels!

+
+ + + +
+ +
+ + + +#######css###### +* { + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #a8e8b9 0%, #6fcf80 100%); + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + color: #333; +} + +.container { + background: rgba(255, 255, 255, 0.9); + padding: 40px; + border-radius: 12px; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + width: 350px; + text-align: center; +} + +h1 { + margin-bottom: 10px; + font-size: 2.2em; + color: #4caf50; /* Green color for header, can change to a travel-themed color if desired */ +} + +p { + margin-bottom: 20px; /* Space below the text */ + font-size: 1.1em; /* Slightly larger text */ +} + +form { + display: flex; + flex-direction: column; +} + +input[type="text"], +input[type="datetime-local"], +button { + padding: 12px; + margin: 8px 0; + border-radius: 6px; + border: 2px solid #4caf50; + outline: none; + transition: border-color 0.3s, box-shadow 0.3s; +} + +input[type="text"]:focus, +input[type="datetime-local"]:focus { + border-color: #81c784; + box-shadow: 0 0 5px rgba(129, 199, 132, 0.5); +} + +button { + background-color: #4caf50; + color: white; + border: none; + cursor: pointer; + font-size: 1rem; +} + +button:hover { + background-color: #388e3c; /* Darker green on hover */ + transform: translateY(-2px); +} + +ul { + list-style-type: none; + padding: 0; + margin-top: 20px; +} + +li { + background: #e8f5e9; + color: #333; + padding: 12px; + border-radius: 6px; + margin-bottom: 10px; + transition: transform 0.3s; +} + +li:hover { + transform: translateY(-2px); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +footer { + margin-top: 20px; + font-size: 0.9em; + color: #6b6b6b; +} + +###js#######3 +// Get references to the DOM elements +const alertForm = document.getElementById("alertForm"); +const alertInput = document.getElementById("alertInput"); +const timeInput = document.getElementById("timeInput"); +const alertList = document.getElementById("alertList"); + +// Array to hold alerts +const alerts = []; + +// Function to add an alert +alertForm.addEventListener("submit", function (event) { + event.preventDefault(); // Prevent the default form submission + + const alert = { + message: alertInput.value, + time: new Date(timeInput.value), + id: Date.now() // Unique ID for each alert + }; + + alerts.push(alert); // Add alert to alerts array + + displayAlerts(); // Display all alerts + + // Clear input fields + alertInput.value = ""; + timeInput.value = ""; + + // Set a reminder + setReminder(alert); +}); + +// Function to display alerts +function displayAlerts() { + alertList.innerHTML = ""; // Clear the alert list + + // Sort alerts by time in ascending order + alerts.sort((a, b) => a.time - b.time); + + alerts.forEach(alert => { + const li = document.createElement("li"); + li.textContent = `${alert.message} - Due: ${alert.time.toLocaleString()}`; + alertList.appendChild(li); // Append li to alert list + }); +} + +// Function to set a reminder for each alert +function setReminder(alert) { + const now = new Date(); + const timeToReminder = alert.time - now; // Calculate the time until the reminder + + if (timeToReminder > 0) { + setTimeout(() => { + alert(`✈️ Travel Alert: Time for "${alert.message}"! 🗺️`); + }, timeToReminder); + } else { + alert(`⚠️ The time for the alert "${alert.message}" has already passed!`); + } +}