Click here to Skip to main content
15,881,764 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hello,

I was making a to-do list and I couldn't figure out how can I limit the number of creating li. I want to stop it from creating li when it reaches 4 li by not showing it on ul and stop submitting it. Please give some ideas or advice on how to solve this one. Thank you

whole code: https://codepen.io/jujuju12/pen/MWrojJZ[^]


<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <style>
            body{
    background-image: linear-gradient( 83.2deg,  rgba(150,93,233,1) 10.8%, rgba(99,88,238,1) 94.3% );;
    display: flex;
    justify-content: center;
    align-content: center;
    height: 90vh; 
}
h1{
    text-align: center;
    font-size: 50px;
    font-weight: 500;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: #fbfbf2;
}
.option{
    margin-top: 4rem;
   display: flex;
   justify-content: center;
   align-content: center;
   flex-direction: row-reverse;
}
#input{
width: 400px; 
height: 60px;
border-radius: 10px;
box-shadow: none;
font-size: 20px;
}
#submit{
    margin-right: 5px;
    padding: 10px 10px; 
    border-radius: 10px;
    background-color: #5a189a;
    color: #fbfbf2;
}
#input, 
#submit{
    padding: 10px 10px; 
    border: none;
}
.lists{
    background-color: #efd9ce;
    width: 850px;
    height: 400px; 
    border-radius: 15px; 
}
.memo{
    padding: 15px; 
    font-size: 30px; 
}
ul li{
  margin: 20px; 
}
button{
    background-color:  #5a189a; 
    border-radius: 15px; 
    color: #fbfbf2;
    font-size: 20px; 
 
    
}
        </style>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
    <head></head>
    <body>
        
        <form>
        <h1>TO DO LIST</h1>
        <div class="option">
            <input type="text" id="input" placeholder="enter a task">
            <button type="submit" id="submit">SUBMIT</button>
        </div>
        
        <div class="lists">
            <ul class= "memo">
      
            </ul>
        </div>
        
       </form>
        
      
    </body>
</html>


What I have tried:

I was making a to-do list and I couldn't figure out how can I limit the number of creating li.

<script>
      const form = document.querySelector('form')
      const input = document.querySelector('input')
      const memo = document.querySelector('ul')

      form.addEventListener('submit', function(e){
       const line = document.ul.child

       if(line > 5){
          e.preventDefault()
          ToDo()
          input.value = ""
       }




      })

      function ToDo(){
            if(input.value == ''){
                alert('please write')
            } else {
               const value = input.value
               const newList = document.createElement('li')
               newList.textContent = value
               memo.append(newList)
               const deleteBtn = document.createElement('button')
               newList.append(' ', ' ', deleteBtn)
               deleteBtn.textContent = "DELETE"
               console.log(newList)


            }

        }





        memo.addEventListener('click', function(e) {
        if (e.target.nodeName === 'BUTTON') {
        e.target.closest('LI').remove();
        }
        })


      </script>
Posted
Updated 28-Mar-22 22:18pm
v4

1 solution

The logic you've put in place to check the HTML elements is wrong, and the code won't even run, as described below:

JavaScript
//   document.ul is not a valid selector, you already
// v have the 'memo' element selected, so why use this?
const line = document.ul.child

//   This logic doesn't make sense, you're trying to say here
// v if the number of children is MORE than 5 then add more?
if(line > 5){
  e.preventDefault()
  ToDo()
  input.value = ""
}

Instead you need to use proper logic:
JavaScript
// Call preventDefault() immediately to ensure no form submit
e.preventDefault();

// Get the children of the list using the 'memo' variable
const children = memo.children;

// If the number of children is LESS than 4 then allow the append
if (children.length < 4) {
  ToDo();
  input.value = '';
}
 
Share this answer
 
Comments
Member 15332881 29-Mar-22 6:29am    
I did it. It worked. I feel stupid for not realizing it by myself. Thank you very much :-)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900