CodePen Embed - Color Game

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Color game</title>
    <link rel="stylesheet" href="game.css">
    <link rel="icon" href="https://cdn.pixabay.com/photo/2013/07/13/09/40/colors-155896_640.png" type="image/x-icon" />
   <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto|Open+Sans:300&display=swap"
        rel="stylesheet">
</head>

<body>
    <div id="backdrop">
        <h2>RGB Color Game</h2>
        <p>Guess the color:</p>
        <h1><span id="colorDisplay">RGB</span></h1>


        <button id="reset">NEW COLORS</button>
        <button class="mode" id="easyBtn">EASY</button>
        <button class="mode selected" id="hardBtn">HARD</button>

        <!-- feedback to user -->
        <div id="message"></div>

        <div id="container">
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
            <div class="square"></div>
        </div>
    </div>

    <script src="game.js"></script>

</body>

</html>

body {
     font-family: "Montserrat", sans-serif;
    background-image: url("https://i.imgur.com/AYTaKY9.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    width: 700px;
    margin: 0 auto;
    height: 680px;
    border-radius: 10px;
}

button {
    background: rgba(90, 101, 107, 0.5);
    color: #ffffff;
    font-size: 15px;
    padding: 6px;
    text-decoration: none;
    border: 0;
    transition: all .2s ease-in-out;
    border-radius: 4px;
    margin: 3px;



}


button:hover {
    background: rgba(148, 142, 236, 0.6);
    transform: scale(1.1);
  cursor: pointer;

}

/* removes Chrome "selected" blue outline */
button:focus {
    outline: 0;
}

#easyBtn,
#hardBtn {
    float: right;
}

#easyBtn {
    margin-right: 20%;
}

#reset {
    margin-left: 20%;
}

.selected {
    background:  rgba(35,35,35,0.5);
}

#colorDisplay {
    background: #373E42;
    padding: 10px;
    border-radius: 5px;
    text-transform: uppercase;
}

h1 {
    color: white;
    text-align: center;
    font-size: 2em;
    padding: 20px;
    margin-block-start: 0.2em;
    margin-block-end: 0.5em;
    text-transform: uppercase;
}

h2 {
    color: rgb(148, 142, 236);
    background: -webkit-linear-gradient(right, #63d9f3, #daa1f7, #f07f87);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    text-transform: uppercase;
    font-size: 2.2em;
    margin-block-start: 0.5em;
    margin-block-end: 0.2em;
    padding-top: 20px;
}

#message {
    color: white;
    font-size: 16px;
    height: 18px;
    display: block;
    text-align: center;
    margin-top: 9px;

}

p {
    color: rgb(148, 142, 236);
    background: -webkit-linear-gradient(right, #63d9f3, #daa1f7, #f07f87);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    font-size: 1.2em;
    padding: 0px;
    margin-block-start: 0.2em;
    margin-block-end: 0em;
    font-weight: bold;
}


.square {
    width: 30%;
    padding-bottom: 30%;
    float: left;
    margin: 1.66%;
    border-radius: 15px;
    transition: background-color 0.5s;
    -webkit-transition: background-color 0.5s;
    -moz-transition: background-color 0.5s;
}

#container {
    max-width: 600px;
    margin: 0 auto;
}

let numSquares = 6; //default nr of squares
let colors = [];
let pickedColor;
let squares = document.querySelectorAll(".square"); //selects all 6 square divs we have on the site
let colorDisplay = document.getElementById("colorDisplay"); //shows the right answer RGB code
let messageDisplay = document.querySelector("#message"); //shows "try again" or "correct!"
let h1 = document.querySelector("h1");
let resetButton = document.querySelector("#reset");
// Leo let win = document.querySelector("#win");
let modeButtons = document.querySelectorAll(".mode");

init();

function init() {
    setupModeButtons();
    setupSquares();
    reset();
}


function setupModeButtons() {
    for (let i = 0; i < modeButtons.length; i++) {
        modeButtons[i].addEventListener("click", function () {
            modeButtons[0].classList.remove("selected");
            modeButtons[1].classList.remove("selected");
            this.classList.add("selected");
            this.textContent === "EASY" ? numSquares = 3 : numSquares = 6;
            reset();
        });
    }
}

//BASIC LOGIC: looping through squares to apply color from colors array
function setupSquares() {
    for (let i = 0; i < squares.length; i++) {
        //add listener to click squares
        squares[i].addEventListener("click", function () {
            //grab color of chosen square, save it to a variable
            let clickedColor = this.style.backgroundColor;
            //compare clicked color to pickedColor, see if it matches
            if (clickedColor === pickedColor) {
                messageDisplay.textContent = "Correct!";
                //turns all other squares to the right answer color
                changeColors(pickedColor);
                //turns logo background right answer color
                colorDisplay.style.backgroundColor = pickedColor;
                resetButton.textContent = "PLAY AGAIN";
            } else {
                this.style.visibility = "hidden";
                messageDisplay.textContent = "Try again!";
            }
        })
    }
}

function reset() {
    for (let i = 0; i < squares.length; i++) {
        squares[i].style.visibility = "visible"
    }
    colors = generateRandomColors(numSquares);
    //pick new random color from array
    pickedColor = pickColor();
    //change colorDisplay 
    colorDisplay.textContent = pickedColor;
    resetButton.textContent = "NEW COLORS"
    colorDisplay.style.backgroundColor = "#373E42";
    messageDisplay.textContent = "";
    //change colors of squares
    for (let i = 0; i < squares.length; i++) {
        if (colors[i]) {
            squares[i].style.display = "block";
            squares[i].style.backgroundColor = colors[i]
        } else {
            //hides bottom 3 squares if there is no color generated
            squares[i].style.display = "none";
        }
    }
}

//reset button listener
resetButton.addEventListener("click", function () {
    reset();
})

//function to turn all squares to the right answer color
function changeColors(color) {
    for (let i = 0; i < squares.length; i++) {
        squares[i].style.visibility = "visible";
        squares[i].style.backgroundColor = color;
    }


}

//function to randomly choose right answer color
function pickColor() {
    let random = Math.floor(Math.random() * colors.length) //chooses the right answer randomly from the number of squares
    return colors[random];
}


//gives 1 random RGB format color
function randomColor() {
    //pick a red from 0 to 255
    let r = Math.floor(Math.random() * 256);
    //pick a green from 0 to 255
    let g = Math.floor(Math.random() * 256);
    //pick a blue from 0 to 255
    let b = Math.floor(Math.random() * 256);
    return "rgb(" + r + ", " + g + ", " + b + ")";
}

//function giving an array of random colors, depending on how many is needed (num= the nr of squares)
function generateRandomColors(num) {
    let arr = []
    //repeat num times (depending on how many squares we have)
    for (let i = 0; i < num; i++) {
        //get random color and push into array
        arr.push(randomColor());
    }
    //return that array
    return arr;
}

This Pen is owned by Anzelika on CodePen.

See more by @anzuj on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.