116 lines
3.4 KiB
JavaScript
116 lines
3.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");
|
||
Display.toggleShow(form);
|
||
});
|
||
|
||
const add = document.getElementById("addP");
|
||
|
||
add.addEventListener("click", () =>{
|
||
const projectName = document.querySelector(".nameP");
|
||
const newProject = Project();
|
||
newProject.addName(projectName.value);
|
||
});
|
||
|
||
const Display = (() =>{
|
||
const toggleShow = (name) => {
|
||
if (name.style.display === "block") {
|
||
name.style.display = "none";
|
||
}
|
||
else {
|
||
name.style.display = "block";
|
||
}
|
||
}
|
||
const appendList = (node, array) => {
|
||
array.forEach(element => {
|
||
let child = node.appendChild(element);
|
||
return child;
|
||
});
|
||
}
|
||
const delNode = (node)=> {
|
||
console.log("Remove!");
|
||
|
||
node.remove();
|
||
}
|
||
|
||
return {toggleShow, appendList, delNode};
|
||
})();
|
||
|
||
const Storage = (() =>{
|
||
const setItems = (name) => {
|
||
|
||
}
|
||
const removeItems = () =>{
|
||
|
||
}
|
||
const clearStorage = () =>{
|
||
|
||
}
|
||
|
||
return {setItems, removeItems, clearStorage};
|
||
})();
|
||
|
||
const Project = (name) =>{
|
||
const getName = () => name;
|
||
|
||
const addName = (name) => {
|
||
const projectList = document.querySelector(".projectList");
|
||
const project = document.createElement("li");
|
||
|
||
const link = document.createElement("a");
|
||
link.setAttribute("href", "project.html");
|
||
link.innerText = `${name}`;
|
||
|
||
const btnDel = document.createElement("button");
|
||
btnDel.innerText = "-";
|
||
|
||
btnDel.addEventListener("click", ()=>{
|
||
Display.delNode(project);
|
||
});
|
||
|
||
let list = [link, btnDel];
|
||
Display.appendList(project,list);
|
||
projectList.appendChild(project);
|
||
|
||
console.log(pjctNames);
|
||
}
|
||
|
||
return {getName, addName};
|
||
}
|
||
|
||
const TodoList = (name) =>{
|
||
const getName = () => name;
|
||
const addList = () =>{
|
||
|
||
}
|
||
}
|
||
const TodoItems = (title, description, dueDate, priority) =>{
|
||
const getTitle = () => title;
|
||
const getDescription = () => description;
|
||
const getDueDate = () => dueDate;
|
||
const getPriority = () => priority;
|
||
|
||
return {getTitle, getDescription, getDueDate, getPriority};
|
||
|
||
}
|