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