diff --git a/index.html b/index.html new file mode 100644 index 0000000..69e676d --- /dev/null +++ b/index.html @@ -0,0 +1,60 @@ + + + + + + + Rock Paper Scissor + + + + + + + +

Rock Paper Scissor

+
+
+
+

Computer

+
+ + +
+
+
+
+ Player 0 : + 0 Computer +
+ Result: +
+
+
+
+

Player

+
+ + +
+
+
+ + + +
+
+ +
+ + + diff --git a/main.css b/main.css new file mode 100644 index 0000000..a35b27c --- /dev/null +++ b/main.css @@ -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; +} diff --git a/script.js b/script.js new file mode 100644 index 0000000..217c68e --- /dev/null +++ b/script.js @@ -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 = + ''; + humanChoiceSpan.innerText = "Rock"; + if (computerChoice === 0) { + result.innerText = "Draw"; + computerChoiceIcon.innerHTML = + ''; + } else if (computerChoice === 1) { + result.innerText = "Computer Won!!!"; + computerChoiceIcon.innerHTML = + ''; + computerScore.innerText++; + } else { + result.innerText = "You Won!!!"; + computerChoiceIcon.innerHTML = + ''; + humanScore.innerText++; + } + }); + paperBtn.addEventListener("click", () => { + let computerChoice = random(); + computerChoiceSpan.innerText = computersOptions[computerChoice]; + humanChoiceIcon.innerHTML = ''; + humanChoiceSpan.innerText = "Paper"; + if (computerChoice === 0) { + result.innerText = "You Won!!!"; + computerChoiceIcon.innerHTML = + ''; + humanScore.innerText++; + } else if (computerChoice === 1) { + computerChoiceIcon.innerHTML = + ''; + result.innerText = "Draw"; + } else { + result.innerText = "Computer Won!!!"; + computerChoiceIcon.innerHTML = + ''; + computerScore.innerText++; + } + }); + scissorBtn.addEventListener("click", () => { + let computerChoice = random(); + computerChoiceSpan.innerText = computersOptions[computerChoice]; + humanChoiceIcon.innerHTML = + ''; + humanChoiceSpan.innerText = "Scissor"; + if (computerChoice === 0) { + result.innerText = "Computer Won!!!"; + computerChoiceIcon.innerHTML = + ''; + + computerScore.innerText++; + } else if (computerChoice === 1) { + result.innerText = "You Won!!!"; + computerChoiceIcon.innerHTML = + ''; + humanScore.innerText++; + } else { + result.innerText = "Draw"; + computerChoiceIcon.innerHTML = + ''; + } + }); + resetBtn.addEventListener("click", () => { + reset(); + }); +}; + +const random = () => { + return Math.floor(Math.random() * 3); +}; + +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();