67 lines
2.4 KiB
JavaScript
67 lines
2.4 KiB
JavaScript
|
/*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};
|
|||
|
|
|
|||
|
|
}
|