My Clock

by Emily Humphrey

HTML

<div id="js-clock" class="clock">
</div>

CSS

*{
    box-sizing: border-box;
}

.clock{
    position: relative;
    display: block;
    height: 150px;
    width: 150px;
    border: 6px solid #777;
    border-radius: 100%;
}
.clock:before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px;
    display: block;
    height: 6px;
    width: 6px;
    background: #777;
    border-radius: 100%;
}

.hour{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 3;
    display: block;
    height: 100%;
    width: 6px;
    padding: 30px 0;
    transition: transform .3s;
}
.hour:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: #777;
}

.minute{
    position: absolute;
    left: 50%;
    margin-left: -3px;
    z-index: 2;
    display: block;
    height: 100%;
    width: 6px;
    padding: 10px 0;
    transition: transform .3s;
}
.minute:before{
    content: "";
    display: block;
    height: 50%;
    width: 100%;
    background: #777;
}

JavaScript

function clock(){
    var clockEle = document.getElementById("js-clock");
    var hourEle = document.createElement("div");
    var minuteEle = document.createElement("div");
    clockEle.appendChild(hourEle);
    hourEle.classList.add("hour");
    clockEle.appendChild(minuteEle);
    minuteEle.classList.add("minute");
    var hourPos;
    var minutePos;
    
    getTimePos();
    
    setInterval(function(){
        getTimePos();
    }, 15000);
    
    
    function getTimePos(){
        var hoursTime = new Date().getHours();
        if(hoursTime > 12){
            hoursTime = hoursTime-12;
        }
        var minutesTime = new Date().getMinutes();
        var hourRotation = 360/12;
        var minuteRotation = 360/60;
        hourPos = (hourRotation * hoursTime) + ((hourRotation/60)*minutesTime);
        minutePos = minuteRotation * minutesTime;
        
        setTimePos();
    }
    
    function setTimePos(){
        hourEle.style.transform = "rotate("+hourPos+"deg)";
        minuteEle.style.transform = "rotate("+minutePos+"deg)";
    }
    
    
    
}

clock();