JSFiddle - React, Tailwind, and code Playground

by Thomas Smalls

HTML

<!doctype html>
    <html>
    <head>
        <title>CSCI E-3 Homework 3</title>
        
        <h1> "Mood Survey" </h1>
    </head>
    
    <body>
        <label for="name">Name?</label><input type="text" size="45" id="name"><br><br>
        <label for="location">Location?</label><input type="text" size="45" id="location"><br><br>
        <label for="mood">Mood?</label><select id="mood">
            <option value="pickone">Which best describes you today?</option>
            <option value="afraid">afraid</option>
            <option value="angry">angry</option>
            <option value="sad">sad</option>
            <option value="joyful">joyful</option>
            <option value="disgusted">disgusted</option>
            <option value="surprised">surprised</option>
            <option value="trusting">confident about things</option>
            <option value="expectant">looking forward to something</option>
        </select><br><br>
        <label for="enterInfo"> </label><button id="enterInfo" class=button>Enter</button>
      
        <h2>Results</h2>
        <div id="output">
        <div class="info infoHead"><div>Name</div><div>Location</div><div>Mood</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

/* homework3.js */
"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("enterInfo");
    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
         *     Homework 3 PDF document for more information.
         *
         *     */

        //Step #1 - we get values from the form
        var name = document.getElementById("name").value;     
        var location = document.getElementById("location").value;
        var mood = document.getElementById("mood").value;
        
               
        // Step #2 - you will create a new data object
        var userInfo = { "name":name, "location":location, "mood":mood};

        // Step #3 - call on writeRowtoPage() to write...