Remove project selected

2023-08-16 14:01:21 +02:00
parent 5f55ed66bf
commit 82cce8f70b
4 changed files with 85 additions and 19 deletions
--- a/index.html
+++ b/index.html
@@ -11,15 +11,16 @@
        <h1>Todo List Plus</h1>
    </header>
    <main>
-        <h2>Projects</h2>
+        <h2>Projects:</h2>
        <div>
            <ul class="projectList">
+                <li><a href="project.html">DEFAULT PROJECT</a></li>
            </ul>
        </div>

        <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">
            <button id="addP">+</button>
        </div>
--- a/main.js
+++ b/main.js
@@ -21,39 +21,88 @@ const projectInput = document.querySelector(".show");

 projectInput.addEventListener("click",()=>{
    const form = document.querySelector(".form");
-    console.log(form.getAttributeNode("hidden"));
-    form.removeAttribute("hidden");
+    Display.toggleShow(form);
 });

-const project = document.getElementById("addP");
+const add = document.getElementById("addP");

-project.addEventListener("click", () =>{
+add.addEventListener("click", () =>{
    const projectName = document.querySelector(".nameP");
-    console.log(projectName.value);
    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 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);
-    }
+        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 = () =>{
-
+const TodoList = (name) =>{
+    const getName = () => name;
+    const addList = () =>{
+        
+    }
 }
 const TodoItems = (title, description, dueDate, priority) =>{
    const getTitle = () => title;
--- a/project.html
+++ b/project.html
@@ -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>
--- a/style.css
+++ b/style.css
@@ -3,4 +3,7 @@ ul{
 }
 li {
    list-style: none;
+}
+.form {
+    display: none;
 }