first commit

sandhya1102 · Aug 30, 2024 · 0ea0dcd · 0ea0dcd
commit 0ea0dcd
Show file tree

Hide file tree

Showing 6 changed files with 166 additions and 0 deletions.
diff --git a/app.js b/app.js
@@ -0,0 +1,61 @@
+let userScore=0;
+let compScore=0;
+
+const choices=document.querySelectorAll(".choice");
+const msg=document.querySelector(".msg");
+const userscore=document.querySelector("#user-score");
+const compscore=document.querySelector("#comp-score");
+
+const gencompChoice=()=>{
+    const options=["rock","paper","Scissor"];
+    const randomid=Math.floor(Math.random()*3);
+    return options[randomid];
+};
+
+const drawgame=()=>{
+    msg.innerText="Draw ,play again";
+    msg.style.backgroundColor="#c20d67a8";
+};
+
+const showWinner=(userWin,userchoice,compchoice)=>{
+    if(userWin){
+        userScore++;
+        userscore.innerText=userScore;
+        msg.innerText=`you win! your ${userchoice} beats ${compchoice}`;
+        msg.style.backgroundColor="green";
+    }else{
+        compScore++;
+        compscore.innerText=compScore;
+            msg.innerText=`you lost! ${compchoice} beats your ${userchoice}`;;
+            msg.style.backgroundColor="red";
+        }
+    };
+
+const playGames=(userchoice)=>{
+    const compchoice=gencompChoice();
+    if(userchoice===compchoice){
+        drawgame();//draw game
+    }else{
+            let userWin=true;{
+            if(userchoice==="rock"){//paper,scissor
+        userWin=compchoice==="paper"?false:true;
+             } else if(userchoice==="paper"){//rock,scissor
+                userWin=compchoice==="Scissor"?false:true;
+             }else{
+                userWin=compchoice==="rock"?false:true;
+             }
+showWinner(userWin,userchoice,compchoice);
+
+        };
+
+    };
+};
+
+
+choices.forEach((choice)=>{
+    choice.addEventListener("click",()=>{
+        const userchoice=choice.getAttribute("id");
+        playGames(userchoice);
+
+    });
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Rock Paper Scissor</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Rock Paper Scissor</h1>
+    <div class="choices">
+        <div class="choice" id="rock">
+            <img src="pics/rock.png">
+        </div>
+        <div class="choice" id="paper">
+            <img src="pics/paper.png">
+        </div>
+        <div class="choice" id="Scissor">
+            <img src="pics/scissors.png">
+        </div>
+    </div>
+    <div class="score-board">
+        <div class="score">
+            <p id="user-score">0</p>
+            <p>You</p>
+        </div>
+        <div class="score">
+            <p id="comp-score">0</p>
+            <p>Computer</p>
+        </div>
+    </div>
+    <div class="msg-container">
+        <div class="msg">Play your move</div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/pics/paper.png b/pics/paper.png
diff --git a/pics/rock.png b/pics/rock.png
diff --git a/pics/scissors.png b/pics/scissors.png
diff --git a/style.css b/style.css
@@ -0,0 +1,68 @@
+*{
+    margin:0;
+    padding:0;
+}
+body {
+    background-color: rgb(180, 80, 80);
+    text-align: center;
+}
+h1{
+    color: azure;
+    box-sizing: border-box;
+    padding:10px;
+    text-align: center;
+    text-decoration:solid;
+    font-family:Verdana;
+    font-style: italic;
+}
+
+.choices{
+    display: flex;
+    justify-content: center;
+    margin-top:60px;
+    gap: 3rem;
+}
+
+.choice:hover{
+    cursor: pointer;
+    background-color: rgb(11, 12, 31);
+}
+
+img{
+    height: 200px;
+    width: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+    box-shadow:0 0 1rem black;
+
+}
+
+.score-board{
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+    padding: 20px;
+    font-size: xx-large;
+    gap:3rem;
+}
+#user-score,#comp-score{
+    font-size: 4rem;
+}
+.msg-container{
+    margin: 20px;
+}
+.msg{
+font-size: 2rem;
+background-color: #0c0609a8;
+color: blanchedalmond;
+display: inline-block;
+border: 1px solid #120f2e;
+border-radius: 0.5rem;
+padding: 10px;
+
+}
+
+.msg:hover{
+    cursor: pointer;
+    background-color: rgb(22, 20, 163);
+}