patternjavascriptMinor
Switching font and background color on button click
Viewed 0 times
clickbackgroundcolorswitchingfontbuttonand
Problem
I am currently building a web app where I need to randomly switch the font and color of a title (inside the
I wrote the following code that works perfectly, but I'm wondering if it could be optimized (or at least written in a more elegant way).
#content div) and the background of the page every time a button is clicked. I wrote the following code that works perfectly, but I'm wondering if it could be optimized (or at least written in a more elegant way).
// Switch font randomly
var font = ["lobster", "shadows", "oswald", "josefin", "gloria", "pacifico"];
var color = ["blue", "purple", "yellow", "red", "orange", "green"];
var background = ["bg-blue", "bg-purple", "bg-yellow", "bg-red", "bg-orange", "bg-green"];
$("#try-me").click(function() {
$("#content")
.hide()
.removeClass()
.addClass(font[Math.floor(Math.random()*font.length)]) // Font
.addClass(color[Math.floor(Math.random()*color.length)]) // Color
.fadeIn(600);
$("html")
.removeClass()
.addClass(background[Math.floor(Math.random()*background.length)]); // Background
});Solution
The repetition of getting a random font, color, background class cries to be extracted to a utility function:
I also agree with @MainMa about defining
Other than that, I think it's nice code!
Ensuring change
If you want to make sure that each font/color/background are different every time the user clicks on the button, then perhaps you can create another helper:
However, in the caller you will need to keep track of the previous picks of each. For example:
function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
$("#try-me").click(function() {
$("#content")
.hide()
.removeClass()
.addClass(pickRandom(font))
.addClass(pickRandom(color))
.fadeIn(600);
$("html")
.removeClass()
.addClass(pickRandom(background));
});I also agree with @MainMa about defining
background in terms of color.Other than that, I think it's nice code!
Ensuring change
If you want to make sure that each font/color/background are different every time the user clicks on the button, then perhaps you can create another helper:
function pickRandomExcept(arr, previous) {
while (true) {
var pick = arr[Math.floor(Math.random() * arr.length)];
if (pick != previous) {
return pick;
}
}
}However, in the caller you will need to keep track of the previous picks of each. For example:
var picked_color;
$("#try-me").click(function() {
picked_color = pickRandomExcept(color, picked_color);
$("#content")
.hide()
.removeClass()
.addClass(pickRandom(font))
.addClass(picked_color)
.fadeIn(600);Code Snippets
function pickRandom(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
$("#try-me").click(function() {
$("#content")
.hide()
.removeClass()
.addClass(pickRandom(font))
.addClass(pickRandom(color))
.fadeIn(600);
$("html")
.removeClass()
.addClass(pickRandom(background));
});function pickRandomExcept(arr, previous) {
while (true) {
var pick = arr[Math.floor(Math.random() * arr.length)];
if (pick != previous) {
return pick;
}
}
}var picked_color;
$("#try-me").click(function() {
picked_color = pickRandomExcept(color, picked_color);
$("#content")
.hide()
.removeClass()
.addClass(pickRandom(font))
.addClass(picked_color)
.fadeIn(600);Context
StackExchange Code Review Q#59795, answer score: 5
Revisions (0)
No revisions yet.