CodePen Embed - Rock, Paper, Scissors v1

<!-- I made this during my first attempt at learning Javascript and while I was still fairly new to HTML/CSS and before I knew of UI libraries. I recently just added in the one thing I never was able to pull off originally-- the score counter! Now I know how easy it is and I also tried to fix a few things HTML/CSS wise but I feel it would be better to just do a complete redo at some point. At the very least, I am happy it is working!  -->
<body>
  <div class="container mt-4">
    <div id="game">
       <div class="d-flex mb-2 justify-content-end">
        <div class="d-flex flex-column col-md-1 align-items-center">
            <h3 class="pb-0 mb-0">Wins</h3>
            <div id="score"></div>
        </div>
     </div>
    <div class="row bt-5">
        <h1>Rock, Paper, Scissors</h1>
        <h3>Enter "rock","paper", or "scissors" onto the line below. Rematch to clear.</h3>
        <div class="playerInput m-auto">
          <input id="input" class="effect-16" type="text" placeholder="" autocomplete="off">
          <label>Let's Play!</label>
          <span class="focus-border"></span>
        </div>
    </div>
      <div class="cell">
        <button id="myBtn" class="me-2" onclick="playGame()">Shoot!</button>
        <button id="reset" onclick="resetBtn()">Rematch!</button>
      </div>
    <div id="log" class="d-flex flex-column m-auto p-3 mt-3">
      <div id="hist" class="d-flex flex-column-reverse"></div>
    </div>
    </div>
  </div>
</body>

@import url('https://fonts.googleapis.com/css?family=Hi+Melody&subset=korean');

body {
  font-family: 'Hi Melody', sans-serif;
  text-align: center;
}

h3{
  padding-bottom: 30px;
}

.header-img {
  background-image: url('https://boardgamestrategyblog.files.wordpress.com/2016/12/rock-paper-scissors.png');
  background-size: cover;
}

#log {
  max-width: 60vw;
  font-size: 28px;
  overflow-y: scroll;
  height: 250px;
}

#log p{
  line-height: 1rem;
}

#log p:nth-child(1n) {
  color: #4286f4;
}

#log p:nth-child(3n+2) {
  color: #ff6d6b;
}

#log p:nth-child(3n+0) {
  color: #4caf50;
  margin-top: 1.6rem;
}

#log p:nth-child(3n+0)::after {
  content: "~~";
}

#log p:nth-child(3n+0)::before {
  content: "~~"; 
}

.grid-x {
    display: flex;
    flex-flow: row wrap;
}

.cell {
    flex: 0 0 auto;
    min-height: 0px;
    min-width: 0px;
    width: 100%;
}

button {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 1rem 0;
    font-family: inherit;
    padding: .85em 1em;
    -webkit-appearance: none;
    border: 1px solid #aaa;
    border-radius: 0;
    -webkit-transition: background-color .25s ease-out,color .25s ease-out;
    transition: background-color .25s ease-out,color .25s ease-out;
    font-size: .9rem;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    background-color: #1779ba;
    color: #fefefe;
}

.bt-5 {
  margin-bottom: 5%;
}

#myBtn, #reset {
  background: transparent;
  padding: 5px 15px;
  color: #aaa;
}

#myBtn:hover, #reset:hover {
  border: 1px solid #4caf50;
  color: #4caf50;
}

input[type="text"]{font: 15px/24px 'Muli', sans-serif; color: #4286f4; min-width: 80%; box-sizing: border-box; letter-spacing: 1px; height: 30px; text-align: center; margin-top: 1rem;}

:focus{outline: none;}

.effect-16 {
  border: 0; 
  padding: 4px 0; 
  border-bottom: 1px solid #ccc; 
  background-color: transparent;
}
 .effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #4caf50; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 0; width: 100%; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{font-size: 12px; color: #4caf50; transition: 0.3s;}

#score {
  width: 50px;
  height: 30px;
  border-bottom: 2px solid black;
}
h3.text-start {
  line-height: 0.8;
}
.playerInput {
  position: relative;
  min-width: 50vw;
  max-width: 60vw;
}

(function () {
    if (!console) {
        console = {};
    }
    var old = console.log;
    const logger = document.getElementById('hist');
    console.log = function (message) {
        if (typeof message == 'object') {
            logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : String(message)) + '<br />';
        } else {
            logger.innerHTML += '<p>' + message;
        }
    }
})();
  
let score = 0;

'use strict';
//Get user's choice

function getUserChoice() {
document.getElementById("input");
input.addEventListener("keyup", function(playGame) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myBtn").click();
    }
});
  userInput = document.getElementById("input").value;
  return document.getElementById("input").value,
  userInput = userInput.toLowerCase();
}

//Get the Computer's Choice

function getComputerChoice() {
  randomNumber = Math.floor(Math.random() * 3);
  switch (randomNumber) {
    case 0:
      return 'rock';
    case 1:
      return 'paper';
    case 2:
      return 'scissors';
  }
}


//Compare the two choices and determine a winner

function determineWinner(userChoice, computerChoice) {
  if (userChoice === computerChoice) {
    return 'Draw!';
  } else if (userChoice === 'gun') {
    return '...What? What did you just do!? You killed him!?';
  } else {
    if (userChoice === 'rock') {
      if (computerChoice === 'paper') {
        return 'The computer won!';
      } else {
        score += 1;
        return 'You won!';
      }
    }
    else if (userChoice === 'paper') {
      if (computerChoice === 'scissors') {
        return 'The computer won!';
      } else {
        score += 1;
        return 'You won!';
      }
    }
    else if (userChoice === 'scissors') {
      if (computerChoice === 'rock') {
        return 'The computer won!';
      } else {
        score += 1;
        return 'You won!';
      } 
    } 
    else if (userChoice === 'knife') 
{
      if (computerChoice === 'paper') {
        return 'The computer player surrendered and you win...';
        } else if (computerChoice === 'rock') {
          return 'Computer: Nah m8. Draw!';
        } else {
          score += 1;
          return 'Computer: You just activated my trap card! I win!';
        } 
      }
    else if (userChoice === 'lemon') 
{
      if (computerChoice === 'paper') {
        return 'The computer blocks the lemon juice but gets hit by the lemon itself. The winner is unclear.';
        } else if (computerChoice === 'rock') {
          return 'The lemon and the rock collide in midair. You got lemonade!';
        } else {
          return 'Computer: Hah! You\'re going to come at me with that?';
        } 
      }
   else {
      return 'You have to enter "rock", "paper", or "scissors"';
  } 
  } 
}




//Start the program and display the results

function playGame(userChoice = getUserChoice(), computerChoice = getComputerChoice()) {
  console.log('You picked: ' + userInput);
  console.log('Computer picked: ' + computerChoice);
  console.log(determineWinner(userChoice, computerChoice));
  const playerScore = document.getElementById('score');
  playerScore.innerHTML = '<h4>' + score; document.getElementById("input").value = "";
}

//Reset Button
function resetBtn() {
 var logger = document.getElementById('hist');
  logger.innerHTML ="";
  playerScore = 0;
  
}

class Game extends React.Component {
   constructor(props) {
    const logger = document.getElementById('log');
    const playerScore = document.getElementById('score');
    super(props);
    this.state = {
      logger: null,
      playerScore: null
    };
  }
 
  
}

This Pen is owned by Yogu on CodePen.

See more by @Yogu on CodePen

External CSS

https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External CSS

External JavaScript