1

Hola estoy realizando un juego denominado Wordle y quiero saber como agregarle colores vivos a los mensajes de "ganaste" o "perdiste". Hasta ahora solo pude agregarle colores básicos y quiero que sea más llamativo y directamente desde el Javascript sin usar CSS. Mi código hasta ahora es así:

terminar("<h1><span style='color: green;'>¡GANASTE!😀</span></h1>");
terminar("<h1><span style='color: red;'>¡PERDISTE!😖</span></h1>");
2
  • que hace terminar() creo que hace falta codigo Commented el 20 abr. a las 15:08
  • No quieres usar CSS pero escribes color: green; que es código CSS. Irónico. Por cierto, te faltan comillas. Debería ser "green" y "red".
    – Mateo
    Commented el 20 abr. a las 15:26

1 respuesta 1

1

La forma moderna de hacerlo es usando CSS, tal como lo haces en tu ejemplo.

Puedes usar colores con nombre, pero también puedes indicar los colores en formato RGB, de la forma #RRGGBB, dónde RR es la cantidad de Rojo, GG la cantidad de verde y BB la cantidad de azul, todos en hexadecimal (las cantidades van de 0 a 255).

Por ejemplo, el color #f95959 tiene 249 de rojo, 89 de verde y 89 de azul, lo que da como resultado el color:

introducir la descripción de la imagen aquí

Aquí te dejo algunos ejemplos:

const miDiv = document.getElementById("colorido");

function agregarP(bgColor, textColor) {
  let nuevoP = document.createElement("p");
  nuevoP.style.backgroundColor = bgColor;
  nuevoP.style.color = textColor;
  nuevoP.innerHTML = 'Ganaste!!!';
  miDiv.appendChild(nuevoP);
}



agregarP("red", "black");
agregarP("blue", "white");
agregarP("#f95959", "#233142");
agregarP("#407088", "#ffb5b5");
agregarP("#00aaa0", "#fcf4d9");
agregarP("#facf5a", "#ff5959");
p {
line-height: 32px;
}
<div id="colorido"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.