From 5f55ed66bf4c5d2f7184f9db39d21c0b0a669530 Mon Sep 17 00:00:00 2001 From: Synobbol <97944378+Synobbol@users.noreply.github.com> Date: Fri, 11 Aug 2023 13:14:58 +0200 Subject: [PATCH] Add basics and create new projects name --- index.html | 30 +++++++++++++++++++++++++ main.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 6 +++++ 3 files changed, 102 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..972fa41 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + ToDoListPlus + + + +
+

Todo List Plus

+
+
+

Projects

+
+ +
+ + + + +
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..a6dfb96 --- /dev/null +++ b/main.js @@ -0,0 +1,66 @@ +/*Your ‘todos’ are going to be objects that you’ll want to dynamically create, + which means either using factories or constructors/classes to generate them.*/ + +/* Brainstorm what kind of properties your todo-items are going to have. At a minimum they should have a title, + description, dueDate and priority. You might also want to include notes or even a checklist.*/ + +/*Your todo list should have projects or separate lists of todos. + When a user first opens the app, there should be some sort of ‘default’ project to which all of their todos are put. + Users should be able to create new projects and choose which project their todos go into.*/ + +/*You should separate your application logic (i.e. creating new todos, setting todos as complete, changing todo priority etc.) + from the DOM-related stuff, so keep all of those things in separate modules.*/ + +/*The look of the User Interface is up to you, but it should be able to do the following: + view all projects + view all todos in each project (probably just the title and duedate… perhaps changing color for different priorities) + expand a single todo to see/edit its details + delete a todo*/ + +const projectInput = document.querySelector(".show"); + +projectInput.addEventListener("click",()=>{ + const form = document.querySelector(".form"); + console.log(form.getAttributeNode("hidden")); + form.removeAttribute("hidden"); +}); + +const project = document.getElementById("addP"); + +project.addEventListener("click", () =>{ + const projectName = document.querySelector(".nameP"); + console.log(projectName.value); + const newProject = Project(); + newProject.addName(projectName.value); + +}); + +const Project = (name) =>{ + const getName = () => name; + //let listName = []; + + const addName = (name) => { + let projectList = document.querySelector(".projectList"); + let project = document.createElement("li"); + let btn = document.createElement("button"); + btn.innerText = `${name}`; + project.appendChild(btn); + projectList.appendChild(project); + } + + + return {getName, addName}; +} + +const TodoList = () =>{ + +} +const TodoItems = (title, description, dueDate, priority) =>{ + const getTitle = () => title; + const getDescription = () => description; + const getDueDate = () => dueDate; + const getPriority = () => priority; + + return {getTitle, getDescription, getDueDate, getPriority}; + +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..8e2e17a --- /dev/null +++ b/style.css @@ -0,0 +1,6 @@ +ul{ + padding: 0; +} +li { + list-style: none; +} \ No newline at end of file