JSFiddle - React, Tailwind, and code Playground

by Iris Classon

HTML

<script src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div id="bg">
     <div class="value-number"data-bind="text:actualValue">0</div>
    <div data-bind="click:increase" id="paper"></div>

</div>

CSS

#bg {
    background-image: -moz-linear-gradient(bottom, #000 0%, #5d5d5d 100%);
    background-image: -o-linear-gradient(bottom, #000 0%, #5d5d5d 100%);
    background-image: -webkit-linear-gradient(bottom, #000 0%, #5d5d5d 100%);
    background-image: linear-gradient(bottom, #000 0%, #5d5d5d 100%);
        padding : 30px;
}
#paper {
    padding : 30px;
}


.value-number {
position: relative;
width: 200px;
height: 200px;
margin: 50px 0 200px;
text-align: center;
font: 140px/200px Arial, sans-serif;
color: #fff;
background: #C91F2C;
}

// from http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
.value-number:before {
	content: "";
position: absolute;
bottom: -140px;
right: 0;
border-width: 0 0 140px 140px;
border-style: solid;
border-color: transparent #C91F2C;
}

.value-number:after {
content: "";
position: absolute;
bottom: -140px;
right: 0px;
border-width: 0 0 140px 55px;
border-style: solid;
border-color: transparent #C91F2C;
}

JavaScript

function viewModel() {
    var self = this;
    self.actualValue = ko.observable(3);
    self.maxValue = ko.observable(5);
    self.increase = function () {
        if (self.actualValue() < self.maxValue()) {
            self.actualValue(self.actualValue() + 0.2);
            draw();
        }
    };

    self.slice = ko.computed(function () {
        var worth = 359.99 / self.maxValue();
        return worth * self.actualValue();
    });

    Raphael.fn.pie = function (cx, cy, r, a1, a2) {
        var d, flag = (a2 - a1) > 180;
        a1 = (a1 % 360) * Math.PI / 180;
        a2 = (a2 % 360) * Math.PI / 180;
        d = ["M", cx, cy, "l", r * Math.cos(a1), r * Math.sin(a1), "A", r, r, "0", +flag, "1", cx + r * Math.cos(a2), cy + r * Math.sin(a2), "z"];
        return this.path(d.join(' '));
    };

    paper = Raphael("paper", 300, 300);
    pies = paper.set();
    draw();

    function draw() {
        pies.push(paper.pie(150, 150, 140, 0, self.slice()).attr({
            fill: '80-#ffce00-#ff0000',
            opacity: 0.9,
            stroke: "#a50000",
                "stroke-width": 2
        }));
    }

}
ko.applyBindings(new viewModel());