MJS Tasks Example Ch7

by Lucille Kenney

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>To-Do List</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <!-- Script 6.5 - task.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>
            <input type="submit" value="Add It!" id="submit">
		    <div id="output"></div>
        </fieldset>
    </form>
    <script src="js/tasks.js"></script>
</body>
</html>

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;
}

/*
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 #3
// This script manages a to-do list.

// This function does all the work.
// It is immediately-invoked.
(function(){
    
	// Variable that stores the tasks:
    var tasks = []; 

	// Function called when the form is submitted.
	// Function adds a task to the global array.
    function addTask() {
        'use strict';
        var task = document.getElementById('task');
        var output = document.getElementById('output');
        var message = '';

        if (task.value) {
            tasks.push(task.value);
            message = '<h2>To-Do</h2><ol>';
            for (var i = 0, count = tasks.length; i < count; i++) {
                message += '<li>' + tasks[i] + '</li>';
            }
            message += '</ol>';
            output.innerHTML = message;        
        } // End of task.value IF.

	    // Return false to prevent submission:
        return false;

    } // End of addTask() function.

    // Initial setup:
    function init() {
        'use strict';
        document.getElementById('theForm').onsubmit = addTask;
    } // End of init() function.
    window.onload = init;

})();