Array of Ascending Progress Indicators

I currently have a progress bar that I'm happy with, but I want to enhance it by incorporating stacked progress bars. My aim is to have the progress bar behave in the following way when an option is selected:

https://i.stack.imgur.com/Pw9AH.png

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="AuditScriptAssesmentToolTest.css">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  <script src="~/Scripts/jquery-1.12.4.min.js"></script>

 
    <!--************************************************************************ -->
 
<!-- **********************************************************************************************************************************************-->

<div id="myProgress">
<progress id='progressBar' max='100' value='0' style="background-color: red; font-family: Impact, Charcoal, sans-serif;"" ><strong></strong></progress>
</div>
</div>

</head>

<body>

<main class="mainarea">

<br>
<br>
<br>
<!-- **********************************************1111111111111111111111111********************************************************-->

<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQOne" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>

<br>


<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQTwo" name="firstQOne" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
<br>
</div>
 
<!-- ********************************************222222222222222222222*********************************************************-->


<div id="criticalSecurityControlForms">
        <form action="/action_page.php">
            <select id="FirstQThree" name="firstQ" onchange="this.className=this.options[this.selectedIndex].className" class="whiteselected">
                <option class="whiteselected" disabled selected="selected" value="0">Select an Implementation</option>
                <option class="Not" value="0">Not Implemented</option>
                <option class="ImplementedOnSome" value="10">Implemented on Some Systems</option>
                <option class="All" value="20">Implemented on All Systems</option>
                <option class="AllAndAuto" value="30">Implemented and Automated on All Systems</option>
            </select>
        </form>
    </div>
</main>

  <script>
 function update_progressbar() {
    var opt1 = parseFloat( $('option:selected', $('#FirstQOne')).val() );
    var opt2 = parseFloat( $('option:selected', $('#FirstQTwo')).val() );
    var opt3 = parseFloat( $('option:selected', $('#FirstQThree')).val() );
    var opt4 = parseFloat( $('option:selected', $('#FirstQFour')).val() );
    var opt5 = parseFloat( $('option:selected', $('#FirstQFive')).val() );
    var opt6 = parseFloat( $('option:selected', $('#FirstQSix')).val() );
    var opt7 = parseFloat( $('option:selected', $('#FirstQSeven')).val() );
    var opt8 = parseFloat( $('option:selected', $('#FirstQEight')).val() );

      var total = isNaN( opt1 ) ? 0 : opt1;
    if ( !isNaN( opt2 ) ) {
        total += opt2;
    }
    if ( !isNaN( opt3 ) ) {
        total += opt3;
    }
    if ( !isNaN( opt4 ) ) {
        total += opt4;
    }
    if ( !isNaN( opt5 ) ) {
        total += opt5;
    }
    if ( !isNaN( opt6 ) ) {
        total += opt6;
    }
    if ( !isNaN( opt7 ) ) {
        total += opt7;
    }
    if ( !isNaN( opt8 ) ) {
        total += opt8;
    }
    $("#progressBar").prop( 'value', total )
}

$('#FirstQOne').on( 'change', update_progressbar );
$('#FirstQTwo').on( 'change', update_progressbar );
$('#FirstQThree').on( 'change', update_progressbar );
$('#FirstQFour').on( 'change', update_progressbar );
$('#FirstQFive').on( 'change', update_progressbar );
$('#FirstQSix').on( 'change', update_progressbar );
$('#FirstQSeven').on( 'change', update_progressbar );
$('#FirstQEight').on( 'change', update_progressbar );
  </script>
</body>
</html>

My main objective is to have the progress bar turn green when "Implemented and automated on all systems" is selected, followed by an orange bar if "Implemented on all systems" is chosen. If "Implemented on Some systems" is selected, a yellow bar should appear to the right of the orange one, and so on.

Thank you!

javascriptjqueryhtmlcss

Answer №1

Don't hesitate to check out the bootstrap implementation for multiple bars: multiple-bars

const [...barEls] = document.querySelectorAll(`.progress > .progress-bar`);// collection to array

function updateProgress(e) {
    let value = e.target.value;
    const maxVals = [33.33, 33.33, 33.33];// max width values of elements

    for (let i = 0; i < barEls.length; i++) {
        if (value > maxVals[i]) {
            updateElWidth(barEls[i], maxVals[i]);
            value -= maxVals[i];
        } else {
            updateElWidth(barEls[i], value);
            barEls.slice(i + 1).forEach(bar => updateElWidth(bar, 0));// nullify rest bars
            break;
        }
    }

    function updateElWidth(el, width) {
        el.style.width = `${width}%`;
    }
}

const rangeEl = document.getElementById(`range`);
[`input`, `change`].forEach(event => rangeEl.addEventListener(event, updateProgress));
.progress {
    height: 1.5rem;
    overflow: hidden;
    background-color: grey;
    border-radius: .25rem;
}
.progress-bar {
    display: inline-block;
    height: 100%;
}
.bg-weak {
    background-color: #d9534f;
}
.bg-good {
    background-color: #f0ad4e!important;
}
.bg-strong {
    background-color: #5cb85c!important;
}
<div id="progress" class="progress">
  <div class="progress-bar bg-weak" style="width: 33.33%"></div
  ><div class="progress-bar bg-good" style="width: 33.33%"></div
  ><div class="progress-bar bg-strong" style="width: 33.33%"></div>
</div>

<input type="range" id="range" min="0" max="100">

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

Leveraging an array of Elasticsearch documents using AngularJS

The query results are given below... { "took": 6, "timed_out": false, "_shards": { "total": 5, "successful": 5, "failed": 0 }, "hits": { "total": 45, "max_score": 0, "hits": [] }, "aggregations": { ...

htmlarraysangularjselasticsearchiteration

Are there any comparable features in Angular 8 to Angular 1's $filter('orderBy') function?

Just starting out with Angular and curious about the alternative for $filter('orderBy') that is used in an AngularJS controller. AngularJS example: $scope.itemsSorted = $filter('orderBy')($scope.newFilteredData, 'page_index&apos ...

javascriptangulartypescriptangular8

Run a JavaScript function on a webpage loaded through an AJAX response

I need to trigger a function through an AJAX request sent from the server. The function itself is not located on the calling page. Here's an example of what I am trying to achieve: 1. PHP script being called: <script> function execute() { ...

phpjavascriptajax

On mobile devices, a height of 100vh exceeds the visible screen area

Struggling to cover the entire visible part of the browser window using 100vh due to issues on certain devices and mobile browsers. For example, in Safari, the URL section hides a top part, and similarly on some Android devices using Chrome. https://i.stac ...

cssmobileresponsive-designfullscreen

Generating HTML widgets dynamically with jQuery: A step-by-step guide

Looking for a way to display an interactive widget on your page while allowing users to generate multiple instances and interact with them simultaneously? Imagine having a widget like this: <div id="my_widget"> <script type="text/javascript" ...

javascriptjqueryhtmlajaxwidget

Router Express, parsing the body, and submitting a POST request

I have been experimenting with express.Router to organize my routes and testing post requests using Postman. I noticed that when I make a post request to /test without using router body-parser, everything works fine and I can view the body content. However ...

javascriptnode.jsapiexpressexpress-router

Setting nodeIntegration to false led to an Uncaught ReferenceError: require is not defined when trying to access Object.url (external "url":1) in the electron-react-typescript environment

After setting nodeIntegration to false, I encountered the following error message: "Uncaught ReferenceError: require is not defined at Object.url (external 'url': 1)". Upon clicking on the link referring to "external 'url': 1", it led ...

javascriptreactjstypescriptwebpackelectron

Double request being sent by Ajax

Sample URL: Note: Please use the test sign in credentials: test/test for username/password. I am currently working on an AJAX request to fetch data from a database. The serverTime.php file appears to be functioning correctly as it is inserting and return ...

javascriptajaxxmlhttprequest

A guide to sending HTML emails with the Linux command line

I am in search of a solution to send emails in HTML format using only the Linux command line and the "mail" command. So far, I have tried the following: echo "To: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="99f8fdfdebfceae ...

htmllinuxemailsend

Using jQuery to handle click events and unbinding them

I am new to learning jQuery and not a software developer. In the code below, I have added the .green class to the .show_hide div when clicked, and I would like to remove the .green class from the .show_hide div when it is clicked again. Additionally, I w ...

jqueryonclickjquery-eventsunbind

convert the datatype of JSON values in JavaScript

I am facing an issue with my JSON object which contains timestamp values in string format. Here is a snippet of the data: var json = [{ "Time": "2017-08-17 16:35:28.000", "Value": "3.85" }, { "Time": ...

javascriptjsonhighcharts

Despite reaching a video readystate of 4 in HTML5, the video still hangs and does not play smoothly

Using html5, I am currently working with video and audio. I have encountered an issue where sometimes the video hangs even after its readyState === 4. The cause of this problem is unclear to me. I aim for a solution where if the video's readyState = ...

javascripthtmljqueryangularhtml5-video

Can someone guide me on how to retrieve data from a MUI table within a React project

Currently, I am retrieving data from a server in JSON format and looping through this data to display specific information. Everything is functioning as expected, but I'm encountering an issue with a Popover element that contains items with onclick ev ...

javascripthtmlreactjsjsonmaterial-ui

Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

Is there a way to select the paragraph tag for B (or C) by utilizing nth-child or nth-of-type in Selenium WebDriver? <tr> <td> <p class="myClass">A</p> </td> </tr> <tr> <td> <p ...

cssseleniumselenium-webdrivercss-selectors

Using querySelector() to target specific divs by their classes while excluding any other classes

I am attempting to retrieve only the first divs while excluding the second ones: <div class="_5pcr userContentWrapper"> <div class="_5pcr userContentWrapper _4nef"> After researching, I discovered that the querySelector function should be abl ...

javascriptdom

Customize RequireJS dependencies for flexible dependency injection

Currently, I am faced with integrating a component that would greatly benefit from Dependency Injection (DI) into an existing framework where DI was not considered during its initial design. The configuration defining dependencies is sourced from a backend ...

javascriptdependency-injection

What is the best way to preserve an apostrophe within a variable in JavaScript without it being replaced?

How can I send the value of NewText in its original form from .cs code using an ajax call? **var NewText ="D'souza";** $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: " ...

javascript

What is the reason for the reconnect function not activating when manually reconnecting in Socket.IO?

After disconnecting the client from the node server using socket.disconnect(true);, I manually re-establish the connection on the client side with socket.open(). The issue arises when triggering socket.open(); the socket.on('reconnect', (attempt ...

javascriptnode.jssocket.io

Need to obtain the stack trace from the catch block in a request-p

Currently, I am utilizing the 'request-promise' library in my node-js application for making API calls. However, I am facing challenges in obtaining the correct call stack from the 'catch' function. Upon experimenting with it, I discove ...

javascriptnode.jspromisebluebirdes6-promise

Does the CSS overflow property affect the borders of an element?

Consider a situation where a "div" element has a border applied to it. When the overflow rule is set to 'hidden', any content that falls directly on the border will vanish. Is there a solution for this issue? It is crucial in my case to ensure t ...

htmlcss