Add basics and create new projects name

2023-08-11 13:14:58 +02:00 · 2023-08-11 13:14:58 +02:00 · 5f55ed66bf
commit 5f55ed66bf
3 changed files with 102 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,30 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoListPlus</title>
    <link rel="stylesheet" href="style.css">
 </head>
 <body>
    <header>
        <h1>Todo List Plus</h1>
    </header>
    <main>
        <h2>Projects</h2>
        <div>
            <ul class="projectList">
            </ul>
        </div>
        <button class="show">Add project</button>
        <div class="form" hidden>
            <input class="nameP" type="text" name="nameP" placeholder="name of your project">
            <button id="addP">+</button>
        </div>
    </main>
    <footer></footer>
    <script src="main.js"></script>
 </body>
 </html>
--- a/main.js
+++ b/main.js
@ -0,0 +1,66 @@
 /*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};
 }
--- a/style.css
+++ b/style.css
@ -0,0 +1,6 @@
 ul{
    padding: 0;
 }
 li {
    list-style: none;
 }