diff --git a/Projects/Rock-Paper-Scissors/index.html b/Projects/Rock-Paper-Scissors/index.html index 552f5711..b0accb4c 100644 --- a/Projects/Rock-Paper-Scissors/index.html +++ b/Projects/Rock-Paper-Scissors/index.html @@ -33,6 +33,8 @@ Computer Score: 0 + Ties: + 0 diff --git a/Projects/Rock-Paper-Scissors/index.js b/Projects/Rock-Paper-Scissors/index.js index c4b938e4..5e96e417 100644 --- a/Projects/Rock-Paper-Scissors/index.js +++ b/Projects/Rock-Paper-Scissors/index.js @@ -1,7 +1,9 @@ let userScore=0; let compScore= 0; +let tieScore= 0; const userScore_span=document.getElementById("user_score"); const compScore_span=document.getElementById("comp_score"); +const tieScore_span=document.getElementById("tie_score"); const scoreBoard_div=document.querySelector(".score_board"); const result_p=document.querySelector(".result>p"); const rock_div=document.getElementById("rock") @@ -41,6 +43,8 @@ function lose(userChoice,compChoice){ //here we are making a function where the user and the computer ties function tie(userChoice,compChoice){ + tieScore++; + tieScore_span.innerHTML = tieScore; result_p.innerHTML = `${convertToWord(userChoice)} equals ${convertToWord(compChoice)}. It's a DRAW!`; } @@ -77,8 +81,10 @@ function game(userChoice){ function resetButton(){ userScore = 0; compScore = 0; + tieScore = 0; userScore_span.innerHTML = userScore; compScore_span.innerHTML = compScore; + tieScore_span.innerHTML = tieScore; result_p.innerHTML = ""; } diff --git a/Projects/Rock-Paper-Scissors/style.css b/Projects/Rock-Paper-Scissors/style.css index 47febaa9..ce7aed43 100644 --- a/Projects/Rock-Paper-Scissors/style.css +++ b/Projects/Rock-Paper-Scissors/style.css @@ -67,10 +67,11 @@ body{ font-weight: bold; font-size: 25px; color: rgb(22, 21, 21); - margin-bottom: 50px; - + margin-bottom: 50px; +} +.tie{ + margin-left: 445px; } - .result{ color: rgb(14, 14, 14); font-weight: bold; @@ -94,7 +95,13 @@ body{ font-weight: bold; font-size: 25px; } - +#tie_score{ + color: rgb(236, 18, 232); + text-align: center; + margin-top: 25px; + font-weight: bold; + font-size: 25px; +} #reset { background-color: rgb(154, 25, 25); color: white;