---
title: "Counter | LemonadeJS v2"
description: "LemonadeJS v2 archive. A basic counter reactive example using LemonadeJS."
source: https://lemonadejs.com/docs/v2/examples/counter/
---

Counter
=======

Simple counter using LemonadeJS.  
  

Example
-------

[See this example on codesandbox](https://codesandbox.io/s/lemonadejs-basic-reactive-counter-o9i0o)

  

### Source code

```html
<html>
<script src="https://cdn.jsdelivr.net/npm/lemonadejs@2/dist/lemonade.js"></script>
<div id='root'></div>
<script>
var Counter = (function() {
    var self = {
        count: 0
    };

    self.add = function() {
        self.count++;
    }

    self.remove = function() {
        self.count--;
    }

    self.reset = function(element) {
        self.count = 0;
    }

    var template = `
        <div class="counter">
            <h1>Count {{self.count}}</h1>
            <div>
                <button onclick="self.add()" class="jbutton dark">+</button>
                <button onclick="self.remove()" class="jbutton dark">-</button>
                <button onclick="self.reset()" class="jbutton dark">Reset</button>
            </div>
        </div>
    `;

    return lemonade.element(template, self);
});

lemonade.render(Counter, document.getElementById('root'));
</script>
</html>
```