Tips for displaying average progress using a progress bar

I'm in the process of creating a website and I would like to incorporate a progress bar that reflects the average of all the input numbers obtained from an HTML form.

Although I have some experience with JavaScript, I am currently in need of the JavaScript code for this specific functionality. 

<div class="">
   <h3 class="card-header">Notes</h3>
      <div class="card-body">
         <div class="alert alert-warning" role="alert">
             Note: Please enter grades for courses ranging 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="Submit" class="btn btn-space btn-primary" onclick="submitForms()">
          </div>
     </div>
</form>

Does anyone know how to write the JavaScript code so that upon submitting the results, a horizontal progress bar displaying the corresponding grade is generated based on the average of the scores?

Your assistance would be greatly appreciated.

Thank you in advance.

javascripthtmlcss

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Passing the onChange event in React to a nested child component

The code snippet below illustrates a scenario where the user encounters an error: import React from 'react'; import {render} from 'react-dom'; import Form from './form.jsx'; import axios from 'axios'; class App e ...

javascriptreactjs

How do I position a div right below a button using CSS and Jquery?

I have a button that, when hovered over, reveals a hidden div element. Is there a way to position this div directly beneath the button once it is revealed? <script type="text/javascript> $(document).ready(function(){ $(".plans").hover(function() ...

jquerycss

The HTML button navigates to an incorrect form

I have developed a program that includes a section for user comments and another section where logged-in users can input their own comments. When a logged-in user writes a comment, they will see a delete button next to it. Clicking on this button should t ...

phphtmlcss

Is it possible to use JavaScript to extract data associated with a specific h2 class on a webpage and then present that information?

Just curious if it's feasible, not looking for actual code. For instance, say I have an h2 class called "stock-number" with a value of #NC123456. Is it possible for JavaScript to access each instance of that class, retrieve data from a different datab ...

javascriptphphtml

HTML Alignment of Body and Div Elements

Setting the body and div to have the same height and width in my CSS: body { background-repeat: no-repeat; background-color: maroon; width: 1280px; height: 670px; margin: 0; } div { background-color: yellow; width: 1280px; height: 670px; } And here i ...

javascripthtmlcss

Definition for TypeScript for an individual JavaScript document

I am currently attempting to integrate an Ionic2 app within a Movilizer HTML5 view. To facilitate communication between the Movilizer container client and the Ionic2 app, it is crucial to incorporate a plugins/Movilizer.js file. The functionality of this f ...

javascripttypescriptmovilizer

Display the modal in Angular 8 only after receiving the response from submitting the form

I am encountering an issue where a pop-up is being displayed immediately upon clicking the submit button in Angular 8, before receiving a response. I would like the modal to only appear after obtaining the response. Can someone assist me with achieving thi ...

javascripthtmlangulartypescriptbootstrap-modal

Maintain consistent width of a page across different mobile devices

Currently, the content on my page does not have any viewport settings. It is simply using a 25% left and right margin for the entire content area. The issue arises when accessing the page from a mobile device, as the width adjusts to match the screen size ...

htmlcssresponsive-designviewport

Tips for eliminating repetitiveness in situations such as BEM modifiers

As I delved into using my own adaptation of the BEM methodology, I encountered a roadblock with modifiers for nested elements. The challenge at hand is changing the link color to red when product-desc-name has the mark class. The snippet below illustrat ...

cssbem

JavaScript and HTML have encountered an Uncaught TypeError: The property 'addEventListener' cannot be read because it is null

Having an issue here. Whenever I try to play sound from an image, I encounter an error. Uncaught TypeError: Cannot read property 'addEventListener' of null Here is my HTML code: <html> <head> <title>Music</title> < ...

javascripthtml

Struggling to create a line break within an SVG using the <tspan> element?

I have a pair of text lines that are wrapped in <tspan> tags. <tspan dy="-11.7890625">welcome</tspan> <tspan dy="16.8" x="285.75">text</tspan> I am trying to add a line break between them, but the <br> tag is not worki ...

javascripthtmlsvg

Comparing elements between two arrays in AngularJS

I am working with two arrays, the first one looks like this: $scope.blinkedBoxes=[3,4,1,2,..] There will be a maximum of 8 elements in this array, each element being a number from 1 to 4. The second array is as follows: $scope.clickedImages=[2,4,3,1,.. ...

javascriptangularjs

Adding Font Awesome icons to Bootstrap forms in WordPress (using CF7): A step-by-step guide

I am currently working on creating a custom WordPress theme using Bootstrap4. Everything is going smoothly, except for my contact form which appears like this: https://i.sstatic.net/iEysI.png Below is the code I have implemented: <for ...

htmlwordpressbootstrap-4font-awesomecontact-form-7

"Dimensions not specified for ngx-gallery - width and height parameters are needed

I have a question about customizing the height of ngx-gallery from this link: https://github.com/MurhafSousli/ngx-gallery. Currently, it has a fixed height value of 500px and adjusting the parent div height doesn't seem to have any effect. I was hopi ...

cssangularngx-gallery

Issue with Safari not displaying properly when using float:left and float:right (works fine in Firefox and Chrome)

My website has a left side column and a right side column, which display correctly in Firefox and Chrome. However, I am experiencing issues with Safari. Any insights on what could be causing this problem and why it only occurs in Safari? View the code on ...

htmlcssfirefoxgoogle-chromesafari

Simultaneously iterate through two recursive arrays (each containing another array) using JavaScript

I have two sets of arrays composed of objects, each of which may contain another set of arrays. How can I efficiently iterate through both arrays and compare them? interface items { name:string; subItems:items[]; value:string; } Array A=['parent1&ap ...

javascriptarraystypescriptloopsrecursion

Performing date comparison in JavaScript with varying date formats

My system includes a table that retrieves dates from an FTP location. On the user interface page, there is a form that gathers all details related to a specific FTP date. However, I am facing difficulties in comparing the FTP dates with those specified in ...

javascripthtmlnode.jsexpress

Retrieve the values of a function using the Firebase database

Hey, I'm in a bit of a pickle trying to retrieve the values returned by my function. I can see them just fine in the console log, but how do I actually access them when calling the function? function getprofile(useruid) { return firebase.database ...

javascriptfirebasefirebase-realtime-database

Disappearing Act: The vanishing act of Bootstrap 4 navbar

Everything works perfectly on a large screen, but disappears when resizing. I haven't specified a height property for the navbar. Here's the Fiddle. I know this question has been asked many times before, but I have yet to find a solution that act ...

htmlcsstwitter-bootstrapbootstrap-4

"What could be causing the click event to not function properly in the legend section

Can you explain why the click event is not working in the legend section? I am trying to display an alert when I click on the legend. Here is the code I am using: http://jsfiddle.net/qhq2ctqr/3/ $(function() { $('#container').highcharts( ...

javascriptjqueryhighcharts