initial commit

jonathanlandGit · Apr 28, 2019 · a402b4c · a402b4c
commit a402b4c
Show file tree

Hide file tree

Showing 7 changed files with 292 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/app.js b/app.js
@@ -0,0 +1,99 @@
+let userScore = 0;
+let computerScore = 0;
+const userScore_span = document.getElementById("user-score");
+const computerScore_span = document.getElementById("computer-score");
+const scoreBoard_div = document.querySelector(".score-board");
+const result_p = document.querySelector(".result > p");
+const rock_div = document.getElementById("r");
+const paper_div = document.getElementById("p");
+const scissors_div = document.getElementById("s");
+
+function getComputerChoice() 
+{
+    const choices = ['r', 'p', 's'];
+    const randomNumber = Math.floor(Math.random() * 3);
+    return choices[randomNumber];
+}
+
+function convertToWord(letter) 
+{
+    if (letter === "r") return "Rock";
+    if (letter === "p") return "Paper";
+    return "Scissors";
+}
+
+function win(userChoice, computerChoice) 
+{
+    const smallUserWord = "user".fontsize(3).sup();
+    const smallCompWord = "comp".fontsize(3).sup();
+    const userChoice_div = document.getElementById(userChoice);
+    userScore++;
+    userScore_span.innerHTML = userScore;
+    computerScore_span.innerHTML = computerScore;
+    result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord}.  You win!`
+    userChoice_div.classList.add('green-glow');
+    setTimeout(() => userChoice_div.classList.remove('green-glow'), 400);
+}
+
+function lose(userChoice, computerChoice) 
+{
+    const smallUserWord = "user".fontsize(3).sup();
+    const smallCompWord = "comp".fontsize(3).sup();
+    const userChoice_div = document.getElementById(userChoice);
+    computerScore++;
+    userScore_span.innerHTML = userScore;
+    computerScore_span.innerHTML = computerScore;
+    result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord}.  You lost...`
+    userChoice_div.classList.add('red-glow');
+    setTimeout(() => userChoice_div.classList.remove('red-glow'), 400);
+}
+
+function draw(userChoice, computerChoice) {
+    const smallUserWord = "user".fontsize(3).sup();
+    const smallCompWord = "comp".fontsize(3).sup();
+    const userChoice_div = document.getElementById(userChoice);
+    result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} equals ${convertToWord(computerChoice)}${smallCompWord}.  It's a draw.`
+    userChoice_div.classList.add('gray-glow');
+    setTimeout(() => userChoice_div.classList.remove('gray-glow'), 400);
+}
+
+function game(userChoice) {
+    const computerChoice = getComputerChoice();
+    switch (userChoice + computerChoice) {
+        case "rs":
+        case "pr":
+        case "sp":
+        win(userChoice, computerChoice);
+        break;
+        case "rp":
+        case "ps":
+        case "sr":
+        lose(userChoice, computerChoice);
+        break;
+        case "rr":
+        case "pp":
+        case "ss":
+        draw(userChoice, computerChoice);
+        break;
+
+    }
+}
+
+function main() {
+
+    rock_div.addEventListener('click', function() {
+        game("r");
+    })
+
+    paper_div.addEventListener('click', function() {
+        game("p");
+    })
+
+    scissors_div.addEventListener('click', function() {
+        game("s");
+    })
+}
+
+main();
+
+// Tutorial https://www.youtube.com/watch?v=jaVNP3nIAv0
diff --git a/images/paper.png b/images/paper.png
diff --git a/images/rock.png b/images/rock.png
diff --git a/images/scissors.png b/images/scissors.png
diff --git a/index.html b/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <link href="https://fonts.googleapis.com/css?family=Asap:400,500,700" rel="stylesheet">
+    <title>Rock Paper Scissors</title>
+</head>
+<body>
+    <header>
+        <h1>Rock Paper Scissors Game</h1>
+    </header>
+
+    <div class="score-board">
+        <div id="user-label" class="badge">user</div>
+        <div id="computer-label" class="badge">comp</div>
+        <span id="user-score">0</span>:<span id="computer-score">0</span>
+    </div>
+
+    <div class="result">
+        <p>Let's Play!</p>
+    </div>
+
+    <div class="choices">
+        <div class="choice" id="r">
+            <img src="images/rock.png" alt="">
+        </div>
+        <div class="choice" id="p">
+                <img src="images/paper.png" alt="">
+        </div>
+        <div class="choice" id="s">
+                <img src="images/scissors.png" alt="">
+        </div>
+    </div>
+    <p id="action-message">Make your move.</p>
+    <p id="author">Jonathan Land - freeCodeCamp.org JS WebApp tutorial</p>
+    <script src="app.js"></script>
+</body>
+</html>
+
diff --git a/style.css b/style.css
@@ -0,0 +1,151 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #292c34;
+}
+
+header {
+    background: darkgray;
+    padding: 20px;
+}
+
+header > h1 {
+    color: #24272e;
+    text-align: center;
+    font-family: Asap, sans-serif;
+}
+
+.score-board {
+    margin: 20px auto;
+    padding: 15px 20px;
+    border: 3px solid white;
+    border-radius: 4px;
+    text-align: center;
+    width: 200px;
+    color: white;
+    font-size: 46px;
+    font-family: Asap, sans-serif;
+    position: relative;
+}
+
+.badge {
+    background: #e25840;
+    color:white;
+    font-size: 14px;
+    padding: 2px 10px;
+    font-family: Asap, sans-serif;
+}
+
+#user-label {
+    position: absolute;
+    top: 30px;
+    left: -25px;
+}
+
+#computer-label {
+    position: absolute;
+    top: 30px;
+    right: -30px;
+}
+
+.result {
+    font-size: 40px;
+    color: white;
+}
+
+.result > p {
+    text-align: center;
+    font-weight: bold;
+    font-family: Asap, sans-serif;
+}
+
+.choices {
+    margin-top: 50px;
+    text-align: center;
+}
+
+.choice {
+    border: 4px solid white;
+    border-radius: 50%;
+    margin: 0 20px;
+    padding: 14px;
+    display: inline-block;
+    transition: all 0.3s ease;
+}
+
+.choice:hover {
+    cursor: pointer;
+    background: darkgray;
+}
+
+#action-message {
+    text-align: center;
+    color: white;
+    font-family: Asap, sans-serif;
+    font-weight: bold;
+    font-size: 20px;
+    margin-top: 35px;
+}
+
+#author {
+    text-align: center;
+    color:white;
+    font-family: Asap, sans-serif;
+    bottom: 0;
+    width: 100%;
+    margin-top: 50px;
+}
+
+.green-glow {
+    border: 4px solid #4dcc7d;
+    box-shadow: 0 0 10px #31b43a;
+}
+
+.red-glow {
+    border: 4px solid #fc121b;
+    box-shadow: 0 0 10px #d01115;
+}
+
+.gray-glow {
+    border: 4px solid #464647;
+    box-shadow: 0 0 10px #25292b;
+}
+
+/*Tutorial https://www.youtube.com/watch?v=jaVNP3nIAv0 */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+