matching-game.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Matching Game</title>
        <style>
            img {
            position: absolute;
            }
div {
    position: absolute;
    width: 500px;
    height: 500px;
}
#rightSide {
    left: 500px;
    border-left: 1px solid;
}
 </style>
    </head>
    <body onload = "generateFaces()">
         <h1>Matching Game</h1>
        <p>Click on the extra smiling face on the left</p>

<div id="leftSide"></div>
<div id="rightSide"></div>

<script>
let numberOfFaces =+ 5;
const theLeftSide = document.querySelector('#leftSide');
const theRightSide = document.querySelector('#rightSide');

function generateFaces() {
    for (let i = 0; i < numberOfFaces; i++) {
        const face = document.createElement('img')
        face.src = 'images/smile.png';
        let randomTop = Math.floor(Math.random()*400) +1;
        let randomLeft = Math.floor(Math.random()*400) +1;
        face.style.top = randomTop + 'px';
        face.style.left = randomLeft + 'px';
        theLeftSide.appendChild(face);
    }
    
const leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    theRightSide.appendChild(leftSideImages);

    theLeftSide.lastChild.addEventListener('click', nextLevel);
            document.body.addEventListener('click', gameOver);
        
            function gameOver() {
            alert('Game Over!')
            document.body.removeEventListener('click', gameOver);
            theLeftSide.lastChild.removeEventListener('click', nextLevel);
        }
        function nextLevel(event) {
            event.stopPropagation();
            numberOfFaces = 5;
            while (theLeftSide.firstChild) {
                theLeftSide.removeChild(theLeftSide.firstChild);
            }
            while (theRightSide.firstChild) {
                theRightSide.removeChild(theRightSide.firstChild);
            }
            
            generateFaces();
        
    }
}
    </script>
   </body>
  </html>