Been putting together a 'fake progress bar', using the CSS Wizardry articles. Along with my best attempt at coding a sheetworker, but i'm really inexperienced with Javascipt. The intention is to make a progress bar with a 'current' and 'maximum' input box, where the code can always work percentages out to serve as the 'value' to change the bar itself. Really trying to work this out myself, but I just cannot make it function and I can't seem to send the value to the input, either. Any help would be greatly appreciated. Thank you.
<div class="sheet-container">
<input type='number' name='attr_toxcur' placeholder='current toxicity'>
<input type='number' name='attr_toxmax' placeholder='maximum toxicity'>
<input type="hidden" value='@{toxicv}' name="attr_toxbar" class="sheet-hidden sheet-toxbar">
<div class="sheet-toxbar"></div>
</div>
<script type="text/worker">
on("sheet:opened change:toxcur change:toxmax", function() {
getAttrs(["toxcur", "toxmax"], function(values) {
var maximum = values.toxcur;
var current = values.toxmax;
var toxpercent10 = (maximum = 10) / 100;
var toxpercent20 = (maximum = 20) / 100;
var toxpercent30 = (maximum = 30) / 100;
var toxpercent40 = (maximum = 40) / 100;
var toxpercent50 = (maximum = 50) / 100;
var toxpercent60 = (maximum = 60) / 100;
var toxpercent70 = (maximum = 70) / 100;
var toxpercent80 = (maximum = 80) / 100;
var toxpercent90 = (maximum = 90) / 100;
var toxpercent100 = (maximum = 100) / 100;
if (current <= toxpercent10) {
tvalue = "1";
} else if (current <= toxpercent20) {
tvalue = "2";
} else if (current <= toxpercent30) {
tvalue = "3";
} else if (current <= toxpercent40) {
tvalue = "4";
} else if (current <= toxpercent50) {
tvalue = "5";
} else if (current <= toxpercent60) {
tvalue = "6";
} else if (current <= toxpercent70) {
tvalue = "7";
} else if (current <= toxpercent80) {
tvalue = "8";
} else if (current <= toxpercent90) {
tvalue = "9";
} else if (current <= toxpercent100) {
tvalue = "10";
} else {
tvalue = "0";
}
setAttrs({
"tvalue":toxicv
});
});
});
</script>div.sheet-toxbar {
width: 230px;
height: 20px;
border: 2px solid black;
color: black;
font-size: 12px;
font-weight: bold;
text-align: center;
}
input.sheet-toxbar[value="0"] ~ div.sheet-toxbar {
background: white;
}
input.sheet-toxbar[value="0"] ~ div.sheet-toxbar:before {
content: "NO TOXICITY";
}
input.sheet-toxbar[value="1"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 90%, #255200 5%,#449600 95%, #adfc03 100%);
}
input.sheet-toxbar[value="2"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 80%, #255200 10%,#449600 90%, #adfc03 100%);
}
input.sheet-toxbar[value="3"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 70%, #255200 20%,#449600 80%, #adfc03 100%);
}
input.sheet-toxbar[value="4"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 60%, #255200 30%,#449600 70%, #adfc03 100%);
}
input.sheet-toxbar[value="5"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 50%, #255200 40%,#449600 60%, #adfc03 80%);
}
input.sheet-toxbar[value="5"] ~ div.sheet-toxbar:before {
content:"HALF TOXICITY";
}
input.sheet-toxbar[value="6"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 40%, #255200 40%,#449600 50%, #adfc03 70%);
}
input.sheet-toxbar[value="7"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 30%, #255200 30%,#449600 40%, #adfc03 60%);
}
input.sheet-toxbar[value="8"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 20%, #255200 20%,#449600 30%, #adfc03 50%);
}
input.sheet-toxbar[value="8"] ~ div.sheet-toxbar:before {
content:"HIGH TOXICITY";
}
input.sheet-toxbar[value="9"] ~ div.sheet-toxbar {
background: linear-gradient(to left, white 10%, #255200 10%,#449600 20%, #adfc03 40%);
}
input.sheet-toxbar[value="10"] ~ div.sheet-toxbar {
background: linear-gradient(to left, #255200 1%,#449600 10%, #adfc03 30%);
}
input.sheet-toxbar[value="10"] ~ div.sheet-toxbar:before {
content:"MAXIMUM TOXICITY - DANGER!";
}
