Address Book Project in JavaScript with Source Code

Address Book Project in JavaScript with Source Code

The Address Book Project in JavaScript is a system project created using HTML, CSS, and JavaScript. JavaScript is a scripting language that enables you to create dynamically updating content, control multimedia, animate images, and pretty much everything else, can update and change both HTML and CSS.

This simple mini project for Address Book Project is complete and totally error free and  also includes a downloadable Source Code for free, just find the downloadable source code below and click to start downloading. Before you start to click the download now first you must click the Run Quick Scan for secure Download.

Talking about the highlights of this Address Book Project framework, the page contains a title, the user can create new contact, view the record and the user also can delete the record. This system will offer assistance to the clients to keep track of companions and family by overseeing in your contact list.

I have here a suggested list of Best JavaScript Projects with Source Code Free to download and I’m sure this can help you to improve your skills in JavaScript programming and web development as a whole.

Anyway if you want level up your knowledge in programming especially C/C++ Programming Language, try this new article I’ve made for you Best C Projects with Source Code for Beginners Free Download 2020.

To start creating a Address Book Project in JavaScript with Source Code, make sure that you have any platform in creating a JavaScript, bootstrap, and HTML installed in your computer, in my case I will use Sublime Text.

Steps on how to create a Address Book Project in JavaScript with Source Code

This code is for the index.html

In the code given below, which is the code contains the interface of the application. This code will show the form that will be use in html.

Address Book



Contacts




</tbody> </table> </section> <section id="new-contact"> <h2>Create a New Contact</h2> <form class="form-group"> <div> <label for="name">Full Name:</label> <input id="fullname" type="text" maxlength="15" required class="form-control"> </div> <div> <label for="add">Address:</label> <input id="address" type="text" maxlength="30" required class="form-control"> </div> <div> <label for="phone">Phone No:</label> <input id="phonenumber" type="number" maxlength="15" required class="form-control"> </div> <div> <label for="email">Email:</label> <input id="emailaddress" type="email" maxlength="30" required class="form-control"> </div> <div> <label for="url">Website:</label> <input id="url" type="url" maxlength="20" class="form-control"> </div> <div> <button class="btn btn-success">Create contacts</button> </div> </form> </section> </main> <footer> <p>Developed by ITSOURCECODE.COM</p> </footer>

Name
Address
Phone Number
Email Address
Website
Action

This code is for the css

In the code given below, which is for the function for css design for background, title, header, footer and for the table.

html,body{ font-family: sans-serif; } body{ margin: 0px auto; max-width: 1000px; } h1{ margin: 0; } th{ color: white; border: 1px solid rgb(190,190,190); padding: 10px 60px; } td{ border: 1px solid rgb(190,190,190); padding: 0px 5px; } thead{ background-color: #000099; line-height: 20px; } footer,header{ background-color: #000099; padding: 0 20px; color: white; line-height: 100px; } footer{ line-height: 60px; } footer p{ text-align: center; font-size: 18px; } #new-contact, #contact-display { padding: 20px; } #new-contact { background: #ffcc66; } div { margin-bottom: 10px; } ul { list-style-type: none; } label { display: inline-block; width: 90px; text-align: right; }

This code is for the script

In the code given below, which is for the code for creating a script function for address book system.

const form = document.querySelector('form'); const trHead = document.querySelector('#head'); const conData = document.querySelector('#data'); const fullnameInput = document.querySelector('#fullname'); const addressInput = document.querySelector('#address'); const phoneInput = document.querySelector('#phonenumber'); const emailInput = document.querySelector('#emailaddress'); const urlInput = document.querySelector('#url'); const button = document.querySelector('button'); let db window.onload = () => { let request = window.indexedDB.open('contacts', 1) request.onerror = () => { console.log('Database failed to open') } request.onsuccess = () => { console.log('Database opened successfully') db = request.result; displayData(); } request.onupgradeneeded = (e) => { let db = e.target.result; let objectStore = db.createObjectStore('contacts', { keyPath: 'id', autoIncrement:true }); objectStore.createIndex('fullname', 'fullname', { unique: false }); objectStore.createIndex('address', 'address', { unique: false }); objectStore.createIndex('phonenumber', 'phonenumber', { unique: false }); objectStore.createIndex('emailaddress', 'emailaddress', { unique: false }); objectStore.createIndex('url', 'url', { unique: false }); console.log('Database setup complete'); }; form.onsubmit = (e) => { e.preventDefault() let newItem = { fullname: fullnameInput.value, address: addressInput.value, phonenumber: phoneInput.value, emailaddress: emailInput.value, url: urlInput.value }; let transaction = db.transaction(['contacts'], 'readwrite'); let objectStore = transaction.objectStore('contacts'); var request = objectStore.add(newItem) request.onsuccess = () => { fullnameInput.value = ''; addressInput.value = ''; phoneInput.value = ''; emailInput.value = ''; urlInput.value = ''; }; transaction.oncomplete = () => { console.log('Transaction completed: database modification finished.'); displayData(); }; transaction.onerror = () => { console.log('Transaction not opened due to error'); }; } function displayData() { while (conData.firstChild) { conData.removeChild(conData.firstChild); } let objectStore = db.transaction('contacts').objectStore('contacts'); objectStore.openCursor().onsuccess = (e) => { let cursor = e.target.result; if(cursor) { let tr = document.createElement('tr'); let tdFullName = document.createElement('td'); let tdAddress = document.createElement('td'); let tdPhoneNumber = document.createElement('td'); let tdEmailAddress = document.createElement('td'); let tdUrl = document.createElement('td'); tr.appendChild(tdFullName); tr.appendChild(tdAddress); tr.appendChild(tdPhoneNumber); tr.appendChild(tdEmailAddress); tr.appendChild(tdUrl); conData.appendChild(tr); tdFullName.textContent = cursor.value.fullname tdAddress.textContent = cursor.value.address tdPhoneNumber.textContent = cursor.value.phonenumber tdEmailAddress.textContent = cursor.value.emailaddress tdUrl.textContent = cursor.value.url tr.setAttribute('data-contact-id', cursor.value.id); let deleteBtn = document.createElement('button'); tr.appendChild(deleteBtn); deleteBtn.textContent = 'Delete'; deleteBtn.onclick = deleteItem; cursor.continue(); } else { if(!conData.firstChild) { let para = document.createElement('p'); para.textContent = 'No contact stored.' conData.appendChild(para); } console.log('Notes all displayed'); } }; } function deleteItem(e) { let contactId = Number(e.target.parentNode.getAttribute('data-contact-id')); let transaction = db.transaction(['contacts'], 'readwrite'); let objectStore = transaction.objectStore('contacts'); let request = objectStore.delete(contactId); transaction.oncomplete = () => { e.target.parentNode.parentNode.removeChild(e.target.parentNode); console.log('Contact ' + contactId + ' deleted.'); if(!conData.firstChild) { let para = document.createElement('p'); para.textContent = 'No notes stored.'; conData.appendChild(para); } }; } }

Downloadable Source Code

Summary

In summary, this 2022 Address Book Project in JavaScript with Source Code can be useful to students or professional who wants to learn web development using technologies like HTML, CSS and JavaScript. This project can also be modified to fit your personal requirements. Hope this project will help you to improve your skills. Happy coding!

That’s how you create Address Book Project in JavaScript with Source Code in your projects. You can always expand and try different ways in implementing the Address Book Project in your JavaScript projects. In this Address Book Project in JavaScript with Source Code is free to download and It is easy to understand and manipulate this project and use for education purpose only.

Related Articles

• To Do List Project in Python with Source Code | Video | 2020
• Currency Converter In Python With Source Code
• Music Player In JavaScript With Source Code
• CRUD Operation In JavaScript With Source Code
• Fibonacci Series In JavaScript With Source Code
• Calculator In JavaScript Source Code
• Library System in JavaScript with Source Code
• Random Password Generator in JavaScript with Source Code

Inquiries

If you have any questions or suggestions about Address Book Project in JavaScript with Source Code, please feel free to leave a comment below.