Task Manager

Question

Having a little trouble getting the JSON to work, need help with .JS. Here are my requirements:

⁃ Should load the data below into the existing data section on page load.
⁃ Should have the ability to create tasks that will immediately be prepended to the list.
⁃ Should not require a web server, and should be able to run offline.
⁃ Match the design as close as possible.
⁃ All data exchanges should be in JSON format.

Existing Data (JSON)

[ {"name": "Test Task #1", "date": "12/01/2012", "assigned": "John Doe" }, {"name": "Test Task #2", "date": "12/02/2012", "assigned": "John Doe" }, {"name": "Test Task #3", "date": "12/03/2012", "assigned": "John Doe" }, {"name": "Test Task #4", "date": "12/04/2012", "assigned": "John Doe" }, {"name": "Test Task #5", "date": "12/05/2012", "assigned": "John Doe" }, {"name": "Test Task #6", "date": "12/06/2012", "assigned": "John Doe" }, {"name": "Test Task #7", "date": "12/07/2012", "assigned": "John Doe" } ]

This is my index.html thus far:

<!DOCTYPE html> <html> <head>

    <!-- Basic Page Needs

================================================== --> <meta charset="utf-8"> <title>Sterling Savariau</title> <meta name="description" content=""> <meta name="author" content="">

<!-- CSS

================================================== --> <link href="stylesheet/style.css" rel="stylesheet"/>

<!-- Scripts
================================================== -->
<script type='text/javascript'>
//init variables
var task;

//create array withjson
{"task":[

    {
        "name" : "Test Task #1",
        "date" : "12/01/2012",
        "assigned" : "John Doe"
    },
    {

        "name" : "Test Task #2",
        "date" : "12/02/2012",
        "assigned" : "John Doe"
    },

    {
        "name" : "Test Task #3",
        "date" : "12/03/2012",
        "assigned" : "John Doe"
    },

    {
        "name" : "Test Task #4",
        "date" : "12/04/2012",
        "assigned" : "John Doe"
    },

    {
        "name" : "Test Task #5",
        "date" : "12/05/2012",
        "assigned" : "John Doe"
    },

    {
        "name" : "Test Task #6",
        "date" : "12/06/2012",
        "assigned" : "John Doe"
    },

    {
        "name" : "Test Task #7",
        "date" : "12/07/2012",
        "assigned" : "John Doe"
    }]}

$ (function() {

});
</script>

    <title> </title>
</head>
<body>
    <body>

<div class="overall">
    <div class="shell">
        <div class="header">
            <h1>Task Tracker</h1>
            <h3>v 2.0</h3>
        </div>

        <div class="side">
            <h2>Create A Task</h2>
                <form action=" " method="post">
                    <input type="text" class="text-input" value="" placeholder="Task Name" id="title" name="taskname">

                    <input type="text" class="text-input" value="" placeholder="Date" id="artist" name="date">

                    <input type="text" class="text-input" value="" placeholder="Assigned To" id="link" name="assigned">

                        <input type="submit" name="submit" value="Submit" class="button">

                </form>
        </div>

        <div class="side">
            <h2>Existing Task</h2>

            <div class="tasks">
                <table width="449" border="0">
                    <tr>
                        <td><strong>Task Name #1</strong></td>
                        <td>12/01/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   

                    <tr>
                        <td><strong>Task Name #2</strong></td>
                        <td>12/02/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   

                    <tr>
                        <td><strong>Task Name #3</strong></td>
                        <td>12/03/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   

                    <tr>
                        <td><strong>Task Name #4</strong></td>
                        <td>12/04/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   

                    <tr>
                        <td><strong>Task Name #5</strong></td>
                        <td>12/05/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   

                    <tr>
                        <td><strong>Task Name #6</strong></td>
                        <td>12/06/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   

                    <tr>
                        <td><strong>Task Name #7</strong></td>
                        <td>12/07/2012</td>
                        <td align="right"><strong>John Doe</strong></td>
                    </tr>   
                </table>    
            </div>

        </div>  
    </div>
</div>

</body> </body> </html>

Answer 1 · 2015-04-20T20:59:55Z

April 20, 2015 8:59pm

Sterling you need to write a script to:

1) select the input element. 2) retrieve its value 3) assign the value to the table element

var titleValue = document.getElementById('title').val();  // step 1 and 2
document.getElementById('titleTd').val(titleValue); // step 3

I haven't tested this answer, but I believe this will work as long as you select the correct element in step 3.

Welcome to the Treehouse Community

Looking to learn something new?

Sterling Savariau

Sterling Savariau

Task Manager

Brent Suggs

Brent Suggs

Sterling Savariau

Sterling Savariau

1 Answer

Mark Glissmann

Mark Glissmann