localStorage

by Angela Baruth

HTML

<header id="banner">
		<hgroup>
			<h1>Work task</h1>
		</hgroup>		
	</header>
	<!-- [content] -->
<section>
    <form action="#" method="post" id="memberInfoForm">
        <fieldset>
            <legend>What's up next?</legend>
            <div>
                <label for="firstName">First Name</label>
                <input type="text" name="firstName" id="firstName" required>
            </div>
            <div>
                <label for="lastName">Last Name</label>
                <input type="text" name="lastName" id="lastName" required>
            </div>
            <div>
                <label for="email">Email</label>
                <input type="text" name="email" id="email">
            </div>
             <div>
                <label for="phone">Phone</label>
                <input type="text" name="phone" id="phone">
            </div>
            <div>
                <label for="phone">Date</label>
                <input type="text" name="date" id="date">
            </div>
            <div>
                <label for="priority">Priority</label>
                <select name="priority" id="priority">
                    <option value="high">high</option>
                    <option value="middle">middle</option>
                    <option value="normal">normal</option>
                    <option value="slow">slow</option>
                   
                </select>
            </div>
           
            <div>
                <label for="description">Description</label>
                <input type="text" name="description" id="description">
            </div>
            <!-- <input type="submit" value="Submit" id="submit">-->
        </fieldset>
        <fieldset class="formButtons">
            <input type="reset" id="btnReset" value="Clear" />
            <input type="submit" id="btnSubmit" value="Add Work" />
            <br />
            <input type="button" id="btnDisplayMembers" value="Display Work" />
        </fieldset>
       ...

CSS

{
			color: #000000;
			font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;			
		}
		
		form#add-new-task label{
			width: 80px;
			display: inline-block;
			margin-right: 10px;
		}
		form#add-new-task input{
			width: 150px;
			margin-right: 10px;
		}

		form#add-new-task :required {
			border-color: #11b8ff;
			-webkit-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
			-moz-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
			-o-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
			-ms-box-shadow: 0 0 5px rgba(17, 184, 255, .75);
			box-shadow: 0 0 5px rgba(17, 184, 255, .75);
		}
		
		table {
            width: 100%;
        }
        
        table, tr, td, thead, tfoot, colgroup, col, caption {
            margin: 0px;
            border-spacing: 0px;
        }
        
        table {
            border: 1px solid #333333;
        }
        
        table thead tr {
            background-color: #d3edf8;
        }
        
        table tbody tr td:last-child, table thead tr th:last-child, table tfoot tr th:last-child {
            text-align: right;
        }
        
        table tfoot tr th:first-child {
            text-align: left;
            background-color: #ffffff;
            border-right: 1px solid #333333;
        }
        
        table tbody tr td, table tbody tr th, table thead tr th, table thead tr td {
            border-bottom: 1px solid #333333;
            border-top: 0px;
            border-left: 0px;
            border-right: 1px solid #333333;
        }
        
        table tbody tr td:last-child, table tbody tr th:last-child, table thead tr th:last-child {
            border-right: 0px;
        }
        
        table colgroup col:first-child {
            background-color: #e3edf8;
        }
    
        table thead tr th, table tbody tr td {
            padding: 4px 7px 2px;
        }
        
        table tbody tr:nth-child(even){
            background-color: #ececec;
        }
        
        table tbody tr:nth-child(od){
   ...

JavaScript

/* I'm starting over with clean paired down Data Object array bound to my form per Rob's 
suggestion as trying to bind html to the javascript I had working with local storage 
was a bad idea. It got too confusing. 

I'm modifying the example code from  Larry Bouthillier video demos. */

console.clear();

// My new paired down Array of Data Objects to hold data from my form
var members = [];
members = JSON.parse(localStorage.getItem("jsonMember"));

// My Work constructor function that takes (parameters)
function Member(memberDate, memberPriority, memberDescription, memberFirstName, memberLastName, memberEmail, memberPhone) {
	this.memberDate = memberDate;
	this.memberPriority = memberPriority;
	this.memberDescription = memberDescription;
  this.memberFirstName = memberFirstName;
	this.memberLastName = memberLastName;
	this.memberEmail = memberEmail;
  this.memberEmail = memberPhone;
}

// Bind to an event handler. 
var memberInfoForm = document.getElementById('memberInfoForm');
memberInfoForm.onsubmit = function() {
	// Getting values from my form fields into variables
  var memberDate = document.getElementById('date').value;
	var memberPriority = document.getElementById('priority').value;
	var memberDescription = document.getElementById('description').value;
	var memberFirstName = document.getElementById('firstName').value;
	var memberLastName = document.getElementById('lastName').value;
	var memberEmail = document.getElementById('email').value;
  var memberPhone = document.getElementById('phone').value;


    // Validation check for popualted fields if allValidData is true process data
    if (validateMemberData(date, priority, description, firstName, lastName, email, phone)) {

	    // Call the constructor: Create new works object then store it in array, i.e. (Push these var parameters to the var works array, Work function above.)
	    members.push(new Member(memberDate, memberPriority, memberDescription, memberFirstName, memberLastName, memberEmail,...