Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create Travel Alert (Issue #254) #483

Closed
wants to merge 1 commit into from
Closed

Create Travel Alert (Issue #254) #483

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
181 changes: 181 additions & 0 deletions Travel Alert (Issue #254)
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
######html########
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
<title>Travel Alert Reminder</title>
</head>
<body>
<div class="container">
<h1>Travel Alert Reminder</h1>
<p>Stay informed about your upcoming travels!</p>
<form id="alertForm">
<input type="text" id="alertInput" placeholder="Enter travel alert..." required />
<input type="datetime-local" id="timeInput" required />
<button type="submit">Add Alert</button>
</form>
<ul id="alertList"></ul>
</div>
</body>
</html>

#######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!`);
}
}