Published
Edited
Jun 19, 2018
md`# Javascript Undo operation using Stack implemented with Array (Buttons)`
html`
<div>${createButton(stack)}</div>
<div>${createButton(stack)}</div>
<div>${createButton(stack)}</div>
<div>${createUndoButton(stack)}</div>
`
function color(){
return '#' +
getHex() +
getHex() +
getHex();
function getHex(){
var hex = Math.floor(Math.random() * (255 - 0)).toString(16);
return hex.length > 1 ? hex : '0' + hex;
}
}
stack = new Array
createButton = (stack) => {
var button = DOM.element('button');
button.textContent = 'button';
button.style.backgroundColor = '#FF0000';
button.style.color = 'white';
button.addEventListener('click', function(){
var hexColor = "#" +
button
.style
.backgroundColor
.match(/([0-9]+)/ig)
.map((i)=> Number(i).toString(16))
.map(function(hex){ return hex.length > 1 ? hex : "0" + hex})
.join("")
stack.push({button, hexColor});
button.style.backgroundColor = color();
});
return button;
}
createUndoButton = (stack) => {
var undoButton = DOM.element('button');
undoButton.textContent = 'undo';
undoButton.addEventListener('click', function(){
var i = stack.pop();
if(!i) return;
i.button.style.backgroundColor = i.hexColor;
})
return undoButton
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
