Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
var randomColours = ['3c6dd1', 'd13c9e', '3cd19e'];
var currentColour = 0;
var currentDemoColour = 0;
$(function() {
$('.add-to-list button').click(function(e) {
addLI($(e.target).parent(), false);
});
$('.add-to-list li').each(function(index, item) {
bindNewLI($(item));
});
setInterval(function() {
addDemoURL();
}, 2000);
});
function bindNewLI(t) {
t.click(function(e) {
var target = $(e.target);
if (target.hasClass('no-hide')) return;
target.removeClass('show');
setTimeout(function() {
target.remove();
}, 500);
});
}
function addLI(container, isDemo) {
var newLI = $('<li>List item</li>');
if (!isDemo) {
var colour = randomColours[currentColour];
if (currentColour == randomColours.length - 1) {
currentColour = 0;
} else {
currentColour++;
}
} else {
var colour = randomColours[currentDemoColour];
if (currentDemoColour == randomColours.length - 1) {
currentDemoColour = 0;
} else {
currentDemoColour++;
}
}
newLI.css('background-color', '#' + colour);
bindNewLI(newLI);
container.find('ul').append(newLI);
setTimeout(function() {
if (!isDemo) {
newLI.addClass('show');
} else {
newLI.addClass('show no-hide');
}
}, 10);
}
function addDemoURL() {
var newLI = $('<li></li>');
addLI($('#demo'), true);
setTimeout(function() {
removeDemoItem();
}, 10);
}
function removeDemoItem() {
$('#demo').find('ul li:first-child').addClass('hide');
setTimeout(function() {
$('#demo').find('ul li:first-child').remove();
}, 1000);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.