2A

by Larry Adams

HTML

<h2>Unit 2 B Project</h2>
    <p>Student: Larry L. Adams II</p>
 <form>   
<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>
                
            </form>

<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
window.localStorage.clear;
console.log(window.localStorage);


var data = [];

var Contact = function(fname, lname, phone, email){
    this.fname = fnameContact;
    this.lname = lnameContact;
    this.phone = phoneContact;
    this.email = emailContact;  
};

 console.log(data);

// gets data
    
     saveContact.onclick = function() {
     var fname = fnameContact.value; 
     var lname = lnameContact.value;   
     var phone = phoneContact.value;   
     var email = emailContact.value; 
        /*
         var obj = {
             fname: fname,
             lname: lname,
             phone: phone,
             email: email
         };
         */
         
     var contact = new Contact(fname, lname, phone, email);
         
         data.push(contact);
         updateLS();
         updateOutput();
         ClearInputs();     
};

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

// parse the contacts object
var initLS = function(){
    dataLS = JSON.parse(window.localStorage.getItem("contacts"));
    for(i in dataLS){
        var obj = dataLS[i];
        var contact = new Contact(obj.fname, obj.lname, obj.phone, obj.email);
        data.push(contact);
    }
    updateOutput();
};

var clearInputs = function() {
    fnameContact = '';
    lnameContact =...