Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

03 Convirtiendo texto en numero

Trabajo después de lección:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PUNTUACIÓN LIGA GATOS FC</title>

    <style>
      body {
        background-color: rgb(199, 255, 241);
        margin: 50px;
      }

      h1 {
        font-family: sans-serif;
        font-size: 3rem;
        background-color: rgb(40, 221, 146);
        border-radius: 10px;
        padding: 20px;
        color: rgb(16, 112, 59);
      }

      h3 {
        font-family: monospace;
        text-align: right;
        color: gray;
      }

      p {
        font-family: monospace;
        font-size: 1.5rem;
      }

      hr {
        border: 1px dotted rgb(0, 66, 28);
      }

      i {
        color: #ff3300;
        font-weight: 700;
      }
    </style>
  </head>

  <body>
    <h1>PUNTUACIÓN LIGA GATOS F.C.</h1>
    <h3>victorias: 3 pts | empates: 1 pt</h3>

    <hr />

    <script>
      function saltarLinea() {
        document.write("<br><hr></hr>");
      }

      function imprimir(frase) {
        document.write(frase);
        a;
        saltarLinea();
      }

      function puntos(victorias, empates) {
        return parseInt(victorias * 3 + empates);
      }

      let victorias = parseInt(
        prompt("Por favor, introduce la cantidad de victorias durante la liga")
      );
      let empates = parseInt(
        prompt("Por favor, introduce la cantidad de empates durante la liga")
      );

      puntosCalculados = puntos(victorias, empates);

      //   puntosTotales = (victorias * 3) + empates;
      //   puntosTotales = (victorias * 3) + (empates * 1);

      if (puntosCalculados >= 15) {
        alert("Continuemos así.");
      } else alert("¡¿Qué está pasando?!");

      imprimir(
        "<p><b>Los puntos del club actualmente son: </b><i>" +
          puntosCalculados +
          " </i></p>"
      );
    </script>
  </body>
</html>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

2 respuestas

Muy bonito resultado. Me podrias explicar sobre la etiqueta < i > y el estilo background-color: rgb(40, 221, 146), por favor.

Hola Shirley, buen día. Claro, te explico dentro de mis limitados conocimientos :)

En principio, gracias. Trato de mantener un esquema de colores diferente para diferenciar entre pruebas de código.

la etiqueta <i> es para generar texto en itálicas, inclinadas. Importante siempre cerrar, osea, <i> inicia el formato en itálicas y </i> lo cierra. Yo entre tanto concatenar tuve que encontrar el punto donde va cada etiqueta para que funcione dentro de los hilos, strings y no afecte partes donde se introducirán números o algún otro valor que fue llamado de alguna variable, función, resultado, etc.

"<p><b>Los puntos del club actualmente son: </b><i>" + puntosCalculados + "</i></p>"

Ahí por ejemplo, no me interesa que el texto "Los puntos del club actualmente son: " esté en itálicas, entonces puse el inicio hasta después del final de esa frase, y como quería que el resultado si lo estuviera, en italicas, abri al final de la frase asi se activa sobre el resultado de "puntosCalculados" y no cierro hasta despues de concatenar con el final, que como ves no hay nada, es un hilo vacío, pero dentro de ese hilo cerré italicas y parrafo.

Es cuestion de experimentar para llegar al resultado que uno quiere, y seguro hay maneras más optimizadas, pero mientras llego a eso, esto me sirve jejeje

Sobre el background-color:

puedes poner dentro de <style></style> (en medio de esas dos etiquetas a que quieres que afecte el estilo. En este caso lo use para el BODY, que es ps a como entiendo, el TODO.

Entonces body {background-color: red;} eso haría que el fondo de la página entera sea rojo, pero hay muchísimos colores que puedes encontrar aquí por ejemplo:

https://www.w3schools.com/colors/colors_hex.asp

los colores pueden ser en RGB, HEX o el mismo nombre que JS reconozca. En VS Code sale un selector estilo photoshop para arrastrar un selector y escoger un color y listo.

Lo mismo puedes aplicarlo a textos y demás cosas de JS. Te recomiendo ver videos de CSS.

Las opciones son enormes. Los resultados impresionantes, el mío es MUUUUY básico.

Saludos!