primeiro commit

emervzla · Nov 16, 2023 · 6957960 · 6957960
commit 6957960
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<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">
+    <link rel="stylesheet" href="style.css">
+    <title>DevClub JokerPó</title>
+</head>
+<body>
+
+    <div class="container">
+
+        <h1>JokerPó</h1>
+
+        <div class="buttons">
+            <button id="rock" onclick="playHuman('rock')">&#x1F44A;</button>
+            <button id="paper" onclick="playHuman('paper')">&#x1f590;</button>
+            <button id="scissors" onclick="playHuman('scissors')">&#x270c;</button>
+        </div>
+
+        <p class="result"></p>
+
+        <p class="your-score">Sua Pontuacao: <span id="human-score">0</span></p>
+        <p class="machine-score">Pontuacao de Alexa: <span id="machine-score">0</span></p>
+
+    </div>
+
+</body>
+<script src="script.js"></script>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,42 @@
+const result = document.querySelector(".result")
+const humanScore = document.querySelector("#human-score")
+const machineScore = document.querySelector("#machine-score")
+
+let humanScoreNumber = 0
+let machineScoreNumber = 0
+
+const playHuman = (humanChoise) => {
+    playTheGame (humanChoise, playMachine())
+}
+
+const playMachine = () => {
+    const choises = ["rock", "paper", "scissors"]
+    const randomNumber = Math.floor(Math.random() * 3)
+
+    return choises[randomNumber]
+}
+
+const playTheGame = (human, machine) => {
+    //console.log("Humano: " + human + " Maquina: " + machine)
+
+    if (human === machine) {
+        result.innerHTML = "Deu empate!"
+    }
+
+    else if ((human === "paper" && machine === "rock") || 
+    (human === "rock" && machine === "scissors") ||
+    (human === "scissors" && machine === "paper")) {
+
+        humanScoreNumber++
+        humanScore.innerHTML = humanScoreNumber
+
+        result.innerHTML = "Você ganhou!"
+    }
+    else {
+
+        machineScoreNumber++
+        machineScore.innerHTML = machineScoreNumber
+
+        result.innerHTML = "Você perdeu para a Alexa!"
+    }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background:  url("https://source.unsplash.com/1600x900/?landscape");
+    background-size: cover;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+}
+
+.container {
+    padding: 20px;
+    background-color: #FFFFFF;
+    border-radius: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.buttons {
+    margin: 25px 0;
+    display: flex;
+    gap: 35px;
+}
+
+button {
+    padding: 10px;
+    font-size: 40px;
+    cursor: pointer;
+    border: none;
+    border-radius: 10px;
+    transition: opacity 0.5s ease-in-out;
+}
+
+button:hover {
+    opacity: 0.7;
+}
+
+#rock {
+    background-color: #a200ff;
+}
+
+#paper {
+    background-color: #9ee01a;
+}
+
+#scissors {
+    background-color: #7dbeed;
+}
+
+p {
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.your-score span {
+    color: rgb(21, 64, 137);
+}
+
+.machine-score span {
+    color: rgb(224, 71, 15);
+}