How to I change the color of my poll/progress bar?

Question

I have made a poll which displays two progress bars of the poll results (in percentages). I want to change the color of my progress/poll bars and center their position on the page. For centering the poll results, I tried to use 'text-align: center;' but it didn't work.

When the poll question is asked, it is centered on the page: but when the poll bar results appear, it is positioned to the left:

I have also tried to change the color of the progress bar but nothing works so far and it just stays blue.

If you have any solutions for centering the poll results or changing the color of the poll/progress bars please help :)

HTML:

<script>
                    function getVote(int) {
                    var xmlhttp=new XMLHttpRequest();
                    xmlhttp.onreadystatechange=function() {
                        if (this.readyState==4 && this.status==200) {
                        document.getElementById("poll").innerHTML=this.responseText;
                        }
                    }
                    xmlhttp.open("GET","poll/study_vote.php?vote="+int,true);
                    xmlhttp.send();
                    }
                </script>

                <div id="poll">
                    <h2>When studying, do you often find yourself procrastinating?</h2>
                    <form>
                    Yes: <input type="radio" name="vote" value="0" onclick="getVote(this.value)"><br>
                    No: <input type="radio" name="vote" value="1" onclick="getVote(this.value)">
                    </form>
                </div>
</script>

PHP:

<?php
$vote = $_REQUEST['vote'];

//get content of textfile
$filename = "poll_result.txt";
$content = file($filename);

//put content in array
$array = explode("||", $content[0]);
$yes = $array[0];
$no = $array[1];

if ($vote == 0) {
  $yes = $yes + 1;
}
if ($vote == 1) {
  $no = $no + 1;
}

//insert votes to txt file
$insertvote = $yes."||".$no;
$fp = fopen($filename,"w");
fputs($fp,$insertvote);
fclose($fp);

$yesProgress = 100*round($yes/($no+$yes),2);
$noProgress = 100*round($no/($no+$yes),2);

?>

<h2>Result:</h2>
<table>
    <tr>
        <td>Yes:</td>

        <td>
        <progress id="file" max="100" value="<?= $yesProgress ?>">
            <?= $yesProgress ?>
        </progress>
        <?= $yesProgress ?>%
        </td>
    </tr>
    <tr>
        <td>No:</td>
        <td>
        <progress id="file" max="100" value="<?= $noProgress ?>">
            <?= $noProgress ?>
        </progress>
        <?= $noProgress ?>%
        </td>
    </tr>
</table>

Your progress bars container needs to be set to `display:inline-block` before you can use `text-align:center`. — Wais Kamal, Jun 08 '20 at 10:05
https://stackoverflow.com/questions/40769403/how-can-i-change-the-color-of-a-progress-bar-using-javascript — Makwana Prahlad, Jun 08 '20 at 10:15

score 1 · Answer 1 · edited Jun 08 '20 at 13:08

Try to do :

<div class="div_center_table">
  <table>
    <tr>
      <td>Yes:</td>
      <td>
        <progress id="file" max="100" value="<?= $yesProgress ?>">
          <?= $yesProgress ?>
        </progress>
        <?= $yesProgress ?>%
      </td>
    </tr>
    <tr>
      <td>No:</td>
      <td>
        <progress id="file" max="100" value="<?= $noProgress ?>">
          <?= $noProgress ?>
        </progress>
        <?= $noProgress ?>%
      </td>
    </tr>
  </table>
</div>

And in your CSS file :

div_center_table{
  width: 50%;
  margin-left: 25%;
}

How to I change the color of my poll/progress bar?

1 Answers1