Untitled

<html>
<head>
<link type="text/css"rel="stylesheet" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title> Comment Post </title>
<script>
    function validate()
    {
        var name = document.getElementById("name", "title", "textarea");
        var blank_field = false;
        if(name.value == "")
        {
            name.style.backgroundColor = "pink";
            blank_field = true;
        }
        else
        {
            name.style.backgroundColor = "lightgreen";
        }
        if(title.value == "")
        {
            title.style.backgroundColor = "pink";
            blank_field = true;
        }
        else
        {
            title.style.backgroundColor = "lightgreen";
        }
        if(textarea.value == "")
        {
            textarea.style.backgroundColor = "pink";
            blank_field = true;
        }
        else
        {
            textarea.style.backgroundColor = "lightgreen";
        }
        var select1 = document.getElementById("select1");
        var select2 = document.getElementById("select2");
        if(select1.value == "Choose A Color")
        {
            select1.style.border = "2px solid red";
            blank_field = true;
        }
        else
        {
            select1.style.border = "none";
        }
        if(select2.value == "Choose A Color")
        {
            select2.style.border = "2px solid red";
            blank_field = true;
        }
        else
        {
            select2.style.border = "none";
        }
        var icon = document.getElementsByName("icon");
        var radiobtns = document.getElementById("radiobtns");
        var blank_radio = true;
        for(var i = 0; i < icon.length; i++)
        {
            if(icon[i].checked == true)
            {
                blank_radio = false;
            }
        }
        if(blank_radio == true)
        {
            radiobtns.style.border = "2px solid red";
            blank_field = true;
        }
        else
        {
            radiobtns.style.border = "none";
        }
        var error = document.getElementById("error");
        if(blank_field == true)
        {
            error.innerHTML = "<h3 style = 'color:red;'>You missed a spot!</h3>";
        }
        else
        {
            error.innerHTML = "";

        }
        add();
    }
    var array = [];
    function add()
    {
        //variables
        var name = document.getElementById("name");
        var title = document.getElementById("title");
        var textarea = document.getElementById("textarea");
        var icon = document.getElementsByName("icon");
        var select1 = document.getElementById("select1");
        var select2 = document.getElementById("select2");
        var icon_value;
        for(i = 0; i < icon.length; i++)
        {
            if(icon[i].checked == true)
            {
                icon_value = icon[i].value;
            }
        }

        //all variables and loops go above this
        var storage = {name: name.value, title: title.value, comment: textarea.value, icon: icon_value, tcolor: select1.value, bgcolor: select2.value};
        array.push(storage);
        show();
    }//end function add
    function show()
    {
        var display = document.getElementById("display");
        var post = "";
        for(var i = 0; i < array.length; i++)
        {
            post += "<div style='background-color:"+array[i].bgcolor+";'>";
            post += "<span style='color:"+array[i].tcolor+";'>";
            post += "<b>" + array[i].name + "</b><br>";
            post += array[i].title + "<br>";
            post += array[i].comment + "<br>";
            post += "<img src = " + array[i].icon + " class = 'icon'  />";
            post += "</span>";
            post += "</div>";
            html += "<input type='checkbox' onclick='removeComment("+i+");'/>";
        }
        display.innerHTML = post;
    }//end function show
    function remove(index)
    {
        show.splice(index, 1);
        show();
    }
</script>
</head>
<body id = "body">
<div class = "container">
    <div class = "row">

        <div class="col-xs-12 col-sm-4" id="logo">
            <img class = "img-responsive" src = "bubble.jpg">
        </div>

    </div>
    <div class = "row">

        <div class = "col-xs-12" id = "menu">
            <ul class = "nav nav-tabs">
                <li><a href = "http://simplycoding.org">Simply coding</a></li>
                <li><a href = "http://google.com">Google</a></li>
                <li><a href = "http://gamersvortex.tk">Gamer's Vortex</a></li>
            </ul>
        </div>

    </div>
    <div class = "row">

        <div class = "col-xs-12 col-sm-8" id = "comments">COMMENTS
            <div class = "col-xs-12 col-sm-4" id = "form">

                <header id = "header">
                    LEAVE A COMMENT
                    <div id = "error"></div>
                </header>
                <form class = "form-inline">
                    <label>
                        Name:
                    </label>
                        <input type="text" class="form-control" id="name" placeholder="Enter Name">
                    <label>
                        Color:
                    </label>
                        <select id = "select1" class = "form-control">
                            <option>Choose A Color</option>
                            <option>Red</option>
                            <option>Blue</option>
                            <option>Pink</option>
                            <option>Turquoise</option>
                        </select>
                </form>
                <form class = "form-horizontal">
                    <label class = "control-label">
                        Title:
                    </label>
                    <input type="text" class="form-control" id="title" placeholder="Enter Comment Title">
                    <label>
                        Background Color:
                    </label>
                    <select id = "select2" class = "form-control">
                        <option>Choose A Color</option>
                        <option>Gold</option>
                        <option>#cc0099</option>
                        <option>Orange</option>
                        <option>Purple</option>
                    </select>
                </form>
                <form id = "radiobtns" class = "form-inline">
                    <label class = "control-label">
                        Icons:
                    </label>
                    <input type="radio" name="icon" value = "imoji.png">
                    <img src="imoji.png" class="icon" />

                    <input type="radio" name="icon" value = "imoji2.png">
                    <img src="imoji2.png" class="icon" />

                    <input type="radio" name="icon" value = "imoji3.png">
                    <img src="imoji3.png" class="icon" />

                    <input type="radio" name="icon" value = "imoji4.png">
                    <img src="imoji4.png" class="icon" />
                </form>
                <label class = "control-label">
                    Comment:
                </label>
                <textarea id = "textarea" class = "form-control" rows = "8"></textarea><br>
                <input class = "btn btn-default" type = "button" value = "Submit Comment" onclick = "validate()">

            </div>
            <div id = "display"></div>
        </div>

    </div>
</div>