cboydstun/index.html

## index.html
<style>
@import url('https://fonts.googleapis.com/css?family=Asap:400,700&display=swap');
</style>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>Rock Paper Scissors</h1>
    </header>

    <div class="score-board">
      <div id="user-label" class="badge">user</div>
      <div id="computer-label" class="badge">comp</div>
      <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>

    <div class="result">
      <p>Paper covers rock. You win!</p>
    </div>

    <div class="choices">
      <div class="choice" id="r">
        <img src="http://free-icon-rainbow.com/i/icon_00793/icon_007930_256.png" alt="">
      </div>
      <div class="choice" id="p">
        <img src="http://free-icon-rainbow.com/i/icon_03575/icon_035750_256.png" alt="">
      </div>
      <div class="choice" id="s">
        <img src="http://free-icon-rainbow.com/i/icon_02895/icon_028950_256.png" alt="">
      </div>
    </div>
    <p id="action-message">Make your move.</p>
  </body>
</script>
</html>

## rock-paper-scissor.markdown

      
    Raw
  

              rock-paper-scissor.markdown
            
          
    Rock Paper Scissor

A Pen by Chris Boydstun on CodePen.
License.

  
## script.babel
let userScore = 0;
let computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_p = document.querySelector(".result > p");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");

function getComputerChoice(){
  const choices = ['r', 'p', 's'];
  const randomNumber = Math.floor(Math.random() * 3);
  return choices[randomNumber];
}

function convertToWord(letter){
  if (letter === "r") return "Rock";
  if (letter === "p") return "Paper";
  return "Scissors";
}

function win(userChoice, computerChoice){
  const smallUserWord = "user".fontsize(3).sup();
  const smallCompWord = "comp".fontsize(3).sup();
  const userChoice_div = document.getElementById(userChoice);
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord}. You win!`;
  userChoice_div.classList.add('green-glow');
  setTimeout(() => userChoice_div.classList.remove('green-glow'), 500);
}

function lose(userChoice, computerChoice){
  const smallUserWord = "user".fontsize(3).sup();
  const smallCompWord = "comp".fontsize(3).sup();
  const userChoice_div = document.getElementById(userChoice);
  computerScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord}. You lose!`;
  userChoice_div.classList.add('red-glow');
  setTimeout(() => userChoice_div.classList.remove('red-glow'), 500);
}

function draw(userChoice, computerChoice){
  const smallUserWord = "user".fontsize(3).sup();
  const smallCompWord = "comp".fontsize(3).sup();
  const userChoice_div = document.getElementById(userChoice);
  result_p.innerHTML = `IT'S A DRAW`;
  userChoice_div.classList.add('grey-glow');
  setTimeout(() => userChoice_div.classList.remove('grey-glow'), 500);
}

function game(userChoice){
  const computerChoice = getComputerChoice();
  switch(userChoice + computerChoice){
    case "rs":
    case "pr":
    case "sp":
      win(userChoice, computerChoice);
      break;
    case "rp":
    case "ps":
    case "sr":
      lose(userChoice, computerChoice);
      break;
    case "rr":
    case "pp":
    case "ss":
      draw(userChoice, computerChoice);
      break;
  }
}

function main(){
  rock_div.addEventListener('click', function(){
    game("r");
  })

  paper_div.addEventListener('click', function(){
    game("p");
  })

  scissors_div.addEventListener('click', function(){
    game("s");
  })
}

main();

## style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: #24272E;
}

header{
  background: white;
  padding: 20px;
}

header > h1 {
  color: #24272E;
  text-align: center;
  font-family:Asap, sans-serif;
}

.score-board {
  margin: 20px auto;
  border: 3px solid white;
  border-radius: 4px;
  text-align: center;
  width: 200px;
  color: white;
  font-size: 46px;
  padding: 15px 20px;
  font-family: Asap, sans-serif;
  position: relative;
}

.badge{
  background: #E2584D;
  color: white;
  font-size: 14px;
  padding: 2px 10px;
  font-family: Asap, sans-serif;
}

#user-label{
  position: absolute;
  top: 30px;
  left: -25px;
}

#computer-label{
  position: absolute;
  top: 30px;
  right: -30px;
}

.result{
  font-size: 40px;
  color: white;
}

.result > p {
  text-align: center;
  font-weight: bold;
  font-family: Asap, sans-serif;
}

.choices{
  margin: 50px 0;
  text-align: center;
}

.choice{
  border: 4px solid white;
  border-radius: 50%;
  margin: 0 15px;
  padding: 30px;
  display: inline-block;
  transition: all 0.3s ease;
}

.choice:hover{
  cursor: pointer;
  background: white;
}

#action-message{
  text-align: center;
  color: white;
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 20px;
  margin-top: 20px;
}


.green-glow {
  border: 4px solid #4dcc7d;
  box-shadow: 0 0 10 px #31b43a;
}

.red-glow {
  border: 4px solid #fc121b;
  box-shadow: 0 0 10 px #d01115;
}

.grey-glow {
  border: 4px solid #464647;
  box-shadow: 0 0 10 px #25292b;
}
	<style>
	@import url('https://fonts.googleapis.com/css?family=Asap:400,700&display=swap');
	</style>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Rock Paper Scissors</title>
	<link rel="stylesheet" href="styles.css">
	</head>
	<body>
	<header>
	<h1>Rock Paper Scissors</h1>
	</header>

	<div class="score-board">
	<div id="user-label" class="badge">user</div>
	<div id="computer-label" class="badge">comp</div>
	<span id="user-score">0</span>:<span id="computer-score">0</span>
	</div>

	<div class="result">
	<p>Paper covers rock. You win!</p>
	</div>

	<div class="choices">
	<div class="choice" id="r">
	<img src="http://free-icon-rainbow.com/i/icon_00793/icon_007930_256.png" alt="">
	</div>
	<div class="choice" id="p">
	<img src="http://free-icon-rainbow.com/i/icon_03575/icon_035750_256.png" alt="">
	</div>
	<div class="choice" id="s">
	<img src="http://free-icon-rainbow.com/i/icon_02895/icon_028950_256.png" alt="">
	</div>
	</div>
	<p id="action-message">Make your move.</p>
	</body>
	</script>
	</html>
	let userScore = 0;
	let computerScore = 0;
	const userScore_span = document.getElementById("user-score");
	const computerScore_span = document.getElementById("computer-score");
	const scoreBoard_div = document.querySelector(".score-board");
	const result_p = document.querySelector(".result > p");
	const rock_div = document.getElementById("r");
	const paper_div = document.getElementById("p");
	const scissors_div = document.getElementById("s");

	function getComputerChoice(){
	const choices = ['r', 'p', 's'];
	const randomNumber = Math.floor(Math.random() * 3);
	return choices[randomNumber];
	}

	function convertToWord(letter){
	if (letter === "r") return "Rock";
	if (letter === "p") return "Paper";
	return "Scissors";
	}

	function win(userChoice, computerChoice){
	const smallUserWord = "user".fontsize(3).sup();
	const smallCompWord = "comp".fontsize(3).sup();
	const userChoice_div = document.getElementById(userChoice);
	userScore++;
	userScore_span.innerHTML = userScore;
	computerScore_span.innerHTML = computerScore;
	result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord}. You win!`;
	userChoice_div.classList.add('green-glow');
	setTimeout(() => userChoice_div.classList.remove('green-glow'), 500);
	}

	function lose(userChoice, computerChoice){
	const smallUserWord = "user".fontsize(3).sup();
	const smallCompWord = "comp".fontsize(3).sup();
	const userChoice_div = document.getElementById(userChoice);
	computerScore++;
	userScore_span.innerHTML = userScore;
	computerScore_span.innerHTML = computerScore;
	result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord}. You lose!`;
	userChoice_div.classList.add('red-glow');
	setTimeout(() => userChoice_div.classList.remove('red-glow'), 500);
	}

	function draw(userChoice, computerChoice){
	const smallUserWord = "user".fontsize(3).sup();
	const smallCompWord = "comp".fontsize(3).sup();
	const userChoice_div = document.getElementById(userChoice);
	result_p.innerHTML = `IT'S A DRAW`;
	userChoice_div.classList.add('grey-glow');
	setTimeout(() => userChoice_div.classList.remove('grey-glow'), 500);
	}

	function game(userChoice){
	const computerChoice = getComputerChoice();
	switch(userChoice + computerChoice){
	case "rs":
	case "pr":
	case "sp":
	win(userChoice, computerChoice);
	break;
	case "rp":
	case "ps":
	case "sr":
	lose(userChoice, computerChoice);
	break;
	case "rr":
	case "pp":
	case "ss":
	draw(userChoice, computerChoice);
	break;
	}
	}

	function main(){
	rock_div.addEventListener('click', function(){
	game("r");
	})

	paper_div.addEventListener('click', function(){
	game("p");
	})

	scissors_div.addEventListener('click', function(){
	game("s");
	})
	}

	main();
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body{
	background-color: #24272E;
	}

	header{
	background: white;
	padding: 20px;
	}

	header > h1 {
	color: #24272E;
	text-align: center;
	font-family:Asap, sans-serif;
	}

	.score-board {
	margin: 20px auto;
	border: 3px solid white;
	border-radius: 4px;
	text-align: center;
	width: 200px;
	color: white;
	font-size: 46px;
	padding: 15px 20px;
	font-family: Asap, sans-serif;
	position: relative;
	}

	.badge{
	background: #E2584D;
	color: white;
	font-size: 14px;
	padding: 2px 10px;
	font-family: Asap, sans-serif;
	}

	#user-label{
	position: absolute;
	top: 30px;
	left: -25px;
	}

	#computer-label{
	position: absolute;
	top: 30px;
	right: -30px;
	}

	.result{
	font-size: 40px;
	color: white;
	}

	.result > p {
	text-align: center;
	font-weight: bold;
	font-family: Asap, sans-serif;
	}

	.choices{
	margin: 50px 0;
	text-align: center;
	}

	.choice{
	border: 4px solid white;
	border-radius: 50%;
	margin: 0 15px;
	padding: 30px;
	display: inline-block;
	transition: all 0.3s ease;
	}

	.choice:hover{
	cursor: pointer;
	background: white;
	}

	#action-message{
	text-align: center;
	color: white;
	font-family: Asap, sans-serif;
	font-weight: bold;
	font-size: 20px;
	margin-top: 20px;
	}


	.green-glow {
	border: 4px solid #4dcc7d;
	box-shadow: 0 0 10 px #31b43a;
	}

	.red-glow {
	border: 4px solid #fc121b;
	box-shadow: 0 0 10 px #d01115;
	}

	.grey-glow {
	border: 4px solid #464647;
	box-shadow: 0 0 10 px #25292b;
	}