Rock Paper Scissor by deso Initial Commit #4
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Rock Paper Scissor</title> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" | ||
| rel="stylesheet" | ||
| /> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" | ||
| integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" | ||
| crossorigin="anonymous" | ||
| referrerpolicy="no-referrer" | ||
| /> | ||
| <link rel="stylesheet" href="./main.css" /> | ||
| </head> | ||
| <body> | ||
| <h1>Rock Paper Scissor</h1> | ||
| <div> | ||
| <div class="outerDiv"> | ||
| <div class="score"> | ||
| <h3>Computer</h3> | ||
| <div id="compDiv"> | ||
| <span id="computerChoiceSpan"></span> | ||
| <span id="computerChoiceIcon"></span> | ||
| </div> | ||
| </div> | ||
| <div class="d-flex container"> | ||
| <div> | ||
| Player <span id="humanScore">0</span> : | ||
| <span id="computerScore">0</span> Computer | ||
| <div class="resultDiv"> | ||
| Result: <span id="result"></span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="score"> | ||
| <h3>Player</h3> | ||
| <div id="playerDiv"> | ||
| <span id="humanChoiceSpan"></span> | ||
| <span id="humanChoiceIcon"></span> | ||
| </div> | ||
| </div> | ||
| <div class="innerDiv"> | ||
| <button value="Rock" id="rockBtn">Rock</button> | ||
| <button value="Paper" id="paperBtn">Paper</button> | ||
| <button value="Scissor" id="scissorBtn">Scissor</button> | ||
| </div> | ||
| </div> | ||
| <button id="resetBtn">Reset</button> | ||
| </div> | ||
| <script src="./script.js"></script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| body { | ||
| background-color: #e0e0e0; | ||
| font-family: "Poppins", sans-serif; | ||
| } | ||
| h1 { | ||
| text-align: center; | ||
| } | ||
| .outerDiv { | ||
| background-color: #a4d11f; | ||
| border-radius: 30px; | ||
| width: fit-content; | ||
| padding: 10px 20px; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
| #compDiv, | ||
| #playerDiv { | ||
| width: 100px; | ||
| height: 130px; | ||
| border: 2px dashed #507c00; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| margin-top: 10px; | ||
| } | ||
| #compDiv #computerChoiceIcon i { | ||
| transform: rotate(180deg); | ||
| } | ||
| #compDiv #computerChoiceIcon .fa-hand-scissors { | ||
| transform: rotate(-90deg); | ||
| } | ||
| .container { | ||
| margin-top: 20px; | ||
| padding: 10px 20px; | ||
| justify-content: center; | ||
| background-color: #fcca47; | ||
| } | ||
| .d-flex { | ||
| display: flex; | ||
| } | ||
| .innerDiv { | ||
| display: flex; | ||
| justify-content: space-around; | ||
| margin-top: 20px; | ||
| } | ||
| .score { | ||
| text-align: center; | ||
| } | ||
| .resultDiv { | ||
| text-align: center; | ||
| margin-top: 10px; | ||
| } | ||
| #resetBtn { | ||
| position: absolute; | ||
| top: 100px; | ||
| right: 250px; | ||
| background-color: #a4d11f; | ||
| } | ||
| .Human div, | ||
| .Computer div { | ||
| width: 200px; | ||
| text-align: center; | ||
| } | ||
| .score h3 { | ||
| margin-bottom: 0px; | ||
| } | ||
| #playerDiv #humanChoiceIcon .fa-hand-scissors { | ||
| transform: rotate(90deg); | ||
| } | ||
| button { | ||
| border: 1px solid black; | ||
| width: 100px; | ||
| height: 40px; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| button:hover { | ||
| cursor: pointer; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,132 @@ | ||
| const rockBtn = document.getElementById("rockBtn"); | ||
| const paperBtn = document.getElementById("paperBtn"); | ||
| const scissorBtn = document.getElementById("scissorBtn"); | ||
| const computersOptions = ["Rock", "Paper", "Scissor"]; | ||
| const humanChoiceSpan = document.getElementById("humanChoiceSpan"); | ||
| const computerChoiceSpan = document.getElementById("computerChoiceSpan"); | ||
| const result = document.getElementById("result"); | ||
| const humanScore = document.getElementById("humanScore"); | ||
| const computerScore = document.getElementById("computerScore"); | ||
| const resetBtn = document.getElementById("resetBtn"); | ||
| const humanChoiceIcon = document.getElementById("humanChoiceIcon"); | ||
| const computerChoiceIcon = document.getElementById("computerChoiceIcon"); | ||
|
|
||
| const play = () => { | ||
| rockBtn.addEventListener("click", () => { | ||
| let computerChoice = random(); | ||
| computerChoiceSpan.innerText = computersOptions[computerChoice]; | ||
| humanChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-back-fist fa-5x"></i>'; | ||
| humanChoiceSpan.innerText = "Rock"; | ||
| if (computerChoice === 0) { | ||
| result.innerText = "Draw"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-back-fist fa-5x"></i>'; | ||
| } else if (computerChoice === 1) { | ||
| result.innerText = "Computer Won!!!"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand fa-5x"></i>'; | ||
| computerScore.innerText++; | ||
| } else { | ||
| result.innerText = "You Won!!!"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-scissors fa-5x"></i>'; | ||
| humanScore.innerText++; | ||
| } | ||
| }); | ||
| paperBtn.addEventListener("click", () => { | ||
| let computerChoice = random(); | ||
| computerChoiceSpan.innerText = computersOptions[computerChoice]; | ||
| humanChoiceIcon.innerHTML = '<i class="fa-solid fa-hand fa-5x"></i>'; | ||
| humanChoiceSpan.innerText = "Paper"; | ||
| if (computerChoice === 0) { | ||
| result.innerText = "You Won!!!"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-back-fist fa-5x"></i>'; | ||
| humanScore.innerText++; | ||
| } else if (computerChoice === 1) { | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand fa-5x"></i>'; | ||
| result.innerText = "Draw"; | ||
| } else { | ||
| result.innerText = "Computer Won!!!"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-scissors fa-5x"></i>'; | ||
| computerScore.innerText++; | ||
| } | ||
| }); | ||
| scissorBtn.addEventListener("click", () => { | ||
| let computerChoice = random(); | ||
| computerChoiceSpan.innerText = computersOptions[computerChoice]; | ||
| humanChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-scissors fa-5x"></i>'; | ||
| humanChoiceSpan.innerText = "Scissor"; | ||
| if (computerChoice === 0) { | ||
| result.innerText = "Computer Won!!!"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-back-fist fa-5x"></i>'; | ||
|
|
||
| computerScore.innerText++; | ||
| } else if (computerChoice === 1) { | ||
| result.innerText = "You Won!!!"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand fa-5x"></i>'; | ||
| humanScore.innerText++; | ||
| } else { | ||
| result.innerText = "Draw"; | ||
| computerChoiceIcon.innerHTML = | ||
| '<i class="fa-solid fa-hand-scissors fa-5x"></i>'; | ||
| } | ||
| }); | ||
| resetBtn.addEventListener("click", () => { | ||
| reset(); | ||
| }); | ||
| }; | ||
|
|
||
| const random = () => { | ||
| return Math.floor(Math.random() * 3); | ||
| }; | ||
|
Comment on lines
+86
to
+88
There was a problem hiding this comment. keep the declaration before usage, for better understanding. |
||
|
|
||
| const reset = () => { | ||
| humanChoiceSpan.innerText = ""; | ||
| computerChoiceSpan.innerText = ""; | ||
| humanScore.innerText = 0; | ||
| computerScore.innerText = 0; | ||
| result.innerText = ""; | ||
| humanChoiceIcon.innerHTML = ""; | ||
| computerChoiceIcon.innerHTML = ""; | ||
| }; | ||
|
|
||
| play(); | ||
|
|
||
| // const object = { | ||
| // p1: 1, | ||
| // p2: 2, | ||
| // p3: 3, | ||
| // p4: { | ||
| // p5: 4, | ||
| // }, | ||
| // }; | ||
| // console.log(document.getElementsByTagName("p")); | ||
|
|
||
| // const prom = new Promise((res, rej) => { | ||
| // setTimeout(() => { | ||
| // rej("Working"); | ||
| // }, 10000); | ||
| // }); | ||
|
|
||
| // console.log( | ||
| // prom.then(() => console.log("done")).catch(() => console.log("rejected")) | ||
| // ); | ||
|
|
||
| fetch("https://portal.tycoonstats.com/api/demo") | ||
| .then((response) => response.text()) | ||
| .then((data) => console.log(data)); | ||
|
|
||
| async function a() { | ||
| let response = await fetch("https://portal.tycoonstats.com/api/demo"); | ||
| let data = await response.text(); | ||
| console.log(data); | ||
| } | ||
|
|
||
| a(); | ||
|
Comment on lines
+102
to
+132
There was a problem hiding this comment.
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
for this specific case we can add logic of querySelectorAll("botton"), and for each button click we can call a method that will update the scenario who win.
Re- write the code: using concept of:
querySelectorAll("botton"), use foreach, and onclick call one method that will update the state, also avoid using multiple if...else and repeating code, use ternary operator as user can win in three cases only
you_win = ( (you === "rock") && (opponent === "scissor") ||
(you === "paper") && (opponent === "rock") ||
(you === "scissor") && (opponent === "rock") ) // returns true for your win cases only.
so (you === opponent) ? "draw message" : you_win ? call a method for updating score and message for user : call method for updating score and message fro computer;