Dejo todo.
css
Código:
body{
background-color: black;
transition: 0.1s;
}
body h3{
position: relative;
text-align: center;
margin-top: 50%;
font-size: 60px;
color: white;
}
body a{
color: white;
font-size: 25px;
font-style: normal;
text-decoration: none;
position: relative;
text-align: center;
display: block;
font-family: Arial, Helvetica, sans-serif;
transition: 0.1s;
}
a:active{
font-size: 80px;
transition: 0.3s;
}
HTML
Código:
<!DOCTYPE html>
<html>
<head>
<script src="javascript.js"></script>
<link rel="stylesheet" href="css/style.css">
<title>test</title>
</head>
<body>
<h3 id="counter">0</h3>
<a href="#" id="btn" onclick="clicked()">CLICK</a>
</body>
</html>
JS
Código:
const btn = document.getElementById('btn');
let numero = 0;
let aux10 = 0;
let fondos = ['#475c6c','#8a8583','#eed7a1','#cd8b62','#EF8677','#82B6D9','#A0E77D','#82BBEC',"#555ABD","#FFD06B","#93002B"]
let palabras = ['WoW','Epico',":)","Sigue","¡¡Click!!"]
function clicked(){
numero = numero + 1;
aux10 = aux10 + 1;
document.getElementById('counter').textContent = numero;
if (aux10 == 10){
aux10 = 0;
document.body.style.backgroundColor = fondos[Math.floor(Math.random() * fondos.length)];
document.title = palabras[Math.floor(Math.random() * palabras.length)];
}
}
Muchas gracias a todos!