diff --git a/Paper.PNG b/Paper.PNG
new file mode 100644
index 0000000..fe0e855
Binary files /dev/null and b/Paper.PNG differ
diff --git a/app.js b/app.js
new file mode 100644
index 0000000..12742c0
--- /dev/null
+++ b/app.js
@@ -0,0 +1,68 @@
+let userScore = 0;
+let aiScore = 0;
+
+const choices = document.querySelectorAll(".choice");
+const msg = document.querySelector("#msg");
+
+const userScorePara = document.querySelector("#user_score");
+const aiScorePara = document.querySelector("#AI_score");
+
+const genAIChoice = () =>
+{
+ const options = ["rock","paper","scissors"];
+ let randIdx = Math.floor(Math.random()*3); //math.random gives random number btw 0 to 1 multiplying 3 gives number btw 0 to 2
+ return options[randIdx];
+};
+
+const drawGame = () =>{
+ msg.innerText = "Game is Draw. Play Again";
+ msg.style.backgroundColor = "#081b31";
+};
+
+const showWinner = (userWin,userChoice,aiChoice,) =>{
+ if(userWin)
+ {
+ userScore++;
+ userScorePara.innerText = userScore;
+ msg.innerText = `You win! Your ${userChoice} beats ${aiChoice}`;
+ msg.style.backgroundColor = "green";
+ }
+ else{
+ aiScore++;
+ aiScorePara.innerText = aiScore;
+ msg.innerText = `You Lose! ${aiChoice} beats your ${userChoice}`; // keep an eye on quotation if printing value
+ msg.style.backgroundColor = "red";
+ }
+};
+
+const playGame = (userChoice) =>{
+
+ const aiChoice = genAIChoice();
+
+ if(userChoice === aiChoice)
+ {
+ drawGame();
+ }
+ else{
+ userWin = true;
+ if(userChoice === "rock")
+ {
+ userWin = aiChoice === "paper" ? false:true;
+ }
+ else if (userChoice === "paper") {
+ //rock, scissors
+ userWin = aiChoice === "scissors" ? false : true;
+ } else {
+ //rock, paper
+ userWin = aiChoice === "rock" ? false : true;
+ }
+ showWinner(userWin, userChoice, aiChoice);
+ }
+ };
+
+ choices.forEach((choice) => {
+ choice.addEventListener("click", () => {
+ const userChoice = choice.getAttribute("id");
+ playGame(userChoice);
+ });
+ });
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a39a171
--- /dev/null
+++ b/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+ Rock Paper Scissors Game
+
+
+
+ ROCK PAPER SCISSOR
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/rock.PNG b/rock.PNG
new file mode 100644
index 0000000..645479b
Binary files /dev/null and b/rock.PNG differ
diff --git a/scissor.PNG b/scissor.PNG
new file mode 100644
index 0000000..3cda936
Binary files /dev/null and b/scissor.PNG differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ac0f134
--- /dev/null
+++ b/style.css
@@ -0,0 +1,68 @@
+* {
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ }
+
+ h1 {
+ background-color: #081b31;
+ color: #3ea85c;
+ height: 5rem;
+ line-height: 5rem;
+ }
+
+ .choice {
+ height: 165px;
+ width: 165px;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .choice:hover {
+ cursor: pointer;
+ background-color: #081b31;
+ }
+
+ img {
+ height: 150px;
+ width: 150px;
+ object-fit: cover;
+ border-radius: 50%;
+ }
+
+ .choices {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 3rem;
+ margin-top: 5rem;
+ }
+
+ .score_board {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 2rem;
+ margin-top: 3rem;
+ gap: 5rem;
+ }
+
+ #user_score,
+ #AI_score {
+ font-size: 4rem;
+ }
+
+ .msg-container {
+ margin-top: 5rem;
+ }
+
+ #msg {
+ background-color: #081b31;
+ color: #fff;
+ font-size: 2rem;
+ display: inline;
+ padding: 1rem;
+ border-radius: 1rem;
+ }
\ No newline at end of file
+ 
+ 
+