<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="shortcut icon"
href="data:image/x-icon;,"
type="image/x-icon"
/>
<title>Document</title>
</head>
<body>
<div data-ctra>
<h1>
the value is
<span
data-ctra-var="counter:int:0:0-10"
data-ctra-on="increase:increase:amount"
>0</span
>
</h1>
<div>
<button type="button" data-ctra-on="click:increase:counter:1">
increase
</button>
<button
type="button"
data-ctra-on="click:increase:counter:$amount"
increase by <span data-ctra-var="amount:int:1:1-">2</span>
</div>
<button type="button" data-ctra-on="click:decrease:counter:1">
decrease
data-ctra-on="click:decrease:counter:$amount"
decrease by <span data-ctra-var="amount:int:1:1-">2</span>
<button type="button" data-ctra-on="click:multiply:counter:3">
multiply
data-ctra-on="click:divide:counter:$amount"
divide by <span data-ctra-var="amount:int:1:1-">2</span>
<div data-ctra="List" id="cards">
<template id="card-tpl">
<div data-ctra="Card">
<h1 data-ctra-var="title">Title</h1>
<p data-ctra-var="description">Description</p>
</template>
<button type="button" data-ctra-on="click:duplicate:prev:#cards">
Add Card
<script src="./main.js" type="module"></script>
</body>
</html>
