E-library is very useful to schools and learning centres especially if you are currently working on an e-learning programme you are in the right place.
No every company has been able to go digital but most of them are trying to make sure they have their contents online so as to create easy access and improve the security of their content but you and I know that web is not the safest place to put content so if you are going to use this tutorial code in your project make sure you work on the security of the application, you can always use the source code in your own designs just remember to give some regard to Coding Savvy.
First of all let me acknowledge that this library is not going to be using a database but you can always fine tune it to suit whatever you want , this tutorial is just to give you a good understanding of how you can take advantage of new HTML 5 API for local Storage in your own projects.
We are going to be using the local Storage API to store the books on your browser so that we will not lose any contents when we refresh the browser and also we can easily delete contents from the storage with just a click, If you are interested in how the local storage works try and take a look at some functions used in our demo codes to get a grip of it or you can just drop your question in the comments box. Let start by creating a simple HTML file to accept user input and save it in our library, In this tutorial we are going to put all our programming codes in one single file and it will all work together to achieve what we want it to do, It just a short code anyway so it should be hard to read and I also put some comments in the codes for our beginners to understand what is going on line by line.
HTML
<html><!–Tells the browser this is the start of HTML.–>
<head><!–Starts the page “head†.–>
<title>School Library</title><!–Gives the page a title.–>
<style>
body /*refering to the body section of the HTML page*/
{
color:#000;/*colour of the pages*/
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;/*give the text style*/
font-size:14px;/*the size of the texts*/
}
/*selection the elements using their ID and class*/
#mainBody, .addedbooks
{
margin-left:400px;
margin-top:30px;
width:700px;
}
/*selecting elements using their tags*/
h1,h1,h3,h4{
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
color:#F33;
}
h1{
color:#F00;
background-color:#000;
border:solid 5px #009900;
font-size:30px;
padding:8px;/*internal order*/
width:400px;
-moz-border-radius:6px;/*the radius of the border*/
-webkit-border-radius:6px;
}
#header .header
{
background-image:url(write.png);/*adding image to the background of */
padding:5px;
font-size:24px;
background-repeat:no-repeat;
}
#header ul li{
list-style-type:none;/*setting diplay style to none to remove the black dot*/
}
input[type="text"], input[type="password"],input[type="button"]
{
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900; /*setting the border properties*/
width:180px;
}
input[type="button"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
}
.addedbooks ul li{
padding:4px;
list-style:none;
list-style-type:none;
list-style-image:url(secret-book-icon.png);
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size:20px;
border:solid 1px #CCCCCC;
border-radius: 10px 10px 10px 10px;
}
</style>
</head><!–End of the head.–>
<body>
<img style="float:left;" src="training.png" height="200" width="200" >
<div id="mainBody">
<h1 class="header">Welcome to the Library</h1>
<h2><i>Come in anytime for quality books!</i></h2>
<h3>Super Fast Internet connection </h3>
</div>
<div class="addedbooks">
<strong>Add to Library Books</strong>
<input type="text" id="addBook" placeholder="type the name of the book">
<input id="actionBtn" type="button" value="Add"><div><strong id="counter"></strong></div>
<ul id="books" >
</ul>
</div>
</body><!–End of the body.–>
</html><!–Tells the browser this is the end of the HTML.–>
<head><!–Starts the page “head†.–>
<title>School Library</title><!–Gives the page a title.–>
<style>
body /*refering to the body section of the HTML page*/
{
color:#000;/*colour of the pages*/
font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;/*give the text style*/
font-size:14px;/*the size of the texts*/
}
/*selection the elements using their ID and class*/
#mainBody, .addedbooks
{
margin-left:400px;
margin-top:30px;
width:700px;
}
/*selecting elements using their tags*/
h1,h1,h3,h4{
font-family:Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
color:#F33;
}
h1{
color:#F00;
background-color:#000;
border:solid 5px #009900;
font-size:30px;
padding:8px;/*internal order*/
width:400px;
-moz-border-radius:6px;/*the radius of the border*/
-webkit-border-radius:6px;
}
#header .header
{
background-image:url(write.png);/*adding image to the background of */
padding:5px;
font-size:24px;
background-repeat:no-repeat;
}
#header ul li{
list-style-type:none;/*setting diplay style to none to remove the black dot*/
}
input[type="text"], input[type="password"],input[type="button"]
{
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900; /*setting the border properties*/
width:180px;
}
input[type="button"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
}
.addedbooks ul li{
padding:4px;
list-style:none;
list-style-type:none;
list-style-image:url(secret-book-icon.png);
font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", sans-serif;
font-size:20px;
border:solid 1px #CCCCCC;
border-radius: 10px 10px 10px 10px;
}
</style>
</head><!–End of the head.–>
<body>
<img style="float:left;" src="training.png" height="200" width="200" >
<div id="mainBody">
<h1 class="header">Welcome to the Library</h1>
<h2><i>Come in anytime for quality books!</i></h2>
<h3>Super Fast Internet connection </h3>
</div>
<div class="addedbooks">
<strong>Add to Library Books</strong>
<input type="text" id="addBook" placeholder="type the name of the book">
<input id="actionBtn" type="button" value="Add"><div><strong id="counter"></strong></div>
<ul id="books" >
</ul>
</div>
</body><!–End of the body.–>
</html><!–Tells the browser this is the end of the HTML.–>
JavaScript
Now let write some JavaScript functions to take our input and store it in the browser storage so that our e-library can have something in the memory.
<script>
window.onload = function () {
var count = 0;/*initialize the book count to zero*/
//load saved books
loadBooks();
var counter = document.getElementById("counter");/*get the counter element by it id*/
counting ();/*call the counting function*/
var subheading= document.getElementById("books");/*get books*/
//<!–refer to an element using it Id–>
var actionBtn = document.getElementById("actionBtn");
// <!–add an Event listener to the element–>
actionBtn.onclick = function ()//<!–do some action immediatly the event takes place–>
{
var book = document.getElementById("addBook").value;/*save the value inout into the add book field*/
/*"!"stands for NOT*/
appendBook(book);
//save the book into local storage
saveBook(book);
}//end add books
function deleteBook ()
{
this.parentNode.remove();
count -= 1;
counting ();
}
function counting ()
{
var counter = document.getElementById("counter");
counter.innerHTML = "Book Count " + count;
}
//save the book name
function saveBook(book) {
var bookArray = getStoreArray("books");
bookArray.push(book);
localStorage.setItem("books", JSON.stringify(bookArray));
}
//load the books
function loadBooks() {
var bookArray = getSavedBooks();
var ul = document.getElementById("books");
if (bookArray != null) {
for (var i = 0; i < bookArray.length; i++) {
appendBook(bookArray[i])
}
}
}
//get saved books
function getSavedBooks() {
return getStoreArray("books");
}
//get the saved book from the local storage
function getStoreArray(name) {
var bookArray = localStorage.getItem(name);
if (bookArray == null || bookArray == "") {
bookArray = new Array();
}
else {
bookArray = JSON.parse(bookArray);
}
return bookArray;
}
//append book
function appendBook(book)
{
var subheading= document.getElementById("books");
if (book != "" && book.length > 3 && subheading.childNodes.length <= 4)/*if it not empty*/
{
var li = document.createElement("li");//create a new list element
li.innerHTML = book;/*save the value inpute into */
subheading.appendChild(li);
var delBtn = document.createElement("input");
delBtn.setAttribute("id","deleteBtn");
delBtn.setAttribute("type","button");//
delBtn.setAttribute("value","Delete");
li.appendChild(delBtn);
delBtn.onclick = deleteBook;
document.getElementById("addBook").value = "";
count += 1
counting ();
}
else
{
alert("Please Enter the Book Name correctly");
}
}
}
</script>
All done, you can view the DEMO HERE or Download the source codes HERE.window.onload = function () {
var count = 0;/*initialize the book count to zero*/
//load saved books
loadBooks();
var counter = document.getElementById("counter");/*get the counter element by it id*/
counting ();/*call the counting function*/
var subheading= document.getElementById("books");/*get books*/
//<!–refer to an element using it Id–>
var actionBtn = document.getElementById("actionBtn");
// <!–add an Event listener to the element–>
actionBtn.onclick = function ()//<!–do some action immediatly the event takes place–>
{
var book = document.getElementById("addBook").value;/*save the value inout into the add book field*/
/*"!"stands for NOT*/
appendBook(book);
//save the book into local storage
saveBook(book);
}//end add books
function deleteBook ()
{
this.parentNode.remove();
count -= 1;
counting ();
}
function counting ()
{
var counter = document.getElementById("counter");
counter.innerHTML = "Book Count " + count;
}
//save the book name
function saveBook(book) {
var bookArray = getStoreArray("books");
bookArray.push(book);
localStorage.setItem("books", JSON.stringify(bookArray));
}
//load the books
function loadBooks() {
var bookArray = getSavedBooks();
var ul = document.getElementById("books");
if (bookArray != null) {
for (var i = 0; i < bookArray.length; i++) {
appendBook(bookArray[i])
}
}
}
//get saved books
function getSavedBooks() {
return getStoreArray("books");
}
//get the saved book from the local storage
function getStoreArray(name) {
var bookArray = localStorage.getItem(name);
if (bookArray == null || bookArray == "") {
bookArray = new Array();
}
else {
bookArray = JSON.parse(bookArray);
}
return bookArray;
}
//append book
function appendBook(book)
{
var subheading= document.getElementById("books");
if (book != "" && book.length > 3 && subheading.childNodes.length <= 4)/*if it not empty*/
{
var li = document.createElement("li");//create a new list element
li.innerHTML = book;/*save the value inpute into */
subheading.appendChild(li);
var delBtn = document.createElement("input");
delBtn.setAttribute("id","deleteBtn");
delBtn.setAttribute("type","button");//
delBtn.setAttribute("value","Delete");
li.appendChild(delBtn);
delBtn.onclick = deleteBook;
document.getElementById("addBook").value = "";
count += 1
counting ();
}
else
{
alert("Please Enter the Book Name correctly");
}
}
}
</script>
Questions and Contributions are allowed, you can drop it in the comment box.
This comment has been removed by the author.
ReplyDelete