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