Playground
Experience the broad possibilities of Velo...
1. Digital Clock
Simple digital clock made with Velo By WIX
HOUR
MINUTES
SECONDS
PM
CODE SNIPPET
$w.onReady(function () {
showTime();
});
//DIGITAL CLOCK
function showTime() {
const today = new Date();
let hour = today.getHours();
let min = today.getMinutes();
let secs = today.getSeconds();
var meridian = "AM";
if (hour > 12) {
hour = hour - 12;
meridian = "PM";
}
min = timeDec(min);
secs = timeDec(secs);
hour = timeDec(hour);
$w("#hr").label = hour.toLocaleString();
$w("#min").label = min.toLocaleString();
$w("#sec").label = secs.toLocaleString();
$w("#mer").text = meridian;
setTimeout(showTime, 1000);
}
function timeDec(x) {
if (x < 10) { x = "0" + x }
return x;
}
2. Increment & Decrement
Increase and decrease number by 1
CODE SNIPPET
$w.onReady(function () {
//INCREMENT AND DECREMENT
$w("#addButton").onClick(() => {
addOne();
});
$w("#subtractButton").onClick(() => {
subtractOne();
});
var number1 = 0;
function addOne() {
number1++
$w("#input1").value = number1.toString();
}
function subtractOne() {
if (number1 > 0) {
number1--;
$w("#input1").value = number1.toString();
}
}
});
3. Progress Bar Increment & Decrement
Increase and decrease number by 20
0/100
CODE SNIPPET
$w.onReady(function () {
//INCREMENT AND DECREMENT
$w("#addButton").onClick(() => {
addOne();
});
$w("#subtractButton").onClick(() => {
subtractOne();
});
var number2 = 0;
function addOne() {
number2 += 20;
$w("#progressBar1").value = number2;
$w("#progressCounter").text = `${number2}/100`;
}
function subtractOne() {
if (number2 > 0) {
number2 -= 20;
$w("#progressBar1").value = number2;
$w("#progressCounter").text = `${number2}/100`;
}
}
});