JSFiddle - React, Tailwind, and code Playground

by Kishore Barik

HTML

<div id="topbar">
    <img id="lightStatus" onclick="changeStatus()" src="http://images.clipartpanda.com/light-bulbs-4ibd7j5ig.jpeg" width="32" height="32">
    <span id="time"/>
</div>

CSS

body{
    width:780px;
    height: 460px;
    background-image: url(bg.png);
    background-repeat: repeat;
    overflow: hidden;
    margin: auto;
    padding: 10px;
    font-family: Verdana, Geneva, sans-serif;
}

#topbar{
    height: 32px;
    position: relative;
    padding: 5px;
    background-color: #F5F5F5;
    border-radius: 10px 10px 10px 10px;
    border: 5px solid #F5F5F5;
}

#topbar span{
    float: right;
    line-height: 32px;
}

#topbar img{
    vertical-align: middle;
}

JavaScript

function updateTime() {
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        if (minutes < 10){
            minutes = "0" + minutes;
        }
        if (seconds < 10){
            seconds = "0" + seconds;
        }
        var v = hours + ":" + minutes + ":" + seconds + " ";
        if(hours > 11){
            v+="PM";
        } else {
            v+="AM"
        }
        setTimeout("updateTime()",1000);
        document.getElementById('time').innerHTML=v;
    }
updateTime();

function changeStatus() {
    var image = document.getElementById('lightStatus');
    if (image.src.match("images")) {
        image.src = "https://static.dezeen.com/uploads/2016/01/light-bulb-dezeen.jpg";
         document.body.style.cursor = 'none';
    } else {
        image.src = "http://images.clipartpanda.com/light-bulbs-4ibd7j5ig.jpeg";
        document.body.style.cursor = 'auto';
    }
}