I created a random background code here.
3 different ways.
How do I know which is the better of the 3 codes I made?
The first 2 codes use an array, code 3 uses the least amount of code.
To see that it works, just click run in the jsfiddle.
Code 1
https://jsfiddle.net/a6hm3s5d/1/
(function randomBackground() {
const colors = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
const random = colors[Math.floor(Math.random() * colors.length)];
document.querySelector('body').classList.add('play' + random);
}());
Code 2
https://jsfiddle.net/r2c5Lf4v/1/
(function randomBackground() {
const colors = ['play1', 'play2', 'play3', 'play4',
'play5', 'play6', 'play7', 'play8', 'play9'];
const random = Math.floor(Math.random() * colors.length);
document.querySelector('body').classList.add(colors[random]);
}());
Code 3
https://jsfiddle.net/zhtkyjep/
(function randomBackground() {
const random = Math.floor(Math.random() * 8 + 1);
document.querySelector('body').classList.add('play' + random);
}());
css
.play1 {
--color-a: blue;
--color-b: black;
--color-c: red;
--color-d: black;
}
.play2 {
--color-a: purple;
--color-b: black;
--color-c: purple;
--color-d: black;
}
.play3 {
--color-a: green;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play4 {
--color-a: orange;
--color-b: black;
--color-c: orange;
--color-d: black;
}
.play5 {
--color-a: yellow;
--color-b: black;
--color-c: yellow;
--color-d: black;
}
.play6 {
--color-a: blue;
--color-b: black;
--color-c: orange;
--color-d: black;
}
.play7 {
--color-a: red;
--color-b: black;
--color-c: green;
--color-d: black;
}
.play8 {
--color-a: white;
--color-b: black;
--color-c: white;
--color-d: black;
}
.play9 {
--color-a: red;
--color-b: black;
--color-c: red;
--color-d: black;
}
