Hii, My name is Pawan Kumar and i have added some cool Javascript projects

4 years ago · 8e351be20b
parent 3b2d378630
commit 8e351be20b
85 changed files with 1946 additions and 0 deletions
--- a/Project/index.css
+++ b/Project/index.css
@ -0,0 +1,11 @@
+.container {
+    display: flex;
+    margin: auto;
+    max-width: 30%;
+    margin-top: 10%;
+    flex-direction: column;
+}
+
+h2 {
+    margin: auto;
+}
--- a/Project/index.html
+++ b/Project/index.html
@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>JavaScript Background color changes</title>
+
+</head>
+
+<body id="body">
+
+    <div class="container">
+
+        <button type="button" class="btn btn-primary">Change Background</button>
+
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/Project/index.js
+++ b/Project/index.js
@ -0,0 +1,15 @@
+let arr = [
+    'black', 'orange', 'green', 'red', 'blue'
+];
+let button = document.querySelector("button");
+let body = document.getElementById("body");
+
+let a = 0;
+button.addEventListener("click", changeBackground);
+
+function changeBackground() {
+    const indexs = parseInt(Math.random() * arr.length)
+    let texts = arr[indexs];
+    body.style.background = texts;
+    button.innerHTML = texts;
+}
--- a/ToDOList/index.css
+++ b/ToDOList/index.css
@ -0,0 +1,66 @@
+body {
+    background-color: #000f42;
+}
+
+hr {
+    margin: 1rem 0;
+    color: inherit;
+    background-color: turquoise;
+    border: 0;
+    opacity: .25;
+}
+
+.card {
+    background-color: transparent;
+}
+
+.form-control {
+    background: transparent;
+}
+
+.btn {
+    background: transparent;
+    border: 3px solid #0d6efd;
+}
+
+.container {
+    max-width: 44%;
+}
+
+.notescontainer {
+    max-width: 90%;
+    margin: auto;
+}
+
+.notecard {
+    margin: 5vh;
+}
+
+.row {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+}
+
+h1 {
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 8vh;
+    margin-bottom: 8vh;
+    color: white;
+}
+
+.card-title {
+    margin-bottom: .5rem;
+    color: aliceblue;
+}
+
+p {
+    color: aliceblue;
+}
+
+.navbar {
+    background-color: #000f42;
+}
--- a/ToDOList/index.html
+++ b/ToDOList/index.html
@ -0,0 +1,63 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>To_Do_List!</title>
+</head>
+
+<body>
+    <nav class="navbar navbar-expand-lg ">
+        <div class="container-fluid">
+            <a class="navbar-brand" href="/">ToDo</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarSupportedContent">
+                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link active" aria-current="page" href="/">Home</a>
+                    </li>
+
+                </ul>
+                <form class="d-flex">
+                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" id="searchTxt">
+                    <button class="btn btn-outline-success" type="submit">Search</button>
+                </form>
+            </div>
+        </div>
+    </nav>
+    <div class="container my-3">
+        <h1> Welcome To ToDo List</h1>
+        <div class="card">
+
+            <div class="card-body">
+                <h5 class="card-title">Add A Note</h5>
+
+                <div class="form-floating">
+                    <textarea class="form-control" placeholder="Leave a comment here" id="addText"></textarea>
+                    <label for="floatingTextarea">Add notes</label>
+                </div>
+                <button class="btn btn-primary mt-3" id="addBtn">Add Note</button>
+            </div>
+        </div>
+        <hr>
+    </div>
+    <div class="notescontainer">
+        <h1>Your Notes</h1>
+        <hr>
+        <div class="row container-fluid" id="notes">
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/ToDOList/index.js
+++ b/ToDOList/index.js
@ -0,0 +1,80 @@
+    showNotes();
+
+
+    let addBtn = document.getElementById("addBtn");
+    var JSON;
+    addBtn.addEventListener("click", function(e) {
+        let addText = document.getElementById("addText");
+        let notes = localStorage.getItem("notes");
+        if (notes == null) {
+            notesObj = [];
+        } else {
+            notesObj = JSON.parse(notes);
+        }
+        notesObj.push(addText.value);
+
+        localStorage.setItem("notes", JSON.stringify(notesObj));
+        addText.value = "";
+
+        showNotes();
+    })
+
+    showNotes();
+
+    function showNotes() {
+        let notes = localStorage.getItem("notes");
+        if (notes == null) {
+            notesObj = [];
+        } else {
+            notesObj = JSON.parse(notes);
+        }
+
+        let html = "";
+        notesObj.forEach(function(element, index) {
+            html += `   <div class="notecard card my-2" style="width: 18rem;">
+    <div class="card-body">
+        <p class="card-text">${element}</p>
+        <button onclick ="deleteNotes(this.id)" class="btn btn-primary mt-3" id="${index}">Delete Note</button>
+     
+    </div>
+</div>`;
+
+        });
+        let notesElm = document.getElementById('notes');
+        if (notesObj.length != 0) {
+            notesElm.innerHTML = html;
+        } else {
+            notesElm.innerHTML = `Nothing is here Please add notes`;
+        }
+
+
+    }
+
+    function deleteNotes(index) {
+        let notes = localStorage.getItem("notes");
+        if (notes == null) {
+            notesObj = [];
+        } else {
+            notesObj = JSON.parse(notes);
+        }
+        notesObj.splice(index, 1);
+        localStorage.setItem("notes", JSON.stringify(notesObj));
+
+
+        showNotes()
+    }
+
+
+    let search = document.getElementById("searchTxt");
+    search.addEventListener("input", function() {
+        let inputVal = search.value.toLowerCase();
+        let noteCard = document.getElementsByClassName("notecard");
+        Array.from(noteCard).forEach(function(element) {
+            let cardText = element.getElementsByTagName("p")[0].innerText;
+            if (cardText.includes(inputVal)) {
+                element.style.display = "block";
+            } else {
+                element.style.display = "none";
+            }
+        })
+    })
--- a/Project/img/back.jpg
+++ b/Project/img/back.jpg
--- a/Project/img/modal.png
+++ b/Project/img/modal.png
--- a/Project/index.css
+++ b/Project/index.css
@ -0,0 +1,42 @@
+body {
+    background-image: url(./img/back.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+}
+
+.butt {
+    margin: auto;
+    justify-content: center;
+    display: flex;
+    margin-top: 21%;
+}
+
+.Modal {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    justify-content: center;
+    max-width: 30%;
+    margin-top: -12%;
+    background-image: url(./img/modal.png);
+    display: none;
+}
+
+.content {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    padding: 11vh;
+    color: antiquewhite;
+}
+
+.content h2 {
+    font-weight: 700;
+    color: black;
+}
+
+.Modal button {
+    max-width: 8%;
+    margin-left: 92%;
+    border-radius: 11px;
+}
--- a/Project/index.html
+++ b/Project/index.html
@ -0,0 +1,36 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>Hello, world!</title>
+
+</head>
+
+<body>
+    <div class="butt">
+        <button class="btn btn-primary" id="open">
+Modal
+    </button>
+
+
+    </div>
+    <div class="Modal" id="Modal">
+
+        <button class="btn btn-primary" id="xbtn">
+            X
+                </button>
+        <div class="content">
+            <h2>This is modal</h2>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+    <script src="./index.js"></script>
+
+</body>
+
+</html>
--- a/Project/index.js
+++ b/Project/index.js
@ -0,0 +1,12 @@
+      let Btn = document.getElementById("open");
+      let mBtn = document.getElementById("Modal");
+      let closeBtn = document.getElementById("xbtn");
+      closeBtn.addEventListener("click", function(e) {
+          mBtn.style.display = "none";
+          Btn.style.display = "block";
+
+      })
+      Btn.addEventListener("click", function(e) {
+          mBtn.style.display = "block";
+          Btn.style.display = "none";
+      })
--- a/Project/index.css
+++ b/Project/index.css
@ -0,0 +1,19 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    margin-top: 12%;
+    background: black;
+    max-width: 25%;
+    padding: 54px;
+    border-radius: 18px;
+    box-sizing: border-box;
+    box-shadow: 12px 12px 1px -7px darkgrey;
+    color: whitesmoke;
+}
+
+button {
+    margin: 20px;
+}
--- a/Project/index.html
+++ b/Project/index.html
@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title> Counter Project!</title>
+
+</head>
+
+<body>
+    <div class="container">
+        <h2>Counter
+        </h2>
+        <h1 id="number"></h1>
+        <button class="btn btn-dark" id="button-l">Lower</button>
+        <button class="btn btn-primary" id="button-2">Add</button>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js " integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4 " crossorigin="anonymous "></script>
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/Project/index.js
+++ b/Project/index.js
@ -0,0 +1,17 @@
+      let low = document.getElementById("button-l");
+      let add = document.getElementById("button-2");
+      let num = document.getElementById("number");
+      let val = num.innerText;
+      console.log(val);
+      low.addEventListener("click", function(e) {
+          val = val - 1;
+
+          num.innerText = val;
+
+      });
+      add.addEventListener("click", function(e) {
+          val = val + 1;
+
+          num.innerText = val;
+
+      });
--- a/Project/Jquery/img/b1.jpg
+++ b/Project/Jquery/img/b1.jpg
--- a/Project/Jquery/img/b2.jpg
+++ b/Project/Jquery/img/b2.jpg
--- a/Project/Jquery/img/b3.jpg
+++ b/Project/Jquery/img/b3.jpg
--- a/Project/Jquery/img/l1.jpg
+++ b/Project/Jquery/img/l1.jpg
--- a/Project/Jquery/img/l2.jpg
+++ b/Project/Jquery/img/l2.jpg
--- a/Project/Jquery/img/l3.jpg
+++ b/Project/Jquery/img/l3.jpg
--- a/Project/Jquery/img/w1.jpg
+++ b/Project/Jquery/img/w1.jpg
--- a/Project/Jquery/img/w2.jpg
+++ b/Project/Jquery/img/w2.jpg
--- a/Project/Jquery/img/w3.jpg
+++ b/Project/Jquery/img/w3.jpg
--- a/Project/Jquery/index.html
+++ b/Project/Jquery/index.html
@ -0,0 +1,146 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+
+    <title>Filters!</title>
+    <style>
+        .btn {
+            border: 2px solid;
+            background: azure;
+            border-radius: 11px;
+            margin: 56px;
+            font-weight: 800;
+        }
+        
+        .container {
+            display: flex;
+            margin: auto;
+            justify-content: center;
+            align-items: center;
+        }
+        
+        .card img {
+            border: 2px solid;
+            border-radius: 25px;
+            padding: 1px;
+            background: burlywood;
+            border-top-right-radius: 14px;
+            border-top-left-radius: 14px;
+            max-width: 134%;
+            display: flex;
+            position: relative;
+            flex-wrap: wrap;
+        }
+        
+        .filterDiv {
+            border: none;
+            flex-wrap: wrap;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            max-width: 20%;
+            margin: 58px;
+        }
+        
+        .card-group {
+            display: flex;
+            flex-wrap: wrap;
+            max-width: 90%;
+            margin: auto;
+            padding: 36px;
+        }
+        
+        .filterDiv-con {
+            display: flex;
+            margin: auto;
+            justify-content: center;
+            align-items: center;
+            flex-wrap: wrap;
+        }
+        
+        .input-group {
+            position: relative;
+            display: flex;
+            flex-wrap: wrap;
+            align-items: stretch;
+            width: 66%;
+            margin: auto;
+        }
+        
+        body {
+            background-color: #000f42;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container mt-5 a-auto mb-2">
+        <button type="button" class="btn" data-filter="all" active>All</button>
+        <button type="button" class="btn" data-filter="blackCat">Black Cat</button>
+        <button type="button" class="btn" data-filter="whiteCat">White Cat</button>
+        <button type="button" class="btn" data-filter="lion">Lion</button>
+    </div>
+
+    <div class="card-group" id="card-group">
+        <div class="filterDiv-con">
+            <div class="filterDiv blackCat">
+                <img src="./img/b1.jpg" class="card-img" alt="...">
+
+            </div>
+            <div class="filterDiv blackCat">
+                <img src="./img/b2.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv blackCat">
+                <img src="./img/b3.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv whiteCat">
+                <img src="./img/w1.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv whiteCat">
+                <img src="./img/w2.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv whiteCat">
+                <img src="./img/w3.jpg" class="card-img" alt="...">
+            </div>
+
+            <div class="filterDiv lion">
+                <img src="./img/l1.jpg" class="card-img" alt="...">
+            </div>
+
+            <div class="filterDiv lion">
+                <img src="./img/l2.jpg" class="card-img" alt="...">
+            </div>
+
+            <div class="filterDiv lion">
+                <img src="./img/l3.jpg" class="card-img" alt="...">
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
+
+    <script>
+        $(document).ready(function() {
+            $('.btn').click(function() {
+                const value = $(this).attr('data-filter');
+                if (value == 'all') {
+                    $('.filterDiv').show('1000');
+                } else {
+                    $('.filterDiv').not('.' + value).hide('1000');
+                    $('.filterDiv').filter('.' + value).show('1000');
+                }
+            })
+        })
+    </script>
+</body>
+
+</html>
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/(4).mp4.crdownload
+++ b/(4).mp4.crdownload
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/Funky
+++ b/Project/img/Funky
--- a/Project/img/color.mp4
+++ b/Project/img/color.mp4
--- a/Project/img/counter.mp4
+++ b/Project/img/counter.mp4
--- a/Project/img/filter.mp4
+++ b/Project/img/filter.mp4
--- a/Project/img/some
+++ b/Project/img/some
--- a/Project/img/thank.mp4
+++ b/Project/img/thank.mp4
--- a/Project/withjavascript/img/b1.jpg
+++ b/Project/withjavascript/img/b1.jpg
--- a/Project/withjavascript/img/b2.jpg
+++ b/Project/withjavascript/img/b2.jpg
--- a/Project/withjavascript/img/b3.jpg
+++ b/Project/withjavascript/img/b3.jpg
--- a/Project/withjavascript/img/l1.jpg
+++ b/Project/withjavascript/img/l1.jpg
--- a/Project/withjavascript/img/l2.jpg
+++ b/Project/withjavascript/img/l2.jpg
--- a/Project/withjavascript/img/l3.jpg
+++ b/Project/withjavascript/img/l3.jpg
--- a/Project/withjavascript/img/w1.jpg
+++ b/Project/withjavascript/img/w1.jpg
--- a/Project/withjavascript/img/w2.jpg
+++ b/Project/withjavascript/img/w2.jpg
--- a/Project/withjavascript/img/w3.jpg
+++ b/Project/withjavascript/img/w3.jpg
--- a/Project/withjavascript/index.css
+++ b/Project/withjavascript/index.css
@ -0,0 +1,76 @@
+.btn {
+    border: 2px solid;
+    background: azure;
+    border-radius: 11px;
+    margin: 56px;
+    font-weight: 800;
+}
+
+.container {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+}
+
+.card img {
+    border: 2px solid;
+    border-radius: 25px;
+    padding: 1px;
+    background: burlywood;
+    border-top-right-radius: 14px;
+    border-top-left-radius: 14px;
+    max-width: 134%;
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+}
+
+.filterDiv {
+    border: none;
+    flex-wrap: wrap;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-width: 20%;
+    display: none;
+    margin: 58px;
+}
+
+.card-group {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 90%;
+    margin: auto;
+    padding: 36px;
+}
+
+.filterDiv-con {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+}
+
+.input-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 66%;
+    margin: auto;
+}
+
+body {
+    background-color: #000f42;
+}
+
+.show {
+    display: block;
+}
+
+.btn.active {
+    background-color: #666;
+    color: white;
+}
--- a/Project/withjavascript/index.js
+++ b/Project/withjavascript/index.js
@ -0,0 +1,45 @@
+filterSelection("all")
+
+function filterSelection(c) {
+    var x, i;
+    x = document.getElementsByClassName("filterDiv");
+    if (c == "all") c = "";
+    for (i = 0; i < x.length; i++) {
+        w3RemoveClass(x[i], "show");
+        if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
+    }
+}
+
+function w3AddClass(element, name) {
+    var i, arr1, arr2;
+    arr1 = element.className.split(" ");
+    arr2 = name.split(" ");
+    for (i = 0; i < arr2.length; i++) {
+        if (arr1.indexOf(arr2[i]) == -1) {
+            element.className += " " + arr2[i];
+        }
+    }
+}
+
+function w3RemoveClass(element, name) {
+    var i, arr1, arr2;
+    arr1 = element.className.split(" ");
+    arr2 = name.split(" ");
+    for (i = 0; i < arr2.length; i++) {
+        while (arr1.indexOf(arr2[i]) > -1) {
+            arr1.splice(arr1.indexOf(arr2[i]), 1);
+        }
+    }
+    element.className = arr1.join(" ");
+}
+
+// Add active class to the current button (highlight it)
+var btnContainer = document.getElementById("container");
+var btns = btnContainer.getElementsByClassName("btn");
+for (var i = 0; i < btns.length; i++) {
+    btns[i].addEventListener("click", function() {
+        var current = document.getElementsByClassName("active");
+        current[0].className = current[0].className.replace(" active", "");
+        this.className += " active";
+    });
+}
--- a/Project/withjavascript/index1.html
+++ b/Project/withjavascript/index1.html
@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>Filters!</title>
+    <style>
+
+    </style>
+</head>
+
+<body>
+
+    <div class="container mt-5 a-auto mb-2" id="container">
+        <button type="button" class="btn active" onclick="filterSelection('all')">All</button>
+        <button type="button" class="btn" onclick="filterSelection('blackCat')">Black Cat</button>
+        <button type="button" class="btn" onclick="filterSelection('whiteCat')">White Cat</button>
+        <button type="button" class="btn" onclick="filterSelection('lion')">Lion</button>
+    </div>
+
+    <div class="card-group" id="card-group">
+        <div class="filterDiv-con">
+            <div class="filterDiv blackCat">
+                <img src="./img/b1.jpg" class="card-img" alt="...">
+
+            </div>
+            <div class="filterDiv blackCat">
+                <img src="./img/b2.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv blackCat">
+                <img src="./img/b3.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv whiteCat">
+                <img src="./img/w1.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv whiteCat">
+                <img src="./img/w2.jpg" class="card-img" alt="...">
+            </div>
+            <div class="filterDiv whiteCat">
+                <img src="./img/w3.jpg" class="card-img" alt="...">
+            </div>
+
+            <div class="filterDiv lion">
+                <img src="./img/l1.jpg" class="card-img" alt="...">
+            </div>
+
+            <div class="filterDiv lion">
+                <img src="./img/l2.jpg" class="card-img" alt="...">
+            </div>
+
+            <div class="filterDiv lion">
+                <img src="./img/l3.jpg" class="card-img" alt="...">
+            </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+
+
+    <script src="./index.js">
+    </script>
+</body>
+
+</html>
--- a/Project/img/1.jpg
+++ b/Project/img/1.jpg
--- a/Project/img/2.jpg
+++ b/Project/img/2.jpg
--- a/Project/img/3.jpg
+++ b/Project/img/3.jpg
--- a/Project/img/4.jpg
+++ b/Project/img/4.jpg
--- a/Project/img/back.jpg
+++ b/Project/img/back.jpg
--- a/Project/index.css
+++ b/Project/index.css
@ -0,0 +1,67 @@
+body {
+    background-image: url(./img/back.jpg);
+}
+
+.container {
+    max-width: 50%;
+    background: black;
+    padding: 56px;
+    margin-top: 8%;
+}
+
+img {
+    max-width: 124px;
+    border-radius: 62px;
+    height: 109px;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    user-select: none;
+}
+
+h2 {
+    color: antiquewhite;
+    margin: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
+}
+
+h4 {
+    user-select: none;
+    color: antiquewhite;
+    margin: auto;
+    display: flex;
+    margin-top: 12px;
+    margin-bottom: 12px;
+    align-items: center;
+    justify-content: center;
+}
+
+.slides {
+    margin-top: 47px;
+}
+
+p {
+    color: aquamarine;
+    font-weight: 700;
+    user-select: none;
+}
+
+svg {
+    width: 84px;
+    height: 39px;
+    position: absolute;
+    margin: 170px -58px;
+    color: floralwhite;
+}
+
+.second {
+    width: 84px;
+    height: 39px;
+    position: absolute;
+    margin: -204px 41%;
+    color: floralwhite;
+}
--- a/Project/index.html
+++ b/Project/index.html
@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>Hello, world!</title>
+
+</head>
+
+<body>
+
+    <div class="container">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left-circle-fill" id="prev" viewBox="0 0 16 16">
+            <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z"/>
+          </svg>
+        <div class="texts">
+            <h2>Client</h2>
+            <h2>Testimonials</h2>
+        </div>
+
+        <div class="slides">
+            <div id="img">
+                <img src="./img/1.jpg" alt="">
+            </div>
+            <div id="name">
+                <h4>nishu</h4>
+            </div>
+            <div id="about">
+
+                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio.</p>
+            </div>
+
+        </div>
+        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right-circle-fill second" viewBox="0 0 16 16" id="next">
+            <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z"/>
+          </svg>
+
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/Project/index.js
+++ b/Project/index.js
@ -0,0 +1,65 @@
+const reviews = [{
+        id: 1,
+        name: "Nishu",
+        img: "./img/1.jpg",
+        text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio",
+    },
+    {
+        id: 2,
+        name: "Pawan",
+        img: "./img/3.jpg",
+        text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio",
+    },
+    {
+        id: 3,
+        name: "Bro",
+        img: "./img/4.jpg",
+        text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio",
+    },
+    {
+        id: 4,
+        name: "Jyoti",
+        img: "./img/2.jpg",
+        text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem quo placeat officia repudiandae aliquid reiciendis facilis sint, earum tempore! Laboriosam sequi voluptates modi nihil rerum aut molestiae ex quae odio ",
+    },
+];
+let nameSeen = document.querySelector("h4");
+let para = document.querySelector("p");
+let prev = document.getElementById("prev");
+let img = document.querySelector("img")
+
+let next = document.getElementById("next");
+window.addEventListener("DOMContentLoaded", function() {
+    const item = reviews[currentItem];
+
+    nameSeen.textContent = item.name;
+    para.textContent = item.text;
+    img.src = item.img;
+
+});
+
+
+
+let currentItem = 0;
+
+function showPerson(person) {
+    const item = reviews[person];
+    img.src = item.img;
+    nameSeen.textContent = item.name;
+    para.textContent = item.text;
+
+}
+next.addEventListener("click", function() {
+    currentItem++;
+    if (currentItem > reviews.length - 1) {
+        currentItem = 0;
+    }
+    showPerson(currentItem);
+});
+prev.addEventListener("click", function() {
+    currentItem--;
+    if (currentItem < 0) {
+        currentItem = reviews.length - 1;
+    }
+    showPerson(currentItem);
+});
--- a/game/index.css
+++ b/game/index.css
@ -0,0 +1,105 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    max-width: 34%;
+    margin-top: 10%;
+    border: 2px solid;
+    padding: 48px;
+    border-radius: 19px;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+}
+
+.content div {
+    margin: auto;
+    margin-top: 13px;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: green;
+    border-color: #0d6efd;
+    border-radius: 17px;
+}
+
+.input {
+    border-radius: 11px;
+    padding: 7px;
+}
+
+.message {
+    margin-bottom: -29px;
+    margin-top: 1px;
+    margin-left: auto;
+    margin-right: auto;
+    color: aqua;
+}
+
+h5 {
+    color: aqua;
+}
+
+#menChoice {
+    display: none;
+}
+
+#boatGuess {
+    display: none;
+}
+
+#al-message strong {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    font-weight: 900;
+    color: teal;
+}
+
+.heading h2 {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    font-weight: 700;
+    color: aquamarine;
+    margin-bottom: 21px;
+}
+
+p {
+    display: flex;
+    justify-content: center;
+    font-weight: 700;
+    color: red;
+}
+
+body {
+    background-color: #000f;
+}
+
+@media only screen and (max-width:900px) {
+    .container {
+        max-width: 47%;
+    }
+}
+
+@media only screen and (max-width: 700px) {
+    .container {
+        max-width: 65%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .container {
+        max-width: 81%;
+    }
+}
+
+@media only screen and (max-width: 380px) {
+    .container {
+        max-width: 96%;
+    }
+}
--- a/game/index.html
+++ b/game/index.html
@ -0,0 +1,41 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>Hello, world!</title>
+</head>
+
+<body>
+    <div class="container">
+        <div class="heading">
+            <h2>Play With Boat</h2>
+            <p>Select Any number from 1-5</p>
+        </div>
+        <div id="aleartdiv">
+        </div>
+        <div class="content">
+            <div> <input type="number" class="form-control input" placeholder="Server" aria-label="Server" id="input">
+            </div>
+            <div>
+                <button class="btn btn-primary" id="submit-guess">Submit Guess</button>
+            </div>
+            <div>
+                <h5 id="menChoice"></h5>
+            </div>
+        </div>
+        <div class="message">
+            <strong id="boatGuess"></strong>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/game/index.js
+++ b/game/index.js
@ -0,0 +1,34 @@
+let boat = Math.floor(Math.random() * 5);
+let input = document.getElementById("input");
+let submitGuess = document.getElementById("submit-guess");
+let menChoice = document.getElementById("menChoice");
+
+
+let boatGuess = document.getElementById("boatGuess");
+let AlertDiv = document.getElementById("aleartdiv");
+submitGuess.addEventListener("click", function() {
+
+
+    boatGuess.style.display = "block";
+    menChoice.style.display = "block";
+    menChoice.innerHTML = "You Choses = " + input.value;
+    boatGuess.innerHTML = "Boat Choose = " + boat;
+    console.log(boat);
+
+    if (boat == input.value) {
+
+        AlertDiv.innerHTML = `  <div class="alert alert-success alert-dismissible fade show" role="alert" id="al-message">
+            <strong id="final_message">Congrats You Won !!</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>`;
+    } else {
+
+        AlertDiv.innerHTML = ` <div class="alert alert-danger alert-dismissible fade show" role="alert" id="al-message">
+            <strong id="final_message">Sorry You Lose !!</strong>
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>`;
+    }
+    boat = Math.floor(Math.random() * 5)
+
+
+})
--- a/scissor/Red
+++ b/scissor/Red
--- a/scissor/Red
+++ b/scissor/Red
--- a/scissor/index.css
+++ b/scissor/index.css
@ -0,0 +1,21 @@
+.flex-box-container-2 img {
+    border: 1px solid green;
+    width: 30%;
+    margin: 10px;
+    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.7);
+}
+
+.flex-box-rps img:hover {
+    box-shadow: 0px 10px 50px rgba(37, 58, 223, 1)
+}
+
+.container-3 {
+    border: 1px solid black;
+    max-width: 80%;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    text-align: center;
+    margin-top: 10%;
+}
--- a/scissor/index.html
+++ b/scissor/index.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>JS games</title>
+</head>
+
+<body>
+    <div class="container-3">
+        <h2>Challenge 3 : Rock, Paper , Scissors
+        </h2>
+        <hr>
+        <div class="flex-box-rps" id="flex-box-rps-div">
+            <img id="rock" src="./rock.png" height="150" , width="150" onclick="rpsGame(this)">
+            <img id="paper" src="./Red Book Playful Pop of Color Education Logo (3).png" height="150" , width="150" onclick="rpsGame(this)">
+            <img id="scissors" src="./Red Book Playful Pop of Color Education Logo (2).png" height="150" , width="150" onclick="rpsGame(this)">
+
+        </div>
+    </div>
+    <script src="./index.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+
+</body>
+
+</html>
--- a/scissor/index.js
+++ b/scissor/index.js
@ -0,0 +1,81 @@
+// rock paper scissors
+function rpsGame(yourChoice) {
+    console.log(yourChoice);
+    var humanChoice, botChoice;
+    humanChoice = yourChoice.id;
+
+
+    botChoice = numberToChoice(randToRpsInt());
+    console.log('computerChoice', botChoice);
+
+
+
+    result = decideWinner(humanChoice, botChoice);
+    console.log(result);
+
+    message = finalMessage(result);
+    console.log(message);
+    rpsFrontEnd(yourChoice.id, botChoice, message);
+
+}
+
+function randToRpsInt() {
+    return Math.floor(Math.random() * 3);
+}
+
+function numberToChoice(number) {
+    return ['rock', 'paper', 'scissors'][number];
+}
+
+
+function decideWinner(yourChoice, computerChoice) {
+    var rpsDatabase = {
+        'rock': { 'scissors': 1, 'rock': 0.5, 'paper': 0 },
+        'paper': { 'rock': 1, 'paper': 0.5, 'scissors': 0 },
+        'scissors': { 'paper': 1, 'scissors': 0.5, 'rock': 0 }
+    };
+
+    var yourScore = rpsDatabase[yourChoice][computerChoice];
+    var computerScore = rpsDatabase[computerChoice][yourChoice];
+
+    return [yourScore, computerScore];
+}
+
+function finalMessage([yourScore, computerScore]) {
+    if (yourScore === 0) {
+        return { 'message': 'You lost !!', 'color': 'red' };
+
+    } else if (yourScore === 0.5) {
+        return { 'message': 'This is  tied !!', 'color': 'yellow' };
+
+    } else {
+        return { 'message': "You won !!", 'color': 'green' };
+    }
+}
+
+
+
+function rpsFrontEnd(humanImageChoice, botImageChoice, finalMessage) {
+
+    var imageDatabase = {
+        'rock': document.getElementById('rock').src,
+        'paper': document.getElementById('paper').src,
+        'scissors': document.getElementById('scissors').src
+    }
+
+    document.getElementById('rock').remove();
+    document.getElementById('paper').remove();
+    document.getElementById('scissors').remove();
+    var humanDiv = document.createElement('div');
+    var botDiv = document.createElement('div');
+    var messageDiv = document.createElement('div');
+
+    humanDiv.innerHTML = "<img src=' " + imageDatabase[humanImageChoice] + "' height=150 width = 150 style='box-shadow:0px 10px 50px rgba(37,50,223,1)'>";
+
+    botDiv.innerHTML = "<img src=' " + imageDatabase[botImageChoice] + "' height=150 width = 150 style='box-shadow:0px 10px 50px rgba(243,38,223,1)'>";
+    document.getElementById('flex-box-rps-div').appendChild(humanDiv);
+    messageDiv.innerHTML = "<h1 style='color: " + finalMessage['color'] + "; font-size:60px; padding:30px;'> " + finalMessage['message'] + "</h1>";
+    document.getElementById('flex-box-rps-div').appendChild(messageDiv);
+    document.getElementById('flex-box-rps-div').appendChild(botDiv);
+
+}
--- a/scissor/rock.png
+++ b/scissor/rock.png
--- a/Calculator/index.css
+++ b/Calculator/index.css
@ -0,0 +1,62 @@
+.continer {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    max-width: 31%;
+    justify-content: center;
+    margin-top: 12vh;
+    background: black;
+    padding: 11vh;
+    color: aquamarine;
+    border-radius: 21px;
+}
+
+body {
+    background-color: tomato;
+}
+
+h2,
+h4 {
+    display: flex;
+    margin: auto;
+    margin-bottom: 22px;
+    font-weight: 900;
+    color: crimson;
+}
+
+#tip,
+#amount,
+#each {
+    display: none;
+}
+
+.result {
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+}
+
+@media only screen and (max-width:1150px) {
+    .confiner {
+        max-width: 51%;
+    }
+}
+
+@media only screen and (max-width: 794px) {
+    .continer {
+        max-width: 66%;
+    }
+}
+
+@media only screen and (max-width: 610px) {
+    .continer {
+        max-width: 81%;
+    }
+}
+
+@media only screen and (max-width: 500px) {
+    .continer {
+        max-width: 95%;
+        padding: 6vh;
+    }
+}
--- a/Calculator/index.html
+++ b/Calculator/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">
+
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+    <link rel="stylesheet" href="./index.css">
+    <title>Tip Calculator!</title>
+</head>
+
+<body>
+
+    <div class="continer">
+        <h2>Tip Calculator</h2>
+        <div class="mb-3">
+            <label for="number" class="form-label">How Much Was Your Bill ? (in $ )</label>
+            <input type="number" class="form-control" id="number">
+
+        </div>
+        <div class="mb-3">
+            <label for="person" class="form-label">How Many People Sharing The Bill ?</label>
+            <input type="number" class="form-control" id="person">
+        </div>
+
+        <div class="mb-3">
+            <label for="Select" class="form-label">How Was Your Service</label>
+            <select id="Select" class="form-select">
+                <option>Choose.....</option>
+              <option value="20">20%</option>
+              <option value="10">10%</option>
+              <option value="2">2%</option>
+            </select>
+        </div>
+        <button type="submit" class="btn btn-primary" id="calc">Calculate</button>
+
+        <div class="result mt-5">
+            <h4 id="tip"></h4>
+            <h4 id="amount"> </h4>
+            <h4 id="each"> </h4>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
+
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/Calculator/index.js
+++ b/Calculator/index.js
@ -0,0 +1,30 @@
+window.onload = () => {
+    document.getElementById("calc").onclick = calculate;
+}
+
+function calculate() {
+    let amount = document.getElementById("number").value;
+    let person = document.getElementById("person").value;
+    let tip = document.querySelector("#Select").value;
+
+    if (amount == '') {
+        alert("Please enter the valid values");
+        return;
+    }
+    if (person == '1') {
+        document.getElementById("each").style.display = "none";
+    } else {
+        document.getElementById("each").style.display = "block";
+
+    }
+    let totalTip = parseFloat(amount) * parseFloat(tip) / 100;
+    let totalBill = parseFloat(totalTip) + parseFloat(amount);
+    let eachBill = totalBill / parseFloat(person);
+
+    document.getElementById("amount").style.display = "block";
+    document.getElementById("amount").innerHTML = "  Total  bill = $" + totalBill;
+    document.getElementById("tip").style.display = "block";
+    document.getElementById("tip").innerHTML = " Tip for  bill = $" + totalTip;
+
+    document.getElementById("each").innerHTML = "  Each will pay = $" + eachBill;
+}
--- a/9.
+++ b/9.
@ -0,0 +1 @@
+Subproject commit 472a3d7f472c4bf06faf9789eb9f55826c9a0cc2
--- a/Clock/Charas
+++ b/Clock/Charas
--- a/Clock/index.css
+++ b/Clock/index.css
@ -0,0 +1,48 @@
+canvas {
+    display: flex;
+    margin: auto;
+    justify-content: center;
+    align-items: center;
+    margin-top: 5%;
+}
+
+body {
+    background-color: #000f42;
+}
+
+h1 {
+    font-weight: bold;
+    color: cadetblue;
+    font-size: -webkit-xxx-large;
+}
+
+.container {
+    display: flex;
+    margin: auto;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    color: aqua;
+}
+
+input {
+    max-width: 100%;
+    background: transparent;
+    border: 2px solid whitesmoke;
+    border-radius: 2px;
+    padding: 9px;
+    color: antiquewhite;
+    font-weight: 600;
+    border-radius: 12px;
+    margin: 12px 0px;
+}
+
+button {
+    margin: auto;
+    justify-content: center;
+    display: flex;
+    padding: 6px;
+    border-radius: 11px;
+    background: cornsilk;
+    font-weight: 800;
+}
--- a/Clock/index.html
+++ b/Clock/index.html
@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./index.css">
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="container">
+        <h1>Set Alarm</h1>
+        <form action="">
+            <div class="time"> <input type="number" id="h" placeholder="Hours (1-12)"></div>
+            <div class="time"> <input type="number" id="m" placeholder="minute(0-60)"></div>
+            <button type="submit" id="submit">Set</button>
+        </form>
+    </div>
+
+    <canvas id="canvas" width="400" height="400">
+    </canvas>
+
+    <script src="./index.js"></script>
+</body>
+
+</html>
--- a/Clock/index.js
+++ b/Clock/index.js
@ -0,0 +1,120 @@
+var canvas = document.getElementById("canvas");
+var ctx = canvas.getContext("2d");
+var radius = canvas.height / 2;
+ctx.translate(radius, radius);
+radius = radius * 0.90
+setInterval(drawClock, 1000);
+
+function drawClock() {
+    drawFace(ctx, radius);
+    drawNumbers(ctx, radius);
+    drawTime(ctx, radius);
+}
+
+function drawFace(ctx, radius) {
+    var grad;
+    ctx.beginPath();
+    ctx.arc(0, 0, radius, 0, 2 * Math.PI);
+    ctx.fillStyle = 'white';
+    ctx.fill();
+    grad = ctx.createRadialGradient(0, 0, radius * 0.95, 0, 0, radius * 1.05);
+    grad.addColorStop(0, '#333');
+    grad.addColorStop(0.5, 'white');
+    grad.addColorStop(1, '#333');
+    ctx.strokeStyle = grad;
+    ctx.lineWidth = radius * 0.1;
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.arc(0, 0, radius * 0.1, 0, 2 * Math.PI);
+    ctx.fillStyle = '#333';
+    ctx.fill();
+}
+
+function drawNumbers(ctx, radius) {
+    var ang;
+    var num;
+    ctx.font = radius * 0.15 + "px arial";
+    ctx.textBaseline = "middle";
+    ctx.textAlign = "center";
+    for (num = 1; num < 13; num++) {
+        ang = num * Math.PI / 6;
+        ctx.rotate(ang);
+        ctx.translate(0, -radius * 0.85);
+        ctx.rotate(-ang);
+        ctx.fillText(num.toString(), 0, 0);
+        ctx.rotate(ang);
+        ctx.translate(0, radius * 0.85);
+        ctx.rotate(-ang);
+    }
+}
+
+function drawTime(ctx, radius) {
+    var now = new Date();
+    var hour = now.getHours();
+    var minute = now.getMinutes();
+    var second = now.getSeconds();
+    //hour
+    hour = hour % 12;
+    hour = (hour * Math.PI / 6) +
+        (minute * Math.PI / (6 * 60)) +
+        (second * Math.PI / (360 * 60));
+    drawHand(ctx, hour, radius * 0.5, radius * 0.07);
+    //minute
+    minute = (minute * Math.PI / 30) + (second * Math.PI / (30 * 60));
+    drawHand(ctx, minute, radius * 0.8, radius * 0.07);
+    // second
+    second = (second * Math.PI / 30);
+    drawHand(ctx, second, radius * 0.9, radius * 0.02);
+}
+
+function drawHand(ctx, pos, length, width) {
+    ctx.beginPath();
+    ctx.lineWidth = width;
+    ctx.lineCap = "round";
+    ctx.moveTo(0, 0);
+    ctx.rotate(pos);
+    ctx.lineTo(0, -length);
+    ctx.stroke();
+    ctx.rotate(-pos);
+}
+
+var now = new Date();
+var hour = now.getHours();
+var minute = now.getMinutes();
+var second = now.getSeconds();
+
+
+const h = document.getElementById("h");
+const m = document.getElementById("m");
+const submit = document.getElementById("submit");
+submit.addEventListener("click", setAlarm);
+
+var audio = new Audio('./Charas Ganja Mereko Pyara__Set Addicted (320  kbps).mp3');
+
+function ringBell() {
+    audio.play();
+};
+
+function setAlarm(e) {
+    e.preventDefault();
+    let AlarmHour = h.value - hour;
+    let AlarmMinute = m.value - minute;
+
+
+    let setHour = AlarmHour * 3600000;
+    let setMinute = AlarmMinute * 60000;
+    let setInt = setHour + setMinute;
+    let secondInt = second * 1000
+    let finalSet = setInt - secondInt;
+    var current = new Date();
+    console.log(AlarmHour);
+    console.log(current.toLocaleTimeString());
+
+    if (finalSet >= 0) {
+        setTimeout(() => {
+            console.log("Ringing now")
+            ringBell();
+        }, finalSet);
+    }
+
+}
--- a/CvSceaner/index.html
+++ b/CvSceaner/index.html
@ -0,0 +1,127 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <style>
+        #image {
+            display: flex;
+            margin: auto;
+            justify-content: center;
+        }
+        
+        button {
+            width: 100%;
+        }
+        
+        .container {
+            max-width: 61%;
+            padding: 65px;
+        }
+    </style>
+    <title>Hello, world!</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <div class="row">
+            <div class="col-md-6 mx-auto">
+                <h4>
+                    Browser through Cv profiles
+                </h4>
+                <hr>
+                <div id="image">
+
+                </div>
+                <br>
+                <div id="profile">
+
+                </div>
+                <hr>
+                <button class="btn btn-primary btn-block" id="next">Next</button> </div>
+        </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
+    <script>
+        console.log("hello");
+        const data = [{
+            name: 'Pawan kumar',
+            age: 20,
+            city: 'kolkata',
+            language: 'all',
+            framework: 'django',
+            image: 'https://randomuser.me/api/portraits/men/75.jpg',
+
+
+        }, {
+            name: 'Nishu',
+            age: 19,
+            city: 'kolkata',
+            language: 'all',
+            framework: 'dangular',
+            image: 'https://randomuser.me/api/portraits/women/75.jpg',
+
+
+        }, {
+            name: 'bro',
+            age: 21,
+            city: 'kolkata',
+            language: 'all',
+            framework: 'java',
+            image: 'https://randomuser.me/api/portraits/women/70.jpg',
+
+
+        }]
+
+        function cvIterator(profile) {
+            let nextIndex = 0;
+            return {
+                next: function() {
+                    return nextIndex < profile.length ? {
+                        value: profile[nextIndex++],
+                        done: false
+                    } : {
+                        done: true
+                    }
+                }
+            }
+        }
+
+
+        const next = document.getElementById("next");
+        next.addEventListener("click", nextCv);
+
+        const candidate = cvIterator(data);
+
+        nextCv();
+
+        function nextCv() {
+
+            const currentCandidate = candidate.next().value;
+            let profile = document.getElementById("profile");
+            let image = document.getElementById('image');
+            if (currentCandidate != undefined) {
+
+                image.innerHTML = `<img src='${currentCandidate.image}'>`;
+                profile.innerHTML = `<ul class="list-group">
+                <li class="list-group-item">${currentCandidate.name}</li>
+                <li class="list-group-item">${currentCandidate.age}</li>
+                <li class="list-group-item">${currentCandidate.city}</li>
+                <li class="list-group-item">${currentCandidate.language}</li>
+                <li class="list-group-item">${currentCandidate.framework}</li>
+              </ul>`;
+            } else {
+                alert("End of the candidate applications");
+                window.location.reload();
+            }
+        }
+    </script>
+</body>
+
+</html>
--- a/FormValidation/index.html
+++ b/FormValidation/index.html
@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+
+    <title> Welcome to Dragon travels</title>
+</head>
+
+<body>
+    <div id="success" class="alert alert-success alert-dismissible fade" role="alert">
+        <strong>Success!</strong> Your travel request has been successfully submitted
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+            <span aria-hidden="true">×</span>
+        </button>
+    </div>
+    <div id="failure" class="alert alert-danger alert-dismissible fade" role="alert">
+        <strong>Error!</strong> Your travel request has not been sent due to errors
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                <span aria-hidden="true">×</span>
+            </button>
+    </div>
+    <div class="container">
+        <h1>Dragon Travel desk</h1>
+        <form>
+            <div class="form-group">
+                <label for="name">Username</label>
+                <input type="text" class="form-control" id="name" placeholder="Enter your username">
+                <small id="namevalid" class="form-text text-muted invalid-feedback">
+                        Your username must be 2-10 characters long and should not start with a number
+                      </small>
+            </div>
+
+            <div class="form-group">
+                <label for="email">Email address</label>
+                <input type="text" class="form-control" id="email" placeholder="Enter your email">
+                <small id="emailvalid" class="form-text text-muted invalid-feedback">
+                        Your email must be a valid email
+                      </small>
+            </div>
+            <div class="form-group">
+                <label for="car">Select your car</label>
+                <select class="form-control" id="car">
+                    <option>Omni</option>
+                    <option>Maruti 800</option>
+                    <option>Ford Titanium</option>
+                    <option>Audi A4</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="address">Enter your address</label>
+                <textarea class="form-control" name="address" id="address" rows="3"></textarea>
+            </div>
+            <div class="form-group">
+                <label for="address">Enter your phone number</label>
+                <input class="form-control" name="phone" id="phone" rows="3">
+                <small id="emailvalid" class="form-text text-muted invalid-feedback">
+                        Your phone number must be 10 digit long
+                      </small>
+            </div>
+            <div class="form-group">
+                <label for="exampleFormControlTextarea1">Any other message...</label>
+                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+            </div>
+            <button id="submit" class="btn btn-primary">Submit</button>
+        </form>
+
+    </div>
+
+    <!-- Optional JavaScript -->
+    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+    <script>
+        console.log("This is project 4");
+        const name = document.getElementById('name');
+        const email = document.getElementById('email');
+        const phone = document.getElementById('phone');
+        let validEmail = false;
+        let validPhone = false;
+        let validUser = false;
+        $('#failure').hide();
+        $('#success').hide();
+
+        // console.log(name, email, phone);
+        name.addEventListener('blur', () => {
+            console.log("name is blurred");
+            // Validate name here
+            let regex = /^[a-zA-Z]([0-9a-zA-Z]){2,10}$/;
+            let str = name.value;
+            console.log(regex, str);
+            if (regex.test(str)) {
+                console.log('Your name is valid');
+                name.classList.remove('is-invalid');
+                validUser = true;
+            } else {
+                console.log('Your name is not valid');
+                name.classList.add('is-invalid');
+                validUser = false;
+
+            }
+        })
+
+        email.addEventListener('blur', () => {
+            console.log("email is blurred");
+            // Validate email here
+            let regex = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
+            let str = email.value;
+            console.log(regex, str);
+            if (regex.test(str)) {
+                console.log('Your email is valid');
+                email.classList.remove('is-invalid');
+                validEmail = true;
+            } else {
+                console.log('Your email is not valid');
+                email.classList.add('is-invalid');
+                validEmail = false;
+            }
+        })
+
+        phone.addEventListener('blur', () => {
+            console.log("phone is blurred");
+            // Validate phone here
+            let regex = /^([0-9]){10}$/;
+            let str = phone.value;
+            console.log(regex, str);
+            if (regex.test(str)) {
+                console.log('Your phone is valid');
+                phone.classList.remove('is-invalid');
+                validPhone = true;
+            } else {
+                console.log('Your phone is not valid');
+                phone.classList.add('is-invalid');
+                validPhone = false;
+
+            }
+        })
+
+        let submit = document.getElementById('submit');
+        submit.addEventListener('click', (e) => {
+            e.preventDefault();
+
+            console.log('You clicked on submit');
+            console.log(validEmail, validUser, validPhone);
+
+            // Submit your form here
+            if (validEmail && validUser && validPhone) {
+                let failure = document.getElementById('failure');
+
+                console.log('Phone, email and user are valid. Submitting the form');
+                let success = document.getElementById('success');
+                success.classList.add('show');
+                // failure.classList.remove('show');
+                // $('#failure').alert('close');
+                $('#failure').hide();
+                $('#success').show();
+
+            } else {
+                console.log('One of Phone, email or user are not valid. Hence not submitting the form. Please correct the errors and try again');
+                let failure = document.getElementById('failure');
+                failure.classList.add('show');
+                // success.classList.remove('show');
+                // $('#success').alert('hide');
+                $('#success').hide();
+                $('#failure').show();
+            }
+
+
+
+        })
+    </script>
+</body>
+
+</html>
--- a/PRojject/index.html
+++ b/PRojject/index.html
@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            background-color: #000f42;
+        }
+        
+        h1 {
+            font-weight: bolder;
+            font-size: 23vh;
+            display: flex;
+            margin: auto;
+            justify-content: center;
+            margin-top: 16%;
+            position: absolute;
+            margin-left: 87vh;
+            user-select: none;
+        }
+        
+        #im1 {
+            display: none;
+        }
+    </style>
+    <title>Document</title>
+</head>
+
+<body>
+    <div class="img">
+        <h1 id="im1">🐵</h1>
+        <h1 id="im2">🙊</h1>
+    </div>
+
+    <script>
+        let one = document.getElementById("im1");
+        let two = document.getElementById("im2");
+
+        one.addEventListener("click", function() {
+            two.style.display = "block";
+            one.style.display = "none";
+        })
+        two.addEventListener("click", function() {
+            one.style.display = "block";
+            two.style.display = "none";
+        })
+    </script>
+</body>
+
+</html>
--- a/0
+++ b/0
				`@ -0,0 +1 @@`
				`Subproject commit 472a3d7f472c4bf06faf9789eb9f55826c9a0cc2`