From 69270a417666dd23e2aa279fbe2a7ff735b402ba Mon Sep 17 00:00:00 2001 From: 23WH1A0513 <150132045+23wh1a0513@users.noreply.github.com> Date: Fri, 11 Oct 2024 18:21:36 +0530 Subject: [PATCH] Create Plant_Task_Reminder It ensures that tasks are displayed in ascending order based on their due date and time. When users add multiple plant care tasks, they will see them sorted chronologically, enhancing task management and reminders. --- Plant_Task_Reminder | 184 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 Plant_Task_Reminder diff --git a/Plant_Task_Reminder b/Plant_Task_Reminder new file mode 100644 index 00000000..e7ced3f6 --- /dev/null +++ b/Plant_Task_Reminder @@ -0,0 +1,184 @@ +#########html######### + + + + + + + + Plant Task Reminder + + +
+

Plant Task Reminder

+

Keep your plants happy and healthy!

+
+ + + +
+ +
+ + + +######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 */ +} + +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######### + +// Get references to the DOM elements +const taskForm = document.getElementById("taskForm"); +const taskInput = document.getElementById("taskInput"); +const timeInput = document.getElementById("timeInput"); +const taskList = document.getElementById("taskList"); + +// Array to hold tasks +const tasks = []; + +// Function to add a task +taskForm.addEventListener("submit", function (event) { + event.preventDefault(); // Prevent the default form submission + + const task = { + name: taskInput.value, + time: new Date(timeInput.value), + id: Date.now() // Unique ID for each task + }; + + tasks.push(task); // Add task to the tasks array + + displayTasks(); // Display all tasks + + // Clear input fields + taskInput.value = ""; + timeInput.value = ""; + + // Set a reminder + setReminder(task); +}); + +// Function to display tasks +function displayTasks() { + taskList.innerHTML = ""; // Clear the task list + + // Sort tasks by time in ascending order + tasks.sort((a, b) => a.time - b.time); + + tasks.forEach(task => { + const li = document.createElement("li"); + li.textContent = `${task.name} - Due: ${task.time.toLocaleString()}`; + taskList.appendChild(li); // Append li to task list + }); +} + +// Function to set a reminder for each task +function setReminder(task) { + const now = new Date(); + const timeToReminder = task.time - now; // Calculate the time until the reminder + + if (timeToReminder > 0) { + setTimeout(() => { + alert(`🌿 Reminder: Time to "${task.name}" for your plant care! 🌱`); + }, timeToReminder); + } else { + alert(`⚠️ The time for the task "${task.name}" has already passed!`); + } +}