diff --git a/public/index.html b/public/index.html index a4e0fac..34ffe44 100644 --- a/public/index.html +++ b/public/index.html @@ -1,35 +1,44 @@ - + - - - + + + Open Source To-Do App - - - + + +
- -
- -
- -
+ +
- -
+
+ +
- -
    - - -
    - - -
    -
    + +
    +
    + + +
    +
    -
    + + + + +
    + + +
    +
    + +
    - + diff --git a/public/script.js b/public/script.js index 9c6912e..7d692b4 100644 --- a/public/script.js +++ b/public/script.js @@ -2,11 +2,31 @@ let tasks = []; // DOM Elements (Will be populated as elements are added) -const taskList = document.getElementById('task-list'); +const taskList = document.getElementById("task-list"); // Initial Render -document.addEventListener('DOMContentLoaded', () => { - console.log("App Initialized"); - // Load tasks will be called here later (Issue #9) -}); +document.addEventListener("DOMContentLoaded", () => { + console.log("App Initialized"); + // Load tasks will be called here later (Issue #9) + const taskInput = document.getElementById("task-input"); + const addBtn = document.getElementById("add-btn"); + + function addTask(text) { + const task = { + id: Date.now(), + text: text, + completed: false, + }; + tasks.push(task); + renderTasks(); + } + addBtn.addEventListener("click", () => { + const text = taskInput.value; + // Validation is handled by Issue #11, so basic add for now: + if (text) { + addTask(text); + taskInput.value = ""; + } + }); +}); diff --git a/public/style.css b/public/style.css index 01d4310..3cee2c3 100644 --- a/public/style.css +++ b/public/style.css @@ -1,22 +1,44 @@ /* 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; } +/* Mobile Responsiveness */ +@media (max-width: 600px) { + #main-content { + padding: 1rem; + } + + nav { + padding: 1rem; + } + + .task-item { + flex-direction: column; + align-items: flex-start; + gap: 0.5rem; + } + + .task-actions { + width: 100%; + display: flex; + justify-content: flex-end; + } +}