Skip to content

Instantly share code, notes, and snippets.

@DannyJoris

DannyJoris/index.html

Created August 11, 2014 23:46
Show Gist options
  • Save DannyJoris/5a564f6c4540e90aff09 to your computer and use it in GitHub Desktop.
Save DannyJoris/5a564f6c4540e90aff09 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<style id="jsbin-css">
.container {
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: white;
border: 1px solid hotpink;
margin: 5px;
padding: 35px;
box-sizing: border-box;
font-family: sans-serif;
text-align: center;
font-size: 24px;
color: hotpink;
}
</style>
</head>
<body>
<button class="add-item">Add item</button>
<button class="remove-item">Remove item</button>
<button class="colour-items">Colour items</button>
<button class="reset-items">Reset items</button>
<div class="container">
<div class="item">1</div>
</div>
<script id="jsbin-javascript">
(function($) {
function Shenanigans() {
this.$container = $('.container');
this.$items = this.$container.find('.item');
// = equivalent of: this.$items = $('.item', this.$container);
// see: http://stackoverflow.com/a/16422612/477949
this.$buttonAdd = $('.add-item');
this.$buttonRemove = $('.remove-item');
this.$buttonColours = $('.colour-items');
this.$buttonReset = $('.reset-items');
this.colours = ['#001F3F', '#0074D9', '#7FDBFF', '#39CCCC', '#3D9970', '#2ECC40'];
this.bindAddItem();
this.bindRemoveItem();
this.bindColours();
this.bindReset();
}
// Add item
Shenanigans.prototype.addItem = function() {
var self = this;
// this.$container.append('<div class="item">' + (self.$items.length + 1) + '</div>');
// appendTo allows to use manipulations on the added element, rather than the container.
$('<div class="item">' + (self.$items.length + 1) + '</div>').appendTo(this.$container).hide().fadeIn(500);
// Re-select items to keep our count correct.
this.$items = this.$container.find('.item');
};
// Remove item
Shenanigans.prototype.removeItem = function() {
var self = this;
this.$container.find('.item').last().remove();
// Re-select items to keep our count correct.
this.$items = this.$container.find('.item');
};
// Binds add item to button
Shenanigans.prototype.bindAddItem = function() {
var self = this;
this.$buttonAdd.on('click', function() {
self.addItem();
});
};
// Binds remove item to button
Shenanigans.prototype.bindRemoveItem = function() {
var self = this;
this.$buttonRemove.on('click', function() {
self.removeItem();
});
};
// Binds colours
Shenanigans.prototype.bindColours = function() {
var self = this;
this.$buttonColours.on('click', function() {
self.$items.each(function(i, e) {
var text = $(this).text();
var color = self.colours[Math.floor(Math.random() * self.colours.length)];
// Filling with .html() should lead to heap overflows, but I can't detect it.
$(this).html('<span style="color:' + color + '">' + text + '</span>');
});
});
};
// Binds reset
Shenanigans.prototype.bindReset = function() {
var self = this;
this.$buttonReset.on('click', function() {
self.$items.each(function(i, e) {
var text = $(this).text();
$(this).html(text);
});
});
};
new Shenanigans();
})(jQuery);
</script>
</body>
</html>
Raw
jsbin.worigapa.css
.container {
}
.item {
display: inline-block;
width: 100px;
height: 100px;
background: white;
border: 1px solid hotpink;
margin: 5px;
padding: 35px;
box-sizing: border-box;
font-family: sans-serif;
text-align: center;
font-size: 24px;
color: hotpink;
}
Raw
jsbin.worigapa.js
(function($) {
function Shenanigans() {
this.$container = $('.container');
this.$items = this.$container.find('.item');
// = equivalent of: this.$items = $('.item', this.$container);
// see: http://stackoverflow.com/a/16422612/477949
this.$buttonAdd = $('.add-item');
this.$buttonRemove = $('.remove-item');
this.$buttonColours = $('.colour-items');
this.$buttonReset = $('.reset-items');
this.colours = ['#001F3F', '#0074D9', '#7FDBFF', '#39CCCC', '#3D9970', '#2ECC40'];
this.bindAddItem();
this.bindRemoveItem();
this.bindColours();
this.bindReset();
}
// Add item
Shenanigans.prototype.addItem = function() {
var self = this;
// this.$container.append('<div class="item">' + (self.$items.length + 1) + '</div>');
// appendTo allows to use manipulations on the added element, rather than the container.
$('<div class="item">' + (self.$items.length + 1) + '</div>').appendTo(this.$container).hide().fadeIn(500);
// Re-select items to keep our count correct.
this.$items = this.$container.find('.item');
};
// Remove item
Shenanigans.prototype.removeItem = function() {
var self = this;
this.$container.find('.item').last().remove();
// Re-select items to keep our count correct.
this.$items = this.$container.find('.item');
};
// Binds add item to button
Shenanigans.prototype.bindAddItem = function() {
var self = this;
this.$buttonAdd.on('click', function() {
self.addItem();
});
};
// Binds remove item to button
Shenanigans.prototype.bindRemoveItem = function() {
var self = this;
this.$buttonRemove.on('click', function() {
self.removeItem();
});
};
// Binds colours
Shenanigans.prototype.bindColours = function() {
var self = this;
this.$buttonColours.on('click', function() {
self.$items.each(function(i, e) {
var text = $(this).text();
var color = self.colours[Math.floor(Math.random() * self.colours.length)];
// Filling with .html() should lead to heap overflows, but I can't detect it.
$(this).html('<span style="color:' + color + '">' + text + '</span>');
});
});
};
// Binds reset
Shenanigans.prototype.bindReset = function() {
var self = this;
this.$buttonReset.on('click', function() {
self.$items.each(function(i, e) {
var text = $(this).text();
$(this).html(text);
});
});
};
new Shenanigans();
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment