Skip to content

Instantly share code, notes, and snippets.

@keidarcy

keidarcy/app.js

Last active June 21, 2020 06:59
Show Gist options
  • Save keidarcy/53b6746b92a73bb8ff18eef14326e645 to your computer and use it in GitHub Desktop.
Save keidarcy/53b6746b92a73bb8ff18eef14326e645 to your computer and use it in GitHub Desktop.
Download ZIP
dom manipulate
Raw
app.js
document.addEventListener('DOMContentLoaded', function(){
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');
}
});
}
});
})
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet" />
<script src="app.js"></script>
<title>JavaScript DOM Tutorials</title>
</head>
<body>
<div id="wrapper">
<header>
<div id="page-banner">
<h1 class="title">Bookorama</h1>
<p>Books for Ninjas</p>
<form id="search-books">
<input type="text" placeholder="Search books..." />
</form>
</div>
</header>
<div id="book-list">
<h2 class="title">Books to Read</h2>
<ul>
<li>
<span class="name">Name of the Wind</span>
<span class="delete">delete</span>
</li>
<li>
<span class="name">The Wise Man's Fear</span>
<span class="delete">delete</span>
</li>
<li>
<span class="name">Kafka on the Shore</span>
<span class="delete">delete</span>
</li>
<li>
<span class="name">The Master and the Margarita</span>
<span class="delete">delete</span>
</li>
</ul>
</div>
<form id="add-book">
<input type="checkbox" id="hide" />
<label for="hide">Hide all books</label>
<input type="text" placeholder="Add a book..." />
<button>Add</button>
</form>
<div id="tabbed-content">
<ul class="tabs">
<li data-target="#about" class="active">About</li>
<li data-target="#contact">Contact</li>
</ul>
<div class="panel active" id="about">
<p>Content for about tab...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
</div>
<div class="panel" id="contact">
<p>Content for contact tab...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nunc porta urna ornare rhoncus. Ut convallis ante at.</p>
</div>
</div>
</div>
</body>
</html>
Raw
styles.css
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment