Knowledge Walls
Praveen Kumar R
Booklistapp in Basics of JS learning
34 Views
HTML for book app
	
		<!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>
css for booklist app
	
		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;
	
		}
js for book app
	
		// 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";
	
		}
	
		});
	
		});
	
	
	
	 
Previous Topics
Previous lessons of current book.
Best Lessons of "JS learning"
Top lessons which are viewed more times.
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details