index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Part 4</title>
  <style media="screen">
  img {
    position: absolute;
  }
  div {
    position: absolute;
    width: 500px;
    height: 500px;
  }
  #rightSide { left: 500px;
    border-left: 1px solid black
  }
  </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 type="text/javascript">
  //Variable declaration
  var numberOfFaces = 5;
  var theBody       = document.getElementsByTagName('body')[0];
  var theLeftSide   = document.getElementById('leftside');
  var theRightSide  = document.getElementById("rightSide");

  //Generates random position in pixels
  function randomPosition() {
    return Math.floor(Math.random() * (400 - 0)) + "px";;
  }

  function removeFaces(){
    while(theLeftSide.firstChild){
      theLeftSide.removeChild(theLeftSide.firstChild);
    }
    while(theRightSide.firstChild){
      theRightSide.removeChild(theRightSide.firstChild);
    }
  }

  //Generate faces
  function generateFaces() {
    for (var i = 1; i <= numberOfFaces; i++) {
      img            = document.createElement("img");
      img.src        = "smile.png";
      img.style.top  = randomPosition();
      img.style.left = randomPosition();
      theLeftSide.appendChild(img);
    }//end of the for loop
    leftSideImages = theLeftSide.cloneNode(true);
    leftSideImages.removeChild(leftSideImages.lastChild);
    theRightSide.appendChild(leftSideImages);
    //Adding event to the lastChild of the left-side
    theLeftSide.lastChild.onclick = function nextLevel(event) {
      event.stopPropagation();
      numberOfFaces += 5;
      removeFaces();
      generateFaces();
    };

    theBody.onclick = function gameOver() {
      alert("Game Over!");
      theBody.onclick = null;
      theLeftSide.lastChild.onclick = null;
    };
  }//generateFaces()


  </script>
</body>
</html>