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.
manikumarreddyu · Oct 11, 2024 · 69270a4 · 69270a4
1 parent c0c3d85
commit 69270a4
Showing 1 changed file with 184 additions and 0 deletions.
diff --git a/Plant_Task_Reminder b/Plant_Task_Reminder
@@ -0,0 +1,184 @@
+#########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>Plant Task Reminder</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Plant Task Reminder</h1>
+        <p>Keep your plants happy and healthy!</p>
+        <form id="taskForm">
+            <input type="text" id="taskInput" placeholder="Enter plant task..." required />
+            <input type="datetime-local" id="timeInput" required />
+            <button type="submit">Add Task</button>
+        </form>
+        <ul id="taskList"></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 */
+}
+
+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!`);
+    }
+}