Create a random combination with CSS classes using javascript or jquery

Question

Hey, guys, I was wondering if anyone knows a solution for how to make a combination of css classes using javascript or jquery?

What I would like is to have links and each of these links have several color classes, and after selecting some of the links generate a page with a bg of one color and the font was another, which is always random for each person who click, as this will be used as a theme for managed websites that I am building.

Answer 1

You can draw the classes from an array. Or rather, two, one for BG and one for the source, so you get some contrast. Example:

var classesBg = ['fundoAzul', 'fundoVermelho', 'fundoVerde'];
var classesTexto = ['textoBranco', 'textoPreto', 'textoCinza'];
function sorteia(arr) {
    var rand = Math.floor(Math.random() * arr.length);
    return arr[rand];
}

document.getElementById('troca').addEventListener('click', function() {
    var classeBg = sorteia(classesBg);
    var classeTexto = sorteia(classesTexto);
    var elemento = document.getElementById('conteudo');
    elemento.className = classeBg + ' ' + classeTexto;
}); 

.fundoAzul {
  background-color: #0000ff;
}
.fundoVermelho {
  background-color: #ff0000;
}
.fundoVerde {
  background-color: #00ff00;
}
.textoBranco {
  color: #ffffff;
}
.textoPreto {
  color: #000000;
}
.textoCinza {
  color: #aaaaaa;
}

<p id="conteudo">Texto texto texto</p>
<button type="button" id="troca">trocar</button>