This is the code that runs https://bandolier.learnjsthehardway.com/ for you to review. It uses the https://git.learnjsthehardway.com/learn-javascript-the-hard-way/bandolier-template to create the documentation for the project.
https://bandolier.learnjsthehardway.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
34 lines
691 B
34 lines
691 B
2 years ago
|
<script>
|
||
|
|
import ProgressMeter from "$/client/components/ProgressMeter.svelte";
|
||
|
|
let progress = 50;
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
progress {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
meter {
|
||
|
|
width: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
input {
|
||
|
|
width: 5ch;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<p>HTML has a default <b>progress</b> tag you can use and it looks like this:</p>
|
||
|
|
<progress value={ progress } max="100"></progress>
|
||
|
|
|
||
|
|
<p>There's also <b>meter</b> tags that look a little different.</p>
|
||
|
|
|
||
|
|
<meter value={ progress } max="100">
|
||
|
|
</meter>
|
||
|
|
|
||
|
|
<p>Since those tags are already taken, ours will be called...<b>progress-meter</b>!</p>
|
||
|
|
|
||
|
|
<ProgressMeter percent={ progress } />
|
||
|
|
<br/>
|
||
|
|
<input placeholder="Percent Progress" type="numeric" bind:value={ progress } />
|
||
|
|
|