Building the Blog: Day 5
We’re going to use jQuery for its CSS selector-like interface in targeting elements. I’ve chosen the slim build to keep page loading times faster than if using jQuery’s entire build since we’re only using it to target elements and not do things like making AJAX calls.
Enough of my babbling for now. Let’s write some code.
var colors = [ 'lavender', 'cornflowerblue', 'coral', 'mediumseagreen', 'indianred', 'tomato', 'gold', 'slategray', 'darkmagenta', 'crimson', 'darkorange', 'darkslateblue', 'turquoise' ];
We define an array of colors I’ve determined to look nice on the blog. I’ve chosen the word form of colors instead of hex values simply for convenience and readability.
var c = colors[Math.floor(Math.random() * colors.length)];
We’ll choose a random item from the array.
Math.random() will do here; we won’t need guaranteed equal probability from a Fisher–Yates shuffle.
$('main, nav').css('border-color', c); $('main').css('box-shadow', '10px 10px 0px ' + c); $('nav').css('box-shadow', '5px 5px 0px ' + c); $('a, .title').css('color', c);
And then we’ll select all the elements which should be colored and set them to this new color. Note on the
box-shadow selector we have to also include the size - there’s no way currently to just change the color.
And with that, our extravaganza comes to a close. I’ll put up a summary post with screenshots of the enhancements made each day for you Internet visitors who missed out but want to relive the experience.