HTML/CSS - Memory Game😸🍥🎂🍰 Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width,initial-scale=1"/>
        <!--Cdn link-->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <body>
        <div class="loader-page">
            <h5>Loading...</h5>
            <div class="loader">
                <div class="progressbar">
                    <span class="bar1"></span>
                    <span class="bar2"></span>
                </div>
            </div>
        </div>
        <dialog id="modal-instructions">
            <div>
          <h2>Hi Lost Soul!</h2>  
          <p>Welcome to the memory game.
           </p>
          <h3>Make sure of the following :</h3>
          <ul>
              <li>Your connection is stable</li>
              <li>Re-run the program if you have issues the material might be still loading in, </li>
              <li>finish the game as quick as possible </li>

css

*{
    box-sizing:border-box ;
    margin:0;
    padding:0;
}
body{
    position:relative ;
    background: linear-gradient(to right , #d7d0fa, #d1b9f7);
    background: linear-gradient(to right , #d04ed6, #834d9b);
}
#start{
    font-size:20px;
    color: white;
    padding:10px 40px;
    border-radius:25px;
    background: linear-gradient(to right , #d04ed6, #834d9b);
    border:none;
}
iframe{
    display:none;
}
.loader-page{
    width:100vw;
    height:100vh;

window.onload=()=>{
    
    const loadPage = document.querySelector(".loader-page")
    
    loadPage.classList.add("loader-hidden")
    
    const cardArray = [
        {
            name : "cake",
            image :"https://i.imgur.com/UT4XR7s.png"
        },
        {
            name : "cat",
            image :"https://i.imgur.com/d1XAExq.png"
        },
        {
            name : "tea",
            image :"https://i.imgur.com/OWjgxyt.png"
        },
        {
            name : "cupcake",
            image :"https://i.imgur.com/a7gylSs.png"
        },
        {
            name : "racoon",
            image :"https://i.imgur.com/AI6p3Gr.png"
        },
        {

BROWSER

Console