Py.Cafe

kolibril13/

alluring-hooderdooder

Create a Counter Widget with anywidget

DocsPricing
  • app.py
  • counter.css
  • counter.js
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import anywidget
import traitlets
from pathlib import Path

class CounterWidget(anywidget.AnyWidget):
    _esm = Path("counter.js")
    _css= Path("counter.css")
    count = traitlets.Int(0).tag(sync=True)

counter = CounterWidget()
counter.count = 42
counter

page = counter
counter.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function render({ model, el }) {
    let getCount = () => model.get("count");
    let button = document.createElement("button");
    button.classList.add("counter-button");
    button.innerHTML = `count is ${getCount()}`;

    button.addEventListener("click", () => {
        model.set("count", getCount() + 1);
        model.save_changes();
    });
    model.on("change:count", () => {
        button.innerHTML = `count is ${getCount()}`;
    });
    el.appendChild(button);
}
export default { render };
counter.css
1
2
3
4
5
6
7
8
9
10
11
12
.counter-button {
    background-color: #ea580c;
    width: 200px;
    height: 50px;
    font-size: 30px;
    margin: 200px
}
.counter-button:hover {
    background-color: #9a3412;
}