JavaScript-DOM-Tutorial/app.js at lesson-15 · racalhoun/JavaScript-DOM-Tutorial · GitHub

Repository navigation

History

45 lines (38 loc) · 1.1 KB

Raw

const list = document.querySelector('#book-list ul');

const forms = document.forms;

// delete books

list.addEventListener('click', (e) => {

if(e.target.className == 'delete'){

const li = e.target.parentElement;

li.parentNode.removeChild(li);

}

});

// add books

const addForm = forms['add-book'];

addForm.addEventListener('submit', function(e){

e.preventDefault();

// create elements

const value = addForm.querySelector('input[type="text"]').value;

const li = document.createElement('li');

const bookName = document.createElement('span');

const deleteBtn = document.createElement('span');

// add text content

bookName.textContent = value;

deleteBtn.textContent = 'delete';

// add classes

bookName.classList.add('name');

deleteBtn.classList.add('delete');

// append to DOM

li.appendChild(bookName);

li.appendChild(deleteBtn);

list.appendChild(li);

});

// hide books

const hideBox = document.querySelector('#hide');

hideBox.addEventListener('change', function(e){

if(hideBox.checked){

list.style.display = "none";

} else {

list.style.display = "initial";

}

});

JavaScript-DOM-Tutorial/app.js at lesson-15 · racalhoun/JavaScript-DOM-Tutorial · GitHub

Repository navigation

Expand file tree

Breadcrumbs

app.js

Latest commit

History

Breadcrumbs

app.js

File metadata and controls