mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
62 lines
1.6 KiB
HTML
62 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Meter showcase</title>
|
|
<style>
|
|
meter {
|
|
width: 50%;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>
|
|
<button onclick="randomize()">Randomize meters</button>
|
|
</p>
|
|
|
|
<p>Basic meters:</p>
|
|
<p>
|
|
<meter value="0.5">0.5%<br>50%<br>that is a half</meter>
|
|
</p>
|
|
<p>
|
|
<meter value="4" max="10">4/10</meter>
|
|
</p>
|
|
<p>
|
|
<meter min="1" value="3" max="10">grade 3</meter>
|
|
</p>
|
|
|
|
<p>Meters with values outside <code>low</code> and <code>high</code></p>
|
|
<p>
|
|
<meter low="4" value="1" max="10"></meter>
|
|
</p>
|
|
<p>
|
|
<meter low="4" high="6" value="9" max="10"></meter>
|
|
</p>
|
|
|
|
<p>Meters with values outside <code>optimum</code></p>
|
|
<p>
|
|
<meter low="4" high="6" value="9" max="10" optimum="1"></meter>
|
|
</p>
|
|
|
|
<p>Meters with values outside <code>min</code> and <code>max</code></p>
|
|
<p>
|
|
<meter low="4" value="1" high="5" min="3" max="10" optimum="10"></meter>
|
|
</p>
|
|
<p>
|
|
<meter low="4" value="3" high="5" min="1" max="2" optimum="10"></meter>
|
|
</p>
|
|
|
|
<script>
|
|
function rand(min, max) {
|
|
return Math.floor(Math.random() * (max - min + 1)) + min;
|
|
}
|
|
function randomize() {
|
|
for (const meter of Array.from(document.querySelectorAll('meter'))) {
|
|
meter.value = rand(meter.min * 10, meter.max * 10) / 10;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|