MJS Task Example Ch 14

by Lucille Kenney

HTML

<!-- tasks.html -->
	<form action="#" method="post" id="theForm">
	    <fieldset><legend>Enter an Item To Be Done</legend>
	        <div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
	        <div><label for="priority">Priority</label> <select name="priority" id="priority">
	        	<option value="high">High</option>
	        	<option value="normal" selected>Normal</option>
	        	<option value="low">Low</option>
	        </select></div>
	        <input type="submit" value="Add It!" id="submit">
	  <div id="output"></div>
	    </fieldset>
	</form>

CSS

/*
 * simple-and-clean.css - CSS2 style sheet
 */

body {
    font: 75% Verdana, Helvetica, Arial, sans-serif;
    background: White;
    color: Black;
    margin: 1em;
    padding: 1em;
}

h1, h2, h3, h4, h5, h6 {
    color: Black;
    clear: left;
    font: 100% Verdana, Helvetica, Arial, sans-serif;
    margin: 0;
    padding-left: 0.5em;
} 

h1 {
    font-size: 150%;
    border-bottom: none;
    text-align: right;
    border-bottom: 1px solid Gray;
}
    
h2 {
    font-size: 130%;
    border-bottom: 1px solid Gray;
}

h3 {
    font-size: 120%;
    padding-left: 1.0em;
    border-bottom: 1px solid Gray;
}

h4 {
    font-size: 110%;
    padding-left: 1.5em;
    border-bottom: 1px solid Gray;
}

p {
    text-align: justify;
    line-height: 1.5em;
}

a {
    text-decoration: underline;
    color: Black;
}

code,
blockquote,
pre {
    font-size: 120%;
    padding: 1em;
    border: 1px solid Black;
    color: Black;
    background-color: #dedede;
}

#gallerycomment {
    text-align: center;
}

#rss-desc {
    text-align: right;
    font-size: smaller;
}

.item-pubDate {
    text-align: right;
    padding: 1em;
    font-size: smaller;
}

.item-technorati {
    display: none;
}

li {
    margin-bottom: 1em;
}

div .item-desc {
    margin-bottom: 1em;
}

.item-title {
    margin-bottom: 0.5em;
}

#loader {
	visibility: hidden;
}

#target {
	zoom: 1;
}

/*
dark blue: 212B40
gray-blue: 547B97
gray-green-blue: BADCDD
light-green: C2E078
*/
/*
dark blue: 1B1D26
dark green: 425955
gray-green: 778C7A
off-white: F1F2D8
tan: BFBD9F
*/

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #1b1d26;
background-color: #f1f2d8;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
form{
margin:0 auto;
width:400px;
padding:14px;
background-color: #ffffff;
border:solid 2px #425955;
}

/* ----------- stylized ----------- */
 h1...

JavaScript

// tasks.js #4
// This script manages a to-do list.

// Function for creating Task objects.
// Function takes two arguments: the task name and its priority.
function Task(name, priority) {
    'use strict';
	
	// Assign the paremeters to variables:
	this.name = name;
	this.priority = priority;

	// Set the completion to false (i.e., not completed).
	this.completed = false;
	
	// Define a toString() method:
	this.toString = function() {
		return this.name + ' (' + this.priority + ')';
	};
	
} // End of Task function.

// Function that sets up the work:
window.onload = function(){
    'use strict';

	// Form references:
	var task = document.getElementById('task');
	var priority = document.getElementById('priority');
	var output = document.getElementById('output');

	// Variable that stores the tasks:
	var tasks = []; 

	// Function called when the form is submitted.
	// Function adds a task to the array.
	document.getElementById('theForm').onsubmit = function() {
		
		// Create a new Task:
		var t = new Task(task.value, priority.value);

		// Add it to the array:
		tasks.push(t);
		
		// Update the output:
        output.innerHTML = 'There are now <b>' + tasks.length + '</b> item(s) in the to-do list. Just added:<br>' + t.toString();        

	    // Return false to prevent submission:
        return false;

	}; // End of onsubmit anonymous function.

}; // End of onload anonymous function.