Unit 2B final project

by Larry Adams

HTML

<h2>Unit 2 B Project</h2>
    <p>Student: Larry L. Adams II</p>
    
<fieldset>
    <legend>Enter Contact</legend>
    <br>
    <div>
        <label for="fname">First Name:</label><br>
            <input type="text" id="fname" />
    </div>
        <br>
        <div>
        <label for="lname">Last Name:</label><br>
            <input type="text" id="lname" />
    </div>
        <br>
        <div>
        <label for="phone">Phone #:</label><br>
            <input type="text" id="phone" />
    </div>
        <br>
        <div>
        <label for="email">Email:</label><br>
            <input type="text" id="email" />
    </div>
    
            <br> <br>
        <button type="button" id="saveBtn">Save Contact</button>
        <button type="button" id="clearLSBtn">Clear Contact</button>

        
    
</fieldset>

<br>
    <hr>
        <br>
            
    <fieldset>
        <legend>Contact List</legend>
        <div id="output"></div>
    </fieldset>

JavaScript

/* 

Cited Source

Code is based on the writing of JaZahn Clevenger a Instructor in CSCI E-3 Introduction of JavaScript Spring 2015 course at Harvard Unversity.

https://www.youtube.com/watch?v=Krb9KEPipb4&index=7&list=PLEF00070A19C739BE

*/


console.clear();

var fnameContact = document.getElementById("fname");
var lnameContact = document.getElementById("lname");
var phoneContact = document.getElementById("phone");
var emailContact = document.getElementById("email");
var outputContact = document.getElementById("output");
var clearContact = document.getElementById("clearLSBtn");
var saveContact = document.getElementById("saveBtn");

// checking localStorage
console.log(window.localStorage);

var data = [];
    
var Contact = function(fname, lname, phone, email) {
    this.fname = fname;
    this.lname = lname;
    this.phone = phone;
    this.email = email;
    
};

// onclick button that saves the contact information
    saveBtn.onclick = function() {
     var fname = fnameContact.value; 
     var lname = lnameContact.value;   
     var phone = phoneContact.value;   
     var email = emailContact.value;   

    var contact = new Contact(fname, lname, phone, email);

    data.push(contact);
    updateOutput();
    updateLS();
    clearInputs();
};

// clear the array
clearContact.onclick = function(){
    window.localStorage.clear();
};

// return the event entered
var onReturnHandler = function(event) {
    if(event.keyCode == 13) {
        getData();
    }
};

saveContact.onclick = getData;
fnameContact.onKeyup = onReturnHandler;
lnameContact.onKeyup = onReturnHandler;
phoneContact.onKeyup = onReturnHandler;
emailContact.onKeyup = onReturnHandler;
clearContact.onKeyup = onReturnHandler;

var updateLS = function() {
    window.localStorage.setItem("contacts", JSON.stringify(data));
};

var initLS = function(){
    data = JSON.parse(window.localStorage.getItem("contacts"));
    for(i in dataLS){
        var obj = dataLS[i];
        var contact = new...