Homework 3

by Ken Sprague

HTML

<!doctype html>
<html>
    <head>
        <title>CSCI E-3 Homework #3</title>
        <!--
        Write a form that creates records of some type = contact list/address book, movie list, product catalog,
        On submit, the item is added to a JSON object and added to the HTML display in the page.
        The JSON object is written to localstorage
        Upon page load, the JSON is read and the display is re-created.
        -->
        
        
    </head>
    <body>
<!-- This is a sample HTML form. you can use it as it is, change its lables from Name, Address, and Email
     to something different, or discard it completely and build your own.  As it is, this form
     is sufficient to complete this project, so don't feel you have to build your own if you
     don't want to.  --> 
        <label for="title">Title</label><input type="text" size="40" id="title"><br>
        <label for="Issue">Issue</label><input type="text" size="40" id="issue"><br>
        <label for="grade">Grade</label><input type="text" size="40" id="grade"><br>
        <button id="doit" class="button">Save</button>

<!-- This is a sample HTML list output area. You can use it as it is, change its lables from Name, Address, and Email
     to something different, or discard it completely and build your own.  As it is, this section
     is sufficient to complete this project, so don't feel you have to build your own if you
     don't want to! -->    
        <h2>Comic Book Collection</h2>
        <div id="output">
        <div class="info infoHead"><div>Title</div><div>Issue</div><div>Grade</div></div>
        </div>

        
    </body>
</html>

CSS

body {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 14px;
	line-height: 1.428571429;
	color: #333;
}
.button {
	border: 1px solid #888888;
	color: #ffffff;
	font-family: Arial;
	font-size: 15px;
	font-weight: bold;
	font-style: normal;
	height: 30px;
	width: 82px;
	line-height: 14px;
	padding: .5em;
	text-align: center;
	background-color: #614C26;
}

.button:hover{
    border: 2px solid #000;
}
label{
	display: inline-block;
	width: 5em;
}

.info div {
	display: inline-block;
	width: 10em;
}

.infoHead {
	font-weight: bold;
	border-bottom: 1px solid gray;
	width: 30em;
}

JavaScript

"use strict";

// First we do a self-invoking function that contains everything - there will be nothing
//  exposed to the global scope.
(function(){
    
    
    var button = document.getElementById("doit");
    button.onclick = function(){
        /*  This function will run when the user clicks on the
         *  Save button.  We're going to do several things when this function
         *  runs:
         *  1) Get the values from the form. We have done this part for you
         *  2) Create a new data object that contains the information from the form. This could be
         *     a constructor funtion that takes each of the values as its arguments, or a simple
         *     JSON object (an object literal, more or less).  
         *  3) Write this data object to the page. You'll do this by calling writeRowToPage() and
         *     passing your data object as a parameter.  We have provided a sample of this
         *     function for you, though you may have to modify/complete it so that it works
         *     with your data structure.
         *  4) Store your data to localStorage.  Remember that localStorage stores only
         *     strings, so you'll need to stringify your object. Remember, too, that when you
         *     write to localStorage, you can't add to or modify what's already there - you can only
         *     replace it completely, so you'll need a strategy to manage your accumulating data. See the
         *     Project 2B document for more information. 
         *
         *     */
        
        //Step #1 - we get values from the form
        var title = document.getElementById("title").value;
        var issue = document.getElementById("issue").value;
        var grade = document.getElementById("grade").value;

        // Step #2 - you will create a new data object
       
        // array to hold items 
        var comics = [];
        var i = 0;
        //create constructor function for an Comic Class Object
        function...