├── css
└── main.css
├── READEME.md
├── index.html
└── js
└── main.js
/css/main.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: monospace;
3 | font-size: 20px;
4 | text-align: center;
5 | background: black;
6 | color: lime;
7 | margin: 3em;
8 | }
9 |
10 | strong {
11 | text-decoration: underline;
12 | }
13 |
14 | button {
15 | background: lime;
16 | color: black;
17 | border: none;
18 | padding: 10px 15px;
19 | font-size: 1.2em;
20 | font-family: monospace;
21 | font-weight: bold;
22 | }
23 | button:active {
24 | background: green;
25 | }
26 |
27 | .scoreboard {
28 | width: 14em;
29 | margin: auto;
30 | border: 1px solid lime;
31 | }
32 | .scoreboard h2 {
33 | border-bottom: 1px solid lime;
34 | margin: 0;
35 | padding: 10px;
36 | }
37 | .scoreboard table {
38 | margin: 10px auto;
39 | width: 100%;
40 | border-collapse: collapse;
41 | }
42 | .scoreboard th, .scoreboard td {
43 | text-align: center;
44 | }
45 | .scoreboard td {
46 | font-size: 3em;
47 | padding: 0 20px;
48 | }
49 |
50 | #status {
51 | margin-top: 20px;
52 | }
--------------------------------------------------------------------------------
/READEME.md:
--------------------------------------------------------------------------------
1 | # Rock-Paper-Scissors!
2 | A great Website that allows you to play the classic Rock-Paper-Scissors game against the computer!!
3 |
4 | **Link to project:** http://kordellatimer.github.io/Rock_Paper_Scissors
5 |
6 | ## How It's Made:
7 |
8 | **Tech used:** HTML, CSS, JavaScript (Vanilla)
9 |
10 | Used a black background and bright green text. I also created a scoreboard using HTML and CSS. Then I used a the Math.random() method to get a random number between 0-1. Then I broke up the range into 3 parts. Then I used an If-statement to assign what the computer will choose based on the random number and which range it falls into. Then I used the JavaScript to update the scoreboard and to output a response of what the computer chose and if you won or not.
11 |
12 | ## Lessons Learned:
13 |
14 | I learned how effective JQuery could be. First with the methods that are tied with JQuery, and how simple the syntax is compared to vanilla JavaScript.
15 |
16 | ## Examples:
17 | Take a look at these couple examples that I have in my own portfolio:
18 |
19 | **Horoscope:** https://kordellatimer.github.io/Horoscope
20 |
21 | **Lottery-App:** https://kordellatimer.github.io/Lottery-App
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Parchment, Stone, or Blade?
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Rock, Paper, or Scissors?
18 |
19 |
A steam-powered bot has challenged you to a game. Rock beats scissors, scissors beats paper, and paper beats rock.
20 |
21 |
22 |
Scoreboard
23 |
24 |
25 |
26 |
0
27 |
0
28 |
29 |
30 |
31 |
32 |
You
33 |
Bot
34 |
35 |
36 |
37 |
38 |
39 |
Choose Wisely
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
53 |
54 |
55 |
56 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | var botScore=0,
2 | playerScore=0;
3 |
4 | // When user clicks on a button, Run function similar to name!
5 |
6 |
7 | document.getElementById("rock").onclick=playerThrowsRock;
8 | function playerThrowsRock(){
9 | var botsWeapon=getRandomWeapon();
10 | checkWhoWon(botsWeapon,"rock");
11 | }
12 | document.getElementById("scissors").onclick=playerThrowsScissors;
13 | function playerThrowsScissors(){
14 | var botsWeapon=getRandomWeapon();
15 | checkWhoWon(botsWeapon,"scissors");
16 | }
17 | document.getElementById("paper").onclick=playerThrowsPaper;
18 | function playerThrowsPaper(){
19 | var botsWeapon=getRandomWeapon();
20 | checkWhoWon(botsWeapon,"paper");
21 | }
22 |
23 | // This is how the bot picks his answer
24 |
25 | function getRandomWeapon(){
26 | var randomNumber=Math.random();
27 | var botsWeapon="rock";
28 | if(randomNumber<.33){
29 | botsWeapon="scissors";
30 | }
31 | else if(randomNumber<.6666){
32 | botsWeapon="paper";
33 | }
34 | return botsWeapon;
35 | }
36 |
37 | // Function that checks the user answer and compares it to the bots answer
38 |
39 | function checkWhoWon(botsWeapon,playersWeapon){
40 | if(botsWeapon==playersWeapon){
41 | displayCompleteMessage("There was tie");
42 | }
43 | else if(
44 | (botsWeapon=="scissors" && playersWeapon=="paper") ||
45 | (botsWeapon=="paper" && playersWeapon=="rock") ||
46 | (botsWeapon=="rock" && playersWeapon=="scissors")
47 | ){
48 | increaseBotScore();
49 | }
50 | else{
51 | increasePlayerScore();
52 | }
53 | }
54 |
55 | // Update bot score and text under buttons
56 |
57 | function increaseBotScore(){
58 | botScore+=1;
59 | document.getElementById("computerScore").innerHTML=botScore;
60 | displayCompleteMessage("Sorry, you're a loser");
61 | }
62 | function increasePlayerScore(){
63 | playerScore+=1;
64 | document.getElementById("humanScore").innerHTML=playerScore;
65 | displayCompleteMessage("YAY, You won!");
66 | }
67 |
68 | function displayCompleteMessage(msg){
69 | document.getElementById("status").innerHTML=msg;
70 | }
71 |
--------------------------------------------------------------------------------