R0ck Paper Scissors

YouTube Tutorial

by trentHarlem

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rock Paper Scissors</title>
    <link href="style.css" rel="stylesheet">
    <!--file:///Users/mac/Documents/Code%20Projects/RockPaperScissors/index.html-->
</head>
<body id="body">

    <audio id="sound">
        <source src="sounds/airHorn.mp3"/>
    </audio>

    <audio id="rick">
        <source src="sounds/Rick-Roll-short.mp3"/>
    </audio>

    <header id="header">
        <h1 id="target">Rock Paper Scissors</h1>
    </header>

    <div id="gfy"></div>
    
    <div class="scoreboard">
        <div id="user" class="label">User</div>
        <div id="computer" class="label">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 id="chooch" class="choices">
        <div class="choice" id="Rock">
            <img src="images/rock.png" alt="">
        </div>
        <div class="choice" id="Paper">
            <img src="images/paper.png" alt="">
        </div>
        <div class="choice" id="Scissors">
            <img src="images/scissors.png" alt="">
        </div>
    
    <p id="action-message">Make Your Move.</p>
    </div>
</body>
<script src="app.js" charset="utf-8"></script>
<!-- <script src="sounds.js" type="text/javascript"></script> -->
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all 1s ease;
}

body{
    background-color: rgb(34, 30, 30);
}

header{
    background: white;
    padding: 20px;
}

header h1 {
    color: rgb(34, 30, 30);
    text-align: center;
    font: 2.5em Permanent Marker, sans-serif;
}

/* ============ score-board ============== */

.scoreboard {
    margin: 20px auto;
    border: 3px solid white;
    border-radius: 5px;
    text-align: center;
    width: 200px;
    color: white;
    font-size: 40px;
    padding: 15px 20px;
    font-family: Helvetica, sans-serif;
    position: relative;
    z-index: 0;
}

.label {
    background: red;
    color: white;
    font-size: 17px;
    padding: 2px 10px;
    font-family: Asap, sans-serif;
}

#user{
    position: absolute;
    top: 25px;
    left: -25px;
}

#computer{
    position: absolute;
    top: 25px;
    right: -25px;
}

/* ============ END  score-board ============== */


.result {
    font: bold 2em sans-serif;
    color: white;
    text-align: center;
    transition: all 2s ease;
}

.result p {
    margin: 20px auto;
    transition: all 2s ease;
}


/* ============ Rock Paper Scissors choices ============== */

#chooch {
    position: relative;
    z-index: 0;

}
.choices {
    margin: 50px 0;
    text-align: center;
}

.choice {
    display: inline-block;
    padding: 10px;
    margin: 0 20px;
    border: 3px solid white;
    border-radius: 50%;
    transition: all 0.2s ease;
    overflow: hidden;
}

.choice img {
    width: 100px;
    height: 100px;
}

.choice:hover, choice:focus, choice:active {
    cursor: pointer;
    background: dodgerblue;
}

#Rock {
    transform: rotate(-90deg);
}

#Rock:hover {
    transform: rotate(0deg);
}

#Paper {
    transform: rotate(-11deg);
}

#Paper:hover {
    transform: rotate(76deg);
}

#Scissors {
    transform: rotate(-75deg);
}

#Scissors:hover {
    transform:...

JavaScript

const mySound = document.getElementById("sound");
//const mySound = document.getElementById("rick");
const screen = document.getElementById("body");


document.getElementById("body").addEventListener("click", goFuckYourself);
//document.getElementById("body").addEventListener("click", goRickYourself);
document.addEventListener("click", go);

screen.addEventListener("click", function(){ mySound.play(); })

function goFuckYourself() {
    document.getElementById("target").innerHTML = ("Go Fuck Yourself");
    setTimeout(function() {
        document.getElementById("target").innerHTML = ("Rock Paper Scissors")
    },2400)
}

function go() {
    var poop = document.getElementById("gfy");
    poop.classList.add("goFuckYourself");
    setTimeout(function() { document.getElementById("gfy").classList.remove("goFuckYourself")}, 2400)
  }