Learning JavaScript

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class="input-prepend">
    <button type="submit" class="btn btn-inverse">URL to call</button>
    <input id="urlText" type="text" class="input-block-level"/>
</div>
<div>
    <button onclick="addKeyValue();" class="btn btn-inverse">Add key/value pair</button>
    <input id="keyText" />
    <input id="valueText" />
</div>
<textArea id="message"></textArea>
<div>
    <table class="table table-striped" id="keyValuePairTable">
        <tr>
            <th>KEY</th>
            <th>VALUE</th>
        </tr>
    </table>
</div>

JavaScript

var ELEMENT_INPUT = 'input';

function addKeyValue() {
    var keyValuePairTable = document.getElementById('keyValuePairTable');
    var keyValueRow = createKeyValuePair();
    keyValuePairTable.appendChild(keyValueRow);
}
 
function createKeyValuePair() {
    resetErrorMessage();

    var keyTextInput = document.getElementById('keyText');
    var valueTextInput = document.getElementById('valueText');

    if (keyTextInput.value == '' || valueTextInput.value == '') {
        showErrorMessage('No key or value defined!');
        return;
    }

    var newRow = document.createElement('tr');

    newRow.appendChild(createTD(keyTextInput.value));
    newRow.appendChild(createTD(valueTextInput.value, ELEMENT_INPUT));
    
    showInfoMessage("New row with " + keyTextInput.value + "/" + valueTextInput.value + " inserted!");
    
    keyTextInput.value = '';
    valueTextInput.value = '';
    keyTextInput.focus();

    return newRow;
}

function createTD(content) {
    var newTD = document.createElement('td');
    newTD.innerHTML = content;
    return newTD;
}

function showMessage(message, type) {
    var msgBox = document.getElementById('message');
    msgBox.innerHTML = message;
    msgBox.setAttribute("class", "alert alert-" + type);
    setTimeout(resetErrorMessage, 3000);
}

function showErrorMessage(message) {
     showMessage(message, "error");
}

function showInfoMessage(message) {
    showMessage(message, "info");
}

function resetErrorMessage() {
    var msgBox = document.getElementById('message');
    msgBox.innerHTML = "";
    msgBox.setAttribute("class", "");
}