Showing a div when all 'to-do notes' have been deleted-CodePudding

I am making a to-do app as a project, and I have an empty state prompt that shows when you first load the page, which then disappears if you add a 'to-do'.

However, when you delete all the to-dos, it doesnt come back.

I have tried to give a function to show it when a to-do is deleted, but that does't work properly.

Anyone have any ideas?

let form = document.getElementById("todo-form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");
let right = document.getElementById("right")
let noToDo = document.getElementById("notodo")

form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("button clicked");

    formValidation();
});

let formValidation = () => {
    if (input.value === "") {
        msg.innerHTML = "Post cannot be blank";
        console.log("failure");
    } else {
        console.log("successs");
        msg.innerHTML = "";
        acceptData();
    }
};

let data = [];

let acceptData = () => {
    data["text"] = input.value;
    console.log(data);
    createPost();
    hideNoToDo();
};

let createPost = () => {
    posts.innerHTML  = `
    <div>
      <p>${data.text}</p>
      <span >
        <i onClick="editPost(this)" class='bx bx-edit-alt'></i>
        <i onClick="deletePost(this)" class='bx bx-trash' ></i>
      </span>
    </div>
    `;
    input.value = "";
};

let hideNoToDo = () => {
    noToDo.classList.add('hidden')
}

let showNoToDo = () => {
    noToDo.classList.remove('hidden')
}

let deletePost = (e) => {
    e.parentElement.parentElement.remove();
    showNoToDo();
};

let editPost = (e) => {
    input.value = e.parentElement.previousElementSibling.innerHTML;
    e.parentElement.parentElement.remove();
};

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&family=League Spartan:wght@200;300;400;500;600;700;800;900&family=Noto Serif:wght@400;700&display=swap');

:root {
    --primary-color: rgb(240, 69, 114);
    --primary-color-ligh: rgb(220, 100, 124);
    --secondary-color: rgb(25, 24, 44);
    --secondary-color-ligh: rgb(64, 64, 83);

    --white: rgb(255, 255, 255);

    --primary-font: 'League Spartan', sans-serif;
    --secondary-font: 'Noto Serif', serif;
    --kanit-font: 'Kanit', sans-serif;

    --swiper-theme-color: rgb(240, 69, 114);
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'League Spartan', sans-serif;
}

body {
    width: 100%;
    background-color: #fff;
    max-height: 100%;
}





h1 {
    position: absolute;
    top: 10%;
    left: 50%;

    transform: translateX(-50%);

    font-size: 4rem;

    opacity: 0.5;
}

.no-todo {
    position: absolute;
    top: 23%;
    left: 50%;

    transform: translateX(-50%);
    
    text-align: center;
}

.no-todo img {
    width: 150px;
}

.no-todo p {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.3rem;
    margin-top: 24px;
    margin-bottom: 10px;
}

.no-todo p2 {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.2rem;
    color: #000;
    opacity: 0.6;
}

.no-todo.hidden {
    display: none;
}



.left {
    position: absolute;

    left: 0%;
    top: 40%;

    width: 100%;
    height: 40%;
}

form {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.textarea {
    position: relative;
    top: 24px;
    margin-left: 5%;

    min-width: 90%;
    max-width: 90%;

    min-height: 40px;
    max-height: 40px;

    padding: 5px 0;

    outline: none;
    border: none;
    border: 2px solid var(--secondary-color);
    border-radius: 5px;

    padding: 10px;

    font-size: 20px;
    font-weight: 400;
    margin-top: 5px;

    color: #000;

    overflow-y: hidden;
}

.textarea::placeholder {
    color: #000;
}


.button1 {
    background-color: transparent;
    outline: none;
    border: none;

    font-weight: 600;
    font-size: 1.1rem;

    opacity: 0.7;

    cursor: pointer;
}


.right {
    position: absolute;

    right: 5%;
    top: 30%;
    width: 45%;

    height: 60%;

    overflow-y: auto;
}

.right::-webkit-scrollbar {
    width: 10px;
}

.right::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.right::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.9);
}

h3 {
    margin-top: 10px;
    font-weight: 600;
}

#posts div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: var(--kanit-font);
    font-weight: 500;
    font-size: 1.2rem;

    margin-bottom: 20px;

    width: 95%;

    border: 2px solid var(--secondary-color);
    border-radius: 5px;
    padding: 8px;

    color: #000;
}

.options {
    display: flex;
    gap: 25px;

    color: var(--secondary-color);
}

i {
    cursor: pointer;
}

#msg {
    position: absolute;
    left: 50%;

    transform: translateX(-50%);
    
    color: red;
    margin-bottom: 10px;
}

/* TOP NAV */
.top-nav-img-only {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 8%;

    display: flex;
    align-items: center;

    z-index: 99;
}

.top-nav-img-only a img {
    position: absolute;
    top: 20%;
    left: 5%;
    height: 60%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bydom</title>

    <link rel="stylesheet" href="/todo/todo.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <div >
        <a href="/">
            <img src="/images/logo.png">
        </a>
    </div>
    <h1>todos</h1>
    <div  id="notodo">
        <img src="/svg/checklist.svg">
        <p>Add your first To-Do</p>
        <p2>What's first on your list?</p2>
    </div>
    <form id="todo-form">
        <br><br>
        <input  type="text" name="post" id="input" placeholder="Add new To-do"></input>
        <br><br>
        <div id="msg"></div>
    </form>
    <div  id="right">
        <div id="posts">

        </div>
    </div>

    <script src="/todo/todo.js"></script>
</body>

</html>

CodePudding user response：

Are you sure it doesn't work? I just ran the code snippet and it shows the starter page back if I delete an item, but there's another one problem that if I add 2 items and then delete only one it shows the starter page even if it has 1 item left

The simplest thing to do is to set some kind of a counter

let form = document.getElementById("todo-form");
let input = document.getElementById("input");
let msg = document.getElementById("msg");
let posts = document.getElementById("posts");
let right = document.getElementById("right")
let noToDo = document.getElementById("notodo")
let counter = 0; /* new line */

form.addEventListener("submit", (e) => {
    e.preventDefault();
    console.log("button clicked");

    formValidation();
});

let formValidation = () => {
    if (input.value === "") {
        msg.innerHTML = "Post cannot be blank";
        console.log("failure");
    } else {
        console.log("successs");
        msg.innerHTML = "";
        acceptData();
    }
};

let data = [];

let acceptData = () => {
    data["text"] = input.value;
    console.log(data);
    createPost();
    hideNoToDo();
};

let createPost = () => {
    counter  ;  /* new line */
    console.log(counter);
    posts.innerHTML  = `
    <div>
      <p>${data.text}</p>
      <span >
        <i onClick="editPost(this)" class='bx bx-edit-alt'></i>
        <i onClick="deletePost(this)" class='bx bx-trash' ></i>
      </span>
    </div>
    `;
    input.value = "";
};

let hideNoToDo = () => {
    noToDo.classList.add('hidden')
}

let showNoToDo = () => {
    noToDo.classList.remove('hidden')
}

let deletePost = (e) => {
    e.parentElement.parentElement.remove();
    
    /* new lines */
    
    counter--;
    if (counter === 0) {
     showNoToDo();
    }
   
};

let editPost = (e) => {
    input.value = e.parentElement.previousElementSibling.innerHTML;
    e.parentElement.parentElement.remove();
};

@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;300;400;500;600;700;800;900&family=League Spartan:wght@200;300;400;500;600;700;800;900&family=Noto Serif:wght@400;700&display=swap');

:root {
    --primary-color: rgb(240, 69, 114);
    --primary-color-ligh: rgb(220, 100, 124);
    --secondary-color: rgb(25, 24, 44);
    --secondary-color-ligh: rgb(64, 64, 83);

    --white: rgb(255, 255, 255);

    --primary-font: 'League Spartan', sans-serif;
    --secondary-font: 'Noto Serif', serif;
    --kanit-font: 'Kanit', sans-serif;

    --swiper-theme-color: rgb(240, 69, 114);
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'League Spartan', sans-serif;
}

body {
    width: 100%;
    background-color: #fff;
    max-height: 100%;
}





h1 {
    position: absolute;
    top: 10%;
    left: 50%;

    transform: translateX(-50%);

    font-size: 4rem;

    opacity: 0.5;
}

.no-todo {
    position: absolute;
    top: 23%;
    left: 50%;

    transform: translateX(-50%);
    
    text-align: center;
}

.no-todo img {
    width: 150px;
}

.no-todo p {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.3rem;
    margin-top: 24px;
    margin-bottom: 10px;
}

.no-todo p2 {
    font-family: var(--primary-font);
    font-weight: 600;
    font-size: 1.2rem;
    color: #000;
    opacity: 0.6;
}

.no-todo.hidden {
    display: none;
}



.left {
    position: absolute;

    left: 0%;
    top: 40%;

    width: 100%;
    height: 40%;
}

form {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
}

.textarea {
    position: relative;
    top: 24px;
    margin-left: 5%;

    min-width: 90%;
    max-width: 90%;

    min-height: 40px;
    max-height: 40px;

    padding: 5px 0;

    outline: none;
    border: none;
    border: 2px solid var(--secondary-color);
    border-radius: 5px;

    padding: 10px;

    font-size: 20px;
    font-weight: 400;
    margin-top: 5px;

    color: #000;

    overflow-y: hidden;
}

.textarea::placeholder {
    color: #000;
}


.button1 {
    background-color: transparent;
    outline: none;
    border: none;

    font-weight: 600;
    font-size: 1.1rem;

    opacity: 0.7;

    cursor: pointer;
}


.right {
    position: absolute;

    right: 5%;
    top: 30%;
    width: 45%;

    height: 60%;

    overflow-y: auto;
}

.right::-webkit-scrollbar {
    width: 10px;
}

.right::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.6);
    border-radius: 10px;
}

.right::-webkit-scrollbar-thumb:hover {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.9);
}

h3 {
    margin-top: 10px;
    font-weight: 600;
}

#posts div {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-family: var(--kanit-font);
    font-weight: 500;
    font-size: 1.2rem;

    margin-bottom: 20px;

    width: 95%;

    border: 2px solid var(--secondary-color);
    border-radius: 5px;
    padding: 8px;

    color: #000;
}

.options {
    display: flex;
    gap: 25px;

    color: var(--secondary-color);
}

i {
    cursor: pointer;
}

#msg {
    position: absolute;
    left: 50%;

    transform: translateX(-50%);
    
    color: red;
    margin-bottom: 10px;
}

/* TOP NAV */
.top-nav-img-only {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 8%;

    display: flex;
    align-items: center;

    z-index: 99;
}

.top-nav-img-only a img {
    position: absolute;
    top: 20%;
    left: 5%;
    height: 60%;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bydom</title>

    <link rel="stylesheet" href="/todo/todo.css">
    <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
    <div >
        <a href="/">
            <img src="/images/logo.png">
        </a>
    </div>
    <h1>todos</h1>
    <div  id="notodo">
        <img src="/svg/checklist.svg">
        <p>Add your first To-Do</p>
        <p2>What's first on your list?</p2>
    </div>
    <form id="todo-form">
        <br><br>
        <input  type="text" name="post" id="input" placeholder="Add new To-do"></input>
        <br><br>
        <div id="msg"></div>
    </form>
    <div  id="right">
        <div id="posts">

        </div>
    </div>

    <script src="/todo/todo.js"></script>
</body>

</html>

Run the code snippet to make sure it works