CODEWITHSUNDEEP
javascripthtmlcss
Sie. Theos
Sie. Theos

Reputation: 1

how to show a progress bar indicating the average

I'm building a web site, and want to show a progress bar that indicates the average of all the input numbers I am getting from a form in html.

I do have experience with javascript. I have my Html and css code but I need the javascript code. 

<div class="">
   <h3 class="card-header">Notes</h3>
      <div class="card-body">
         <div class="alert alert-warning" role="alert">
             Note: Please introduce the grade of the courses from 0 to 20
             </div>
             <div class="form-group row">
                <label class="col-12 col-sm-4 col-form-label text-sm-right">Math:</label>
                <div class="col-12 col-sm-8 col-lg-3">
                    <input id="math" type="number" required="" name="math" class="form-control" min="0" max="20">
                </div>
             </div>
             <div class="form-group row">
                 <label class="col-12 col-sm-4 col-form-label text-sm-right">history:</label>
                 <div class="col-12 col-sm-8 col-lg-3">
                     <input id="history" type="number" required="" name="history" class="form-control" min="0" max="20">
                 </div>
             </div>
             <div class="form-group row">
                 <label class="col-12 col-sm-4 col-form-label text-sm-right">biology:</label>
                 <div class="col-12 col-sm-8 col-lg-3">
                     <input id="biology" type="number" required="" name="biology" class="form-control" min="0" max="20">
                 </div>
             </div>
             <div class="form-group row">
                 <label class="col-12 col-sm-4 col-form-label text-sm-right">geography:</label>
                 <div class="col-12 col-sm-8 col-lg-3">
                     <input id="" type="number" required="" name="geography" class="form-control" min="0" max="20">
                 </div>
              </div>
              <input type="submit" value="Enviar" class="btn btn-space btn-primary" onclick="submitForms()">
          </div>
     </div>
</form>

How can I write the javascript code, so after submit the results the averages of the notes give me a horizontal progress bar with the corresponding note?

Can anyone help me?

Thanks in advance.

Upvotes: 0

Views: 274

Answers (1)

Sudhir Sapkal
Sudhir Sapkal

Reputation: 1038

You need to use Bootstraps progress bar classes to show this 

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

You can try this out here https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_progressbar1&stacked=h

Upvotes: 2

Related Questions