lukenetti3/index.html

## index.html
<html>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700,700i" rel="stylesheet">
  <body>
    <audio id="greenSound">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></source>
    </audio>
    <audio id="redSound">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></source>
    </audio>
    <audio id="yellowSound">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></source>
    </audio>
    <audio id="blueSound">
        <source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></source>
    </audio>
    <h1>Simon Game</h1>
    <br>
    <hr class="style11">
    <div class="radio-inline">
      <label><input type="radio" name="optradio" id="opt1">on</label>
    </div>
    <div class="radio-inline">
      <label><input type="radio" name="optradio" id="opt2">off</label>
    </div>

    <button class="btn btn-primary">start</button>

    <div class="counter">
      <h4>Count: <span id="count"></span></h4>
    </div>
    <div class="container">
       <div class="row">
         <div class="green colors topLeft col-xs-6"><span>green</span></div>
         <div class="red colors topRight col-xs-6"><span>red</span></div>
       </div>
       <div class="row">
         <div class="yellow colors bottomLeft col-xs-6"><span>yellow</span></div>
         <div class="blue colors bottomRight col-xs-6"><span>blue</span></div>
       </div>
     </div>
  </body>
</html>

## script.js
// Initialize all variable
var randNum;
var compArr = [];
var userArr = [];
var colorsArr = ["green","red","yellow","blue"];
var selColor;
var audioGreen = $("#greenSound")[0];
var audioRed = $("#redSound")[0];
var audioYellow = $("#yellowSound")[0];
var audioBlue = $("#blueSound")[0];
var startButton = false;
var userTurn = false;
var max=1;

// Start can only be clicked if "on" is selected
  $("button").on("click", function() {
    if($("#opt1").is(":checked")) {
      startButton = true;
      // Once Start is clicked begin game
      fillCompArr();
      // This function contains the beginning of the game and will
      // go through the compArr
      startGame();
    } else { stopGame(); }
  });

// When off is selected
$("#opt2").click(function(){
    stopGame();
  });

// Fill computer array
function fillCompArr() {
  for(var i = 0; i < 20; i++) {
    selColor = grabColors();
    compArr.push(selColor);
  }
}

function grabColors() {
  var num = randNumGen();
  return colorsArr[num];
}

function randNumGen() {
  // Grabs number between 0-3
  randNum = Math.floor(Math.random() * 4);
  return randNum;
}

function startGame() {
  startButton = true;
  $("h1").text("Simon Game");
  $("#count").text(max.toString()).fadeIn();
   for (var j = 0; j < max; j++) {
      (function (j) {
        setTimeout(function () {
          playComp(compArr[j]);
        }, 1000*j);
      })(j);
    };
}

// Send user to soundFlash function and update array
$(".green").on("click", function() {
  if(startButton === true) {
    userArr.push($(this).text());
    soundFlashGreen();
    compareArrs();
  }
});

$(".red").on("click", function() {
  if(startButton === true) {
    userArr.push($(this).text());
    soundFlashRed();
    compareArrs();
  }
});

$(".yellow").on("click", function() {
  if(startButton === true) {
    userArr.push($(this).text());
    soundFlashYellow();
    compareArrs();
  }
});

$(".blue").on("click", function() {
  if(startButton === true) {
    userArr.push($(this).text());
    soundFlashBlue();
    compareArrs();
  }
});

function compareArrs() {
  for(var x = 0; x < userArr.length; x++) {
    if(userArr[x] === compArr[x]) {
      if(userArr.length === 20) {
        $("h1").text("You WIN!!!");
        stopGame();
        return;
      }
    } else {
      $("h1").fadeOut("slow", function() {
        $("h1").text("Try Again").fadeIn();
      });
      startButton = false;
      userArr=[];
      setTimeout(startGame,2500);
      //stopGame();
      //break;
      return;
    }
  }
  if(startButton === false) {
    return;
  }
  if(userArr.length === max) {
    userArr = [];
    max++;
    setTimeout(startGame,1500);
  }
}

// Determine next color in array and set off flash and sound
// ***Change selColor to position in array***
function playComp(color) {
  switch (color) {
    case "green":
      soundFlashGreen();
      break;
    case "red":
      soundFlashRed();
      break;
    case "yellow":
      soundFlashYellow();
      break;
    case "blue":
      soundFlashBlue();
  }
}

// These functions set off the sound and flash once the colors are
// pressed or computer selects them
function soundFlashGreen() {
  setTimeout(function(){
    audioGreen.load();
  },500);
  audioGreen.play();
  $(".green").addClass("highlightGreen");
  setTimeout(function() {
    $(".green").removeClass("highlightGreen");
  },500);
}

function soundFlashRed() {
  setTimeout(function(){
    audioRed.load();
  },500);
  audioRed.play();
  $(".red").addClass("highlightRed");
  setTimeout(function() {
    $(".red").removeClass("highlightRed");
  },500);
}

function soundFlashYellow() {
  setTimeout(function(){
    audioYellow.load();
  },500);
  audioYellow.play();
  $(".yellow").addClass("highlightYellow");
  setTimeout(function() {
    $(".yellow").removeClass("highlightYellow");
  },500);
}

function soundFlashBlue() {
  setTimeout(function(){
    audioBlue.load();
  },500);
  audioBlue.play();
  $(".blue").addClass("highlightBlue");
  setTimeout(function() {
    $(".blue").removeClass("highlightBlue");
  },500);
}

function stopGame() {
  compArr = [];
  userArr = [];
  startButton = false;
}


## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

## simon-game.markdown

      
    Raw
  

              simon-game.markdown
            
          
    Simon Game

A Pen by Luke  on CodePen.
License.

  
## style.css
body {
  background: #FFAFBD;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #ffc3a0, #FFAFBD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Roboto Mono', monospace;
}

.container {
  border: 7px solid black;
  margin-top: 10px;
  width: 410px;
  height: 410px;
  border-radius: 200px;
}

h1 {
  text-align: center;
  margin-top: 10px;
  font-weight: 700;
  font-size: 45px;
  letter-spacing: 3px;
}

button {
  text-transform: uppercase;
  margin-left: 10px;
  letter-spacing: 1px;
}

.counter {
  text-align: center;
}

.radio-inline {
  text-align: center;
  margin-left: 43%;
  text-transform: uppercase;
}

.colors {
  width: 198px;
  height: 198px;
  border: 1px solid black;
  text-align: center;
}

.topLeft {
  border-radius: 400px 5px 5px 5px;
  background-color: #309b1d;
}

.highlightGreen {
  background-color: #36db2e;
}

.topRight {
  border-radius: 5px 400px 5px 5px;
  background-color: #cc3033;
}

.highlightRed {
  background-color: #ff1919;
}

.bottomLeft {
  border-radius: 5px 5px 5px 400px;
  background-color: #e6e600;
}

.highlightYellow {
  background-color: #ffff66;
}

.bottomRight {
  border-radius: 5px 5px 400px 5px;
  background-color: #000099;
}

.highlightBlue {
  background-color: #1a1aff;
}

hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
    border: 0;
  margin-top: -10px;
  width: 500px;
}

span {
  display: none;
}

#count {
  display: inline;
}

## styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
	<html>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700,700i" rel="stylesheet">
	<body>
	<audio id="greenSound">
	<source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3"></source>
	</audio>
	<audio id="redSound">
	<source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3"></source>
	</audio>
	<audio id="yellowSound">
	<source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3"></source>
	</audio>
	<audio id="blueSound">
	<source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3"></source>
	</audio>
	<h1>Simon Game</h1>
	<br>
	<hr class="style11">
	<div class="radio-inline">
	<label><input type="radio" name="optradio" id="opt1">on</label>
	</div>
	<div class="radio-inline">
	<label><input type="radio" name="optradio" id="opt2">off</label>
	</div>

	<button class="btn btn-primary">start</button>

	<div class="counter">
	<h4>Count: <span id="count"></span></h4>
	</div>
	<div class="container">
	<div class="row">
	<div class="green colors topLeft col-xs-6"><span>green</span></div>
	<div class="red colors topRight col-xs-6"><span>red</span></div>
	</div>
	<div class="row">
	<div class="yellow colors bottomLeft col-xs-6"><span>yellow</span></div>
	<div class="blue colors bottomRight col-xs-6"><span>blue</span></div>
	</div>
	</div>
	</body>
	</html>
	// Initialize all variable
	var randNum;
	var compArr = [];
	var userArr = [];
	var colorsArr = ["green","red","yellow","blue"];
	var selColor;
	var audioGreen = $("#greenSound")[0];
	var audioRed = $("#redSound")[0];
	var audioYellow = $("#yellowSound")[0];
	var audioBlue = $("#blueSound")[0];
	var startButton = false;
	var userTurn = false;
	var max=1;

	// Start can only be clicked if "on" is selected
	$("button").on("click", function() {
	if($("#opt1").is(":checked")) {
	startButton = true;
	// Once Start is clicked begin game
	fillCompArr();
	// This function contains the beginning of the game and will
	// go through the compArr
	startGame();
	} else { stopGame(); }
	});

	// When off is selected
	$("#opt2").click(function(){
	stopGame();
	});

	// Fill computer array
	function fillCompArr() {
	for(var i = 0; i < 20; i++) {
	selColor = grabColors();
	compArr.push(selColor);
	}
	}

	function grabColors() {
	var num = randNumGen();
	return colorsArr[num];
	}

	function randNumGen() {
	// Grabs number between 0-3
	randNum = Math.floor(Math.random() * 4);
	return randNum;
	}

	function startGame() {
	startButton = true;
	$("h1").text("Simon Game");
	$("#count").text(max.toString()).fadeIn();
	for (var j = 0; j < max; j++) {
	(function (j) {
	setTimeout(function () {
	playComp(compArr[j]);
	}, 1000*j);
	})(j);
	};
	}

	// Send user to soundFlash function and update array
	$(".green").on("click", function() {
	if(startButton === true) {
	userArr.push($(this).text());
	soundFlashGreen();
	compareArrs();
	}
	});

	$(".red").on("click", function() {
	if(startButton === true) {
	userArr.push($(this).text());
	soundFlashRed();
	compareArrs();
	}
	});

	$(".yellow").on("click", function() {
	if(startButton === true) {
	userArr.push($(this).text());
	soundFlashYellow();
	compareArrs();
	}
	});

	$(".blue").on("click", function() {
	if(startButton === true) {
	userArr.push($(this).text());
	soundFlashBlue();
	compareArrs();
	}
	});

	function compareArrs() {
	for(var x = 0; x < userArr.length; x++) {
	if(userArr[x] === compArr[x]) {
	if(userArr.length === 20) {
	$("h1").text("You WIN!!!");
	stopGame();
	return;
	}
	} else {
	$("h1").fadeOut("slow", function() {
	$("h1").text("Try Again").fadeIn();
	});
	startButton = false;
	userArr=[];
	setTimeout(startGame,2500);
	//stopGame();
	//break;
	return;
	}
	}
	if(startButton === false) {
	return;
	}
	if(userArr.length === max) {
	userArr = [];
	max++;
	setTimeout(startGame,1500);
	}
	}

	// Determine next color in array and set off flash and sound
	// *Change selColor to position in array*
	function playComp(color) {
	switch (color) {
	case "green":
	soundFlashGreen();
	break;
	case "red":
	soundFlashRed();
	break;
	case "yellow":
	soundFlashYellow();
	break;
	case "blue":
	soundFlashBlue();
	}
	}

	// These functions set off the sound and flash once the colors are
	// pressed or computer selects them
	function soundFlashGreen() {
	setTimeout(function(){
	audioGreen.load();
	},500);
	audioGreen.play();
	$(".green").addClass("highlightGreen");
	setTimeout(function() {
	$(".green").removeClass("highlightGreen");
	},500);
	}

	function soundFlashRed() {
	setTimeout(function(){
	audioRed.load();
	},500);
	audioRed.play();
	$(".red").addClass("highlightRed");
	setTimeout(function() {
	$(".red").removeClass("highlightRed");
	},500);
	}

	function soundFlashYellow() {
	setTimeout(function(){
	audioYellow.load();
	},500);
	audioYellow.play();
	$(".yellow").addClass("highlightYellow");
	setTimeout(function() {
	$(".yellow").removeClass("highlightYellow");
	},500);
	}

	function soundFlashBlue() {
	setTimeout(function(){
	audioBlue.load();
	},500);
	audioBlue.play();
	$(".blue").addClass("highlightBlue");
	setTimeout(function() {
	$(".blue").removeClass("highlightBlue");
	},500);
	}

	function stopGame() {
	compArr = [];
	userArr = [];
	startButton = false;
	}
	body {
	background: #FFAFBD; /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD); /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ffc3a0, #FFAFBD); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	font-family: 'Roboto Mono', monospace;
	}

	.container {
	border: 7px solid black;
	margin-top: 10px;
	width: 410px;
	height: 410px;
	border-radius: 200px;
	}

	h1 {
	text-align: center;
	margin-top: 10px;
	font-weight: 700;
	font-size: 45px;
	letter-spacing: 3px;
	}

	button {
	text-transform: uppercase;
	margin-left: 10px;
	letter-spacing: 1px;
	}

	.counter {
	text-align: center;
	}

	.radio-inline {
	text-align: center;
	margin-left: 43%;
	text-transform: uppercase;
	}

	.colors {
	width: 198px;
	height: 198px;
	border: 1px solid black;
	text-align: center;
	}

	.topLeft {
	border-radius: 400px 5px 5px 5px;
	background-color: #309b1d;
	}

	.highlightGreen {
	background-color: #36db2e;
	}

	.topRight {
	border-radius: 5px 400px 5px 5px;
	background-color: #cc3033;
	}

	.highlightRed {
	background-color: #ff1919;
	}

	.bottomLeft {
	border-radius: 5px 5px 5px 400px;
	background-color: #e6e600;
	}

	.highlightYellow {
	background-color: #ffff66;
	}

	.bottomRight {
	border-radius: 5px 5px 400px 5px;
	background-color: #000099;
	}

	.highlightBlue {
	background-color: #1a1aff;
	}

	hr.style11 {
	height: 6px;
	background: url(http://ibrahimjabbari.com/english/images/hr-11.png) repeat-x 0 0;
	border: 0;
	margin-top: -10px;
	width: 500px;
	}

	span {
	display: none;
	}

	#count {
	display: inline;
	}