Last active
March 14, 2016 15:55
-
-
Save Psyrixx/baff3de06069c635349f to your computer and use it in GitHub Desktop.
Dynamically Created and Controlled Progress Bars (HTML5 / JavaScript) - Demo: http://codepen.io/Psyrixx/pen/mVPGgL
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<title>Dynamically Created and Controlled Progress Bars</title> | |
<link rel="stylesheet" type="text/css" href="style.css" /> | |
<script src="progressBars.js"></script> | |
</head> | |
<body> | |
<div> | |
<button id="btnCreateProgressBar" data-number-of-bars="0"> | |
Create New Progress Bar | |
</button> | |
</div> | |
<div id="progressBarContainer"> | |
</div> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/******************************************************************************* | |
Technical Interview | |
Create Dynamic Progress Bars | |
Robert Sogomonian | |
Dec 18, 2015 | |
Updated: Mar 12, 2016 | |
1. Create a progress bar that fills from 0% - 100% in 5 seconds. | |
2. Add buttons that control starting, stopping, and resetting the progress bar. | |
3. Create button that handles creating new progress bars each time it is pressed. | |
Each progress bar should have its own control buttons, and no more than three | |
progress bars should be able to be created. | |
*******************************************************************************/ | |
(function(window, undefined){ | |
var btnCreateProgressBar = document.getElementById('btnCreateProgressBar'), | |
divProgressBarContainer = document.getElementById('progressBarContainer'), | |
maxAllowedProgressBars = 3; | |
// When button is clicked, add a new progress bar to the page | |
btnCreateProgressBar.addEventListener("click", function () { | |
var progressBarCount = btnCreateProgressBar.dataset.numberOfBars; | |
// If we don't already have a full set of progress bars | |
if (progressBarCount < maxAllowedProgressBars) { | |
var container = createNewProgressBar(progressBarCount); | |
// Create controls | |
addControl("start", progressBarCount, container); | |
addControl("stop", progressBarCount, container); | |
addControl("reload", progressBarCount, container); | |
// Increment count of progress bars currently on the page | |
btnCreateProgressBar.dataset.numberOfBars++; | |
} | |
}); | |
function createNewProgressBar(barId) { | |
// Create a new progress bar and container | |
var progressBarDiv = document.createElement("div"), | |
newProgressBar = document.createElement("progress"); | |
// Create a container and progress bar to add to the page | |
progressBarDiv.setAttribute("class", "progressContainer"); | |
newProgressBar.setAttribute("id", "progressBar" + barId); | |
newProgressBar.setAttribute("value", "0"); | |
newProgressBar.setAttribute("max", "100"); | |
// Append all new elements to the page | |
divProgressBarContainer.appendChild(progressBarDiv); | |
progressBarDiv.appendChild(newProgressBar); | |
return(progressBarDiv); | |
} | |
function addControl(type, barId, container) { | |
var controlElement = document.createElement("button"), | |
textLabel = ""; | |
controlElement.appendChild(document.createTextNode("")); | |
controlElement.setAttribute("id", type + barId); | |
controlElement.setAttribute("class", "barControl"); | |
container.appendChild(controlElement); | |
// Add Controller Text and Functionality Depending on Button Type | |
switch(type) { | |
case 'start': | |
controlElement.innerHTML = "►"; // Play Arrow | |
setStartController(controlElement, barId); | |
break; | |
case 'stop': | |
controlElement.innerHTML = "\u2016"; // Pause Bars | |
setStopController(controlElement, barId); | |
break; | |
case 'reload': | |
controlElement.innerHTML = "↻"; // Reset Circular Arrow | |
setResetController(controlElement, barId); | |
break; | |
} | |
} | |
function setStartController(element, id) { | |
var progressBar = document.getElementById("progressBar"+id), | |
startButton = document.getElementById("start"+id); | |
element.addEventListener("click", function() { | |
// If a timer has not already been set on this button | |
if(!startButton.dataset.timerId) { | |
startButton.dataset.timerId = setInterval(function() { | |
if(progressBar.value < progressBar.max) { | |
progressBar.value += 1; | |
} else { | |
clearInterval(startButton.dataset.timerId); | |
delete startButton.dataset.timerId; | |
} | |
}, 50); | |
} | |
}); | |
} | |
function setStopController(element, id) { | |
var startButton = document.getElementById("start"+id); | |
element.addEventListener("click", function() { | |
clearInterval(startButton.dataset.timerId); | |
delete startButton.dataset.timerId; | |
}); | |
} | |
function setResetController(element, id) { | |
var progressBar = document.getElementById("progressBar"+id), | |
startButton = document.getElementById("start"+id); | |
element.addEventListener("click", function() { | |
clearInterval(startButton.dataset.timerId); | |
delete startButton.dataset.timerId; | |
progressBar.value = 0; | |
}); | |
} | |
})(this); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.barControl { | |
width: 30px; | |
height: 20px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment