SHARE
TWEET

Untitled

a guest Jul 17th, 2019 65 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const todos = [{
  2.     text: 'Wash the car',
  3.     completed: false
  4. },{
  5.     text: 'Make dinner',
  6.     completed: false
  7. },{
  8.     text: 'Walk the dog',
  9.     completed: true
  10. },{
  11.     text: 're-pot plants',
  12.     completed: true
  13. },{
  14.     text: 'Learn to code',
  15.     completed: false
  16. }]
  17.  
  18. const filters = {
  19.     searchText: ''
  20. }
  21.  
  22. const hideCompleted = false
  23.  
  24. const renderTodos = function(todos, filters){
  25.     let fileteredTodos = todos.filter(function(todo){
  26.         return todo.text.toLowerCase().includes(filters.searchText.toLowerCase())
  27.     })
  28.  
  29. fileteredTodos = fileteredTodos.filter(function(todo){
  30.     if(filters.hideCompleted){
  31.         return !todo.completed
  32.     }else{
  33.         return true
  34.     }
  35. })
  36.  
  37.     const todosLeft = fileteredTodos.filter(function(todo){
  38.         return !todo.completed  
  39.     })
  40.    
  41.     document.querySelector('#todos').innerHTML = ''
  42.  
  43.     const summery = document.createElement('p')
  44.     summery.textContent = `You have ${todosLeft.length} todos`
  45.     document.querySelector('#todos').appendChild(summery)
  46.    
  47.     fileteredTodos.forEach(function(todo){
  48.         const todoList = document.createElement('p')
  49.         todoList.textContent = todo.text
  50.         document.querySelector('#todos').appendChild(todoList)
  51.     })
  52. }
  53.  
  54. renderTodos(todos, filters)
  55.  
  56. document.querySelector('#search-text').addEventListener('input', function(e){
  57.     filters.searchText = e.target.value
  58.     renderTodos(todos, filters)
  59. })
  60.  
  61. document.querySelector('#new-todo').addEventListener('submit', function(e){
  62.     e.preventDefault()
  63.     todos.push({
  64.         text: e.target.elements.text.value,
  65.         completed: false
  66.     })
  67.     renderTodos(todos, filters)
  68.     e.target.elements.text.value = ''
  69. })
  70.  
  71. document.querySelector('#hide-completed').addEventListener('change', function(e){
  72.        filters.hideCompleted = e.target.checked
  73.        renderTodos(todos, filters)
  74. })
  75.  
  76. //Create checkbox and setup event listening - Hide completed
  77. //Create new hideCompleted filter (default false)
  78. //Update hideCompleted and render list on checkbox change
  79. //Setup rederTodos to remove completed items
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top