After successfully creating an interactive progress bar that works perfectly in Google Chrome and surprisingly also in Safari without vendor prefixes, I encountered a roadblock when testing it on Firefox. The progress bar color reverts back to the default blue in Firefox despite my efforts to fix it using vendor prefixes. Now, I'm in a bit of a dilemma about which approach to take next. I've heard about feature queries but never used them before, so I'm unsure if this situation calls for their use or not. Ideally, the progress bar should be red until it reaches 100% and then change to green. Below is the current code snippet:
(function() {
var button, heading, initialValue, progressbar;
button = document.getElementById('btn');
progressbar = document.getElementById('progress-bar');
heading = document.getElementById('visual-progress');
initialValue = 'Quiz Progress';
button.addEventListener('click', function() {
var myValue;
if (progressbar.value >= 100) {
progressbar.value = 100;
} else {
progressbar.value += 25;
}
if (progressbar.value === 100) {
progressbar.classList.add('progress-100');
}
myValue = initialValue + ' ' + progressbar.value;
document.getElementById('visual-progress').innerHTML = myValue + '%';
return button.classList.add('button-active');
});
}).call(this);@import url("https://fonts.googleapis.com/css?family=Playfair+Display");
nav {
background: black;
height: 80px;
width: 100%;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 10px;
}
.progress-container {
padding: 10px 20px;
margin-top: 3em;
}
progress {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 20px;
}
progress::-webkit-progress-bar {
background-color: #ccc;
width: 100%;
}
progress::-moz-progress-bar {
background-color: #ccc;
width: 100%;
}
progress::-webkit-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
progress::-moz-progress-value {
background-color: #D22128 !important;
-webkit-transition: all .7s;
transition: all .7s;
}
.progress-100::-webkit-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
.progress-100::-moz-progress-value {
background-color: forestgreen !important;
-webkit-transition: all .5s;
transition: all .5s;
}
button {
margin-top: 2em;
background: transparent;
color: black;
border: 1px solid black;
padding: .7em 3em;
}
.button-active {
-webkit-transition: all .2s;
transition: all .2s;
background: black;
color: white;
}
.card-container {
max-width: 450px;
margin: 0 auto;
}
.success-message {
font-family: 'Playfair Display', serif;
text-align: center;
padding-bottom: 2em;
-webkit-animation: slideUp .5s;
animation: slideUp .5s;
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 6px 13px rgba(0, 0, 0, 0.22);
padding: 20px;
margin-top: 3em;
min-height: 150px;
}
.success-paragraph {
font-size: 14px;
}
@-webkit-keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideUp {
from {
-webkit-transform: translateY(500px);
transform: translateY(500px);
}
to {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}<body>
<nav></nav>
<div class='container'>
<div class='progress-container'>
<h1 class='ut-margin-v-sm' id='visual-progress'>Quiz Progress</h1>
<progress id='progress-bar' max='100' value='0'></progress>
<button id='btn'>Next</button>
</div>
</div>
<div class='card-container'>
<div id='output'></div>
</div>
</body>