<!DOCTYPE html>
<head>
<title> My reading list</title>
<link href="booklist.css" rel="stylesheet">
<script src="booklist.js" defer></script>
</head>
<body>
<div id="container">
<header>
<div id="page-banner">
<h1 class="title">My Favourite Book list</h1>
<p>my reading list</p>
<form id="searchForm">
<input type="text" id="seachText" placeholder="search books here">
</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="hideBox">
<label for="hide">Hide all books </label>
<input type="text" placeholder="add book here" id="addbox">
<button>AddBooks</button>
</form>
</div>
</body>
</html>
|
body{
font-family:Tahoma;
letter-spacing: 1px;
color: #444;
}
h1, h2{
font-weight: normal;
}
#container{
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: 20px;
border: 1px solid lightgray;
overflow: hidden;
}
#page-banner{
background: #eee ;
padding: 10px;
}
#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;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
color: #444;
display: block;
}
#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 0px 0px;
}
#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 #hide{
width: 5px;
margin: 0px;
}
#add-book #addbox{
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;
}
#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 label{
line-height: 10px;
}
|
// adding events to the del buttons
var list = document.querySelector('#book-list ul');
console.log(list);
list.addEventListener('click',function(e){
if(e.target.className == "delete"){
var li = e.target.parentElement;
li.parentElement.removeChild(li);
}
});
// accessing form and its elements
var formAdd = document.forms["add-book"];
formAdd.addEventListener('submit', function(e){
e.preventDefault();
var inputValue = formAdd.querySelector('input[type="text"]').value;
// creating elements
var li = document.createElement('li');
var bookName = document.createElement('span');
var dtlBtn = document.createElement('span');
// creating text content
dtlBtn.textContent = "Delete";
bookName.textContent = inputValue;
// adding class names
dtlBtn.classList.add("delete");
bookName.classList.add("name");
// combining the elements and content
li.appendChild(bookName);
li.appendChild(dtlBtn);
list.appendChild(li);
});
// adding even to the check box
var list = document.querySelector('#book-list ul');
var hideBox = document.querySelector("#hideBox");
hideBox.addEventListener('change',function(){
if(hideBox.checked){
list.style.display = "none";
}else{
list.style.display = "inline";
}
});
// search or filter
var list = document.querySelector('#book-list ul');
var searchBar = document.forms["searchForm"].querySelector('input');
searchBar.addEventListener('keyup',function(e){
var term = e.target.value.toLowerCase();
var book = list.getElementsByTagName('li');
Array.from(book).forEach(function(x){
var title = x.firstElementChild.textContent;
if(title.toLowerCase().indexOf(term) != -1){
x.style.display = "inline"
}else{
x.style.display = "none";
}
});
});
|
