Skip to content

Instantly share code, notes, and snippets.

@richardhedges

richardhedges/index.html

Created April 19, 2015 12:21
Show Gist options
  • Save richardhedges/d64d871f685b0040fb4e to your computer and use it in GitHub Desktop.
Save richardhedges/d64d871f685b0040fb4e to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/locuzawohe
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html, body {
width: 100%;
height: 100%;
}
input[type=text] {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
padding: 5px 3px;
position: relative;
z-index: 500;
}
div#squares {
width: 100%;
height: 100%;
position: relative;
}
</style>
</head>
<body>
<input id="regenSquares" type="text" placeholder="150" />
<div id="squares"></div>
<script id="jsbin-javascript">
$(document).ready(function() {
generateSquares(150);
$('body').on('keyup', '#regenSquares', function() {
generateSquares($(this).val());
});
});
function generateSquares(squares) {
if (squares === '') {
squares = 150;
}
$('#squares').html('');
var largestSquare = 120;
var smallestSquare = 50;
var colours = [
'#53a1cc',
'#de5c5a',
'#ffe666',
'#c2e8ae',
'#946fb0'
];
squares = parseInt(squares);
// noprotect
for (var i = 0; i < squares; i++) {
var colour = colours[Math.floor((Math.random() * (colours.length - 1)) + 1)];
var squareSize = Math.floor((Math.random() * largestSquare) + smallestSquare);
var topPos = Math.floor((Math.random() * (parseInt($('#squares').height()) - squareSize)) + 0);
var leftPos = Math.floor((Math.random() * (parseInt($('#squares').width()) - squareSize)) + 0);
var opacity = Math.random() * 1;
console.log(opacity);
$('#squares').append('<div style="background-color:' + colour + ';width:' + squareSize + 'px;height:' + squareSize + 'px;position:absolute;top:' + topPos + 'px;left:' + leftPos + 'px;opacity:' + opacity + '" />');
}
}
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="regenSquares" type="text" placeholder="150" />
<div id="squares"></div>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html, body {
width: 100%;
height: 100%;
}
input[type=text] {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
padding: 5px 3px;
position: relative;
z-index: 500;
}
div#squares {
width: 100%;
height: 100%;
position: relative;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">$(document).ready(function() {
generateSquares(150);
$('body').on('keyup', '#regenSquares', function() {
generateSquares($(this).val());
});
});
function generateSquares(squares) {
if (squares === '') {
squares = 150;
}
$('#squares').html('');
var largestSquare = 120;
var smallestSquare = 50;
var colours = [
'#53a1cc',
'#de5c5a',
'#ffe666',
'#c2e8ae',
'#946fb0'
];
squares = parseInt(squares);
// noprotect
for (var i = 0; i < squares; i++) {
var colour = colours[Math.floor((Math.random() * (colours.length - 1)) + 1)];
var squareSize = Math.floor((Math.random() * largestSquare) + smallestSquare);
var topPos = Math.floor((Math.random() * (parseInt($('#squares').height()) - squareSize)) + 0);
var leftPos = Math.floor((Math.random() * (parseInt($('#squares').width()) - squareSize)) + 0);
var opacity = Math.random() * 1;
console.log(opacity);
$('#squares').append('<div style="background-color:' + colour + ';width:' + squareSize + 'px;height:' + squareSize + 'px;position:absolute;top:' + topPos + 'px;left:' + leftPos + 'px;opacity:' + opacity + '" />');
}
}</script></body>
</html>
Raw
jsbin.locuzawohe.css
html, body {
width: 100%;
height: 100%;
}
input[type=text] {
position: absolute;
top: 0;
left: 0;
font-size: 14px;
padding: 5px 3px;
position: relative;
z-index: 500;
}
div#squares {
width: 100%;
height: 100%;
position: relative;
}
Raw
jsbin.locuzawohe.js
$(document).ready(function() {
generateSquares(150);
$('body').on('keyup', '#regenSquares', function() {
generateSquares($(this).val());
});
});
function generateSquares(squares) {
if (squares === '') {
squares = 150;
}
$('#squares').html('');
var largestSquare = 120;
var smallestSquare = 50;
var colours = [
'#53a1cc',
'#de5c5a',
'#ffe666',
'#c2e8ae',
'#946fb0'
];
squares = parseInt(squares);
// noprotect
for (var i = 0; i < squares; i++) {
var colour = colours[Math.floor((Math.random() * (colours.length - 1)) + 1)];
var squareSize = Math.floor((Math.random() * largestSquare) + smallestSquare);
var topPos = Math.floor((Math.random() * (parseInt($('#squares').height()) - squareSize)) + 0);
var leftPos = Math.floor((Math.random() * (parseInt($('#squares').width()) - squareSize)) + 0);
var opacity = Math.random() * 1;
console.log(opacity);
$('#squares').append('<div style="background-color:' + colour + ';width:' + squareSize + 'px;height:' + squareSize + 'px;position:absolute;top:' + topPos + 'px;left:' + leftPos + 'px;opacity:' + opacity + '" />');
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment