Permalink
Browse files

jsFiddle -> GitHub. Now the cootie skews 1x for each letter in the co…

…lor name.
  • Loading branch information...
1 parent 007a6bc commit bc067a7993d30141f5c5dcdd518e0a394dfc5817 @mejarc committed Apr 26, 2012
Showing with 46 additions and 60 deletions.
  1. +46 −60 js/script.js
View
@@ -1,68 +1,54 @@
-//http://www.banane.com/2010/02/07/how-cootie-catcher-is-made/
-
-function moveCootie(times) { //blog: looping this is a nightmare/lesson in setInterval;
- var i = 0,
- $cootie = $('.cootie.container');
- console.log('times:' + times);
- console.log($cootie.hasClass('skew'));
- for (; i <= times; i++) {//how to get this to apply/reapply xnumber of times??
- if ($cootie.is('skew')) {
- $cootie.removeClass('skew');
- }
- else {
- $cootie.addClass('skew');
- }
- }
-
-
- // lt = setInterval(function() {
- // $cootie.toggleClass('skew');
- // }, 800);
- // rt = setInterval(function() {
- // $cootie.toggleClass('revskew');
- // }, 800);
- // start++;
-}
-
-function playCootie(whichColor) {
- var i, len = whichColor.length,
- li;
- //get letters in color name
- for (i = 0; i < len; i++) {
- li = '<li>' + whichColor[i] + '</li>';
- $('#progress').append(li);
- }
- moveCootie(len);
-}
+var cootie = {
+ play: function(whichColor) {
+ var i, $progress = $('#progress').empty(),
+ $cootie = $('.cootie.container'),
+ len = whichColor.length,
+ letters = whichColor.split(''),
+ li;
+ //get letters in color name; print each
+ $.each(letters, function(i, char) {
+ li = document.createElement('li');
+ $(li).text(char).hide().delay(800 * i).appendTo($progress).fadeOut('fast', function() {
+ $(this).fadeIn('slow');
+ if ($cootie.is('.skew')) {
+ $cootie.removeClass('skew');
+ }
+ else {
+ $cootie.addClass('skew');
+ }
+ });
-function drawCootie() {
- var rand, i = 0,
- fillColors = ['red', 'green', 'blue', 'yellow'];
+ });
+ },
+ draw: function() {
+ var rand, i = 0,
+ fillColors = ['red', 'green', 'blue', 'yellow'];
- console.log(i);
- for (; i < 4; i++) {
- $('<div class="cootie square">').prependTo($('.cootie.container'));
- }
- if ($('.cootie.container .square').length) {
- $('.cootie.container .square').each(function() {
- rand = Math.floor(Math.random() * fillColors.length);
- squareColor = fillColors.splice(rand, 1)[0];
- console.log(squareColor);
- $(this).addClass('target ' + squareColor);
- $(this).click(function(e) {
- var clr = e.target.className.split(' ').pop();
- //get last class name, since that has the color
- if ($(this).is('.target')) {
- playCootie(clr);
- $('.target').removeClass('target');
- }
+ for (; i < fillColors.length; i++) {
+ $('<div class="cootie square">').prependTo($('.cootie.container'));
+ }
+ if ($('.cootie.container .square').length) {
+ $('.cootie.container .square').each(function() {
+ rand = Math.floor(Math.random() * fillColors.length);
+ squareColor = fillColors.splice(rand, 1)[0];
+
+ $(this).addClass('target ' + squareColor);
+ $(this).click(function(e) {
+ var clr = e.target.className.split(' ').pop();
+ //get second CSS class name, since that has the color
+ if ($(this).is('.target')) {
+ cootie.play(clr);
+ // $('.target').removeClass('target');
+ }
+
+ });
});
-
- });
+ }
}
-}
+};
+
$(function() {
- drawCootie();
+ cootie.draw();
});

0 comments on commit bc067a7

Please sign in to comment.