DuelingOgres
New member
Hello! Brand new here just trying to figure some things out.
So I'm using a progress bar element to create a hit points bar that I can manually control for my liveplay D&D stream. I have it working after a fashion, but I would like to place another bar on top of the first to represent temporary hit points as well as potentially have all characters present on one html page instead of each having their own. I am by all accounts a hobbyist who knows just enough to be dangerous. Below is the code. All of it is in one html file, though I do know I can break the css and javascript into different files.
Any help would be appreciated!
So I'm using a progress bar element to create a hit points bar that I can manually control for my liveplay D&D stream. I have it working after a fashion, but I would like to place another bar on top of the first to represent temporary hit points as well as potentially have all characters present on one html page instead of each having their own. I am by all accounts a hobbyist who knows just enough to be dangerous. Below is the code. All of it is in one html file, though I do know I can break the css and javascript into different files.
Any help would be appreciated!
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Health</title>
<style>
body {
background: #e4e0e0;
font-family: sans-serif;
text-align: center;
}
/* Setting background of the progress bar to gradient colors */
.progress {
margin-left: 0px;
margin-top: 0px;
padding: 0px;
width: 100%;
max-width: 550px;
background: #330000;
background-image: linear-gradient(
to left,
rgb(221, 51, 88) -1% 8%,
rgb(255, 196, 0) 18% 33%,
yellow 42% 66%,
rgb(17, 235, 17) 80% 100%);
border: 2px solid #000;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(26, 26, 26, 0.705);
height: 20px;
overflow: hidden;
}
/* Setting progress bar to a flat color with no border radius to emulate
the gradient colors staying the same through the transition instead of
changing with the width of the bar if the gradient was in this block.*/
.progress .progress-bar {
height: 100%;
width: 0;
background: #330000;
transition: 0.23s;
}
label {
color: #eee;
margin-right: 10px;
font-size: 16px;
}
ul {
color: #eee;
padding-left: 200px;
margin-right: 225px;
font-size: 16px;
}
input, submit {
box-sizing: border-box;
width: 80px;
border-radius: 5px;
height: 25px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="progress">
<div id="download" class="progress-bar"></div>
</div>
<p><label>Type in your current HP total and your total HP.</label>
<br></p>
<input id="set-value">
<input id="submit" type="submit" value="Current">
<br>
<input id="set-value2">
<input id="submit" type="submit" value="Total">
<br>
<p><label><b>PC's HP Totals</b></label>
<ul>
<li>Taegen: 79</li>
<li>Xoasin: 79</li>
<li>Bucky: 81</li>
<li>Ptyrl: 75</li>
</ol>
<br></p>
</body>
<script>
let progressbar = document.getElementById("download");
function updateProgressBar(value) {
if (value >= 0 && value <= 100) {
progressbar.style.width = value + "%";
}
}
/* This is where the magic happens. The static number represents the total HP
(lets say 100 for simplicities sake) for a creature. The setvalue is the number
typed into the text input box (lets say 25). The nextvalue is the total HP
minus the setvalue (100 - 25 = 75). The value takes the nextvalue divided by the
total HP and multiplies it by 100 to give a percentage ((75 / 100 =.75) * 100 = 75%
I'm sure there's a more elegant way to do this, but with my limited knowledge, it
gets the job done! */
function handleInput() {
console.log("hello")
let setvalue = document.getElementById('set-value').value;
let totalHP = document.getElementById('set-value2').value;
nextvalue = totalHP - setvalue;
value = (nextvalue / totalHP ) * 100;
if (value > 100) {
value = 100;
document.getElementById('set-value').value = 100;
}
if (value < 0) {
value = 0;
document.getElementById('set-value').value = 0;
}
updateProgressBar(value);
}
document.getElementById("submit").addEventListener("click", handleInput, false);
</script>
</body>
</html>
