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};
|
||
|
||
}
|