init app [project87]

pradipchaudhary · pradipchaudhary · commit fd29e02857b4 · 2024-02-12T16:07:27.000+05:45
diff --git a/87-Focus Management/index.html b/87-Focus Management/index.html
@@ -0,0 +1,24 @@
+<!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" />
+        <title>Focus Management App</title>
+    </head>
+    <body>
+        <div class="container">
+            <h1>Focus Management App</h1>
+            <div class="input-section">
+                <input
+                    type="text"
+                    id="taskInput"
+                    placeholder="Add a new task..."
+                />
+                <button id="addTaskBtn">Add Task</button>
+            </div>
+            <ul id="taskList" class="task-list"></ul>
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
diff --git a/87-Focus Management/script.js b/87-Focus Management/script.js
@@ -0,0 +1,30 @@
+document.addEventListener("DOMContentLoaded", function () {
+    const taskInput = document.getElementById("taskInput");
+    const addTaskBtn = document.getElementById("addTaskBtn");
+    const taskList = document.getElementById("taskList");
+
+    addTaskBtn.addEventListener("click", addTask);
+
+    function addTask() {
+        const taskText = taskInput.value.trim();
+        if (taskText !== "") {
+            const taskItem = document.createElement("li");
+            taskItem.classList.add("task-item");
+            taskItem.innerHTML = `
+                  <span>${taskText}</span>
+                  <button class="complete-btn">Complete</button>
+              `;
+            taskList.appendChild(taskItem);
+            taskInput.value = "";
+            taskInput.focus();
+
+            const completeBtn = taskItem.querySelector(".complete-btn");
+            completeBtn.addEventListener("click", completeTask);
+        }
+    }
+
+    function completeTask(event) {
+        const taskItem = event.target.closest(".task-item");
+        taskItem.classList.toggle("completed");
+    }
+});
diff --git a/87-Focus Management/styles.css b/87-Focus Management/styles.css
@@ -0,0 +1,54 @@
+body {
+    font-family: "Arial", sans-serif;
+    background-color: #f4f4f4;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+.container {
+    text-align: center;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.input-section {
+    margin-bottom: 20px;
+}
+
+input {
+    padding: 10px;
+    font-size: 16px;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #ddd;
+}
+
+.task-list {
+    list-style: none;
+    padding: 0;
+}
+
+.task-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #ddd;
+}
+
+.task-item.completed {
+    text-decoration: line-through;
+    opacity: 0.7;
+}
