- Information Response – starts with 100
- Successful Response – starts with 200 (200 success ok)
- Redirection Messages – starts with 300
- Client Error Response – starts with 400 (404 Not found is important)
- Server Error Response – starts with 500
Tag: HTML
Address Book – Javascript
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AddressBook</title>
<link rel="stylesheet" href="addressbook.css">
<script src="addressbook.js"></script>
</head>
<body>
<div class="container">
<div class="addForm panel">
<h1>Address Book</h1>
<label for="fullname" class="labelForm">Name</label>
<input type="text" id="fullname" class="formFields" placeholder="Enter your name">
<label for="phone" class="labelForm">Phone Number</label>
<input type="text" id="phone" class="formFields" placeholder="Phone">
<label for="email" class="labelForm">Email</label>
<input type="text" id="email" class="formFields" placeholder="Email Here">
<br>
<br>
<button id="add" class="button-blue">Add Contact</button>
</div>
<div class="contactList">
<h1>Contact List</h1>
<div class="addbook">
<div class="entry">
<div class="name"><p></p></div>
<div class="email"><p></p></div>
<div class="phone"><p></p></div>
<div class="del"><a href="#">Delete</a></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
.panel {
background: #8dcb66;
padding: 1em;
width: 92.5%;
margin: auto;
max-width: 30em;
color: white;
}
input {
width: 100%;
box-sizing: border-box;
font-size: 1em;
margin: 0.5em;
padding: 0.5em;
}
label {
width: 100%;
font-size: 1em;
padding: 10px;
}
button {
text-align: center;
border-radius: 3px;
cursor: pointer;
display: inline-block;
font-family: Verdana, sans-serif;
font-size: 12px;
font-weight: 400;
line-height: 20px;
padding: 9px 16px 9px;
margin: 16px 0 0 16px;
transition: all 20ms ease-out;
vertical-align: top;
}
.addbook {
margin: 20px;
}
.contactList {
background: #7f74ba;
color: white;
margin: 2px;
padding: 5px;
text-align: center;
}
.entry {
border-radius: 3px;
height: 40px;
border-bottom: 1px solid;
border-top: 1px solid;
color: white;
padding: 10px;
}
.entry .name {
width: 300px;
float: left;
padding: 11px;
}
.entry .email {
width: 300px;
float: left;
padding: 11px;
}
.entry .phone {
width: 300px;
float: left;
padding: 11px;
padding-right: 30px;
}
.entry .del {
width: 40px;
float: right;
padding: 9px;
margin-right: 30px;
}
.entry p {
margin: 0px;
font-family: Verdana, sans-serif;
font-size: 12px;
}
.entry .del a {
border-radius: 10px;
cursor: pointer;
font-family: Verdana, sans-serif;
color: #FFF;
font-size: 12px;
padding: 8px;
background: rgb(255, 100, 100);
text-decoration: none;
}
.button-blue {
background-color: #42b0e3;
background-image: linear-gradient(to bottom, #42b0e3, #2ba9e3);
border: 1px solid #107db0;
box-shadow: inset 0 1px 0 #7cd4fc, inset 0 -1px 0 #2696c9, inset 0 0 0 1px #59b7e3, 0 2px 4px rgba(0, 0, 0, 0.2);
color: white;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.h2 {
font-family: Verdana, sans-serif;
color: white;
}
JavaScript
window.onload = function () {
//buttons
var addBtn = document.getElementById("add");
var addFormDiv = document.querySelector(".addForm");
//form fields:
var fullname = document.getElementById("fullname");
var phone = document.getElementById("phone");
var email = document.getElementById("email");
//address book display
var addBookdiv = document.querySelector(".addbook");
//Intialize storage array
var dataArray = [];
//eventListeners
addBtn.addEventListener("click", addToBook);
addBookdiv.addEventListener("click", removeContact);
function structure(fullname, phone, email) {
this.fullname = fullname;
this.phone = phone;
this.email = email;
}
function addToBook() {
//test if fields are empty
var testIfempty = fullname.value != '' && phone.value != '' && email.value != '';
//console.log(testIfempty);
if (testIfempty) {
//add contents to array and add contents to localstorage
var obj = new structure(fullname.value, phone.value, email.value);
dataArray.push(obj);
localStorage['contactInfo'] = JSON.stringify(dataArray);
//clear form
clearForm();
//update display from the form data collected
displayContactInfo();
}
}
function clearForm() {
var filledForm = document.querySelectorAll(".formFields");
for (var i in filledForm) {
filledForm[i].value = "";
}
}
function removeContact(e) {
if (e.target.classList.contains("removeButton")) {
var rmId = e.target.getAttribute("data-id");
dataArray.splice(rmId, 1);
//update localstorage
localStorage['contactInfo'] = JSON.stringify(dataArray);
displayContactInfo();
}
}
function displayContactInfo() {
//look for localstorage key if not present create it
//if exists load content from LS and loop it on page for div to populate
if (localStorage['contactInfo'] === undefined) {
localStorage['contactInfo'] = "[]" //string
} else {
dataArray = JSON.parse(localStorage['contactInfo']);
addBookdiv.innerHTML = '';
for (var i in dataArray) {
var str = '<div class="entry">';
str += '<div class="name"><p>' + dataArray[i].fullname + '</p></div>';
str += '<div class="email"><p>' + dataArray[i].email + '</p></div>';
str += '<div class="phone"><p>' + dataArray[i].phone + '</p ></div>';
str += '<div class="del"><a href="#" class="removeButton" data-id="' + i + '" >Delete</a></div>';
str += '</div >';
addBookdiv.innerHTML += str;
}
}
}
displayContactInfo();
}
Notes:
The
read-only localStorage
property allows you to accessa Storage
object for theDocument
‘s origin; the stored data is saved across browser sessions.localStorage
is similarto sessionStorage
, except that while data storedin localStorage
has no expiration time, data storedin sessionStorage
gets cleared when the page session ends — thatis, when the page is closed.**The keys and the values are always strings (note that, as with objects, integer keys will be automatically converted to strings).**
Reference : Click Here