JSFiddle - React, Tailwind, and code Playground

by alexcoady

HTML

<div class="dial"></div>

CSS

.dial {
    width: 200px;
    height: 200px;
    background: yellowgreen;
}

JavaScript

var app = {

    fns: {

        init: function initFn () {

            this.parseDials();
        },

        parseDials: function parseDialsFn () {

            var $dials = $('.dial'),
                dial_count = $dials.length,
                dial_i = 0,
                $dial;

            for (dial_i; dial_i < dial_count; dial_i += 1) {

                $dial = $( $dials[dial_i] );
                this.draw($dial);
            }
        },

        draw: function drawFn ($dial) {

            var width = $dial.width(),
                height = $dial.height(),
                $svg = $('<svg />').attr({
                    "width": width,
                    "height": height
                }),
                circle = $('<circle />').attr({
                    "cx": 0,
                    "cy": 0,
                    "r": width / 2,
                    "fill": "red"
                });

            $svg.append(circle);
            $dial.append($svg);
            
        }
    }
};

app.fns.init();