JSFiddle - React, Tailwind, and code Playground

by Mert Ener

HTML

<div id="viewport">
    <div class="circle" id="circle1"></div>
    <div class="circle" id="circle2"></div>
    <div class="circle" id="circle3"></div>
</div>
<select id="cog">
    <option value="cog1">1</option>
    <option value="cog2">2</option>
    <option value="cog3">3</option>
</select>
<select id="rev">
    <option value="2">2</option>
    <option value="4">4</option>
    <option value="6">6</option>
    <option value="8">8</option>
</select>
<select id="dir">
    <option value="1">CW</option>
    <option value="-1">CCW</option>
</select>
<select id="gett">
    <option value="cog1">1</option>
    <option value="cog2">2</option>
    <option value="cog3">3</option>
</select>
<button id="start" onClick="start()">Start</button>
<button id="stop" onClick="stop()">Stop</button>
<button id="getang" onClick="getang()">Set</button>

CSS

.circle {
    width: 144px;
    height: 144px;
    display:inline-block;
    transform: rotate(0deg);
    margin-left:-18px;
    background-image: url("http://www.script-tutorials.com/demos/247/images/g4.png");
    background-repeat: no-repeat
}
#viewport {
    margin-left:20px;
    white-space:nowrap
}

JavaScript

function cog(e) {
    var spd, dir;

    this.speed = function (s) {
        spd = s;
    }
    this.direction = function (d) {
        dir = d;
    }
    this.run = function (r) {
        clearInterval(this.rotate);
        if (r == "start") {
            this.rotate = setInterval(function () {
                values = window.getComputedStyle(e, null).getPropertyValue("transform").split('(')[1].split(')')[0].split(',');
                e.style.transform = "rotate(" + (Math.round(Math.atan2(values[1], values[0]) * (180 / Math.PI)) + (spd * dir)) + "deg)";
            }, 42);
        }
    }
    this.setang = function (el) {
        clearInterval(el.rotate);
        clearInterval(this.rotate);
        angle = el.gettang()
        if(angle < 0)
            i = -1;
        else
            i = 1;;
        e.style.transform = "rotate(" + (angle + 10) + "deg)";
        el.run("start");
        this.run("start");
    }
    this.gettang = function () {
        angs = window.getComputedStyle(e, null).getPropertyValue("transform").split('(')[1].split(')')[0].split(',');
        return Math.round(Math.atan2(angs[1], angs[0]) * (180 / Math.PI));
    }
}

var cog1 = new cog(document.getElementById("circle1"));
var cog2 = new cog(document.getElementById("circle2"));
var cog3 = new cog(document.getElementById("circle3"));

function start() {
    el = eval(document.getElementById("cog").value);
    el.speed(document.getElementById("rev").value);
    el.direction(document.getElementById("dir").value);
    el.run("start");
}

function stop() {
    el = eval(document.getElementById("cog").value);
    el.run("stop");
}

function getang() {
    el = eval(document.getElementById("cog").value);
    el2 = eval(document.getElementById("gett").value);
    el.setang(el2);
}