diff --git a/RPS/index.html b/RPS/index.html new file mode 100644 index 0000000..f89bad3 --- /dev/null +++ b/RPS/index.html @@ -0,0 +1,39 @@ + + + + Rock Paper Scissor rps + + + + +
+
+

+ You : + 0 +

+

Computer : + 0 +

+
+
+ + + +
+
+

+

+

+
+
+ + + \ No newline at end of file diff --git a/RPS/script.js b/RPS/script.js new file mode 100644 index 0000000..176b468 --- /dev/null +++ b/RPS/script.js @@ -0,0 +1,61 @@ +let your_score = 0; +let computer_score = 0; +let result_ref = document.getElementById("result"); +const rock_button = document.querySelector(".rock"); +const paper_button = document.querySelector(".paper"); +const scissor_button = document.querySelector(".scissor"); +const yourOptions = [rock_button, paper_button, scissor_button]; + +rock_button.addEventListener("click", function () { + rps("rock"); +}); + +paper_button.addEventListener("click", function () { + rps("paper"); +}); + +scissor_button.addEventListener("click", function () { + rps("scissor"); +}); +yourOptions.forEach((option) => { + option.addEventListener("click", function () { }); +}); + +computer = (computer_choice) => { + computer_options = ["rock", "paper", "scissor"]; + number = Math.floor(Math.random() * 3); + computer_choice = computer_options[number]; + return computer_choice; +}; + +rps = (your_choice) => { + const comp_choice = computer(); + + if (your_choice == comp_choice) { + result_ref.textContent = "Draw"; + } else if ( + (your_choice == "rock") & (comp_choice == "scissor") || + (your_choice == "paper") & (comp_choice == "rock") || + (your_choice == "scissor") & (comp_choice == "paper") + ) { + your_score +=1; + your_score.innerText = your_score; + result_ref.textContent = "You Win"; + } else if ( + (your_choice == "rock") & (comp_choice == "paper") || + (your_choice == "paper") & (comp_choice == "scissor") || + (your_choice == "scissor") & (comp_choice == "rock") + ) { + computer_score++; + computer_score.innerText = computer_score; + result_ref.textContent = "Computer Win"; + } + document.getElementById("computer-choice").innerHTML = + ` Computer choose ${comp_choice.toUpperCase()} `; + + document.getElementById("your-choice").innerHTML = + ` You choose ${your_choice.toUpperCase()} `; + + document.getElementById("computer_score").innerHTML = computer_score; + document.getElementById("user_score").innerHTML = your_score; +}; diff --git a/RPS/style.css b/RPS/style.css new file mode 100644 index 0000000..1bfb39c --- /dev/null +++ b/RPS/style.css @@ -0,0 +1,38 @@ +.container{ + width: 45%; + min-width: 500px; + background-color: #ffffff; + padding: 40px 30px; + position: absolute; + transform: translate(-50%,-50%); + top: 50%; + left: 50%; + border-radius: 10px; + box-shadow: 0 15px 25px rgba(0,0,0,0.15); +} +.scores{ + margin-bottom: 50px; + text-align: right; +} +.buttons{ + width: 90%; + margin: auto; + display: flex; + justify-content: space-around; +} +.buttons button{ + background-color: #ffd51b; + color: #000000; + border: none; + font-size: 50px; + height: 100px; + width: 100px; + border-radius: 50%; +} +.info{ + margin-top: 30px; + text-align: center; +} +span{ + font-weight: 600; +} \ No newline at end of file