diff --git a/app.js b/app.js new file mode 100644 index 0000000..e51b333 --- /dev/null +++ b/app.js @@ -0,0 +1,54 @@ +const addForm = document.querySelector('.add'); +const list = document.querySelector('.todos'); +const deleteIcon = document.querySelector('.delete'); +const search = document.querySelector('.search input'); + +const createTemplate = todo =>{ + const html = ` +
  • + ${todo} + +
    • + `; + + list.innerHTML += html; + + +} + +//add todo +addForm.addEventListener('submit', e =>{ + e.preventDefault(); + + const todo = addForm.add.value.trim(); + + if(todo.length){ + createTemplate(todo); + addForm.reset(); + } +}); + +//delete todo + +list.addEventListener('click', e =>{ + if(e.target.classList.contains('delete')){ + e.target.parentElement.remove(); + } +}); + +const filteredTodos = (term) =>{ + Array.from(list.children) + .filter(todo => !todo.textContent.toLowerCase().includes(term)) + .forEach(todo => todo.classList.add('filtered')); + + Array.from(list.children) + .filter(todo => todo.textContent.toLowerCase().includes(term)) + .forEach(todo => todo.classList.remove('filtered')); +}; + +//keyup +search.addEventListener('keyup', () =>{ + const term = search.value.trim().toLowerCase(); + + filteredTodos(term); +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..d14ad49 --- /dev/null +++ b/index.html @@ -0,0 +1,49 @@ + + + + + + + + + + + Todo List + + + +
    + +
    +

    Todo List

    +
    + +
    +
    + + + +
    + + +
    + +
    + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..3082931 --- /dev/null +++ b/style.css @@ -0,0 +1,24 @@ +body{ + background: #352f5b; +} +.container{ + max-width: 500px; +} +input[type=text], +input[type=text]:focus{ + outline: none; + color: #fff; + border: none; + background: rgba(0,0,0,0.2); + max-width: 400px; +} +.todos li{ + background: #423a6f; +} +.delete{ + cursor: pointer; +} + +.filtered{ + display: none !important; +} \ No newline at end of file