kaal-coder · pankajdeh · Oct 25, 2023
diff --git a/Fronted Projects/BubbleGame/app.js b/Fronted Projects/BubbleGame/app.js
@@ -0,0 +1,57 @@
+var hitrn ;
+var score =0;
+var timer = 60;
+
+function makeBubble(){
+    var clutter = "";
+
+for(let i=1; i<109; i++){
+    hitrn = Math.floor(Math.random()*10)
+    clutter += `<div class="bubble">${hitrn}</div>`
+}
+document.querySelector("#pbtm").innerHTML = clutter;
+}
+
+
+function runTimer(){
+    var timerInterval = setInterval(function(){
+        if(timer>0){
+            timer --;
+        document.querySelector("#timerVal").textContent = timer;
+        }
+        else{
+            clearInterval(timerInterval)
+        document.querySelector("#pbtm").innerHTML=`<h1>${"Game over"}</h1>`
+
+        }
+    },1000)
+}
+
+function getNewHit(){
+    hitrn = Math.floor(Math.random()*10)
+    document.querySelector("#hitValue").textContent = hitrn;
+
+}
+
+function increaseScore (){
+    score += 10;
+    document.querySelector("#scoreVal").textContent = score; 
+}
+
+document.querySelector("#pbtm").addEventListener("click", function(details){
+    var clickednum = Number(details.target.textContent);
+    if(clickednum === hitrn){
+        console.log("problem")
+    increaseScore();
+    makeBubble();
+    getNewHit();
+    }
+})
+
+runTimer();
+makeBubble();
+getNewHit();
+
+
+
+// 
diff --git a/Fronted Projects/BubbleGame/index.html b/Fronted Projects/BubbleGame/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Bubble Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <main>
+        <div class="panel">
+            <div id="ptop">
+                <div class="elem">
+                    <h3>Hit</h3>
+                    <div id="hitValue" class="box">2</div>
+                </div>
+                <div class="elem">
+                    <h3 >Timer</h3>
+                    <div id="timerVal" class="box">5</div>
+                </div>
+                <div class="elem">
+                    <h3>Score</h3>
+                    <div id="scoreVal" class="box">0</div>
+                </div>
+            </div>
+            <div id="pbtm">               
+
+            </div>
+        </div>
+    </main>
+
+
+    <script src="./app.js"></script>
+</body>
+</html>
diff --git a/Fronted Projects/BubbleGame/style.css b/Fronted Projects/BubbleGame/style.css
@@ -0,0 +1,85 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family:'Arial Narrow Bold', sans-serif;
+}
+
+html, body{
+    width: 100%;
+    height: 100%;
+}
+
+main{
+    width: 100%;
+    height: 100%;
+    background-color: rgb(116, 159, 116);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.panel{
+    overflow: hidden;
+    width: 80%;
+    height: 80%;
+    background-color: #fff;
+    border-radius: 10px;
+}
+
+#ptop{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0px 20% 0 20%;
+    color: #fff;
+    width: 100%;
+    height: 100px;
+    background-color: rgb(78, 116, 78);
+
+}
+.elem{
+    display: flex;
+    align-items: center;
+    gap: 20px;    
+}
+.elem h3{
+    font-weight: 500;
+    font-size: 22px;
+}
+
+.box{
+    padding: 10px 20px ;
+    background-color: #fff;
+    border-radius:5px;
+    color: #1f6420;
+    font-weight: 700;
+    font-size: 22px;
+}
+
+#pbtm{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: auto;
+    gap: 10px;
+    padding: 10px;
+    flex-wrap: wrap;
+    /* background-color: black; */
+    width: 100%;
+    height: calc(100% - 100px);
+}
+
+.bubble{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    color: white;
+    border-radius: 50%;
+    background-color: rgb(68, 104, 68);
+    font-weight: 500;
+    cursor: pointer;
+
+}
diff --git a/Fronted Projects/Random-Gif-Generator b/Fronted Projects/Random-Gif-Generator
diff --git a/Fronted Projects/ecommerce-shopping-cart b/Fronted Projects/ecommerce-shopping-cart
diff --git a/Full Stack Projects/MernStack Todolist/Client/.DS_Store b/Full Stack Projects/MernStack Todolist/Client/.DS_Store