<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Memory Game</title>
    <link rel="stylesheet" href="memorygame.css" />
    <script type="text/javascript" src="memorygame.js" defer></script>
</head>
<body>
    <section class="container">
        <section class="top-section">
            <h2>Memory Game</h2>
        </section>
        <section id="cards" class="cards-section">
            <table id="gamecard" class="buttons-container" >
            </table>
        </section>
        <section id="fin" class="finished" >
            <button class="mybutton" onclick="restart()"> Play again </button>
        </section>
    </section>
</body>
</html>
.cards-section {
    display: flex;
    justify-content: space-evenly;
    align-items: center;

}

.container {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.top-section {
    margin-bottom: 5px;
    text-align: center;
}

.buttons-container {
    justify-content: space-evenly;
    align-items: center;
    margin: auto;
}

table {
    width: 300px;
    height: 250px;
    table-layout: fixed;
}

th, td {
    width: 16.67%;
}


table.fixed {
    table-layout: fixed;
}



button {
    width: 30px;
    height: 30px;
}



.finished {
    display: none;
}

.mybutton {
    width: 100px;
    height: 40px;
}


var table = document.getElementById("gamecard");

let dict = [];
let cardsturned = 0;
let pairsturned = 0;
let card1 = 0;
let card2 = 0;

start();

function start() {
    dict = [];
    cardsturned = 0;
    pairsturned = 0;
    card1 = 0;
    card2 = 0;


    let table = document.getElementById("gamecard");
    table.innerHTML = "";

    for (let i = 0; i < 6; i++) {
        var tr = document.createElement("tr");
        table.appendChild(tr);
        for (let j = 0; j < 6; j++) {
            var td = document.createElement("td");
            let btn = document.createElement("button");
            let rdm = Math.floor(Math.random() * (18 - 1 + 1) + 1);
            while (dict[rdm] == 2) {
                rdm = Math.floor(Math.random() * (18 - 1 + 1) + 1);
            }
            if (dict[rdm] == 1) {
                dict[rdm]++;
            }
            else {
                dict[rdm] = 1;
            }
            btn.innerHTML = ""; 
            btn.id = rdm + "-" + dict[rdm]; 
        

            btn.onclick = function () { btn_click(this);};
            td.appendChild(btn);
            tr.appendChild(td);
            }


        }
}


function btn_click(e) {

    if (cardsturned == 0) {
        let num = getnumfromId(e.id);
        e.innerHTML = num;
        cardsturned++;
        card1 = e.id;
       
    }

    else if (cardsturned == 1) {
        setTimeout(timesup, 3000);
        let num = getnumfromId(e.id);
        e.innerHTML = num;
        card2 = e.id;
        cardsturned++;
    }


}

function getnumfromId(id) {
    let dash = id.indexOf("-");
    let num = id.substring(0, dash);
    return num;
}




function restart() {
    let fs = document.getElementById("fin");
    fs.style.display = "none";
    let cs = document.getElementById("cards");
    cs.style.display = "block";
    start();
}

function timesup() {
     cardsturned = 0;
    let c1id = getnumfromId(card1);
    let c2id = getnumfromId(card2);

    if (c1id == c2id) {
         let c1 = document.getElementById(card1);
        let c2 = document.getElementById(card2);
        c1.style.display = "none";
        c2.style.display = "none";
        pairsturned++;
        if (pairsturned == 18) {
             let cs = document.getElementById("cards");
            cs.style.display = "none";
            let fs = document.getElementById("fin");
            fs.style.display = "block";
        }
    }
    else {
        let c1 = document.getElementById(card1);
        let c2 = document.getElementById(card2);
        c1.innerHTML = "";
        c2.innerHTML = "";
    }

}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.