diff --git a/app.js b/app.js new file mode 100644 index 0000000..d9f0cf3 --- /dev/null +++ b/app.js @@ -0,0 +1,76 @@ +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"; + } +}); + +// filter books +const searchBar = forms['search-books'].querySelector('input'); +searchBar.addEventListener('keyup', (e) => { + const term = e.target.value.toLowerCase(); + const books = list.getElementsByTagName('li'); + Array.from(books).forEach((book) => { + const title = book.firstElementChild.textContent; + if(title.toLowerCase().indexOf(e.target.value) != -1){ + book.style.display = 'block'; + } else { + book.style.display = 'none'; + } + }); +}); + +// tabbed content +const tabs = document.querySelector('.tabs'); +const panels = document.querySelectorAll('.panel'); +tabs.addEventListener('click', (e) => { + if(e.target.tagName == 'LI'){ + const targetPanel = document.querySelector(e.target.dataset.target); + Array.from(panels).forEach((panel) => { + if(panel == targetPanel){ + panel.classList.add('active'); + }else{ + panel.classList.remove('active'); + } + }); + } +}); diff --git a/index.html b/index.html new file mode 100644 index 0000000..0dc2cd7 --- /dev/null +++ b/index.html @@ -0,0 +1,63 @@ + + + + + + JavaScript DOM Tutorials + + +
+
+
+

Bookorama

+

Books for Ninjas

+
+ +
+
+
+
+

Books to Read

+ +
+
+ + + + +
+
+ +
+

Content for about tab...

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.

+
+
+

Content for contact tab...

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.

+
+
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7435b62 --- /dev/null +++ b/styles.css @@ -0,0 +1,145 @@ +body{ + font-family: Tahoma; + color: #444; + letter-spacing: 1px; +} + +h1, h2{ + font-weight: normal; +} + +#wrapper{ + width: 90%; + max-width: 960px; + margin: 20px auto; + border-radius: 6px; + box-shadow: 0px 1px 6px rgba(0,0,0,0.2); + box-sizing: border-box; + padding: 0 0 20px; + overflow: hidden; + border: 1px solid lightgray; +} + +#page-banner{ + background: #eee ; + padding: 10px 0; + +} + +#page-banner h1, #page-banner p{ + width: 100%; + text-align: center; + margin: 10px 0; +} + +#page-banner input{ + width: 90%; + max-width: 300px; + margin: 20px auto; + display: block; + padding: 8px; + border: 1px solid #ddd; + border-radius: 4px; + font-size: 16px; + color: #444; +} + +#book-list, #add-book, #tabbed-content{ + margin: 30px; +} + +#book-list ul, #tabbed-content ul{ + list-style-type: none; + padding: 0; +} + +#book-list li{ + padding: 20px; + border-left: 5px solid #ddd; + margin: 20px 10px; +} + +#book-list li:hover{ + border-color: #9361bf; +} + +.delete{ + float: right; + background: #9361bf; + padding: 6px; + border-radius: 4px; + cursor: pointer; + color: white; +} + +.delete:hover{ + background: #333; +} + +#add-book{ + width: 400px; + margin: 0 auto; +} + +#add-book input{ + display: block; + margin: 20px 0; + padding: 10px; + border: 1px solid #ccc; + font-size: 16px; + border-radius: 4px 0 0 4px; + box-sizing: border-box; + width: 300px; + float: left; + clear: both; +} + +#add-book button{ + border: 1px solid #9361bf; + background: #9361bf; + padding: 10px 20px; + font-size: 16px; + display: inline-block; + margin: 0; + border-radius: 0 4px 4px 0; + cursor: pointer; + width: 100px; + float: left; + margin: 20px 0; + border-left: 0; + color: white; +} + +#add-book:after{ + content: ''; + display: block; + clear: both; +} + +#add-book #hide{ + width: 30px; +} + +#add-book label{ + line-height: 52px; +} + +#tabbed-content li{ + display: inline-block; + padding: 10px 14px; + background: #ddd; + border-radius: 4px; + cursor: pointer; + margin-right: 10px; +} + +#tabbed-content .panel{ + display: none; + border: 1px solid #ddd; + padding: 0 10px; + border-radius: 4px; +} + +#tabbed-content .panel.active{ + display: block; +}