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="number" id="angle" name="angle" />
                </div>
            </div>
            <div class="rowElem">
                <button class="myBtn" onclick="digitalTime()">Show Clocks</button>
            </div>
        </form>
    </div>
</div>
<div class="container" id="result">
    <h2 id="canvas-head">Digital</h2>
    <h3>Based off angle</h3>
    <div id="digital"></div>
    <h2 id="canvas-head">Analog</h2>
    <h3>Current time, translated to analog.</h3>
    <canvas id="analog" width="310" height="310"></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;
    analogTime();
}

function drawClock(){
    var d = new Date();
    var hours = d.getHours() % 12;
    var min = d.getMinutes();
    var seconds = d.getSeconds();
    var minutes = min + hours*60;
    var angle = minutes/2;
    var minangle = min*6;
    var secangle = seconds*6;
        
    //set canvas variables
    var canvas = document.getElementById('analog'),
        ctx = canvas.getContext('2d');
    
        canvas.width = canvas.width;
    
    //draw circle for clock outline    
    ctx.beginPath();
    ctx.arc(155, 155, 150, 0, 2 * Math.PI);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000';
    ctx.stroke();
    ctx.translate(0, 0);
    ctx.rotate(0);
    ctx.save();
    ctx.save();
    ctx.save();
    
    //draw and rotate hours arm
    ctx.translate(155, 155);
    ctx.rotate(angle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -100);
    ctx.lineTo(0, 20);
    ctx.lineWidth = 3;
    ctx.stroke();
    
    //draw and rotate seconds arm
    ctx.restore();
    ctx.translate(155,155);
    ctx.rotate(secangle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -130);
    ctx.lineTo(0, 20);
    ctx.lineWidth = 1;
    ctx.stroke();
    
    //draw and rotate minutes arm
    ctx.restore();
    ctx.translate(155,155);
    ctx.rotate(minangle*Math.PI/180);
    ctx.beginPath();
    ctx.moveTo(0, 0)
    ctx.lineTo(0, -130);
    ctx.lineTo(0, 20);
    ctx.lineWidth = 2;
    ctx.stroke();
    
...