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

What causes the variance in AJAX errors between IE and Chrome browsers?

Consider the code example provided below: <script> function xyz() { $.ajax({ type: "GET", url: "https://zx/xyz/uvw", timeout: 6000, dataType: "jsonp", ...

javascriptjqueryajaxerror-handling

When the class changes, V-for re-renders every component

Currently, I am in the process of changing classes for images based on their index using the moveIndex method and key events. While this works smoothly on computers, it seems to take significantly longer when implemented on TVs. The process runs smoothly w ...

javascripthtmlarraysperformancevue.js

Produce HTML content onto Google Drive Documents using JavaScript

Currently, I am working on a project that requires me to render the HTML form output in a new Google Docs document (a Word file, not a spreadsheet). Despite my efforts to find information online, all I can come across is related to spreadsheets. The main ...

javascriptjqueryajaxgoogle-drive-apigoogle-docs

Customize bootstrap cards to have a full height and add a bottom margin to enhance the

My current project involves creating a grid of Bootstrap 4 cards that need to meet specific requirements: All cards must be contained within a single class="row" div. This is because the number of cards is unknown and I want the layout to adjust well acr ...

cssheightbootstrap-4marginbootstrap-grid

Creating an import map using jspm2 can be done by following these steps

Currently, my goal is to utilize JSPM module loader to import javascript packages from npm instead of CDN and employ an offline package loader. Now, the next step involves incorporating an importmap script in order to successfully import modules like rea ...

javascriptnpmmodulenode-modulesjspm

Delayed execution not completely cancelled prior to component being unmounted

Alert: Avoid calling setState (or forceUpdate) on an unmounted component. While this won't cause any issues, it could suggest a memory problem in your application. Make sure to clean up all subscriptions and async tasks in the componentWillUnmount met ...

javascriptreactjs

What makes NPM thrive while submodules struggle with construction?

My experience with utilizing npm has often involved encountering seemingly meaningless errors - such as Visual Studio projects failing to build and build tools (e.g. python.exe / CL.exe) being unavailable on the command line. For instance, some packages t ...

javascriptnode.jsnpmkerberosnode-gyp

Make sure link opens in the same window/tab

Currently, I am utilizing the Open Link in Same Tab extension on Google Chrome. This extension can be found here. The purpose of this extension is to ensure that all links open in the same window/tab, which is necessary for touch screen kiosk left/right s ...

javascriptjqueryhtmlgoogle-chromekiosk

Send information from the textbox

I am trying to extract data from an input field and use it to create a QR code. While passing the value as text works, I am facing issues with passing the actual input value. Does anyone have a straightforward example of this process? import React, {Comp ...

javascriptreactjs

What are the steps for utilizing JQuery to send JSON data?

I need to send Json data to a web service located on the same server, but I am unsure of how to achieve this using JQuery. Here is the code I have attempted: $.ajax({ type: 'POST', url: '/form/', data: {"name":"jonas"}, ...

jqueryjsonajaxhttp-post

Achieving vertical alignment of button contents in Bootstrap 4

Incorporating bootstrap 4 and material icons into my app has presented a challenge. Specifically, the issue arises when I attempt to create a button that contains both text and an icon. .button-icon { vertical-align: middle; } <button class="button ...

htmlcsstwitter-bootstrapbootstrap-4google-material-icons

Explore one of the elements within a tuple

Can we simplify mapping a tuple element in TypeScript? I'm seeking an elegant way to abstract the following task const arr: [string, string][] = [['a', 'b'], ['c', 'd'], ['e', 'f']] const f ...

javascripttypescript

Executing a function without using the eval() function

I am currently working on a JavaScript code that relies heavily on the eval function. eval(myString) The value of myString is equal to myFunc(arg), and I would like to find a way to call myFunc directly instead of using eval. Unfortunately, I have no co ...

javascripteval

Exporting data from Datatables into Excel and converting a numerical column into a currency format

I need assistance with exporting numeric data to Excel. The specific numeric formatting requirements are as follows: Thousands grouping separator: "." Decimal point indicator: "," Number of decimal points to show: "0" ...

jqueryexceldatatables

Is Vue.js rendering jQuery obsolete?

Is it true that utilizing vue js will render the jQuery library unnecessary for experienced developers? I would appreciate any insight on this matter. ...

jqueryvue.js

the absence of any content being shown when using v-else

I'm currently delving into Vue.js and stumbled upon an unusual behavior that I couldn't find any information about on the Internet. For some reason, the DIV with v-else isn't rendering any content that I place inside it. I tried to underst ...

javascriptvue.jsvuejs3

How to truncate text in a cell of a Vuetify data table using CSS styling

Is there a way to truncate text in a cell using CSS without it wrapping around or overflowing? The ideal CSS code should include: .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } However, the current implementation caus ...

cssvue.jsvuetify.js

Modify the current link's <li> class

I am facing an issue with the code below which is supposed to change the class of li based on whether the browser URL matches the href attribute within that li. The current problem I am encountering is that the code changes the class for all li elements, ...

javascriptjquerycss

What could be causing the JSON.stringify() replacer function to fail?

Here is the code snippet I'm working with: http://jsfiddle.net/8tAyu/7/ var data = { "foundation": "Mozilla", "model": "box", "week": 45, "transport": { "week": 3 }, "month": 7 }; console.log(JSON.stringify(data, ...

javascriptjson

Encountered a problem with sending values using jQuery and JSON: Unexpected token 'b'

Can you explain why in this specific scenario there is an error showing up as SyntaxError: Unexpected token b listados:229? response = '{"name":"John"}'; var obj = jQuery.parseJSON(response); $.ajax({ url:urlform, dataType: ...

jqueryajaxjsonzend-framework2