TODO app

interview question

by leethelobster

HTML

<input id="input-text" type="text" />
<button id="submit-button">Submit</button>

<div class="table">
    <h1>Todo</h1>
    <ul></ul>
</div>

CSS

.hide {
    display: none;
}

JavaScript

/* Write a "to do" app. The page should have an input field with some way to submit.  
The user enters data (such as 'pet cat') into the field and submits it.  On submission, 
add a new row to the 'TODO' table at the bottom.  Each row of the list should have a 
delete btn, and the content the user entered.  On Delete remove that row from the table. 

Note: you don't have to use a table tag :D

--------------------------------
|   You're thing to do         |
--------------------------------


+------------------+
|		TODO	   |
+------------------+
| Pet Cat | delete |
+------------------+
| Pet Dog | delete |
+------------------+
| Get Gas | delete |
+------------------+
| Buy Food| delete |
+------------------+


Jo's note:
- this is what i submitted
- it's full of syntax errors, lol
- amazon interview
*/

var html = '';
var store = [{
    name: 'Pet Cat';
}, {
    name: 'Pet Dog';
}, {
    name: 'Get Gas';
}];

buildTable();

$('#submit-button').on('click', function({
    // add a new row
    var value = $('#input-text').val();
    var obj = {
        name: value
    }
    store.push(obj);
    
    buildTable();
});

function buildTable() {
    store.forEach(function(item, idx, store) {
        html += '<li><span>' + item.name + '</span><button class="button-delete"></button></li>';
    });
    $('.table ul').html(html);
};

$('.table').on('click', '.button-delete', function({
    //$(this).parent('li').remove();
    var idx = $(this).parent('li').eq();
    store.splice(idx, 1);
    buildTable();
});

// span > input, on click
$('.table').on('click', 'span', function({
    // if has class open, make sure all other opens are closed first before executing logic
    $('.open').removeClass('open');
    $('.hide').removeClass('hide');
    
    $(this).parent('li').addClass('open');
    
    if ($(this).hasClass('open')) {
        // logic
        $(this).addClass('hide');
        var inputHtml = '<input id="input-text" type="text" /><button...