Created
July 25, 2019 13:47
-
-
Save lusan/107dc5782d458bbced315642fe2ad4e2 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://codepen.io/bradtraversy/pen/Bwapow | |
var form = document.getElementById('addForm'); | |
var itemList = document.getElementById('items'); | |
var filter = document.getElementById('filter'); | |
// Form submit event | |
form.addEventListener('submit', addItem); | |
// Delete event | |
itemList.addEventListener('click', removeItem); | |
// Filter event | |
filter.addEventListener('keyup', filterItems); | |
// Add item | |
function addItem(e){ | |
e.preventDefault(); | |
// Get input value | |
var newItem = document.getElementById('item').value; | |
// Create new li element | |
var li = document.createElement('li'); | |
// Add class | |
li.className = 'list-group-item'; | |
// Add text node with input value | |
li.appendChild(document.createTextNode(newItem)); | |
// Create del button element | |
var deleteBtn = document.createElement('button'); | |
// Add classes to del button | |
deleteBtn.className = 'btn btn-danger btn-sm float-right delete'; | |
// Append text node | |
deleteBtn.appendChild(document.createTextNode('X')); | |
// Append button to li | |
li.appendChild(deleteBtn); | |
// Append li to list | |
itemList.appendChild(li); | |
} | |
// Remove item | |
function removeItem(e){ | |
if(e.target.classList.contains('delete')){ | |
if(confirm('Are You Sure?')){ | |
var li = e.target.parentElement; | |
itemList.removeChild(li); | |
} | |
} | |
} | |
// Filter Items | |
function filterItems(e){ | |
// convert text to lowercase | |
var text = e.target.value.toLowerCase(); | |
// Get lis | |
var items = itemList.getElementsByTagName('li'); | |
// Convert to an array | |
Array.from(items).forEach(function(item){ | |
var itemName = item.firstChild.textContent; | |
if(itemName.toLowerCase().indexOf(text) != -1){ | |
item.style.display = 'block'; | |
} else { | |
item.style.display = 'none'; | |
} | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment