JSFiddle - React, Tailwind, and code Playground

by olegatilla

HTML

<script src="https://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<div class='liveExample'> 
    
    <div>You've clicked <span data-bind='text: numberOfClicks'>&nbsp;</span> times</div>
    <div>You've clicked <span data-bind='text: numberOfClicks2'>&nbsp;</span> times</div>
     
    <button data-bind='click: registerClick'>Click me</button>
     
    <div data-bind='visible: hasClickedTooManyTimes'>
        That's too many clicks! Please stop before you wear out your fingers.
        <button data-bind="click: resetClicks('numberOfClicks')">Reset clicks</button>
        <button data-bind="click: resetClicks('numberOfClicks2')">Reset clicks2</button>
    </div>
        
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }

JavaScript

var ClickCounterViewModel = function() {
    this.numberOfClicks = ko.observable(0);
    this.numberOfClicks2 = ko.observable(2);
 
    this.registerClick = function() {
        this.numberOfClicks(this.numberOfClicks() + 1);
        this.numberOfClicks2(this.numberOfClicks() + 1);
    };
 
    this.resetClicks = function(name) {
    debugger;
        this[name](0);
    };
 
    this.hasClickedTooManyTimes = ko.computed(function() {
        return this.numberOfClicks() >= 3;
        return this.numberOfClicks2() >= 3;
    }, this);
};
 
ko.applyBindings(new ClickCounterViewModel());