Added manual record functionality.

index.css

@@ -400,6 +400,23 @@ h3 {
 	margin-bottom: 10px;
 }
 
+.input-box {
+    font-size: 12px;
+    padding: 5px 10px;
+    margin-right: 10px;
+    border: 2px solid var(--coloraccent);
+    border-radius: 5px;
+    color: var(--bgcolor);
+    background-color: var(--coloraccent);
+    cursor: pointer;
+    margin-top: 5px;
+    display: inline-block;
+    width: fit-content;
+}
+.input-box::placeholder {
+	color: var(--bgcolor);
+}
+
 #create-backup, #backup-restore-label {
 	font-size: 22px;
 	padding: 5px 10px;

index.html

@@ -166,6 +166,13 @@ <h2>Backup and Restore</h2>
 					<button id="create-backup" class="hover-shadow">Create Backup</button>
 					<label for="backup-restore" id="backup-restore-label" class="hover-shadow"><input type="file" accept=".json" id="backup-restore">Restore Backup</label>
 				</section>
+				<section class="section">
+					<h2>Manual Record</h2>
+					<input type="text" id="input-task-name" class="input-box" placeholder="Task">
+					<input type="datetime-local" id="input-date-time" class="input-box" name="Date">
+					<input type="number" min="1" id="input-time-duration" class="input-box" placeholder="Duration">
+					<button id="manual-add" class="input-box">Add Record</button>
+				</section>
 				<section class="section">
 					<h2>About Tomodoro</h2>
 					<div id="about-desc">

index.js

@@ -615,6 +615,47 @@ document.getElementById("backup-restore").addEventListener("change", function ()
 	}
 });
 
+document.getElementById("manual-add").addEventListener("click", function () {
+    let taskName = document.getElementById("input-task-name").value.trim();
+    let dateTimeInput = document.getElementById("input-date-time").value.trim();
+    let timeDuration = parseInt(document.getElementById("input-time-duration").value.trim());
+
+    // Check if timeDuration is a positive number
+    if (timeDuration < 1) {
+        alert("Please enter a valid positive number for time duration!");
+        return;
+    }
+
+    if (dateTimeInput !== "" && taskName !== "") {
+        // Convert the selected date and time to epoch timestamp
+        let epochTimestamp = new Date(dateTimeInput).getTime();
+
+        let newRecord = { t: timeDuration, d: epochTimestamp, n: taskName };
+        let tr = db.transaction("records", "readwrite");
+        let objstore = tr.objectStore("records");
+        objstore.add(newRecord);
+        alert("Record added successfully!");
+
+        // Check if the task name is not already in the tasks array
+        if (!tasks.includes(newRecord.n)) {
+            // Add the task to the tasks array
+            tasks.push(newRecord.n);
+
+            // Create an element for the task
+            createTaskEl(newRecord.n);
+
+            // Check if the selected task is not set
+            if (!selectedTask) {
+                // Set the selected task to the new task
+                selectedTask = newRecord.n;
+                taskSelect.value = newRecord.n;
+            }
+        }
+    } else {
+        alert("Please enter values for time duration, date and time, and task name!");
+    }
+});
+
 let allCheckbox = document.getElementById("all");
 let pieCardContainer = document.getElementById("pie-card-container");
 let timeSpentChart = document.getElementById("timespent");