console is throwing undefined while me trying to Create an element for the Event listener to read

I am trying to create a todo list webapp and serves as my basic training ground for javascript but the console is throwing errors and I can figure out. it says todo is undefined but I defined it through the function as a div to be created. I just wanted that every input on the form will be added on to my unordered list . I just use a sample value, not the real input. I so confused rn. thanks for your help.

//selectors

const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector("todo-button");
const todoList = document.querySelector("todo-list");

//event listener
todoButton.addEventListener('click', addTodo);
console.log(event);

//functions
function addTodo(event) {

  //creating the Todo Div
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  //creating the LI
  const newTodo = document.createElement('li');
  newTodo.innerText = "A new Task";
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);

  //checkmark button
  const completedButtton = document.createElement('button');
  completedButtton.innerHTML = '<i class="fa fa-check></i>';
  completedButtton.classList.add('complete-btn');
  todoDiv.appendChild(completedButtton);

  //trash button
  const trashButtton = document.createElement('button');
  trashButtton.innerHTML = '<i class="fa fa-trash></i>';
  trashButtton.classList.add('trash-btn');
  todoDiv.appendChild(trashButtton);

  //add to main ul class todo-list
  todoList.appendChild(todoDiv);
};

* {
  margin: 0em;
  padding: 0em;
  box-sizing: border-box;
  background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

body {
  text-align: center;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
  color: rgb(0, 0, 0);
}

header,
form {
  min-height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

form input,
form button {
  padding: 0.5rem;
  font-size: 2rem;
  border: none;
  background: #fff;
}

form button {
  color: #96e6a1;
  background: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

form button:hover {
  color: #ffffff;
  background-color: #96e6a1;
}

<title>Worklist</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
<script src="https://use.fontawesome.com/3a734bc38d.js"></script>
<main>
  <h1>My Todo-List</h1>
  <p>Enjoy this handy website that you can use for free expecially for your todo list.</p>

  <form>
    <input type="text" class="todo-input" placeholder="Enter new task" />
    <button class="todo-button" type="submit">
                        <i class="fa fa-plus" aria-hidden="true"></i>
                </buton>
            </form>

            <div class="todo-container">
                <ul class="todo-list"></ul>
            </div>

        </main>

Answer

Here is fully working to do list. There were alot of changes needed in your code.

You are not using preventDefault method which mean your page reload every time you add a new to do item
You were using the right class prefixes .
You also do not need to have seperate function to call on click. You can use the same eventlistener to add to do items.
Also, when to do items were getting added you are not displaying the check and trash icon properly.
Also, once the item is added successfully. its ideal to set the input to null to that another item can be added.

Demo:

//selectors

const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");

//event listener
todoButton.addEventListener('click', (event) => {
  event.preventDefault()

  //
  const todoInput = document.querySelector(".todo-input");

  //creating the Todo Div
  const todoDiv = document.createElement("div");
  todoDiv.classList.add("todo");

  //creating the LI
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);

  //checkmark button
  const completedButtton = document.createElement('button');
  completedButtton.innerHTML = '<i class="fa fa-check></i>';
  completedButtton.classList.add('complete-btn');
  completedButtton.innerHTML = '<i class="fa fa-check" aria-hidden="true"></i>';
  todoDiv.appendChild(completedButtton);

  //trash button
  const trashButtton = document.createElement('button');
  trashButtton.innerHTML = '<i class="fa fa-trash" aria-hidden="true"></i>';
  trashButtton.classList.add('trash-btn');
  todoDiv.appendChild(trashButtton);

  //add to main ul class todo-list
  todoList.appendChild(todoDiv);

  //Clear div
  todoInput.value = ''

})

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

<head>
  <title>Worklist</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/konpa/devicon@master/devicon.min.css">
  <script src="https://use.fontawesome.com/3a734bc38d.js"></script>
  <!--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">   -->
</head>

<body>
  <main>
    <h1>My Todo-List</h1>
    <p>Enjoy this handy website that you can use for free expecially for your todo list.</p>

    <form>
      <input type="text" class="todo-input" placeholder="Enter new task" />
      <button class="todo-button" type="submit">
          <i class="fa fa-plus" aria-hidden="true"></i>
          </button>
    </form>

    <div class="todo-container">
      <ul class="todo-list"></ul>
    </div>

  </main>
</body>

Advertisement

Answer