Project 2B

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;
    
};

Contact.prototype.createDiv = function(){
        var div = document.createElement("div");
        var fnameNode = document.createTextNode(contact.fname);
        var lnameNode = document.createTextNode(contact.lname);
        var phoneNode = document.createTextNode(contact.phone);
        var emailNode = document.createTextNode(contact.email);
        div.appendChild(fnameNode);
        div.appendChild(lnameNode);
        div.appendChild(phoneNode);
        div.appendChild(emailNode);
    return div;
    
    
}

// gets data
    
    var getData = 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);
    updateLS();
    updateOutput();
    clearInputs();
};

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

    
    var onReturnHandler = function(event){
    if(event.keyCode == 13){
        getData();
    }
};
    saveBtn.onclick = getData;
   ...