Skip to content

Instantly share code, notes, and snippets.

@mandulaj
Forked from kentcdodds/fake.js
Created January 25, 2015 15:05
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mandulaj/3d74a96feeb49fbf04d2 to your computer and use it in GitHub Desktop.
Save mandulaj/3d74a96feeb49fbf04d2 to your computer and use it in GitHub Desktop.
var colors = [
'rgb(30, 104, 35)', 'rgb(68, 163, 64)', 'rgb(140, 198, 101)', 'rgb(214, 230, 133)', 'rgb(238, 238, 238)'
];
var days = $('.js-calendar-graph-svg').find('rect.day');
days.css({
fill: colors[4]
});
days.on('click', function(e) {
e.stopPropagation();
$this = $(this);
var colorIndex = ~~$this.data('nextColorIndex');
$this.css('fill', colors[colorIndex]);
colorIndex++;
if (colorIndex >= colors.length) {
colorIndex = 0;
}
$this.data('nextColorIndex', colorIndex);
});
// above code adds click handler to each square. Click the ones you want to change.
// Then call this randomize method to make it look less fake...
function randomize() {
days.each(function() {
var $this = $(this);
var fill = $this.css('fill');
var shouldChange = Math.random() > .65;
if (!shouldChange) return;
var colorIndex = 4;
if (fill === colors[4] || fill === colors[3]) {
colorIndex = Math.random() > .65 ? 3 : 4;
} else {
colorIndex = Math.random() > .65 ? Math.random() > .65 ? 2 : 1 : 0;
}
$this.css('fill', colors[colorIndex]);
});
}
@mandulaj
Copy link
Author

Changed the name of the container..
img

@arselzer
Copy link

👍 😀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment