Merge pull request #291 from 23wh1a0513/patch-3

Create Plant_Task_Reminder
manikumarreddyu · Oct 11, 2024 · 46048b2 · 46048b2
2 parents c0c3d85 + 69270a4
commit 46048b2
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!`);
+    }
+}