title: function only runs when input !== null
body: <p>I am creating this simple Todo-list.  Its working fine I just want to add a condition of if 
  so that the function would work only when there is a text in the inpute (if input.value !== null) otherwise it will change the border of the input to red,.here is the js code</p>
  
  <pre><code>//Selectors
  const todoInput = document.querySelector('.todo-input');
  const todoButton = document.querySelector('.todo-btn');
  const todoContainer = document.querySelector('.todo-container');
  const todoList = document.querySelector('.todo-list');
  
  //Event Listners
  todoButton.addEventListener('click', addTodo)
  
  //Functions
  function addTodo(event){ 
      //prevent form from submiting    
      event.preventDefault();
      // todo-div
      const todoDiv = document.createElement("div");
      todoDiv.classList.add("todo");
      // creat li
      const newTodo = document.createElement("li");
      newTodo.innerText = todoInput.value;
      newTodo.classList.add('todo-list');
      todoDiv.appendChild(newTodo);
      // check mark button
      const completedButton = document.createElement('button');
      completedButton.innerHTML = '&lt;i class="fas fa-check"&gt;&lt;/i&gt;';
      completedButton.classList.add('complete-btn');
      todoDiv.appendChild(completedButton);
      // trash button
      const trashButton = document.createElement('button');
      trashButton.innerHTML = '&lt;i class="fas fa-trash"&gt;&lt;/i&gt;';
      trashButton.classList.add('trash-btn');
      todoDiv.appendChild(trashButton);
      // aapend to the to do list
      todoList.appendChild(todoDiv);
      todoInput.value = null
  }
  </code></pre>
  
  <p>Where should I add the <code>if</code> statement because where ever I put it, it creates the div with Li in it and pushes it to the screen?</p>