What's new
HTML Forums | An HTML and CSS Coding Community

Welcome to HTMLForums; home of web development discussion! Please sign in or register your free account to get involved. Once registered you will be able to connect with other members, send and receive private messages, reply to topics and create your very own. Our registration process is hassle-free and takes no time at all!

Progress Bar Assistance

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!
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>
 
I do have a version that is split into CSS and JS as well. The biggest problem is just not being able to add controls for the other bar. I've tried adding new elements with different IDs and it just seems to break either the color of the bar or the numerical inputs.
 
Back
Top