<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="wrapper"> <div class="header"> <h1>Todo List </h1> </div> <div class="add-task"> <input id="new-task-input" type="text" placeholder="Add A Task..." /> <button class="add-task-btn">+</button> </div> <div class="task-list-header"> <h2>Tasks</h2> <button class="remove-complete-btn">Clear Complete</button> </div> <div class="task-list-wrapper"> <ul class="task-list"></ul> </div> </div> <template id="task-template"> <li class="task"> <input type="checkbox" /> <label> <span class="check-mark">✔</span> <span class="custom-checkbox"></span> </label> </li> </template>

* { font-family: "Segoe UI", Tahoma, Verdana, sans-serif; font-size: 30px; margin: 0; padding: 0; box-sizing: border-box; } body { background: #272727; color: #fff; } .wrapper { margin: 0 auto; max-width: 80%; } .header { display: flex; justify-content: center; align-items: center; padding: 25px; background: #747474; background-image: linear-gradient(to right, #272727, #747474); width: 100%; } .add-task { display: flex; justify-content: center; align-items: center; padding: 25px; background: #fff; color: #272727; width: 100%; } .add-task input { border: 0; border-bottom: 1px solid #272727; outline: none; transition: border 150ms ease-in-out; } .add-task input::placeholder { opacity: 1; transition: opacity 150ms ease-in-out; } .add-task input:focus { border-bottom-width: 2px; } .add-task input:focus::placeholder { opacity: 0.5; } .add-task-btn { border: 0; background: 0; color: #272727; cursor: pointer; outline: none; transition: color 150ms ease-in-out; } .add-task-btn:hover { color: #747474; } .add-task-btn:active { color: #ff652f; } .task-list-header { position: relative; width: 100%; } .task-list-header h2 { display: flex; justify-content: center; align-items: center; padding: 4px; background: #747474; background-image: linear-gradient(to right, #272727, #747474); color: #fff; width: 100%; } .remove-complete-btn { position: absolute; right: 5vw; top: 16px; border: 0; background: 0; color: #fff; font-size: 0.5em; cursor: pointer; transition: color 150ms ease-in-out; outline: none; } .remove-complete-btn:hover { color: #272727; } .remove-complete-btn:active { color: #ff652f; } .task-list-wrapper { background: #fff; color: #272727; width: 100%; } .task-list { padding: 15px 25px 25px 25px; } .task-list li { list-style-type: none; cursor: pointer; padding: 10px 0; border-bottom: 1px solid #7474743b; } .task-list li:hover .custom-checkbox { transform: scale(1.2); color: #747474; } .task-list li:active .custom-checkbox { transform: scale(1); color: #ff652f; } [type="checkbox"]:checked + label .custom-checkbox { transform: scale(1); color: #ff652f; opacity: 0.6; } [type="checkbox"]:checked + label .check-mark, [type="checkbox"]:checked + label { opacity: 0.6; } .task-list input { position: absolute; opacity: 0; } .task-list label { position: relative; cursor: pointer; opacity: 1; transition: opacity 150ms ease-in-out; transition: color 150ms ease-in-out; } .task-list label:hover { color: #747474; } .custom-checkbox { display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.5em; cursor: pointer; border: 2px solid currentColor; border-radius: 50%; transform: scale(1); transition: transform 200ms ease-in-out; } .check-mark { position: absolute; bottom: 5px; left: 2px; opacity: 0; transition: opacity 150ms ease-in-out; z-index: 1; } .test-css__autocomplete { color: blue; }

const newTask = document.querySelector('#new-task-input'); const addTaskbtn = document.querySelector('.add-task-btn'); const removeBtn = document.querySelector('.remove-complete-btn'); const taskList = document.querySelector('.task-list'); const taskTemplate = document.querySelector('#task-template'); let id = 1; newTask.addEventListener("keyup", (e) => { if(e.keyCode === 13 && inputValid()){ addTask(); } //console.log(e.keyCode); }); addTaskbtn.addEventListener("click", (e) => { if (inputValid()) { addTask(); } }); removeBtn.addEventListener("click", () => { const tasks = document.querySelectorAll('.task'); tasks.forEach(task => { const checked = task.querySelector('input').checked; if( checked ) { task.remove(); } }); //console.log(tasks); }); function addTask() { const taskElement = document.importNode(taskTemplate.content, true); const label = taskElement.querySelector('label'); const checkbox = taskElement.querySelector('input'); taskList.appendChild(taskElement); label.append(newTask.value); label.htmlFor = id; checkbox.id = id; newTask.value = ""; id++; } function inputValid() { return newTask.value !== ""; }