Homework 1

an example of stuff from chapter 1,2 and 3

HTML

<title>Format Names</title>

<h2>Format the names entered</h2>

<p>Enter the first name and last name of several people, enter output and the names will be outputted in a comma de-limitted list.</p>
<body>
    <div class="container col-sm- 4">
        <form>
            <div class="col-sm-2">
                <label class="col-sm-2" for="namefirst">First name</label>
                <input type="text" id="namefirst" value="">
            </div>
            <div class="col-sm-2">
                <label class="col-sm-2" for="namelast">Last name</label>
                <input type="text" id="namelast" value="">
            </div>
            <!--<input type="button" onclick="addName()" id="submitbutton" value="Enter Name">-->
                <button onclick="addName()"> Enter Names </button>
                
            <!--<input type="button" onclick="formatNamed()" id="outputbutton" value="Output Names">-->
        </form>
        <div class="conatainer">
           <button onclick="formatNames()"> Formatnames </button>  
    </div>
    <div>
        <textarea id="textBox" rows="4" cols="50">
            Your list will appear here.
        </textarea>
    </div>          
</body>

</html>

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');

JavaScript

(function(){
    var fName = [];
    var lName = [];
    
    function addName() {
    var firstName = document.getElementById("nameFirst").value;
    var lastName = document.getElementById("nameLast").value;
    fName.push(firstName);
    lName.push(lastName);
    clear();
};

function clear() {
    document.getElementById("nameFirst").value = " ";
    document.getElementById("nameLast").value = " ";
};

function formatNames() {
    document.getElementById("textBox").value = " ";
    var formatted = [];
    var space = " ";
    var comma = ","
    for (i = 0; i = fName.length; i++) {
        formatted.push(fName[i]);
        formatted.push(comma);
        formatted.push(space);
    }
    for (j = 0; lName.length; j++) {
        formatted.push(lName[j]);
    }
    for (k = 0; formatted.length; k++){
        document.getElementByID("textBox").innerHTML = formatted[k];
    }
    return{ 
        addName:addName,
        formatNames: formatNames 
    }
};
}());