Unit 2 Project B

by Angela Baruth

HTML

<h1>Your work list</h1>


<table id="worklist-table">
    <tr id="worklist-head">
		                 <th>ID</th>
				 <th>Final Date</th>
                                   <th>Priority</th>
				 <th>Status</th>
                                  <th>Description</th>
				<th>Company</th>
                                  <th>First name</th>
                                   <th>Last name</th>
                                   <th>Email</th>
				 <th>Phone</th>
       
    </tr>
</table>


<form id="worklist-form">
   
				<div class="item text">
        <label>Final  Date:</label>
        <div class="field"><input type="text" name="date" /></div>
				</div>
				<div class="item text">
        <label>Priority:</label>
        <div class="field"> <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>
				<div class="item text">
        <label>Status:</label>
        <div class="field"> <select name="status" id="status">
                    <option value="done">done</option>
                    <option value="in process">in process</option>
                    <option value="start">start</option>    
                </select></div>
				</div>
				<div class="item text">
        <label>Description:</label>
        <div class="field"><input type="text" name="description" /></div>
				</div>
				<div class="item text">
        <label>Company:</label>
        <div class="field"><input type="text" name="company" /></div>
				</div>
				<div class="item text">
        <label>First name:</label>
        <div class="field"><input type="text" name="first_name" /></div>
    </div>
    <div class="item text">
        <label>Last name:</label>
        <div class="field"><input type="text" name="last_name" /></div>
    </div>
   ...

CSS

a { color: #0068D2; cursor: pointer; }
		a:link, a:visited { text-decoration: none; color: #0068D2; }
		a:hover, a:active { text-decoration: underline; color: #0068D2; }
		body { font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", sans-serif; }



		#worklist-table { border-collapse: collapse; }
		#worklist-table, #worklist-table th, #worklist-table td { padding: 8px 16px; text-align: left; border: 0px solid #B9BABE; }
		#worklist-table th { font-weight: bold; font-size: 14px; color: #29344B; }
		#worklist-table td { color: #000; }
		#worklist-table tr:nth-child(2n) { background: #E8EDFF; }



		#worklist-form { padding: 10px; }
		.text input, .button input { padding: 5px; margin: 0; border: 1px solid #ccc; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; }
		#worklist-form .item { margin: 3px 0; }
		#worklist-form label, #worklist-form .field { display: inline-block; color: #0C0B07; }
		#worklist-form label { width: 110px; font-weight: bold; text-align: right; color: #666; }
		#worklist-form .text input { width: 176px; padding: 3px; }
		#worklist-form .button { display: inline-block; }
		#worklist-form .button-wrapper { padding-left: 113px; }
		.button input { padding: 4px 8px; color: #343434; background-color: #fdfdfd; background: -moz-linear-gradient(#fdfdfd, #e1e1e1); background: -webkit-gradient(linear, 0 0, 0 100%, from(#fdfdfd), to(#e1e1e1)); }
		.button-default input { font-weight: bold; color: #fff; background-color: #7ca0c7; background: -moz-linear-gradient(#acc6e1, #7ca0c7); background: -webkit-gradient(linear, 0 0, 0 100%, from(#acc6e1), to(#7ca0c7)); border-color: #5b80b2; }

JavaScript

var Contacts = {
			index: window.localStorage.getItem("Contacts:index"),
			$table: document.getElementById("worklist-table"),
			$form: document.getElementById("worklist-form"),
			$button_save: document.getElementById("contacts-op-save"),
			$button_discard: document.getElementById("contacts-op-discard"),




			init: function() {

				if (!Contacts.index) {
					window.localStorage.setItem("Contacts:index", Contacts.index = 1);
				}


				Contacts.$form.reset();
				Contacts.$button_discard.addEventListener("click", function(event) {
					Contacts.$form.reset();
					Contacts.$form.id_entry.value = 0;
				}, true);


				Contacts.$form.addEventListener("submit", function(event) {
					var entry = {
						id: parseInt(this.id_entry.value),
						date: this.date.value,
						priority: this.priority.value,
						status: this.status.value,
						description: this.description.value,
						company: this.company.value,
						first_name: this.first_name.value,
						last_name: this.last_name.value,
						email: this.email.value,
						phone: this.phone.value
					};



					if (entry.id == 0) { // add
						Contacts.storeAdd(entry);
						Contacts.tableAdd(entry);
					}


					else { // edit
						Contacts.storeEdit(entry);
						Contacts.tableEdit(entry);
					}


					this.reset();
					this.id_entry.value = 0;
					event.preventDefault();
				}, true);


				if (window.localStorage.length - 1) {
					var contacts_list = [], i, key;
					for (i = 0; i < window.localStorage.length; i++) {
						key = window.localStorage.key(i);
						if (/Contacts:\d+/.test(key)) {

				contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
						}
					}

					if (contacts_list.length) {
						contacts_list
							.sort(function(a, b) {
								return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
							})
							.forEach(Contacts.tableAdd);
					}
				}
				Contacts.$table.addEventListener("click", function(event) {
					var op =...