heyhikkie · RekhaGiri · Oct 11, 2023 · Oct 13, 2023 · Oct 13, 2023 · Oct 13, 2023
diff --git a/Bubble-Game/index.html b/Bubble-Game/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css"/>
+
+
+</head>
+<body>
+    <div class="main">
+        <div class="content">
+            <div class="ptop">
+                <div class="box">
+                    <h2>Hit</h2>
+                    <div id= "hitter" class="box2">
+                            5
+                    </div>
+                </div>
+                <div class="box">
+                    <h2>Timer</h2>
+                    <div id="timerval" class="box2">
+                        60
+                    </div>
+                </div>
+                <div class="box">
+                    <h2>Score</h2>
+                    <div id="scoreval" class="box2">
+                        0
+                    </div>
+                </div>
+            </div>
+            <div id="pbtm" class="pbotm">
+
+                <div class="bub"><p>5</p></div>
+
+            </div>
+        </div>
+    </div>
+
+</body>
+ <script src="script.js"> </script>
+
+
+
+
+
+</script>
+</html>
diff --git a/Bubble-Game/script.js b/Bubble-Game/script.js
@@ -0,0 +1,49 @@
+
+function makeBubble(){
+    let some = "";
+    for(let i=1; i<161;i++){
+    some +=` <div class="bub">${Math.floor(Math.random()*10)}</div>`;
+    document.querySelector(".pbotm").innerHTML=some;
+}
+}
+makeBubble();
+
+var timer=60;
+function runTimer(){
+    var timeint=setInterval(function(){
+        if(timer>0){
+            timer--;
+            document.querySelector("#timerval").textContent=timer;
+        }
+        else{
+            clearInterval(timeint);
+            document.querySelector("#pbtm").innerHTML=`<h1>Game Over!!<h1> `;
+            // document.querySelector("#pbtm").innerText=`Your Score is ${score}`;
+        }
+
+    },1000)
+}
+runTimer();
+var rn=0;
+function hitval(){
+    rn = Math.floor(Math.random()*10);
+    document.querySelector("#hitter").textContent=rn;
+}
+hitval();
+var score=0;
+function increaseScore(){
+    score+=10;
+    document.querySelector("#scoreval").textContent=score;
+}
+document.querySelector("#pbtm").addEventListener("click",
+function(dets){
+    var clickedNum =Number(dets.target.textContent);
+    if(rn===clickedNum){
+        increaseScore();
+    }
+    hitval();
+    makeBubble();
+});
+
+
+
diff --git a/Bubble-Game/style.css b/Bubble-Game/style.css
@@ -0,0 +1,79 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+.main{
+    width:100%;
+    height:100vh;
+    background-color:  rgb(202, 238, 202);
+    display:flex;
+    justify-content: center;
+    align-items: center;
+}
+.content{
+    width:80%;
+    height:85%;
+    background-color: #fff;
+    /* display: flex; */
+    border-radius: 10px;
+    overflow:hidden;
+}
+.ptop{
+    width:100%;
+    height:6.1rem;
+    background-color:rgb(72,104,72);
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+    color:white;
+    padding:0px 30%;
+}
+.box{    
+    display:flex;
+    gap:1.2rem;
+    align-items: center;
+    padding: 0.8rem;
+
+}
+.box2{
+    color:rgb(53, 125, 53);
+    padding: 0.9rem 1.4rem ;
+    border-radius: 5px;
+    background-color: white;
+    font-weight: 600;
+    font-size: 1.5rem;
+}
+.pbotm{
+    display: flex;
+    gap:0.9rem;
+    width:100%;
+    height:calc(85% - 1.6rem);
+    padding: 1.2rem 0.5rem;
+    flex-wrap:wrap;
+
+}
+#pbtm {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color:red;
+
+}
+.bub{
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height:2.2rem;
+    width:2.2rem;
+    background-color: rgb(72,104,72);
+    border-radius: 50%;
+    color:white;
+    font-weight: 600;
+}
+.bub:hover{
+    cursor: pointer;
+    background-color: rgb(6, 70, 6);
+}
+
diff --git a/checked.png b/checked.png
diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link href="style.css" rel="stylesheet"/>
+</head>
+<body>
+<div class="container">
+<div class="main-box">
+    <h2>To-Do List<img src="images/icon.png"/></h2>
+    <div class="row">
+        <input type="text" placeholder="Add your text" id="input-box"/>
+        <button onclick="addTask()">Add</button>
+
+    </div>
+    <ul id="list-container">
+        <!-- <li class="checkk">Task 1</li>
+        <li>Task 2</li>
+        <li>Task 3</li> -->
+    </ul>
+</div>
+
+</div>
+
+
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,36 @@
+const inputBox=document.getElementById("input-box");
+const listContainer=document.getElementById("list-container");
+
+function addTask(){
+    if(inputBox.value===""){
+        alert("You Must Write Something!!");
+    }
+    else{
+        let li = document.createElement("li");
+        li.innerHTML=inputBox.value;
+        listContainer.appendChild(li);
+        let span=document.createElement("span");
+        span.innerHTML="\u00d7";
+        li.appendChild(span);
+    }
+    inputBox.value="";
+    saveData()
+}
+listContainer.addEventListener("click", function(e){
+    if(e.target.tagName==="LI"){
+        e.target.classList.toggle("checkk");
+        saveData()
+    }
+    else if(e.target.tagName=="SPAN"){
+        e.target.parentElement.remove();
+        saveData()
+    }
+},false);
+
+function saveData(){
+    localStorage.setItem("data",listContainer.innerHTML);
+}
+function showTask(){
+    listContainer.innerHTML=localStorage.getItem("data");
+}
+showTask();
diff --git a/style.css b/style.css
@@ -0,0 +1,101 @@
+*{
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+    font-family: 'poppins';
+    border:none;
+    outline: none;
+}
+.container{
+    height: 100vh;
+    width: 100vw;
+    background: linear-gradient(135deg,#153677,#4e085f);
+    padding: 0.9rem;
+}
+.main-box{
+    width:100%;
+    max-width: 33.7rem;
+    /* height: 30vh; */
+    margin: 6rem auto 2rem;
+    background-color: white;
+    border-radius: 1rem;
+    padding: 2.2rem 2rem 4.5rem;
+}
+
+.main-box h2{
+    font-size: 2.5rem;
+    color: #002675;
+    display: flex;
+    align-items: center;
+    margin-bottom: 1.2rem;
+}
+.main-box h2 img{
+    width: 2rem;
+    margin-left: 2rem;
+}
+.row{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #edeef0;
+    border-radius: 2.1rem;
+    padding-left: 1.2rem;
+    margin-bottom: 1.6rem;
+}
+input{
+    flex: 1;
+    background: transparent;
+    padding: 0.9rem;
+    font-weight: 1rem;
+    font-size: 1.1rem;
+}
+button{
+    padding: 1rem 3rem;
+    background: #ff5945;
+    color: #fff;
+    border-radius: 2.2rem;
+    font-size: 1rem;
+    cursor: pointer;
+}
+ul li{
+    list-style-type: none;
+    font-size: 1.2rem;
+    padding: 0.7rem 0.5rem 0.7rem 3rem;
+    user-select: none;
+    cursor: pointer;
+    position: relative;
+}
+ul li::before{
+    content: "";
+    position: absolute;
+    height: 1.3rem;
+    width: 1.3rem;
+    border-radius: 50%;
+    background-image: url(images/unchecked.png);
+    background-position: center;
+    background-size: cover;
+    top: 0.8rem;
+    left:0.6rem
+}
+ul li.checkk{
+    color: #555;
+    text-decoration: line-through;
+}
+ul li.checkk::before{
+    background-image: url(images/checked.png);
+}
+ul li span{
+    position: absolute;
+    right: 0;
+    top:0.3rem;
+    width:2.5rem;
+    height: 2.5rem;
+    font-size: 1.4rem;
+    color: #555;
+    line-height: 2.1rem;
+    text-align: center;
+    border-radius: 50%;
+}
+ul li span:hover{
+    background-color: #efeef0;
+}
diff --git a/unchecked.png b/unchecked.png