JSFiddle - React, Tailwind, and code Playground

by debi french

HTML

<div id="BG"> </div>

 <!--these are just items in the background, the food items will go on the blanket, and the words will go over the basket -->
<img src = "blanket.gif" id="blanket">

<img src = "basket.gif" id="basket">



<!--This is the start button, the game will begin when the player selects the button-->
<div><input type = "button" value = "Start Game" onClick = "start();" id="button1"></div>

 <!--this is where the score will be, each time the player gets a correct answer, 1 point will appear -->
<div id="scored">0</div>

 <!--this is the reset button, the game will reset when selected -->
<div><input type = "button" value = "Reset" onClick = "resetscore();" id="button2"></div>

 <!--this will make the items appear -->
<body onload="gameInit(5)">

<div id="gamePopup" class="popup-background"></div>

<div id="popupBox" class="popup-box" ></div>

<div id="gameScore" class="gameScore"></div>

<div id="gameFood" class="gameFood"></div>

<div id="gameColour" class="gameColour"></div>

</div>
</div>
</div>

</body>

CSS

/*This is the middle box on my assignment. It contains the cards, arrow, score, reset and the buttons*/
#BG
{background-color: #91cc76;
text-align: center;
width: 800px; 
height: 550px;
border-radius: 10px;
margin: auto;
border-style: solid;
border-width: 5px;}



#blanket
{
    position: relative;
	top: -450px;
	right: -250px;
}


#basket
{position: relative;
top: -450px;
right: -300px;}


#button1
{
	position: relative;
font-weight: bold;	
height: 40px;
text-align: center;
background-color: white;
font-size: 30px;
border width: 5px;
border-color: black;
border-radius: 5px;
top: -940px;
right: -250px;}

#scored
{position: relative;
	font-size: 30px;
	top: -970px;
right: -950px;}

}
#button2
{
position: relative;
font-weight: bold;	
height: 30px;
text-align: center;
background-color: white;
font-size: 20px;
border width: 5px;
border-color: black;
border-radius: 5px;
top: -940px;
right: -250px;}


#popup-background{
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
 z-index: 2;
}

#popup-box{
   position: absolute;
display: none;
    width: 340px;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
    padding: 42px 0px;
    border: 10px solid white;
    background: #E5C32F;
    text-align: center;
    font-family: "Myriad Pro", "helvetica", arial;
    font-size: 36px;
    z-index: 2;
    left:50%;
    margin-left: -180px;

}
#gameFood { 
  
  margin: 0 auto;
  text-align: center;
  padding: 0px 50px;
  padding-top: 100px;
}

#picnicFoods {display: inline-block; width:15%; margin: 2% 1%;  }

#picnicFoods img {width: 100%; cursor: pointer;}

#gameColour {
width: 700px;
height:300px;
margin: 0 auto;
  text-align: center;
  padding: 0px 50px;
  padding-top: 80px;
}

#picnicColours {display: inline-block; width:15%; margin: 0 1%;  }

#picnicColours img {width: 100%; cursor: pointer;}

JavaScript

var colours = ["Red", "Pink", "Purple", "Yellow", "Orange", "Green"];

//this function shuffles our country array
function shuffleArray(arr) {
  var currentIndex = arr.length, temporaryValue, randomIndex ;

 //while the array hasn't ended
  while (0 !== currentIndex) {

    //find a random element 
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = arr[currentIndex];
    arr[currentIndex] = arr[randomIndex];
    arr[randomIndex] = temporaryValue;
  }
//returns the shuffled array
  return arr;
}

//variables for the fuctionality of the game
var selectedFood;
var score;
var count;
var wordClicked;
var winningScore;


//the game init fuction will contain the difficulty level within it that will be passed when the function is called
function gameInit(difficulty) {

// calculates the number of correct 
 winningScore = Math.round(difficulty/3*2);

// the score variable
 score = 0;

//count = the difficulty
 count = difficulty;

// is the map clicked yes/no
 wordClicked = false;

//gamecountries and gamemaps
var gameFoods = [];
var gameColours = [];

// shuffles the existing countries array
gameFoods = shuffleArray(colours)
//cuts the number of countries to the difficulty level
gameFoods = gameFoods.slice(0, difficulty);

//loops through the countries and displays the attached flags
for (i = 0; i<gameFoods.length; i++ )
{
	document.getElementById('gameFoods').innerHTML += "<div class='picnicFoods' id='"  + gameFoods[i] + "' onclick='foodClick(this.id)'><img src='food/" + gameFoods[i] + ".gif'></div>" ;

}
//reshuffles the countries 
gameColours = shuffleArray(gameCountries)

//loops through the countries and displays the attached maps

for (j = 0; j<gameColours.length; j++ )
{
	document.getElementById('gameColour').innerHTML += "<div class='picnicColours' id='map-"  + gameColours[j] +  "' onclick='colourClick(this.id)'><img src='colours/" + gameColours[j] + ".gif'></div>"...