Skip to content

Instantly share code, notes, and snippets.

@adrianalonso

adrianalonso/index.html

Created May 19, 2021 18:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save adrianalonso/7a5365bf5b746a191cbaf00e5b52c302 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adrianalonso/7a5365bf5b746a191cbaf00e5b52c302 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adrianalonso created this gist May 19, 2021.
    23 changes: 23 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="style.css" rel="stylesheet" />
    </head>
    <body>
    <h1>Piedra papel o tijera</h1>

    <section class="choices">
    <img class="piedra" src="images/piedra.jpeg" />
    <img class="papel" src="images/papel.jpeg" />
    <img class="tijeras" src="images/tijeras.jpeg" />

    <p id="resultado"></p>
    </section>

    <script src="index.js"></script>
    </body>
    </html>
    36 changes: 36 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    const choices = ["piedra", "papel", "tijeras"];

    const uiChoices = document.querySelectorAll(".choices img");
    const resultado = document.querySelector("#resultado");

    uiChoices.forEach((choice) => {
    choice.addEventListener("click", () => jugar(choice.className));
    });

    function jugar(choice) {
    const contrincanteNumeroAleatorio = parseInt(Math.random() * choices.length);
    const contricante = choices[contrincanteNumeroAleatorio];

    let ganado = -1;
    if (
    (contricante === "piedra" && choice === "papel") ||
    (contricante === "papel" && choice === "tijeras") ||
    (contricante === "tijeras" && choice === "piedra")
    ) {
    ganado = 1;
    }

    if (contricante === choice) {
    ganado = 0;
    }

    if (ganado > 0) {
    resultado.textContent =
    "El contrincante ha elegido " + contricante + " HAS GANADO";
    } else if (ganado < 0) {
    resultado.textContent =
    "El contrincante ha elegido " + contricante + " HAS PERDIDO";
    } else {
    resultado.textContent = "EMPATE";
    }
    }
    3 changes: 3 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    .choices img {
    max-width: 200px;
    }