Add files via upload

rock-paper-scissors-master/README.md

@@ -0,0 +1,75 @@
+# rock-paper-scissors
+
+These instructions were borrowed from [TheOdinProject](https://www.theodinproject.com/).
+
+## Updates
+[Click here for Part 2](#part-2) - **due Wednesday, September 18 at 11:59 p.m.**
+
+## Introduction
+
+We're going to make a simple implementation of the grade-school classic "rock paper scissors".  If you don't know what that is, check the [Wikipedia article](https://en.wikipedia.org/wiki/Rock%E2%80%93paper%E2%80%93scissors) or [this](https://www.wikihow.com/Play-Rock,-Paper,-Scissors) step-by-step.  
+
+For the moment we're just going to play the game from the browser console. In the future, we'll look at adding a front-end!
+
+### Project files
+
+We'll use JavaScript in the browser for this assignment, so your workflow will be slightly different from how we've used JavaScript previously. 
+
+* **index.html**
+  - Blank HTML file that includes an external JavaScript file, `game.js`
+  - If you want to learn more about including JavaScript to your page, check out [this link](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page)
+
+* **game.js**
+  - Add all of your JavaScript code here!
+
+Your game is going to be played completely from the console, so don't worry about putting anything else in `index.html`.
+
+### Working with JavaScript in the browser 
+
+Make changes to `game.js` and save them. I've just added a "Hello, world!" `console.log` statement.
+
+Open up `index.html` in a web browser and then open up the browser’s console by right-clicking on the blank webpage and selecting “Inspect” or “Inspect Element”. 
+
+In the ‘Developer Tools’ pane find and select the ‘Console’ tab, where you should see the output of `game.js`.
+
+## Assignment instructions
+1. Your game is going to play against the computer, so begin with a function called `computerPlay` that will randomly return either 'Rock', 'Paper' or 'Scissors'.  We'll use this function in the game to make the computer's play.
+2. Write a function that plays a single round of Rock Paper Scissors.  The function should take two parameters - the `playerSelection` and `computerSelection` - and then return a string that declares the winner of the round like so: `"You Lose! Paper beats Rock"`
+   1. Make your function case insensitive (so users can input `rock`, `ROCK`, `RocK` or any other variation)
+
+   2. __Important note:__ you want to `return` the results of this function call, _not_ `console.log()` them.  To test this function console.log the results:
+
+      ~~~javascript
+      function playRound(playerSelection, computerSelection) {
+        // your code here!
+      }
+
+      const playerSelection = 'rock'
+      const computerSelection = computerPlay()
+      console.log(playRound(playerSelection, computerSelection))
+      ~~~
+
+      ​
+3. Write a NEW function called `game()`. Use the previous function _inside_ of this one to play a 5 round game that keeps score and reports a winner or loser at the end.
+   1. At this point you should still just be using `console.log()` to display the results of each round and the winner at the end.
+   2. Use `prompt()` to get input from the user. [Read the docs here if you need to.](https://developer.mozilla.org/en-US/docs/Web/API/Window/prompt)
+   3. Feel free to re-work your previous functions if you need to.  Specifically, you might want to change the return value to something more useful.
+   4. Feel free to create more "helper" functions if you think it would be useful.
+
+## Part 2
+**Now with the DOM!**
+
+1. Create a new branch for part 2. Replace `<your_branch_name>` with the name of your branch.
+```
+git checkout -b <your_branch_name>
+```
+You will commit and push to this branch just like how you've been working previously. Creating a new branch means that you won't lose the work you did for part 1 (the work you did for part 1 will still exist on the branch you've been using before). 
+
+2. For now, remove the logic that plays exactly five rounds.
+
+3. Create three buttons, one for each selection. Add an event listener to the buttons that calls your `playRound` function with the correct `playerSelection` every time a button is clicked. (you can keep the console.logs for this step)
+4. Add a div for displaying results and change all of your console.logs into DOM methods.
+5. Display the running score, and announce a winner of the game once one player reaches 5 points.
+6. You will likely have to refactor (rework/rewrite) your original code to make it work for this. That’s OK! Reworking old code is an important part of the programmer’s life.
+7. Update your CSS and add some style to your game. Have fun with it!
+8. When you submit a pull request, make sure you use the branch that you worked on instead of `master` (the branch created in step 1).

rock-paper-scissors-master/game.js

@@ -0,0 +1,99 @@
+let userScore = 0;
+let computerScore = 0;
+const userScore_span = document.getElementById("user-score");
+const computerScore_span = document.getElementById("computer-label");
+const scoreBoard_div = document.querySelector(".scoreboard");
+const result_p = document.querySelector(".result > p");
+const rock_div = documnet.getElementById("r");
+const paper_div = documnet.getElementById("p");
+const scissor_div = documnet.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).sub();
+  const smallCompWorld = "comp".fontsize(3).sub();
+  const userChoice_div = document.getElementById(userChoice);
+  userScore++;
+  userScore_span.innerhtml = userScore;
+  computerScore_span.innerHTML = computerScore
+    result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWorld}. You Win!≈`;
+    userChoice_div.classList.add('green-glow')
+    setTimeOut(() => userChoice_div.classList.remove('green-glow'), 1000)
+  }
+
+
+
+
+
+
+//setTimeOut(function() {console.log("Hello")}, 3000)
+
+function lose(userChoice, computerChoice){
+  const smallUserWord = "user".fontsize(3).sub();
+  const smallCompWorld = "comp".fontsize(3).sub();
+  const userChoice_div = document.getElementById(userChoice);
+  computerScore++;
+  userScore_span.innerhtml = userScore;
+  computerScore_span = computerScore;
+  computerScore_span.innerHTML = computerScore
+  result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} looses to ${convertToWord(computerChoice)}${smallCompWorld}. You Lost!≈`;
+  userChoice_div.classList.add('red-glow')
+  setTimeOut(() => userChoice_div.classList.remove('red-glow'), 1000)
+
+}
+
+function draw(userChoice, computerChoice){
+  const smallUserWord = "user".fontsize(3).sub();
+  const smallCompWorld = "comp".fontsize(3).sub();
+  const userChoice_div = document.getElementById(userChoice);
+  result_p.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWorld}. it is a draw!`;
+  userChoice_div.classList.add('gray-glow')
+  setTimeOut(() => userChoice_div.classList.remove('gray-glow'), 1000)
+}
+
+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',() => game("r"));
+
+  paper_div.addEventListener('click',() => game("p"));
+
+  scissor_div.addEventListener('click',() => game("s"));
+
+
+}
+
+main();

rock-paper-scissors-master/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Rock, Paper, Scissors game!</title>
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Nunito&display=swap" rel="stylesheet">
+    <script src="game.js" defer></script>
+</head>
+<body>
+  <header>
+    <h1>Rock, Paper, Scissors</h1>
+  </header>
+<div class="scoreboard">
+  <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="imgs/rock.png" alt="">
+  </div>
+
+  <div class="choice" id="p">
+    <img src="imgs/paper.png" alt="">
+  </div>
+
+  <div class="choice" id="s">
+    <img src="imgs/scissor.png" alt="">
+  </div>
+
+</div>
+
+<p id="action_message">Make Your Move</p>
+<script type="text/javascript" src="game.js"></script>
+</body>
+</html>

rock-paper-scissors-master/styles.css

@@ -0,0 +1,118 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  background-color: #25272E;
+
+}
+header {
+  background: white;
+  padding: 20px;
+}
+
+header > h1{
+  color: #25272E;
+  text-align: center;
+  font-family: 'Nunito', 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: 'Nunito', sans-serif;
+  position: relative;
+}
+
+
+.badge {
+  background: #E2584D;
+  color: white;
+  font-size: 16px;
+  padding: 2px 10px;
+  font-family: 'Nunito', sans-serif;
+}
+
+#user-label {
+  position: absolute;
+  top: 30px;
+  left: -20px;
+
+}
+
+#computer-label {
+  position: absolute;
+  top: 30px;
+  right: -30px;
+
+}
+
+
+.result{
+  font-size: 40px;
+  color: white;
+
+}
+
+.result p {
+  text-align: center;
+  font-family: 'Nunito', sans-serif;
+  font-weight: bold;
+}
+
+
+.choices {
+  margin: 50px 0;
+
+}
+
+.choice {
+  border: 4px solid white;
+  border-radius: 50%;
+  margin: 0 20px;
+  padding: 20px;
+  display: inline-block;
+  transition: all 0.3s ease;
+}
+
+.choice:img{
+  text-align: right;
+}
+
+.choice:hover{
+  cursor: pointer;
+  background: blue;
+}
+
+#action_message{
+  text-align: center;
+  color: white;
+  font-family: 'Nunito', sans-serif;
+  font-weight: bold;
+  font-size: 20px;
+  margin-top:
+}
+
+.green-glow{
+  border: 4px solid #4dcc7d;
+  box-shadow: 0 0 10px #31b43a;
+}
+
+.red-glow{
+  border: 4px solid #fc121b;
+  box-shadow: 0 0 10px #d01115;
+  }
+
+  .gray-glow{
+    border: 4px solid #464647;
+    box-shadow: 0 0 10px #25292b;
+  }