JSFiddle - React, Tailwind, and code Playground

by vasi_32

HTML

<body onload="generateFaces()">
<h2>Matching Game</h2>
<p>Click on the extra smiling face on the left.</p>

<div id="leftSide"></div>
<div id="rightSide"></div>
</body>

CSS

imgg{
    position: absolute;

}

div{
    width: 500px;
    height: 500px;
    position: absolute;
}

#rightSide { left: 500px;
    border-left: 1px solid black }

JavaScript

var numberOfFaces =5 ;
    var theLeftSide = document.getElementById("leftSide");
      function generateFaces(){
       for(var i = 1 ; i <= numberOfFaces ; i++)
        {
            var imgg = document.createElement("img");
            imgg.src = "smile.png";
            imgg.style.height = "100px";
            imgg.style.width = "100px";
            imgg.style.top = Math.random() *400 ;
            imgg.style.left = Math.random() *400 ;
            theLeftSide.appendChild(imgg);
        }
    }