I want to write 'empty' in a todo list item if the textbox is empty or whitespace-CodePudding

I made my todo list application and everything works, but when I add a new item, and the text is empty, the li items look so messed up. I tried different solutions, but they either don't work at all, or make my close buttons disappear from the items. This happens both when the textbox is empty and spaces are used (example: ' ', '
', ' ');

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <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>Documigga</title>
</head>
<body>
  <main class="centered">
    <h1 onclick="add()">ToDo List JS</h1>
    <h3>js project</h3>
    <form action="">

      <input type="text" name="" id="todoinput" placeholder="Enter the activity you've wented to do">
      <input type="button" value="Add" id="add-button" onclick="add()">
    </form>
    <ul id="todo-list">
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
    </ul>
  </main>

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

*{
    box-sizing: border-box;
}
body
{
    text-align: center;
    margin: 0;
    padding: 0;
    background-color: #dbf9fc;
    font-family: Arial, Helvetica, sans-serif;
    color:rgba(0, 27, 39);
}
#todoinput{
    margin: 5px;
    padding: 5px;
    width: 65%;
}
#add-button{
    padding: 5px;
    margin: 5px;
    width: 5%;
    background-color:rgba(0, 27, 39);
    color: #dbf9fc;
    border: none;
    border-radius: 5px;
    height:1fr;
    cursor: pointer;
}
#add-button:hover{
    background-color: black;
}
#todo-list{
    display: inline-block;
        margin: 0;
        padding: 0;
    list-style: none;
    width: 70%;
}
.todo-item{
    position: relative;
    display: flex;
    justify-content: flex-start;
    background-color:white;
    border: 2px solid black;
    padding: 5px;
    margin: 5px;
}
.closebutton{
    cursor: pointer;
    justify-self: flex-end;
    background-color: #e6772d;
    position: absolute;
    right: 0;
    top: 0;
    color: white;
    float: right;
    padding: 5px;
    width: 30%;
    margin: 0;
}
.closebutton:hover{
    background-color: #c46526;
}
.todo-item-checked{
    position: relative;
    display: flex;
    justify-content: flex-start;
    background-color:rgb(187, 187, 187);
    border: 2px solid black;
    padding: 5px;
    margin: 5px;
    text-decoration: line-through;
}


function check(ev)
{
    ev.target.classList.toggle("todo-item-checked");
    ev.target.classList.toggle("todo-item");
}
function closeevent(event){

        var listitem = this.parentElement;
        listitem.style.display= "none";
    
}

var todoitemlist = document.getElementsByClassName('todo-item');

function addclosebutton(todoitemlist){
    var span = document.createElement("SPAN");
    span.innerHTML = "Close";
    span.className="closebutton";
    span.addEventListener('click',closeevent);
    todoitemlist.appendChild(span);

}


var todoitemlist=document.getElementsByClassName('todo-item');

for(var i=0;i<todoitemlist.length;i  )
{
 addclosebutton(todoitemlist[i]);
 todoitemlist[i].addEventListener('click',check);
}



//add another list item
function add(){
    var listitem = document.createElement("LI");
    listitem.className="todo-item";
    
    var text = document.getElementById('todoinput').value;
    var myul = document.getElementById('todo-list');
    var t = document.createTextNode(text);
    listitem.appendChild(t);
    myul.appendChild(listitem);

    var span = document.createElement("SPAN");
    span.innerHTML = "Close";
    span.className="closebutton";
    listitem.appendChild(span);

    var i;
    addclosebutton(listitem);
    listitem.addEventListener('click',check);
}

CodePudding user response：

You may remove the position:absolute to the close button and rethink rules used with flex or set a min-height:2em; to .todo-item.

Note : You are inserting twice the close button, i commented parts of the js, so only one button is inserted in each todo-item added ;) .

example without absolute :

function check(ev)
    {
        ev.target.classList.toggle("todo-item-checked");
        ev.target.classList.toggle("todo-item");
    }
    function closeevent(event){
    
            var listitem = this.parentElement;
            listitem.style.display= "none";
        
    }
    
    var todoitemlist = document.getElementsByClassName('todo-item');
    
    function addclosebutton(todoitemlist){
        var span = document.createElement("SPAN");
        span.innerHTML = "Close";
        span.className="closebutton";
        span.addEventListener('click',closeevent);
        todoitemlist.appendChild(span);    
    }
    
    
    var todoitemlist=document.getElementsByClassName('todo-item');
    
    for(var i=0;i<todoitemlist.length;i  )
    {
     addclosebutton(todoitemlist[i]);
     todoitemlist[i].addEventListener('click',check);
    }
    
    
    
    //add another list item
    function add(){
        var listitem = document.createElement("LI");
        listitem.className="todo-item";
        
        var text = document.getElementById('todoinput').value;
        var myul = document.getElementById('todo-list');
        var t = document.createTextNode(text);
        listitem.appendChild(t);
        myul.appendChild(listitem);
    
       /* close button is already added elsewhere, empty can be added from here instead adding another close button 
        var span = document.createElement("SPAN");
        span.innerHTML = "Empty";
        listitem.appendChild(span);
        */
    
        var i;
        addclosebutton(listitem);
        listitem.addEventListener('click',check);
    }

* {
  box-sizing: border-box;
}

body {
  text-align: center;
  margin: 0;
  padding: 0;
  background-color: #dbf9fc;
  font-family: Arial, Helvetica, sans-serif;
  color: rgba(0, 27, 39);
}

#todoinput {
  margin: 5px;
  padding: 5px;
  width: 65%;
}

#add-button {
  padding: 5px;
  margin: 5px;
  width: 5%;
  background-color: rgba(0, 27, 39);
  color: #dbf9fc;
  border: none;
  border-radius: 5px;
  height: 1fr;
  cursor: pointer;
}

#add-button:hover {
  background-color: black;
}

#todo-list {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 70%;
}

.todo-item {
  position: relative;
  display: flex; 
  background-color: white;
  border: 2px solid black;
  padding: 5px;
  margin: 5px;
}

.closebutton {
  cursor: pointer; 
  background-color: #e6772d;
  color: white;
  padding: 5px;
  width: 30%;
  margin:-5px  -5px -5px 0 ;
  margin-inline-start:auto;
}

.closebutton:hover {
  background-color: #c46526;
}

.todo-item-checked {
  position: relative;
  display: flex;
  justify-content: flex-start;
  background-color: rgb(187, 187, 187);
  border: 2px solid black;
  padding: 5px;
  margin: 5px;
  text-decoration: line-through;
}

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

<head>
  <link rel="stylesheet" href="style.css">
  <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>Documigga</title>
</head>

<body>
  <main class="centered">
    <h1 onclick="add()">ToDo List JS</h1>
    <h3>js project</h3>
    <form action="">

      <input type="text" name="" id="todoinput" placeholder="Enter the activity you've wented to do">
      <input type="button" value="Add" id="add-button" onclick="add()">
    </form>
    <ul id="todo-list">
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
      <li class="todo-item">
        Hit the lights
      </li>
    </ul>
  </main>

</body>
</html>

CodePudding user response：

In this line you're declaring the value that you're going to use as the item's text: var text = document.getElementById('todoinput').value;

One possible solution is to use the OR operator so if todoinput's value is null, text becomes 'Empty':

var text = document.getElementById('todoinput').value || 'Empty';

CodePudding user response：

No JavaScript needed if you use the :empty pseudoclass.

li:empty::before {
  content: 'Empty';
}

<ul id="todo-list">
  <li class="todo-item">
    Hit the lights
  </li>
  <li class="todo-item">
    Hit the lights
  </li>
  <li class="todo-item"></li>
</ul>

jsFiddle