Beginner
A volume bar with style and a CSS variable
The volume starts at 50. The - button (id="down") lowers it by 10 and the + button (id="up") raises it by 10, staying between 0 and 100.
Set the width of .bar__fill with the style prop to the volume as a percentage (for example 50%).
Set a CSS variable --bar-color on the .bar element through style: #e03131 when the volume is above 80, otherwise #0b7285. The CSS tab already uses var(--bar-color).
Show the number in the element with id="level".
What Check tests
- The fill starts at width
50% - The bar's
--bar-colorstarts as#0b7285 +raises the volume to 60- Above 80 the colour turns red (
#e03131) - It never goes above 100
-lowers it again
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.