colorgame.js

var numSquares=6;
var colors=generaterandomcolors(numSquares);
var squares=document.querySelectorAll(".square");
var pickedcolor=pickcolor();
var colorDisplay=document.getElementById("ishi");
var messagedisplay=document.querySelector("#message");
var h1=document.querySelector("h1");
var resetbutton=document.querySelector("#ishi2");
var easybtn=document.querySelector("#easybtn");
var hardbtn=document.querySelector("#hardbtn");
easybtn.addEventListener("click",function(){
  hardbtn.classList.remove("selected");
  easybtn.classList.add("selected");
  numSquares=3;
  colors=generaterandomcolors(numSquares);
  pickedcolor=pickcolor();
  colorDisplay.textContent=pickedcolor;
  for(var i=0;i<squares.length;i++){
  	if(colors[i]){
  		squares[i].style.backgroundColor=colors[i];
  	}
    else{
    	squares[i].style.display="none";
    }
  } 


});
hardbtn.addEventListener("click",function(){
  easybtn.classList.remove("selected");
  hardbtn.classList.add("selected");
  numSquares=6;
   colors=generaterandomcolors(numSquares);
  pickedcolor=pickcolor();
  colorDisplay.textContent=pickedcolor;
  for(var i=0;i<squares.length;i++){
  		squares[i].style.backgroundColor=colors[i];
    	squares[i].style.display="block";
  } 
});
resetbutton.addEventListener("click",function(){
 colors=generaterandomcolors(numSquares);
 pickedcolor=pickcolor();
 colorDisplay.textContent=pickedcolor; 
 this.textContent="New Colors"; 
 messagedisplay.textContent="";     
 for(var i=0;i<squares.length;i++){
 	squares[i].style.backgroundColor=colors[i];
 }
 h1.style.backgroundColor="steelblue"; 
 
});
colorDisplay.textContent=pickedcolor;

for(var i=0;i<squares.length;i++)
{
	squares[i].style.backgroundColor=colors[i];
    squares[i].addEventListener("click",function(){
        var clickedcolor=this.style.backgroundColor;
        if(clickedcolor===pickedcolor)
        {
        	messagedisplay.textContent="correct!!";
        	changecolor(pickedcolor);
        	h1.style.backgroundColor=clickedcolor;
        	resetbutton.textContent="Play Again?";
        }
        else{
        	this.style.backgroundColor="#232323";
        	messagedisplay.textContent="Try Again";

        }
    });
 }

    function changecolor(color){
    	for(var i=0;i<squares.length;i++)
    	{
    	 squares[i].style.backgroundColor=color;
    	}
    }
function pickcolor(){
	var random=Math.floor(Math.random()*colors.length);
	return colors[random];
}


function generaterandomcolors(num){
    var arr=[];
    for(var i=0;i<num;i++)
    {
    	arr.push(randomcolor());
    }
   return arr;
}
function randomcolor(){
	var r=Math.floor(Math.random()  * 256);
	var g=Math.floor(Math.random()  * 256);
	var b=Math.floor(Math.random()  * 256);
	return "rgb(" + r + ", " + g + ", " + b + ")";
	//return "rgb("+r+","+ g+","+ b+")";
}