diff --git a/public/index.html b/public/index.html index a4e0fac..733247f 100644 --- a/public/index.html +++ b/public/index.html @@ -1,35 +1,51 @@ - - - Open Source To-Do App - + + +Open Source To-Do App + + -
- -
- -
- -
- - -
- - - - - -
- - -
-
- - -
- + +
+ +
+ +
+ +
+ + +
+ + + + + + + +
+ + + + +
+ +
+ +
+ + + +
+ + + - + \ No newline at end of file diff --git a/public/script.js b/public/script.js index 9c6912e..5b1a44a 100644 --- a/public/script.js +++ b/public/script.js @@ -1,12 +1,58 @@ // State Management let tasks = []; -// DOM Elements (Will be populated as elements are added) -const taskList = document.getElementById('task-list'); +// DOM Elements +const taskList = document.getElementById("task-list"); +const taskInput = document.getElementById("task-input"); +const prioritySelect = document.getElementById("priority-select"); +const addTaskBtn = document.getElementById("add-task-btn"); -// Initial Render -document.addEventListener('DOMContentLoaded', () => { +// Initialize App +document.addEventListener("DOMContentLoaded", () => { console.log("App Initialized"); - // Load tasks will be called here later (Issue #9) + + addTaskBtn.addEventListener("click", addTask); }); +// Add Task Function +function addTask() { + + const text = taskInput.value.trim(); + const priority = prioritySelect.value; + + if (text === "") return; + + const task = { + text: text, + completed: false, + priority: priority + }; + + tasks.push(task); + + taskInput.value = ""; + + renderTasks(); +} + +// Render Tasks +function renderTasks() { + + taskList.innerHTML = ""; + + tasks.forEach((task) => { + + const li = document.createElement("li"); + + li.innerHTML = ` + ${task.text} + + ${task.priority} + + `; + + taskList.appendChild(li); + + }); + +} \ No newline at end of file diff --git a/public/style.css b/public/style.css index 01d4310..080a44e 100644 --- a/public/style.css +++ b/public/style.css @@ -1,22 +1,57 @@ /* Basic Reset */ * { - margin: 0; - padding: 0; - box-sizing: border-box; +margin: 0; +padding: 0; +box-sizing: border-box; } body { - font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - background-color: #f4f4f4; - color: #333; - line-height: 1.6; +font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; +background-color: #f4f4f4; +color: #333; +line-height: 1.6; } #app { - max-width: 600px; - margin: 0 auto; - min-height: 100vh; - display: flex; - flex-direction: column; +max-width: 600px; +margin: 0 auto; +min-height: 100vh; +display: flex; +flex-direction: column; } +/* Task list */ +#task-list { +list-style: none; +margin-top: 20px; +} + +#task-list li { +padding: 10px; +background: white; +margin-bottom: 10px; +border-radius: 5px; +display: flex; +justify-content: space-between; +} + +/* Priority Styles */ + +.priority { +padding: 3px 8px; +border-radius: 4px; +font-size: 12px; +color: white; +} + +.High { +background: red; +} + +.Medium { +background: orange; +} + +.Low { +background: green; +} \ No newline at end of file