JSFiddle - React, Tailwind, and code Playground

by Jacques Vincilione

HTML

<div class="container">
    <header>
         <h1>Tick tock.</h1>

    </header>
    <div class="form">
        <form onsubmit="return false;">
            <div class="rowElem">
                <label for="angle">Angle:</label>
                <div class="formRight">
                    <input type="text" id="angle" name="angle" />
                </div>
            </div>
            <div class="rowElem">
                <button class="myBtn" onclick="digitalTime()">Show Digital Clock</button>
            </div>
            <div class="rowElem">
                <label for="time">Time:</label>
                <div class="formRight">
                    <input type="text" id="time" name="time" />
                </div>
            </div>
            <div class="rowElem">
                <button class="myBtn" onclick="analogTime()">Show Analog Clock</button>
            </div>
        </form>
    </div>
</div>
<div class="container" id="result">
    <h2 id="canvas-head">Digital</h2>
    <div id="digital"></div>
    <h2 id="canvas-head">Analog</h2>
    <canvas id="analog" width="310" height="310">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 digitalTime(){
    document.getElementById('result').style.display = "block";

    //set width and height variables
    var angle = parseInt(document.getElementById('angle').value);
    
    angle = ((angle % 360) + 360) % 360;
    
    var min = angle*2;
    var hours = Math.floor(min/60);
    var minutes = min % 60;
    
    if(minutes < 10){
        minutes = '0' + minutes
    }
    
    if (hours == 0){
        hours = 12;
    }
    
    document.getElementById('digital').innerHTML = hours + ':' + minutes;
    
}

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

    //set width and height variables
    var time = document.getElementById('time').value;
    
    var timeArray = time.split(':');
    
    var hours = parseInt(timeArray[0]);
    var min = parseInt(timeArray[1]);
    
    if(hours == 12 || hours == 24){
        hours = 0;
    }
    
    var minutes = min + hours*60;
    var angle = minutes/2;
    
     //set canvas variables
    var canvas = document.getElementById('analog'),
        ctx = canvas.getContext('2d');
    
        ctx.beginPath();
        ctx.arc(150, 150, 150, 0, 2 * Math.PI);
        ctx.lineWidth = 1;
        ctx.strokeStyle = '#000';
        ctx.stroke();
    
        ctx.translate(150, 150);
        ctx.rotate(angle*Math.PI/180);
        ctx.beginPath();
        ctx.moveTo(0, 0)
        ctx.lineTo(0, -130);
        ctx.stroke();
    
}