synobbol/ToDoListPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove project selected

Browse Source
This commit is contained in:
Synobbol 2023-08-16 14:01:21 +02:00
parent 5f55ed66bf
commit 82cce8f70b
4 changed files with 85 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -11,15 +11,16 @@
<h1>Todo List Plus</h1> <h1>Todo List Plus</h1>
</header> </header>
<main> <main>
<h2>Projects</h2> <h2>Projects:</h2>
<div> <div>
<ul class="projectList"> <ul class="projectList">
<li><a href="project.html">DEFAULT PROJECT</a></li>
</ul> </ul>
</div> </div>
<button class="show">Add project</button> <button class="show">Add project</button>
<div class="form" hidden> <div class="form">
<input class="nameP" type="text" name="nameP" placeholder="name of your project"> <input class="nameP" type="text" name="nameP" placeholder="name of your project">
<button id="addP">+</button> <button id="addP">+</button>
</div> </div>

83
main.js
View File

@ -21,39 +21,88 @@ const projectInput = document.querySelector(".show");
projectInput.addEventListener("click",()=>{ projectInput.addEventListener("click",()=>{
const form = document.querySelector(".form"); const form = document.querySelector(".form");
console.log(form.getAttributeNode("hidden")); Display.toggleShow(form);
form.removeAttribute("hidden");
}); });
const project = document.getElementById("addP"); const add = document.getElementById("addP");
project.addEventListener("click", () =>{ add.addEventListener("click", () =>{
const projectName = document.querySelector(".nameP"); const projectName = document.querySelector(".nameP");
console.log(projectName.value);
const newProject = Project(); const newProject = Project();
newProject.addName(projectName.value); 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 Project = (name) =>{
const getName = () => name; const getName = () => name;
//let listName = [];
const addName = (name) => { const addName = (name) => {
let projectList = document.querySelector(".projectList"); const projectList = document.querySelector(".projectList");
let project = document.createElement("li"); const project = document.createElement("li");
let btn = document.createElement("button");
btn.innerText = `${name}`;
project.appendChild(btn);
projectList.appendChild(project);
}
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}; return {getName, addName};
} }
const TodoList = () =>{ const TodoList = (name) =>{
const getName = () => name;
const addList = () =>{
}
} }
const TodoItems = (title, description, dueDate, priority) =>{ const TodoItems = (title, description, dueDate, priority) =>{
const getTitle = () => title; const getTitle = () => title;

13
project.html Normal file
View File

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Project</title>
</head>
<body>
<div id = "container">
</div>
</body>
</html>

3
style.css
View File

@ -3,4 +3,7 @@ ul{
} }
li { li {
list-style: none; list-style: none;
}
.form {
display: none;
} }