JSFiddle - React, Tailwind, and code Playground

by Jacques Vincilione

HTML

<div class="container">
    <header>
         <h1>This form rocks!</h1>

    </header>
    <div class="form">
        <form onsubmit="return false;">
            <div class="rowElem">
                <label for="width">Width:</label>
                <div class="formRight">
                    <input type="text" id="width" name="width" />
                </div>
            </div>
            <div class="rowElem">
                <label for="height">Height:</label>
                <div class="formRight">
                    <input type="text" id="height" name="height" />
                </div>
            </div>
            <div id="status"></div>
            <div class="rowElem">
                <button class="myBtn" onclick="checkerboard()">Create</button>
            </div>
        </form>
    </div>
</div>
<div class="container" id="result">
    <h2 id="canvas-head"></h2>
    <canvas id="checkerboard">Sorry, your browser does not support the most awesome HTML5 element, canvas. Have you considered <a href="http://google.com/chrome">updating</a>?</canvas>
</div>

CSS

@import url('http://fonts.googleapis.com/css?family=Open+Sans:400, 700, 600');

html, body {
    font-family:"Open Sans", san-serif;
    color:#232323;
    background:#369;
}
.container {
    width:90%;
    max-width:960px;
    padding:30px;
    background:#eee;
    margin:10px auto 0;
}
#result{
    display:none;
}
h1, h2 {
    font-weight:700;
    color:#369;
    margin-top:0;
    width:95%;
    border-bottom:1px solid #cdcdcd;
}
h1{
    font-size:2.2em;
}
.rowElem {
    width:100%;
    line-height:30px;
}
.rowElem label, .formRight {
    float:left;
}
label {
    width:10%;
    margin-right:2%;
}
.formRight {
    width:87%;
}
.formRight input {
    padding:5px;
    width:90%;
}
.myBtn {
    padding:10px 15px;
    background:#3276b1;
    color:#fff;
    border:none;
}
.myBtn:hover {
    background:#2d6a9f;
}

@media screen and (max-width: 550px){
    label, .formRight{
        width:100%;
}

JavaScript

function checkerboard(){
    document.getElementById('result').style.display = "block";

    //set width and height variables
    var width = parseInt(document.getElementById('width').value),
        height = parseInt(document.getElementById('height').value);

    //set canvas variables
    var canvas = document.getElementById('checkerboard'),
        ctx = canvas.getContext('2d');
    
    //set canvas height and width
    canvas.width = width*20;
    canvas.height = height*20;
    
    //check to make sure the user entered at least a 2 in both of the input fields
    if(width < 2 || height < 2){
        document.getElementById('status').innerHTML = "Please select a width and height greater than '1' to generate a checkerboard.";
        return;
    }
    
    //loop to render checkerboard
    var i = 0,
        ii = 0;
    while(ii < height){
        //if even number row, start with red square, otherwise start with black
        if (ii % 2 == 0)
		    while(i < width){
                //create red square
                ctx.fillStyle = "rgb(255,0,0)";
                ctx.fillRect(i*20, ii*20, 20, 20);
                i++;
                if(i < width){
                    //create black square
                    ctx.fillStyle = "rgb(0, 0, 0)";
                    ctx.fillRect(i*20, ii*20, 20, 20);
                    i++;
                }
            }
        
        else
		     while(i < width){
                //create black square
                ctx.fillStyle = "rgb(0, 0, 0)";
                ctx.fillRect(i*20, ii*20, 20, 20);
                i++;
                if(i < width){
                    //create red square
                    ctx.fillStyle = "rgb(255,0,0)";
                    ctx.fillRect(i*20, ii*20, 20, 20);
                    i++;
                }
            }
        
        ii++;
        i = 0;
    } 
    
    document.getElementById('canvas-head').innerHTML = "Your awesome checkerboard has " + width + " columns and " + height + "...