From 644b091ea268c975a1168e1fb1e1ecc82aee79d9 Mon Sep 17 00:00:00 2001 From: Greg Date: Tue, 13 May 2025 23:12:57 +0200 Subject: [PATCH] feat: create initial todo app with local storage and UI components --- Input/Coding patterns preferences.md | 12 ++ Input/Todo app.md | 31 +++++ app.js | 193 +++++++++++++++++++++++++++ index.html | 25 ++++ style.css | 95 +++++++++++++ 5 files changed, 356 insertions(+) create mode 100644 Input/Coding patterns preferences.md create mode 100644 Input/Todo app.md create mode 100644 app.js create mode 100644 index.html create mode 100644 style.css diff --git a/Input/Coding patterns preferences.md b/Input/Coding patterns preferences.md new file mode 100644 index 0000000..6e1490b --- /dev/null +++ b/Input/Coding patterns preferences.md @@ -0,0 +1,12 @@ +# Coding pattern preferences + +– Always prefer simple solutions +– Avoid duplication of code whenever possible, which means checking for other areas of the codebase that might already have similar code and functionality +– You are careful to only make changes that are requested or you are confident are well understood and related to the change being requested +– When fixing an issue or bug, do not introduce a new pattern or technology without first exhausting all options for the existing implementation. And if you finally do this, make sure to remove the old implementation afterwards so we don't have duplicate logic. +– Keep the codebase very clean and organized +– Avoid writing scripts in files if possible, especially if the script is likely only to be run once +– Avoid having files over 200–300 lines of code. Refactor at that point. +– Mocking data is only needed for tests, never mock data for dev or prod +– Never add stubbing or fake data patterns to code that affects the dev or prod environments +– Never overwrite my .env file without first asking and confirming diff --git a/Input/Todo app.md b/Input/Todo app.md new file mode 100644 index 0000000..fc954c3 --- /dev/null +++ b/Input/Todo app.md @@ -0,0 +1,31 @@ +The Todo App is a web application that runs locally and is used to track Todo's. It shouldn't run in the cloud. I should use the local browser storage. +If feasible it should be password protected, but it still should run locally. +It should contain the following fields: +- A unique identifier that is autoincremented and can't be changed +- The creation date (that date should be filled in automatically, but the user should be able to change it) +- The next date on which the user plans to work on the said task +- The due date for the task +- A status field: + - Busy + - Done + - W4A + - (Blank) +- Urgent + - The options are numbers from 1 to 7 +- Importance + - The options are numbers from 1 to 7 +- Prio + - Result of the multiplication of Urgent and Importance +- Time estimation + - Expressed in minutes +- Actual time spent on the task +- Category + - The user should be able to fill in categories, but as the user types proposal of the existing categories are made +- Task description + - Text field +- Coms filed + - Data type = url +- Link field + - Data type = url +- Comments +- Link with other tasks \ No newline at end of file diff --git a/app.js b/app.js new file mode 100644 index 0000000..cc301c3 --- /dev/null +++ b/app.js @@ -0,0 +1,193 @@ +// --- Basic Todo Model --- +const STORAGE_KEY = 'todos-v1'; +const CATEGORY_KEY = 'todo-categories'; +let todos = []; +let categories = []; + +function loadTodos() { + todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'); + categories = JSON.parse(localStorage.getItem(CATEGORY_KEY) || '[]'); +} + +function saveTodos() { + localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); + localStorage.setItem(CATEGORY_KEY, JSON.stringify(categories)); +} + +function getNextId() { + return todos.length ? Math.max(...todos.map(t => t.id)) + 1 : 1; +} + +function renderForm() { + const form = document.getElementById('todo-form'); + form.innerHTML = ` +
+ + +
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+
+ + + +
+
+ + +
+
+ +
+
+ + +
+
+ + +
+
+ +
+ + +
+ + + `; + // Autocomplete for categories + const datalist = document.getElementById('category-list'); + datalist.innerHTML = categories.map(cat => `