todo

index.html

<div id="body">
  <h2>TODO LIST</h2>
  <div id="add_todo">
    <input type="text" id="todoname" placeholder="Todo Name"/>
    <button id="addtodo" onclick="addTodo()">Add</button>
  </div>
  <div id="todo_items">
         
  </div>
</div>

script.js

var todos = [
  {
    id: 1,
    title: "Read a book",
  },
  {
    id: 2,
    title: "Go to the market",
  },
  {
    id: 3,
    title: "Visit a friend",
  }
];

var todoItems = document.getElementById("todo_items");

todos.forEach(function(todo, index){
  addToTodoView(todo);
});


function addToTodoView(todo){
  
  //   Creating Todo Elements
  var todoTodoItem = document.createElement("div");
  var todoNumber = document.createElement("span");
  var todoName = document.createElement("span");
  var todoButton = document.createElement("button");
//   Adding Style to Created Elements
  todoTodoItem.setAttribute('class', 'todo_item');
  todoTodoItem.setAttribute('id', todo.id);
  todoNumber.setAttribute('class', 'todo_number');
  todoButton.setAttribute('class', 'delete_todo');
  todoTodoItem.style.border = "1px solid cyan";
  todoTodoItem.style.borderRadius = "10px";
  todoTodoItem.style.margin = "10px";
//   Using Created ELements
  todoNumber.innerText = todo.id;
  todoButton.innerText = 'X';
  todoName.innerText = todo.title;
//   Adding Event On Button
  todoButton.addEventListener('click', function(){
    // console.log(todo);
    delete_todo(todo);
  });
//   Joining Elements Togeter
  todoTodoItem.appendChild(todoNumber);
  todoTodoItem.appendChild(todoName);
  todoTodoItem.appendChild(todoButton);
  todoItems.appendChild(todoTodoItem);
}

function addTodo(){
  var todoname = document.getElementById("todoname");
  if(todoname.value.length === 0){
    alert('Todo Name can not be empty');
  }else{
    var todo = {};
    todo.title = todoname.value;
    todo.id = parseInt(todos.length + 1);
    todos.push(todo);
    addToTodoView(todo);
    todoname.value = '';
  }
}

function delete_todo(todo){
  // console.log(todo);
  // alert("I am about to delete ");
  var todoToDelete = document.getElementById(todo.id);
  todoToDelete.remove();
  todos.pop((todo.id) - 1);
  console.log(todos);
}

style.css

#body {
 margin: 0 auto;
  text-align: center;
}

.todo_item {
    padding: 10px;
}

.todo_number {
  color: blue;
  float: left;
}

.delete_todo {
  color: white;
  background: red;
  border-radius: 5px;
  border: 0px;
  float: right;
}

input {
  width: 50%;
}

todo.markdown

todo

A Pen by Ismail Jamiu Babatunde on CodePen.

License.