Skip to content

Instantly share code, notes, and snippets.

@chrisirhc
Last active Dec 17, 2015
Embed
What would you like to do?
Example 1
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<pre id="result"></pre>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/* global $ */
var BOXES = 3,
BOX_SIZE = 80,
boxReady = [],
boxCount = 0;
function loadBoxes() {
for (var i = 0; i < BOXES; i++) {
setTimeout(addBox, Math.random()*100, i);
}
}
function addBox(i) {
var $box = $('<div></div>')
.attr('id', 'box-' + boxCount)
.addClass('box')
.append(i+1)
.appendTo('body');
var $button = $('<button></button>')
.text('GO')
.appendTo($box);
$button
.on('click', function () {
if (i === 0 || boxReady[i - 1]) {
boxReady[i] = true;
$box.css('background', 'lightgreen');
if (i === BOXES - 1) {
$('#result').append('Horray!!\n');
}
} else {
$box.css('background', 'lightpink');
$('#result').append('Fail :(\n');
}
});
boxCount++;
}
loadBoxes();
.box {
display: inline-block;
border: 1px solid gray;
margin: 1px;
width: 80px;
height: 80px;
}
button {
display: block
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment