└── JS Assignments
    ├── .vscode
        └── settings.json
    ├── JSPromiseme-1.txt
    ├── MiniScrabble.txt
    ├── GREEssayTool.txt
    ├── Peek-a-boo.txt
    ├── SumCalculator.txt
    ├── Rotation.txt
    ├── SharableURLs.txt
    ├── DarkTheme.txt
    ├── AsianPaints.txt
    ├── Stopwatch.txt
    ├── OnlineNotepad.txt
    ├── Calculator.txt
    ├── GitHubIssuesJS.txt
    ├── BetterInstagram.txt
    ├── JsErrorHandling.txt
    ├── SearchthroughtheBill.txt
    ├── RandomUserJS.txt
    ├── TipCalculator.txt
    ├── ShoppingCart.txt
    ├── Whack-a-Mole.txt
    ├── TypingGame.txt
    ├── SnakeGame.txt
    ├── Bomberman2.txt
    └── MovieBookingJS.txt


/JS Assignments/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "cSpell.words": [
3 |         "featureflag"
4 |     ]
5 | }


--------------------------------------------------------------------------------
/JS Assignments/JSPromiseme-1.txt:
--------------------------------------------------------------------------------
1 | function promiseMe(time, data) {
2 |     return new Promise(function(res) {
3 |         setTimeout( ()=> {
4 |             res(data);
5 |         }, 1000);
6 |     });
7 | }
8 | 


--------------------------------------------------------------------------------
/JS Assignments/MiniScrabble.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | ---------------------HTML---------------------
 3 | 
 4 | <!-- HTML here -->
 5 | <input id="evaluatedText" value="">
 6 | <h3 id="letterCount">0</h3>
 7 | 
 8 | ---------------------CSS---------------------
 9 | 
10 | No code for CSS
11 | 
12 | ---------------------JavaScript---------------------
13 | 
14 | // JS code here
15 | const text = document.getElementById("evaluatedText");
16 | document.getElementById("evaluatedText").addEventListener("input", myFunction);
17 | function myFunction() {
18 |     if (text.value == "") {
19 |         document.getElementById("letterCount").innerHTML = 0;
20 |     } else {
21 |         document.getElementById("letterCount").innerHTML = text.value.length;
22 |     }
23 | }


--------------------------------------------------------------------------------
/JS Assignments/GREEssayTool.txt:
--------------------------------------------------------------------------------
 1 | Done By Lalit Patil....
 2 | ---------------------HTML---------------------
 3 | 
 4 | <textarea id="evaluatedText" oninput="countWord()" value=""></textarea>
 5 | <h3 id="wordCount">0</h3>
 6 | 
 7 | ---------------------CSS----------------------
 8 | No code for CSS
 9 | ---------------------JavaScript--------------------
10 | 
11 | function countWord() {
12 | 
13 |     var words = document.getElementById("evaluatedText").value;
14 | 
15 |     var count = 0;
16 | 
17 |     var split = words.split(' ');
18 |     for (var i = 0; i < split.length; i++) {
19 |         if (split[i] != "") {
20 |             count += 1;
21 |         }
22 |     }
23 | 
24 |     document.getElementById("wordCount").innerHTML = count;
25 | }


--------------------------------------------------------------------------------
/JS Assignments/Peek-a-boo.txt:
--------------------------------------------------------------------------------
 1 | Done By Lalit Patil....
 2 | ---------------------HTML---------------------
 3 | 
 4 | <h1>I am a headline made with HTML</h1>
 5 | <br />
 6 | <p id="useless-paragraph">Useless paragraph.</p>
 7 | <br />
 8 | <button onclick="toggleVisibility()">Toggle Button</button>
 9 | 
10 | ---------------------CSS----------------------
11 | 
12 | No code for this assignment...
13 | 
14 | ---------------------JavaScript--------------------
15 | 
16 | // your js code goes here
17 | 
18 | 
19 | function toggleVisibility() {
20 |     const paraNode = document.getElementById('useless-paragraph');
21 |     if (paraNode.style.display === "none") {
22 |         paraNode.style.display = "block";
23 |     } else {
24 |         paraNode.style.display = "none";
25 |     }
26 | }


--------------------------------------------------------------------------------
/JS Assignments/SumCalculator.txt:
--------------------------------------------------------------------------------
 1 | Done By Lalit Patil....
 2 | 
 3 | ---------------------HTML---------------------
 4 | 
 5 | <div style='margin-left: 10%;'>
 6 |     <h3>Add Two Numbers</h3>
 7 |     <!--write your code here-->
 8 |     <input type="number" id="num1" /><br>
 9 |     <input type="number" id="num2" /><br>
10 |     <input type="number" id="result" disabled />
11 |     <button id="mybtn" onclick="totalSum()">Sum</button><br>
12 | </div>
13 | 
14 | ---------------------JavaScript--------------------
15 | 
16 | function totalSum() {
17 |     const num1Node = parseFloat(document.getElementById('num1').value);
18 |     const num2Node = parseFloat(document.getElementById('num2').value);
19 |     const resultNode = num1Node + num2Node;
20 |     document.getElementById('result').value = resultNode;
21 | }


--------------------------------------------------------------------------------
/JS Assignments/Rotation.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | ---------------------HTML---------------------
 3 | 
 4 | <div id="box"></div>
 5 | 
 6 | ---------------------CSS---------------------
 7 | 
 8 | #box {
 9 |     width: 100px;
10 |     height: 100px;
11 |     background: red;
12 |     transition: transform 2s;
13 | }
14 | .nor{
15 |     transform: rotate(180deg);
16 | }
17 | .active{
18 |     transform: rotate(0);
19 | 
20 | }
21 | 
22 | ---------------------JavaScript---------------------
23 | 
24 | let box = document.querySelector('div')
25 | 
26 |   let count = 0;
27 | box.addEventListener('mouseover',()=>{
28 |  
29 |   count ++
30 |  if(count % 2 == 1){
31 |      box.classList.add('nor')
32 |      box.classList.remove('active')
33 |  }else if(count % 2 == 0){
34 |      box.classList.remove('nor')
35 |      box.classList.add('active')
36 | 
37 |  }
38 |    
39 | })


--------------------------------------------------------------------------------
/JS Assignments/SharableURLs.txt:
--------------------------------------------------------------------------------
 1 | ---------------------HTML---------------------
 2 | 
 3 | <h3 id="url">https://localhost:8080/<span id="change"></span></h3>
 4 | <input type="text" id="name" name="name">
 5 | <input type="number" id="year" name="year">
 6 | <button id="button" onclick="updateHeading()">Submit</button>
 7 | 
 8 | ---------------------CSS---------------------
 9 | 
10 | No code for CSS
11 | 
12 | ---------------------JavaScript---------------------
13 | 
14 | function updateHeading() {
15 |     let head3 = document.getElementById('url');
16 |     head3.innerText = 'https://localhost:8080/';
17 |     let fName = document.getElementById('name');
18 |     let year = document.getElementById('year');
19 |     if(fName.value === "" && year.value === "")
20 |         return;
21 |     else if(year.value === "")
22 |         head3.innerText += '?' + 'name=' + fName.value;
23 |     else if(fName.value === "")
24 |         head3.innerText += '?' + 'year=' + year.value;
25 |     else
26 |         head3.innerText += '?' + 'name=' + fName.value + '&year=' + year.value;
27 |     fName.value = "";
28 |     year.value = "";
29 | }


--------------------------------------------------------------------------------
/JS Assignments/DarkTheme.txt:
--------------------------------------------------------------------------------
 1 | Done By Lalit Patil....
 2 | 
 3 | ---------------------HTML---------------------
 4 | 
 5 | <div id="app" class="day">
 6 |     <p>I am a Newton School student, ready to become an awesome full stack developer</p>
 7 |     <button onclick="swapTheme()" id="swap" class="button_day">Toggle theme</button>
 8 | </div>
 9 | 
10 | ---------------------CSS---------------------
11 | 
12 | .day {
13 |     background-color: white;
14 |     color: black;
15 | }
16 | 
17 | .night {
18 |     background-color: black;
19 |     color: gold;
20 | }
21 | 
22 | .button_night {
23 |     background-color: darkblue;
24 |     color: white;
25 | }
26 | 
27 | .button_day{
28 |     background-color: white;
29 |     color: black;
30 | }
31 | 
32 | html, body {
33 |     margin: 0px;
34 |     height: 100%;
35 | }
36 | 
37 | #app {
38 |     height: 100%;
39 |     padding: 10px;
40 | }
41 | 
42 | ---------------------JavaScript---------------------
43 | 
44 | let mouseEnabled = false;
45 | const flipSwitch = () => mouseEnabled = !mouseEnabled
46 | function swapTheme() {
47 | 
48 | 
49 |     if (!mouseEnabled) {
50 |         document.getElementById("app").setAttribute("class", "night");
51 |         document.getElementById("swap").setAttribute("class", "button_night");
52 |         flipSwitch()
53 |     } else {
54 |         document.getElementById("app").setAttribute("class", "day");
55 |         document.getElementById("swap").setAttribute("class", "button_day");
56 |         flipSwitch()
57 |     }
58 | 
59 | }


--------------------------------------------------------------------------------
/JS Assignments/AsianPaints.txt:
--------------------------------------------------------------------------------
 1 | ---------------------HTML---------------------
 2 | 
 3 | <input type="number" min="1" max="9" id="wall_id">
 4 |    <input id="wall_color">
 5 |   <button id="apply" onclick="changeHandler()">Change</button>
 6 |   <button id="reset"onclick="resetHandler()">Reset</button> <br><br>
 7 |  
 8 |   <div id="1" value="1"></div>
 9 |    <div id="2" value="2"></div>
10 |     <div id="3" value="3"></div>
11 |    <div id="4" value="4"></div>
12 |    <div id="5" value="5"></div>
13 |    <div id="6" value="6"></div>
14 |    <div id="7" value="7"></div>
15 |    <div id="8" value="8"></div>
16 |    <div id="9" value="9"></div>
17 | 
18 | ---------------------CSS---------------------
19 | 
20 | div {
21 |     width: 20px;
22 |     height: 20px;
23 |     border: 1px solid black;
24 |     display: inline-block;
25 | }
26 | header {
27 |     display: flex;
28 | }
29 | 
30 | ---------------------JavaScript---------------------
31 | 
32 | function changeHandler(){
33 |     // document.querySelector("`#${colorid}`").style.background=`${color}`
34 |     var divs=document.querySelectorAll("div")
35 |     divs.forEach(function findTarget(div){
36 |       if(div.getAttribute("id")==colorid){
37 |         div.style.background=color
38 | 
39 |       }
40 |       else{
41 |         div.style.background="none"
42 | 
43 |       }
44 |     })
45 | 
46 |   }
47 |   function resetHandler(){
48 |     var divs=document.querySelectorAll("div")
49 | 
50 |     divs.forEach(function findTarget(div){
51 |       
52 |         div.style.background="none"
53 | 
54 | 
55 |     })
56 |   }
57 |   var coloridvalue=document.querySelector("#wall_id")
58 |   var colorid
59 |   var colorvalue=document.querySelector("#wall_color")
60 |   var color
61 |   colorvalue.addEventListener('input', updateValuecolour);
62 |   coloridvalue.addEventListener('input', updateValueid);
63 |   function updateValueid(e) {
64 |     colorid= e.target.value;
65 |   }
66 |   function updateValuecolour(e) {
67 |     color= e.target.value;
68 |   }


--------------------------------------------------------------------------------
/JS Assignments/Stopwatch.txt:
--------------------------------------------------------------------------------
 1 | --------------------HTML------------------
 2 | 
 3 | <div id="time"></div>
 4 | <button onclick="start()" id="start">start</button>
 5 | <button onclick="pause()" id="pause">pause</button>
 6 | <button onclick="stop()" id="stop">stop</button>
 7 | 
 8 | 
 9 | --------------------JavaScript----------------
10 | 
11 | function setTime() {
12 |     timerDiv.innerText = (parseInt(time/3600) < 10 ? "0":"") + parseInt(time / 3600) + ":" + (parseInt((time / 60) % 60) <10 ? "0" : "") + parseInt((time / 60) % 60) + ":" + (parseInt((time) % 60) < 10 ? "0" : "") + parseInt((time) % 60);
13 | }
14 | 
15 | function start() {
16 |     if (!timerOn) {
17 |         timerId = setInterval(() => {
18 |             time = time + 0.1;
19 |             setTime();
20 |         }, 100);
21 |         document.getElementById("start").setAttribute('disabled', true);
22 |         document.getElementById("stop").removeAttribute('disabled');
23 |         document.getElementById("pause").removeAttribute('disabled');
24 | 
25 |         timerOn = true;
26 |     }
27 | }
28 | 
29 | function stop() {
30 |     document.getElementById("start").removeAttribute('disabled');
31 |     document.getElementById("pause").setAttribute('disabled', true);
32 |     document.getElementById("pause").innerText = "pause";
33 |     document.getElementById("stop").setAttribute('disabled', true);
34 |     clearInterval(timerId);
35 |     time = 0;
36 |     setTime();
37 |     timerOn = false;
38 | }
39 | 
40 | function pause() {
41 | 
42 |     if (timerOn) {
43 |         clearInterval(timerId);
44 |         timerOn = false;
45 |         document.getElementById('pause').innerText = "continue";
46 |     } else {
47 |         document.getElementById('pause').innerText = "pause";
48 |         start();
49 |     }
50 | }
51 | 
52 | let time = 0;
53 | let timerOn = false;
54 | let timerDiv = document.getElementById('time');
55 | document.getElementById("pause").setAttribute('disabled', true);
56 | document.getElementById("stop").setAttribute('disabled', true);
57 | setTime();
58 | let timerId;


--------------------------------------------------------------------------------
/JS Assignments/OnlineNotepad.txt:
--------------------------------------------------------------------------------
 1 | ------------------HTML------------------
 2 | 
 3 | <div class="container">
 4 |     <div id="notepad">
 5 |         <div id="header">
 6 |             <div id="heading">Online Notepad</div>
 7 |             <div>
 8 |                 <label for="feature-flag">Save My Note</label>
 9 |                 <input type="checkbox" name="save my note" id="feature-flag">
10 |             </div>
11 |         </div>
12 |         <textarea name="textarea" id="textarea" placeholder="Write your notes here" ></textarea>
13 |     </div>
14 | </div>
15 | 
16 | --------------------------CSS-------------------
17 | 
18 | * {
19 |     margin: 0;
20 |     padding: 0;
21 |     box-sizing: border-box;
22 | }
23 | 
24 | body {
25 |     font-size: 16px;
26 |     font-family: Arial, Helvetica, sans-serif;
27 | }
28 | 
29 | .container {
30 |     width: 70%;
31 |     height: auto;
32 |     margin: 50px auto 0px auto;
33 |     border: 1px solid black;
34 | }
35 | 
36 | ul {
37 |     list-style: none;
38 |     display: none;
39 | }
40 | 
41 | select {
42 |     border: none;
43 |     font-size: 1rem;
44 | 
45 | }
46 | 
47 | select:focus {
48 |     outline: none;
49 | }
50 | 
51 | #header {
52 |     width: 100%;
53 |     padding: 6px;
54 |     display: flex;
55 |     justify-content: space-between;
56 |     text-align: center;
57 |     font-size: 1.2rem;
58 |     background-color: white;
59 | }
60 | #textarea {
61 |     height: 500px;
62 |     width: 500px;
63 | }
64 | 
65 | 
66 | ---------------------JavaScript----------------
67 | 
68 | let textarea = document.getElementById('textarea');
69 | let featureflag = document.getElementById('feature-flag');
70 | 
71 | function firstLoad() {
72 |     if (window.localStorage.getItem("autosave-data")) {
73 |         textarea.value = window.localStorage.getItem("autosave-data");
74 |     }
75 | }
76 | 
77 | function updateLocalStorage() {
78 |     setInterval(() => {
79 |         var inputData = textarea.value;
80 |         if (featureflag.checked) {
81 |             window.localStorage.setItem("autosave-data", inputData);
82 |         }
83 |     },1000)
84 | }
85 | firstLoad();
86 | updateLocalStorage();


--------------------------------------------------------------------------------
/JS Assignments/Calculator.txt:
--------------------------------------------------------------------------------
 1 | 
 2 | ---------------------HTML---------------------
 3 | 
 4 | <div class="maindiv">
 5 |     <form name="form1">
 6 |         <input id = "input" type ="text" name = "answer"> <br>
 7 | 
 8 |         <input type = "button" id="block1" value = "1" onclick = "form1.answer.value += '1' ">
 9 |         <input type = "button"  id="block2" value = "2" onclick = "form1.answer.value += '2' ">
10 |         <input type = "button"  id="block3" value = "3" onclick = "form1.answer.value += '3' ">
11 |         <input type = "button"  id="plus" value = "+" onclick = "form1.answer.value += '+' ">
12 |         <br> <br>
13 | 
14 |         <input type = "button" value = "4"  id="block4" onclick = "form1.answer.value += '4' ">
15 |         <input type = "button" value = "5" id="block5" onclick = "form1.answer.value += '5' ">
16 |         <input type = "button" value = "6" id="block6" onclick = "form1.answer.value += '6' ">
17 |         <input type = "button" value = "-" id="minus" onclick = "form1.answer.value += '-' ">
18 |         <br> <br>
19 | 
20 |         <input type = "button" value = "7"  id="block7" onclick = "form1.answer.value += '7' ">
21 |         <input type = "button" value = "8" id="block8" onclick = "form1.answer.value += '8' ">
22 |         <input type = "button" value = "9" id="block9" onclick = "form1.answer.value += '9' ">
23 |         <input type = "button" value = "*"  id="multiply" onclick = "form1.answer.value += '*' ">
24 |         <br> <br>
25 | 
26 | 
27 |         <input type = "button" value = "/"  id="divide" onclick = "form1.answer.value += '/' ">
28 |         <input type = "button" value = "0"  id="block0" onclick = "form1.answer.value += '0' ">
29 |         <input type = "button" value = "."  id="dot" onclick = "form1.answer.value += '.' ">
30 |         <input type = "button" value = "="  id="ans" onclick = "form1.answer.value = eval(form1.answer.value) ">
31 |         <br>
32 | 
33 |         <input type = "button" value = "Clear All"  id="clr" onclick = "form1.answer.value = ' ' " >
34 |         <br>
35 | 
36 |     </form>
37 | </div>
38 | 
39 | ---------------------CSS---------------------
40 | 
41 | .maindiv{
42 |             background-color: gray;
43 |              width:270px;
44 |               height: 330px; 
45 |              padding: 10px; 
46 |         }


--------------------------------------------------------------------------------
/JS Assignments/GitHubIssuesJS.txt:
--------------------------------------------------------------------------------
 1 | ----------------HTML-----------------
 2 | 
 3 | <div class="container">
 4 |           <h1 id="heading">Page number 1</h1>
 5 |           <ol id="list">
 6 |           </ol>
 7 |           <div class="buttons">
 8 |                <button id="load_prev">Prev</button>
 9 |                <button id="load_next">Next</button>
10 |           </div>
11 |      </div>
12 | 
13 | ------------------CSS-----------------------
14 | 
15 |      *{
16 |      margin: 0;
17 |      padding: 0;
18 |      box-sizing: border-box;
19 | }
20 | body{
21 |      height: 100vh;
22 |      width: 100vw;
23 |      display: grid;
24 |      place-content: center;
25 | }
26 | .container{
27 |      width: 500px;
28 |      display: flex;
29 |      flex-direction: column;
30 |      gap: 1rem;
31 | }
32 | #heading{
33 |      text-align: center;
34 | }
35 | .buttons{
36 |      display: flex;
37 |      justify-content: space-between;
38 | }
39 | .buttons button{
40 |      background-color: rgb(20, 91, 199);
41 |      padding: .4rem 1rem;
42 |      font-size: 1.2rem;
43 |      border-radius: .2rem;
44 |      border: none;
45 |      outline: none;
46 |      cursor: pointer;
47 |      color: #fff;
48 | }
49 | 
50 | -------------------JavaScript------------------
51 | 
52 | const heading = document.getElementById('heading');
53 | const next = document.getElementById('load_next');
54 | const prev = document.getElementById('load_prev');
55 | const list = document.getElementById('list');
56 | let pageNumber = 1;
57 | 
58 | function getIssues(pageNumber) {
59 |      return fetch(`https://api.github.com/repositories/1296269/issues?page=${pageNumber}&per_page=5`)
60 |           .then(res => res.json()).then(res => res);
61 | }
62 | 
63 | async function renderIssues(pageNumber) {
64 |      let issues = await getIssues(pageNumber);
65 |      list.innerHTML = '';
66 |      heading.innerHTML = `Page number ${pageNumber}`;
67 |      issues.forEach(issue => {
68 |           let li = document.createElement('li');
69 |           li.innerHTML = issue.node_id;
70 |           list.appendChild(li);
71 |      });
72 | }
73 | renderIssues(1);
74 | 
75 | next.addEventListener('click', () => {
76 |      pageNumber++;
77 |      renderIssues(pageNumber);
78 | })
79 | prev.addEventListener('click', () => {
80 |      if (pageNumber > 1) {
81 |           pageNumber--;
82 |           renderIssues(pageNumber);
83 |      }
84 | })


--------------------------------------------------------------------------------
/JS Assignments/BetterInstagram.txt:
--------------------------------------------------------------------------------
 1 | ----------------------HTML---------------------
 2 | <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 3 | <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 4 | <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 5 | <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 6 | <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 7 | <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
 8 | 
 9 | --------------------CSS-------------------------
10 | #div1, #div2, #div3, #div4, #div5, #div6{
11 | 		  float: left;
12 | 		  width:85px;
13 | 		  height:85px;
14 | 		  margin: 20px; 
15 | 		  padding: 0px;
16 | 		  border: 1px solid black;
17 | 		}
18 | img {
19 |     height: 80px;
20 |     width: 80px;
21 | }
22 | 
23 | div {
24 |     height: 100px;
25 |     width: 100px;
26 | }
27 | 
28 | -------------------------JavaScript----------------------
29 | 
30 | const imgSrc = [
31 |     "https://gamedata.britishcouncil.org/sites/default/files/attachment/number-8_1.jpg",
32 |     "https://cdn.jjkeller.com/wcsstore/CVCatalogAssetStore/images/product/1000x1000/2297.jpg",
33 |     "https://www.wtbtraffic.com/pub/media/catalog/product/cache/207e23213cf636ccdef205098cf3c8a3/3/5/352snw-_2964_.jpg",
34 |     "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRoMbGV1ULD1u_9RUWErypD7livA2msWnb5Xw&usqp=CAU",
35 |     "https://images-na.ssl-images-amazon.com/images/I/31JniuDxNBL.jpg",
36 |     "https://images-na.ssl-images-amazon.com/images/I/31JNiTM00pL.jpg"
37 | ]
38 | 
39 | function allowDrop(ev) {
40 |   ev.preventDefault();
41 | }
42 | 
43 | function drag(ev) {
44 |   ev.dataTransfer.setData("text", ev.target.id);
45 | }
46 | 
47 | function drop(ev) {
48 |   ev.preventDefault();
49 |   let data1 = ev.dataTransfer.getData("text");
50 |   
51 |   let src = event.target.src;
52 |   let id = event.target.id;
53 |   let img1 = document.getElementById(data1);
54 |   event.target.id = img1.id;
55 |   event.target.src = img1.src;
56 |   img1.id = id;
57 |   img1.src = src;
58 | }
59 | 
60 | function loadImgs(){
61 |     for(let i=0 ; i<6 ; i++){
62 |         const newImg = document.createElement("img");
63 |         const currDivId = "div"+(i+1);
64 |         const currImgId = "drag"+(i+1);
65 |         const currDiv = document.getElementById(currDivId);
66 |         // currDiv.innerText = i+1;
67 |         // currDiv.innerText = "Hello World";
68 |         console.log(currDiv);
69 |         newImg.setAttribute("src", imgSrc[i]);
70 |         newImg.setAttribute("id", currImgId);
71 |         newImg.setAttribute("draggable", "true");
72 |         newImg.setAttribute("ondragstart", "drag(event)");
73 | 
74 |         currDiv.appendChild(newImg);
75 |     }
76 | }
77 | loadImgs();


--------------------------------------------------------------------------------
/JS Assignments/JsErrorHandling.txt:
--------------------------------------------------------------------------------
  1 | ---------------------HTML---------------------
  2 | 
  3 | <lable for="input1">Enter value:- </lable>
  4 | <input type="text" id="input1" />
  5 | <button type="button" onclick="evalString()">Test</button>
  6 | 
  7 | ---------------------CSS---------------------
  8 | 
  9 | No code for CSS
 10 | 
 11 | ---------------------JavaScript---------------------
 12 | 
 13 | class OutOfRangeError extends Error {
 14 |   constructor(args) {
 15 |     super();
 16 |     this.name = "OutOfRangeError";
 17 |     this.message =
 18 |       "Expression should only consist of integers and +-/* characters and not '" +
 19 |       args +
 20 |       "' ";
 21 |   }
 22 | }
 23 | 
 24 | class InvalidExprError extends Error {
 25 |   constructor() {
 26 |     super();
 27 |     this.name = "InvalidExprError";
 28 |     this.message =
 29 |       "Expression should not have an invalid combination of expression";
 30 |   }
 31 | }
 32 | 
 33 | 
 34 | function evalString() {
 35 |   let str = document.getElementById("input1").value;
 36 |   try {
 37 | 
 38 | //write your code here
 39 |   for (let i = 0; i < str.length; i++) {
 40 |       if (
 41 |         [
 42 |           "0",
 43 |           "1",
 44 |           "2",
 45 |           "3",
 46 |           "4",
 47 |           "5",
 48 |           "6",
 49 |           "7",
 50 |           "8",
 51 |           "9",
 52 |           "+",
 53 |           "/",
 54 |           " ",
 55 |           "-",
 56 |           "*",
 57 |         ].includes(str[i]) == false
 58 |       ) {
 59 |         throw new OutOfRangeError(str[i]);
 60 |       }
 61 |     }
 62 |     str.replace(" ", "");
 63 |     if (["+", "*", "/"].includes(str[0])) {
 64 |       throw new SyntaxError(
 65 |         "Expression should not start with invalid operator"
 66 |       );
 67 |     }
 68 |     if (["+", "*", "/", "-"].includes(str[str.length - 1])) {
 69 |       throw new SyntaxError(
 70 |         "Expression should not end with invalid operator"
 71 |       );
 72 |     }
 73 |     for (let i = 1; i < str.length - 1; i++) {
 74 |       if (
 75 |         (["+", "/", "-", "*"].includes(str[i - 1]) &&
 76 |           ["+", "/", "*"].includes(str[i])) ||
 77 |         (["+", "/", "-", "*"].includes(str[i - 1]) &&
 78 |           str[i] == "-" &&
 79 |           ["+", "-", "/", "*"].includes(str[i + 1]))
 80 |       ) {
 81 |         throw new InvalidExprError(
 82 |           "Bad expression, Expression should not consist of an invalid sequence of operation"
 83 |         );
 84 |       }
 85 |     }
 86 | 
 87 | 
 88 |     alert("passed");
 89 |   } catch (e) {
 90 |     alert("failed " + e.name + " " + e.message);
 91 |     if (window.Cypress) {
 92 |       throw e;
 93 |     }
 94 |   }
 95 | }
 96 | 
 97 | if (window.Cypress) {
 98 |   window.OutOfRangeError = OutOfRangeError
 99 |     window.InvalidExprError = InvalidExprError
100 | }


--------------------------------------------------------------------------------
/JS Assignments/SearchthroughtheBill.txt:
--------------------------------------------------------------------------------
  1 | Done By Lalit Patil....
  2 | 
  3 | ---------------------HTML---------------------
  4 | 
  5 | <h1>Grocery Bill</h1>
  6 | 
  7 | <input placeholder="search"  id="search-bar" onchange="update()" />
  8 | <table>
  9 | </table>
 10 | 
 11 | ---------------------CSS----------------------
 12 | 
 13 | td,th,tr{
 14 |     padding: 5px;
 15 |     border: 2px solid black;
 16 |     margin-top: 15px;
 17 | }
 18 | tr:nth-child(1){
 19 |     background-color: rgba(128, 128, 128, 0.589);
 20 | }
 21 | 
 22 | ---------------------JavaScript--------------------
 23 | 
 24 | const billItems = [{
 25 |     id: 1,
 26 |     itemName: "Bread",
 27 |     price: 20
 28 |   }, {
 29 |     id: 2,
 30 |     itemName: "Butter",
 31 |     price: 50
 32 |   }, {
 33 |     id: 3,
 34 |     itemName: "Tomatoes",
 35 |     price: 30
 36 |   }, {
 37 |     id: 4,
 38 |     itemName: "Onion",
 39 |     price: 40
 40 |   }, {
 41 |     id: 5,
 42 |     itemName: "Pomegranate",
 43 |     price: 60
 44 |   }, {
 45 |     id: 6,
 46 |     itemName: "Apple",
 47 |     price: 40
 48 |   }, {
 49 |     id: 7,
 50 |     itemName: "Grapes",
 51 |     price: 30
 52 |   }, {
 53 |     id: 8,
 54 |     itemName: "Mango",
 55 |     price: 100
 56 |   }]
 57 |   var t;
 58 |   window.onload = function() {
 59 |     t = document.getElementsByTagName("table").item(0);
 60 |     var r = document.createElement("tr");
 61 |     var d1 = document.createElement("th");
 62 |     var d2 = document.createElement("th");
 63 |     var d3 = document.createElement("th");
 64 |     d1.innerHTML = "<b>id</b>";
 65 |     d2.innerHTML = "<b>itemName</b>";
 66 |     d3.innerHTML = "<b>price</b>";
 67 |     r.appendChild(d1);
 68 |     r.appendChild(d2);
 69 |     r.appendChild(d3);
 70 |     t.appendChild(r);
 71 |     for(let i = 0; i < 8; i++){
 72 |         var r = document.createElement("tr");
 73 |         var d1 = document.createElement("td");
 74 |         var d2 = document.createElement("td");
 75 |         var d3 = document.createElement("td");
 76 |         d1.innerText = billItems[i]["id"];
 77 |         d2.innerText = billItems[i]["itemName"];
 78 |         d3.innerText = billItems[i]["price"];
 79 |         r.appendChild(d1);
 80 |         r.appendChild(d2);
 81 |         r.appendChild(d3);
 82 |         t.appendChild(r);
 83 |     }
 84 |   }
 85 | 
 86 | function update() {
 87 |     t.innerHTML = "";
 88 |     var text = document.getElementById("search-bar").value;
 89 |     text = text.toLowerCase();
 90 |     var a = [];
 91 |     for(let i = 0; i < 8; i++){
 92 |         var p = billItems[i]["itemName"].toLowerCase();
 93 |         if(p.indexOf(text) != -1) a.push(i);
 94 |     }
 95 |     if(a.length == 0){
 96 |         t.innerText = "No items found!";
 97 |         return;
 98 |     }
 99 |     var r = document.createElement("tr");
100 |     var d1 = document.createElement("th");
101 |     var d2 = document.createElement("th");
102 |     var d3 = document.createElement("th");
103 |     d1.innerHTML = "<b>id</b>";
104 |     d2.innerHTML = "<b>itemName</b>";
105 |     d3.innerHTML = "<b>price</b>";
106 |     r.appendChild(d1);
107 |     r.appendChild(d2);
108 |     r.appendChild(d3);
109 |     t.appendChild(r);
110 |     for(let i = 0; i < a.length; i++){
111 |         var r = document.createElement("tr");
112 |         var d1 = document.createElement("td");
113 |         var d2 = document.createElement("td");
114 |         var d3 = document.createElement("td");
115 |         d1.innerText = billItems[a[i]]["id"];
116 |         d2.innerText = billItems[a[i]]["itemName"];
117 |         d3.innerText = billItems[a[i]]["price"];
118 |         r.appendChild(d1);
119 |         r.appendChild(d2);
120 |         r.appendChild(d3);
121 |         t.appendChild(r);
122 |     }
123 | }


--------------------------------------------------------------------------------
/JS Assignments/RandomUserJS.txt:
--------------------------------------------------------------------------------
  1 | ------------HTML-----------
  2 | 
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |      <meta charset="UTF-8">
  7 |      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |      <title>Random User</title>
 10 |      
 11 | </head>
 12 | <body>
 13 |      <div class="container">
 14 |           <div class="img-container">
 15 |                <img src="" id="image" alt="img">
 16 |           </div>
 17 |           <h1 id="name">Javid Ahmad Raina</h1>
 18 |           <div class="buttons">
 19 |                <button id="age" data-attr = "age">Age</button>
 20 |                <button id="email" data-attr = "email">Email</button>
 21 |                <button id="phone" data-attr = "phone">Phone</button>
 22 |           </div>
 23 |           <section>
 24 |                <h1 id="additional-info">Additional info</h1>
 25 |           </section>
 26 |           <button id="getUser">Get User</button>
 27 |      </div>
 28 |      
 29 | </body>
 30 | </html>
 31 | 
 32 | --------------CSS----------------
 33 | *{
 34 |      margin: 0;
 35 |      padding: 0;
 36 |      box-sizing: border-box;
 37 | }
 38 | body{
 39 |      height: 100vh;
 40 |      width: 100vw;
 41 |      display: grid;
 42 |      place-content: center;
 43 | }
 44 | .container{
 45 |      display: flex;
 46 |      flex-direction: column;
 47 |      gap: 1rem;
 48 | }
 49 | .img-container{
 50 |      height: 250px;
 51 |      width: 250px;
 52 |      margin: 0 auto;
 53 |      border-radius: .5rem;
 54 |      border: 4px solid black;
 55 | }
 56 | .img-container img{
 57 |      width: 100%;
 58 |      height: 100%;
 59 |      border-radius: .5rem;
 60 | }
 61 | #name{
 62 |      text-align: center;
 63 | }
 64 | .buttons{
 65 |      display: flex;
 66 |      justify-content: space-around;
 67 |      gap: 1rem;
 68 | }
 69 | .buttons button, #getUser{
 70 |      width: 100px;
 71 |      height: 35px;
 72 |      font-size: 1.1rem;
 73 |      color: #fff;
 74 |      background-color: #5886b1;
 75 |      cursor: pointer;
 76 |      outline: none;
 77 |      border: none;
 78 |      border-radius: .4rem;
 79 | }
 80 | #additional-info{
 81 |      text-align: center;
 82 | }
 83 | #getUser{
 84 |      width: 150px;
 85 |      height: 40px;
 86 |      background-color: #0b66bb;
 87 | }
 88 | 
 89 | ---------------JavaScript----------------
 90 | 
 91 | const imageElement = document.getElementById('image');
 92 | const nameElement = document.getElementById('name');
 93 | const ageButton = document.getElementById('age');
 94 | const emailButton = document.getElementById('email');
 95 | const phoneButton = document.getElementById('phone');
 96 | const additionalInfoElement = document.getElementById('additional-info');
 97 | const getUserButton = document.getElementById('getUser');
 98 | 
 99 | const RANDOM_USER_API = "https://randomuser.me/api/";
100 | let age = 24;
101 | let email = "rainajavid15@gmail.com";
102 | let phone = "(+91) 9797555369";
103 | 
104 | function getRandomUser(){
105 |      return fetch(RANDOM_USER_API).then(res => res.json()).then(res => res.results[0]);
106 | }
107 | 
108 | async function renderRandomUser(){
109 |      let randomUser = await getRandomUser();
110 |      imageElement.src = randomUser.picture.large;
111 |      nameElement.innerText = `${randomUser.name.first} ${randomUser.name.last}`;
112 |      age = randomUser.dob.age;
113 |      email = randomUser.email;
114 |      phone = randomUser.phone;
115 |      console.log(randomUser);
116 | }
117 | 
118 | renderRandomUser();
119 | 
120 | ageButton.addEventListener('click', _ => {
121 |      additionalInfoElement.innerText = age;
122 | });
123 | emailButton.addEventListener('click', _ => {
124 |      additionalInfoElement.innerText = email;
125 | });
126 | phoneButton.addEventListener('click', _ => {
127 |      additionalInfoElement.innerText = phone;
128 | });
129 | 
130 | getUserButton.addEventListener('click', renderRandomUser);


--------------------------------------------------------------------------------
/JS Assignments/TipCalculator.txt:
--------------------------------------------------------------------------------
  1 | --------------------HTML------------------
  2 | <html>
  3 | 
  4 | <head>
  5 |     <link rel="stylesheet" href="style.css">
  6 |     <link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>
  7 | </head>
  8 | 
  9 | <body>
 10 |     <div class="container">
 11 |         <div class="header">
 12 |             TIP CALCULATOR
 13 |         </div>
 14 |         <div>
 15 |             <div>
 16 |                 <p>How much was your bill?</p>
 17 |                 ₹ <input type="number" id="billamt"placeholder="Amount to be paid">
 18 |                 <p>How was the service?</p>
 19 |                 <select id="serviceQual">
 20 |                 <option selected="" disabled="" hidden="">
 21 |                     Select
 22 |                 </option>
 23 |                 <option value="0.05">5% - Terrible</option>
 24 |                 <option value="0.1">10% - Bad</option>
 25 |                 <option value="0.15">15% - It Was Ok</option>
 26 |                 <option value="0.2">20% - Good</option>
 27 |                 <option value="0.25">25% - Great</option>
 28 |                 <option value="0.3">30% - Outstanding</option>
 29 |             </select>
 30 |                 <p>Total number of persons</p>
 31 |                 <input type="number" id="peopleamt"  placeholder="Number of people sharing the bill"><br>
 32 |                 <button id="calculate">Calculate</button>
 33 |             </div>
 34 |             <div class="tip">
 35 |                 <p>Tip Amount</p>
 36 |                 ₹ <span id="total">0.10</span>
 37 |                 <span id="each" style="display: none;">each</span>
 38 |             </div>
 39 |         </div>
 40 |     </div>
 41 |     <script src="script.js"></script>
 42 | </body>
 43 | </html>
 44 | 
 45 | ----------------------CSS-----------------------
 46 | body {
 47 |     background-color: grey;
 48 |     text-align: center;
 49 | }
 50 | input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
 51 |     -webkit-appearance: none;
 52 |     margin: 0;
 53 | }
 54 | .container {
 55 | 
 56 |     width: 300px;
 57 |     height: 515px;
 58 |     border-radius: 25px;
 59 |     background-color: honeydew;
 60 |     position: absolute;
 61 |     top: 0;
 62 |     bottom: 0;
 63 |     left: 0;
 64 |     right: 0;
 65 |     margin: auto;
 66 | }
 67 | .header
 68 | {
 69 |     font-family: 'Annie Use Your Telescope';
 70 |     background-color: black;
 71 |     color: rgb(241, 173, 173);
 72 |     font-size: 25px;
 73 |     text-align: center;
 74 |     height: 50px; 
 75 |      width: 300px;
 76 |     border-top-left-radius: 20px;
 77 |     border-top-right-radius: 20px;
 78 |     padding-top: 15px;
 79 | }
 80 | button {
 81 | margin: 20px auto;
 82 | width: 150px;
 83 | height: 50px;
 84 | background-color: black;
 85 | color: rgb(156, 111, 111);
 86 | font-size: 20px;
 87 | border: none;
 88 | border-radius: 5px;
 89 | }
 90 | button:hover{
 91 |    color: rgb(178, 241, 67);
 92 | }
 93 | input,
 94 | select {
 95 | width: 85%;
 96 | border: none;
 97 | border-bottom: 1px solid green;
 98 | padding: 10px;
 99 | border-radius: 8px;
100 | }
101 | 
102 | --------------------JavaScript---------------------
103 | 
104 | window.onload = () => {
105 |     document.querySelector('#calculate').onclick = calculateTip;
106 | }
107 | 
108 | function calculateTip()
109 | {
110 |     var bill = document.querySelector("#billamt").value;
111 |     var tipPercentage = document.querySelector("#serviceQual").value;
112 |     var persons = document.querySelector("#peopleamt").value;
113 |     if(bill === '' || tipPercentage === 'Select' || persons === '')
114 |     {
115 |         alert("Please Enter Bill Amount");
116 |         return;
117 |     }
118 |     if(persons === '1')
119 |     {
120 |         document.querySelector('#each').style.display = 'none';
121 |     }
122 |     else
123 |     {
124 |         document.querySelector('#each').style.display = 'block';
125 |     }
126 |     var tip=(bill*tipPercentage)/persons;
127 |     tip=tip.toFixed(2);
128 |     document.getElementById("total").innerHTML=tip;
129 | }


--------------------------------------------------------------------------------
/JS Assignments/ShoppingCart.txt:
--------------------------------------------------------------------------------
  1 | ---------------------HTML---------------------
  2 | 
  3 | <h1>Grocery List</h1>
  4 | <!--input fields -->
  5 | <div class="container">
  6 |   <div>
  7 |     <label for="item-name-input">Item Name</label>
  8 |     <input id="item-name-input" type="text" required name="itemName" placeholder="Enter Item Name">
  9 |   </div>
 10 |   <div>
 11 |     <label for="item-price-input">Price</label>
 12 |     <input id="item-price-input" type="text" required name="priceTag" placeholder="Enter Price">
 13 |   </div>
 14 |   <button type="submit" id="addButton">Add</button>
 15 | </div>
 16 | <table>
 17 |   <thead>
 18 |     <tr>
 19 |       <th>Sr. No.</th>
 20 |       <th>Title</th>
 21 |       <th>Price</th>
 22 |     </tr>
 23 |   </thead>
 24 |   <tbody id="table-body">
 25 | 
 26 |   </tbody>
 27 |   <tfoot>
 28 |     <tr>
 29 |       <td colspan="2">Total Price</td>
 30 |       <td data-ns-test="grandTotal" id="total-price">0</td>
 31 |     </tr>
 32 |   </tfoot>
 33 | </table>
 34 | 
 35 | ---------------------CSS---------------------
 36 | 
 37 | *,
 38 | *::after,
 39 | *::before {
 40 |     
 41 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 42 | }
 43 | 
 44 | h1 {
 45 |     font-size: 2rem;
 46 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 47 |     text-align: center;
 48 | }
 49 | 
 50 | .container {
 51 |     background-color: #7A82AB;
 52 |     padding: 8px 16px;
 53 |     display: flex;
 54 |     flex-direction: column;
 55 |     align-items: flex-start;
 56 |     justify-content: center;
 57 |     gap: 1.2rem;
 58 |     margin-bottom: 2rem;
 59 | }
 60 | 
 61 | .container div {
 62 |     display: flex;
 63 |     flex-direction: column;
 64 |     gap: 12px;
 65 | }
 66 | 
 67 | label {
 68 |     font-size: 1rem;
 69 | }
 70 | 
 71 | input {
 72 |     width: 420px;
 73 |     height: 32px;
 74 |     padding: 8px 16px;
 75 |     border-radius: 8px;
 76 |     border: 1px solid #ddd;
 77 | }
 78 | 
 79 | input:focus {
 80 |     outline: none;
 81 |     border: 1px solid #2b6ce6;
 82 | }
 83 | 
 84 | ::placeholder {
 85 |     font-size: 0.8rem;
 86 | }
 87 | 
 88 | button {
 89 |     align-self: center;
 90 |     font-size: 1rem;
 91 |     padding: 8px 24px;
 92 |     border-radius: 8px;
 93 |     border: 1px solid transparent;
 94 |     background-color: #2b6ce6;
 95 |     color: #fff;
 96 |     cursor: pointer;
 97 |     transition: all 0.6s ease;
 98 | }
 99 | 
100 | button:hover {
101 |     background: transparent;
102 |     border: 1px solid #2b6ce6;
103 |     color: #2b6ce6;
104 | }
105 | 
106 | button:focus {
107 |     outline: none;
108 | }
109 | 
110 | table {
111 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
112 |     width: 100%;
113 |     border-collapse: collapse;
114 |     color: #333;
115 | }
116 | 
117 | td,
118 | th {
119 |     border: 1px solid #ddd;
120 |     padding: 8px;
121 |     text-align: center;
122 | }
123 | 
124 | td {
125 |     font-size: 1.2rem;
126 | }
127 | 
128 | tr:nth-child(even) {
129 |     background-color: #f2f2f2;
130 | }
131 | 
132 | td:hover {
133 |     background-color: #ddd;
134 | }
135 | 
136 | th {
137 |     padding-top: 12px;
138 |     padding-bottom: 12px;
139 |     text-align: center;
140 |     background-color: #2b6ce6;
141 |     color: #fff;
142 | }
143 | 
144 | ---------------------JavaScript---------------------
145 | 
146 | 'use strict';
147 | 
148 | const itemInputArea = document.querySelector('#item-name-input');
149 | const priceInputArea = document.querySelector('#item-price-input');
150 | const addButton = document.querySelector('#addButton');
151 | const tableBody = document.querySelector('#table-body');
152 | const totalPriceCell = document.querySelector('#total-price');
153 | 
154 | let itemName, priceValue;
155 | let totalPrice = 0, totalItem = 1;
156 | 
157 | function insertItem() {
158 |     tableBody.innerHTML += `
159 |         <tr>
160 |             <td>${totalItem++}</td>
161 |             <td data-ns-test="item-name">${itemName}</td>
162 |             <td data-ns-test="item-price">${priceValue}</td>
163 |         </tr>
164 |     `;
165 | }
166 | 
167 | const resetInputField = function () {
168 |     itemInputArea.value = "";
169 |     priceInputArea.value = "";
170 | }
171 | 
172 | const getInputValue = function (event) {
173 |     event.preventDefault();
174 |     itemName = itemInputArea.value;
175 |     priceValue = parseInt(priceInputArea.value);
176 |     if (isNaN(priceValue) || itemName === ' ' || itemName.length === 0) {
177 |         resetInputField();
178 |         return;
179 |     }
180 |     totalPrice += priceValue;
181 |     totalPriceCell.textContent = `${totalPrice}`;
182 |     insertItem();
183 |     resetInputField();
184 | }
185 | 
186 | addButton.addEventListener('click', getInputValue);


--------------------------------------------------------------------------------
/JS Assignments/Whack-a-Mole.txt:
--------------------------------------------------------------------------------
  1 | ---------------------HTML---------------------
  2 | 
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |      <meta charset="UTF-8">
  7 |      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |      <link rel="preconnect" href="https://fonts.googleapis.com">
 10 |      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 11 |      <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
 12 |      <link rel="stylesheet" href="style.css">
 13 |      <title>Whack a mole</title>
 14 | </head>
 15 | <body>
 16 |      <div class="container">
 17 |           <h1>Whack a mole</h1>
 18 |           <div class="score-timeLeft-container">
 19 |                <p>Score:<h3 id="score"></h3></p>
 20 |                <p>Time Left:<h3 id="time-left"></h3></p>
 21 |           </div>
 22 |           <div id="grid">
 23 |                <div class="square"></div>
 24 |                <div class="square"></div>
 25 |                <div class="square"></div>
 26 |                <div class="square"></div>
 27 |                <div class="square mole">
 28 |                     <img src="mole.png" id="mole-img">
 29 |                </div>
 30 |                <div class="square"></div>
 31 |                <div class="square"></div>
 32 |                <div class="square"></div>
 33 |                <div class="square"></div>
 34 |           </div>
 35 |           <div class="buttons">
 36 |                <button id="start">Start</button>
 37 |                <button id="reset">Reset</button>
 38 |           </div>
 39 |      </div>
 40 |      <script src="script.js"></script>
 41 | </body>
 42 | </html>
 43 | 
 44 | ---------------------CSS---------------------
 45 | 
 46 | *{
 47 |      margin: 0;
 48 |      padding: 0;
 49 |      box-sizing: border-box;
 50 |      font-family: 'Poppins', sans-serif;
 51 |      color: #072227;
 52 | }
 53 | body{
 54 |      height: 100vh;
 55 |      width: 100vw;
 56 |      display: grid;
 57 |      place-content: center;
 58 |      background-color: #aaa;
 59 | }
 60 | .container{
 61 |      display: flex;
 62 |      flex-direction: column;
 63 |      justify-content: center;
 64 |      align-items: center;
 65 |      gap: 1rem;
 66 | }
 67 | .container h1{
 68 |      letter-spacing: 5px;
 69 | }
 70 | .score-timeLeft-container{
 71 |      width: 100%;
 72 |      display: flex;
 73 |      justify-content: space-between;
 74 |      align-items: center;
 75 |      font-size: 1.3rem;
 76 |      font-weight: 600;
 77 | }
 78 | #grid{
 79 |      display: grid;
 80 |      grid-template-columns: repeat(3, 100px);
 81 |      grid-template-rows: repeat(3, 100px);
 82 |      grid-row-gap: 1rem;
 83 |      grid-column-gap: 1rem;
 84 | }
 85 | .square{
 86 |      box-shadow: inset -5px -5px 9px #eee,
 87 |       inset 5px 5px 9px #222;
 88 |       border-radius: 5px;
 89 | }
 90 | img{
 91 |      width: 100%;
 92 |      height: 100%;
 93 | }
 94 | .buttons{
 95 |      width: 100%;
 96 |      display: flex;
 97 |      justify-content: space-between;
 98 | }
 99 | button{
100 |      width: 140px;
101 |      height: 40px;
102 |      border-radius: 5px;
103 |      border: none;
104 |      background: transparent;
105 |      box-shadow:inset 5px 5px 7px #ddd,
106 |       inset -5px -5px 7px #000;
107 |      font-weight: 600;
108 |       cursor: pointer;
109 |       font-size: 1.2rem;
110 | }
111 | 
112 | ---------------------JavaScript---------------------
113 | 
114 | const score = document.getElementById('score');
115 | const timeLeft = document.getElementById('time-left');
116 | const squares = document.querySelectorAll('.square');
117 | const start = document.getElementById('start');
118 | const reset = document.getElementById('reset');
119 | const grid = document.getElementById('grid');
120 | 
121 | let moleInterval;
122 | let scoreCounter = 0;
123 | let gameTimer;
124 | let gameTimeCount = 15;
125 | let gameStarted = false;
126 | const showMole = `<img src="mole.png" id="mole-img">`;
127 | 
128 | //set random location of the mole
129 | const randomizeMole = () => {
130 |      let mole = document.querySelector('.mole');
131 |      mole.classList.remove('mole');
132 |      mole.innerHTML = '';
133 |      let randomSquare = squares[Math.floor(Math.random() * squares.length)]
134 |      randomSquare.classList.add('mole');
135 |      randomSquare.innerHTML = showMole;
136 | }
137 | 
138 | //set time interval when game starts;
139 | const startGame = () => {
140 |      if (!gameStarted) {
141 |           gameStarted = true;
142 |           scoreCounter = 0;
143 |           moleInterval = setInterval(_ => {
144 |                randomizeMole();
145 |           }, 1000);
146 |           gameTimer = setInterval(_ => {
147 |                gameTimeCount--;
148 |                timeLeft.innerHTML = gameTimeCount + "s";
149 |                checkGameTimer();
150 | 
151 |           }, 1000)
152 |      }
153 | }
154 | 
155 | //check timeout of the game
156 | const checkGameTimer = () => {
157 |      if (gameTimeCount === 0) {
158 |           clearInterval(gameTimer);
159 |           clearInterval(moleInterval);
160 |           gameStarted = false;
161 |           gameTimeCount = 15;
162 |      }
163 | }
164 | //count score
165 | const countScore = () => {
166 |      if(gameStarted){
167 |           scoreCounter++;
168 |           score.innerHTML = scoreCounter;
169 |      }
170 | }
171 | 
172 | //Reset the game
173 | const resetGame = () => {
174 |      clearInterval(moleInterval);
175 |      clearInterval(gameTimer);
176 |      scoreCounter = 0;
177 |      gameTimeCount = 15;
178 |      timeLeft.innerHTML = gameTimeCount + "s";
179 |      score.innerHTML = scoreCounter;
180 |      gameStarted = false;
181 | }
182 | 
183 | //start the game when start button is clicked;
184 | start.addEventListener('click', startGame);
185 | grid.addEventListener('click', (e) => {
186 |      if (e.target.parentElement.classList.contains('mole'))
187 |           countScore();
188 | })
189 | reset.addEventListener('click', resetGame);


--------------------------------------------------------------------------------
/JS Assignments/TypingGame.txt:
--------------------------------------------------------------------------------
  1 | Done By Lalit Patil....
  2 | 
  3 | ---------------------HTML---------------------
  4 | 
  5 | <!DOCTYPE html>
  6 | <html lang="en">
  7 |   <head>
  8 |     <meta charset="UTF-8" />
  9 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 10 |     <title>Typing Game</title>
 11 |     
 12 |   </head>
 13 |   <body>
 14 |     <label for="Timer" class="timerLabel">Timer</label>
 15 |     <div class="timer" id="timer">0</div>
 16 |     <label for="wpm" class="wpmLabel">WPM</label>
 17 |     <div class="wpm" id="wpm">0</div>
 18 |     <div class="container" id="container">
 19 |       <div class="quote-display" id="quoteDisplay"></div>
 20 |     </div>
 21 |     
 22 |   </body>
 23 | </html>
 24 | 
 25 | ---------------------CSS----------------------
 26 | 
 27 | * {
 28 |   box-sizing: border-box;
 29 | }
 30 | body {
 31 |   display: flex;
 32 |   justify-content: center;
 33 |   align-items: center;
 34 |   min-height: 100vh;
 35 |   margin: 0;
 36 |   background-color: rgb(175, 175, 201);
 37 |   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
 38 | }
 39 | 
 40 | .container {
 41 |   background-color: yellow;
 42 |   padding: 1rem;
 43 |   border-radius: 0.5rem;
 44 |   width: 700px;
 45 |   max-width: 90%;
 46 |   border: 1px solid black;
 47 | }
 48 | 
 49 | .wpm,
 50 | .wpmLabel {
 51 |   color: rgb(175, 78, 88);
 52 |   position: absolute;
 53 |   top: 6rem;
 54 |   font-size: 3rem;
 55 |   font-weight: bold;
 56 | }
 57 | 
 58 | .timer,
 59 | .timerLabel {
 60 |   position: absolute;
 61 |   top: 2rem;
 62 |   font-size: 3rem;
 63 |   color: yellow;
 64 |   font-weight: bold;
 65 | }
 66 | 
 67 | .timerLabel,
 68 | .wpmLabel {
 69 |   left: 50rem;
 70 | }
 71 | 
 72 | .quote-display {
 73 |   margin-bottom: 1rem;
 74 |   margin-left: calc(1rem + 2px);
 75 |   margin-left: calc(1rem - 2px);
 76 | }
 77 | 
 78 | .container-focus {
 79 |   border: 3px solid black;
 80 | }
 81 | 
 82 | .quote-display .correct {
 83 |   color: green;
 84 | }
 85 | 
 86 | .incorrect {
 87 |   color: red;
 88 |   text-decoration: underline;
 89 | }
 90 | 
 91 | ---------------------JavaScript--------------------
 92 | 
 93 | const RANDOM_QUOTE_API_URL = "http://api.quotable.io/random";
 94 | const container = document.getElementById("container");
 95 | const quoteDisplayElement = document.getElementById("quoteDisplay");
 96 | const timerElement = document.getElementById("timer");
 97 | const wpmElement = document.getElementById("wpm");
 98 | 
 99 | var timerID;
100 | var isTimerStated = false;
101 | var quote;
102 | var currentIndex = 0;
103 | var strokes;
104 | 
105 | window.addEventListener("click", (e) => {
106 |   if (document.getElementById("container").contains(e.target)) {
107 |     if (!isTimerStated) {
108 |       container.classList.add("container-focus");
109 |       startTimer();
110 |     }
111 |   } else {
112 |     container.classList.remove("container-focus");
113 |     timerElement.innerText = 0;
114 |     stopTimer();
115 |     currentIndex = 0;
116 |     quoteDisplayElement.childNodes.forEach((node) => {
117 |       node.classList.remove("correct");
118 |       node.classList.remove("incorrect");
119 |     });
120 |   }
121 | });
122 | 
123 | function calcualtewpm() {
124 |   if (getTimerTime() > 0) {
125 |     wpmElement.innerText = Math.round(
126 |       parseFloat(correctStrokes()) / 5.0 / (parseFloat(getTimerTime()) / 60.0)
127 |     );
128 |   }
129 |   // console.log("wpm", correctStrokes(), getTimerTime());
130 | }
131 | 
132 | window.addEventListener("keydown", (e) => {
133 |   if (isTimerStated) {
134 |     var charCode = e.keyCode;
135 |     if (
136 |       (charCode > 64 && charCode < 91) ||
137 |       (charCode > 96 && charCode < 123) ||
138 |       charCode === 32 ||
139 |       charCode === 188 ||
140 |       charCode === 186 ||
141 |       charCode === 222 ||
142 |       charCode === 190 ||
143 |       charCode === 191 ||
144 |       charCode === 49 ||
145 |       charCode === 189
146 |     ) {
147 |       if (quote[currentIndex] == e.key) {
148 |         quoteDisplayElement.childNodes[currentIndex].classList.add("correct");
149 |         quoteDisplayElement.childNodes[currentIndex].classList.remove(
150 |           "incorrect"
151 |         );
152 |         strokes[currentIndex] = 1;
153 |       } else {
154 |         quoteDisplayElement.childNodes[currentIndex].classList.add("incorrect");
155 |         quoteDisplayElement.childNodes[currentIndex].classList.remove(
156 |           "correct"
157 |         );
158 |         strokes[currentIndex] = 0;
159 |       }
160 |       calcualtewpm();
161 |       currentIndex++;
162 |       if (currentIndex === quote.length) {
163 |         currentIndex = 0;
164 |         renderNewQuote();
165 |       }
166 |     } else if (charCode === 8) {
167 |       if (currentIndex === 0) return;
168 |       currentIndex--;
169 |       quoteDisplayElement.childNodes[currentIndex].classList.remove("correct");
170 |       quoteDisplayElement.childNodes[currentIndex].classList.remove(
171 |         "incorrect"
172 |       );
173 |     } else {
174 |       console.log("not a key");
175 |     }
176 |   }
177 | });
178 | 
179 | const getRandomQuote = () => {
180 |   return fetch(RANDOM_QUOTE_API_URL)
181 |     .then((response) => response.json())
182 |     .then((data) => data.content);
183 | };
184 | 
185 | function correctStrokes() {
186 |   let count = 0;
187 |   strokes.forEach((stroke) => {
188 |     if (stroke) count++;
189 |   });
190 |   return count;
191 | }
192 | 
193 | const renderNewQuote = async () => {
194 |   quote = await getRandomQuote();
195 |   if (isTimerStated) {
196 |     stopTimer();
197 |     startTimer();
198 |   }
199 |   currentIndex = 0;
200 |   strokes = new Array(quote.length);
201 |   strokes.fill(0);
202 |   quoteDisplayElement.innerHTML = "";
203 |   quote.split("").forEach((char) => {
204 |     const charSpan = document.createElement("span");
205 |     charSpan.innerText = char;
206 |     quoteDisplayElement.appendChild(charSpan);
207 |   });
208 | };
209 | 
210 | let startTime;
211 | function startTimer() {
212 |   isTimerStated = true;
213 |   timerElement.innerText = 0;
214 |   startTime = new Date();
215 |   timerID = setInterval(() => {
216 |     timer.innerText = getTimerTime();
217 |   }, 1000);
218 | }
219 | 
220 | function getTimerTime() {
221 |   return Math.floor((new Date() - startTime) / 1000);
222 | }
223 | 
224 | function stopTimer() {
225 |   isTimerStated = false;
226 |   clearInterval(timerID);
227 | }
228 | 
229 | renderNewQuote();


--------------------------------------------------------------------------------
/JS Assignments/SnakeGame.txt:
--------------------------------------------------------------------------------
  1 | -----------------------HTML-----------------
  2 | 
  3 | <!DOCTYPE html>
  4 | <html lang="en">
  5 | <head>
  6 |      <meta charset="UTF-8">
  7 |      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8 |      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9 |      <link rel="stylesheet" href="style.css">
 10 |      <title>Snake Game</title>
 11 | </head>
 12 | <body>
 13 |      <div class="container">
 14 |           <div id="gameContainer"></div>
 15 |      </div>
 16 |      <p class="scoreBoard">Your Score: <span id="pointsEarned"></span></p>
 17 |      <script src="script.js"></script>
 18 | </body>
 19 | </html>
 20 | 
 21 | --------------------CSS-------------------
 22 | 
 23 | *{
 24 |      margin: 0;
 25 |      padding: 0;
 26 |      box-sizing: border-box;
 27 | }
 28 | body{
 29 |      width: 100vw;
 30 |      height: 100vh;
 31 |      display: grid;
 32 |      place-content: center;
 33 |      background-color: #bbbbbb;
 34 | }
 35 | .container{
 36 |      padding: 8px;
 37 |      border-radius: 5px;
 38 |      box-shadow:
 39 |      inset -7px -7px 10px #eee,
 40 |      inset 7px 7px 10px #444;
 41 | }
 42 | #gameContainer{
 43 |      width: 400px;
 44 |      height: 400px;
 45 |      display: grid;
 46 |      grid-template-columns: repeat(40, 1fr);
 47 |      grid-template-rows: repeat(40, 1fr);
 48 |      border-style: solid;
 49 |      border-width: 1px;
 50 |      border-color: #777 #ddd #ddd #777;
 51 | }
 52 | .scoreBoard{
 53 |      margin-top: 10px;
 54 |      font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
 55 |      font-size: 1.3rem;
 56 |      font-weight: 700;
 57 | }
 58 | .snakeBodyPixel{
 59 |      background: radial-gradient(#8B9A46, #541212);
 60 |      border-radius: 2px;
 61 | }
 62 | .ltr{
 63 |      border-radius: 0px;
 64 |      border-top-right-radius: 50%;
 65 |      border-bottom-right-radius: 50%;
 66 | }
 67 | .rtl{
 68 |      border-radius: 0px;
 69 |      border-top-left-radius: 50%;
 70 |      border-bottom-left-radius: 50%;
 71 | }
 72 | .btt{
 73 |      border-radius: 0px;
 74 |      border-top-right-radius: 50%;
 75 |      border-top-left-radius: 50%;
 76 | }
 77 | .ttb{
 78 |      border-radius: 0px;
 79 |      border-bottom-right-radius: 50%;
 80 |      border-bottom-left-radius: 50%;
 81 | }
 82 | .food{
 83 |      box-shadow: 1px 1px 2px #DA1212,
 84 |      -1px -1px 2px #DA1212;
 85 |      background-color: #DA1212;
 86 |      border-radius: 30%;
 87 |      animation: enlarge .3s alternate infinite;
 88 | }
 89 | 
 90 | @keyframes enlarge {
 91 |      from{transform: scale(0.5);}
 92 |      to{transform: scale(1);}
 93 | }
 94 | 
 95 | --------------------JavaScript-------------------
 96 | 
 97 | const gameContainer = document.getElementById('gameContainer');
 98 | const scoreBoard = document.getElementById('pointsEarned');
 99 | const GRID_SIZE = 1600;
100 | const RENDER_INTERVAL = 100;
101 | const GAME_ROW = 40;
102 | let gameScore = 0;
103 | let snakeBody = [800];
104 | let gameOver = false;
105 | let gameInterval;
106 | let inputDirection = -1;
107 | let gamePaused = false;
108 | let foodPosition = 780;
109 | 
110 | //creating main functionality
111 | const createBoxes = (total) => {
112 |      for (let i = 1; i <= total; i++) {
113 |           let box = document.createElement('div');
114 |           if (i == foodPosition)
115 |                box.setAttribute('class', 'food');
116 |           box.setAttribute('id', `pixel${i}`);
117 |           gameContainer.appendChild(box);
118 |      }
119 | }
120 | createBoxes(GRID_SIZE);
121 | 
122 | function init() {
123 |      if (!gameOver) {
124 |           gameInterval = setInterval(() => {
125 |                update();
126 |           }, RENDER_INTERVAL);
127 |      }
128 | }
129 | init();
130 | function update() {
131 |      updateSnake();
132 |      draw();
133 |      updateFood();
134 | }
135 | 
136 | function draw() {
137 |      drawSnake();
138 |      if (snakeHeadIntersection()) {
139 |           clearInterval(gameInterval);
140 |      };
141 | }
142 | 
143 | function updateSnake() {
144 |      snakeBody.forEach(segment => {
145 |           let element = document.getElementById(`pixel${segment}`);
146 |           element.removeAttribute('class');
147 |      });
148 |      for (let i = snakeBody.length - 2; i >= 0; i--) {
149 |           snakeBody[i + 1] = snakeBody[i];
150 |      }
151 |      updateSnakeHead();
152 | }
153 | 
154 | function updateSnakeHead() {
155 |      let snakeHead = snakeBody[0];
156 |      if ((snakeHead % GAME_ROW == 1) && (inputDirection === -1)) {
157 |           snakeBody[0] += (GAME_ROW - 1);
158 |      }
159 |      else if ((snakeHead % GAME_ROW == 0) && (inputDirection === 1)) {
160 |           snakeBody[0] -= (GAME_ROW - 1);
161 |      }
162 |      else if (snakeHead > 0 && snakeHead <= (GAME_ROW) && (inputDirection === -GAME_ROW)) {
163 |           snakeBody[0] += (GRID_SIZE - GAME_ROW);
164 |      }
165 |      else if (snakeHead > (GRID_SIZE - GAME_ROW) && snakeHead <= (GRID_SIZE) && (inputDirection === GAME_ROW)) {
166 |           snakeBody[0] += (GAME_ROW - GRID_SIZE);
167 |      } else {
168 |           snakeBody[0] += inputDirection;
169 |      }
170 | }
171 | 
172 | function drawSnake() {
173 |      snakeBody.forEach(segment => {
174 |           let element = document.getElementById(`pixel${segment}`);
175 |           element.setAttribute('class', 'snakeBodyPixel');
176 |      });
177 |      let snakeHead = document.getElementById(`pixel${snakeBody[0]}`);
178 |      snakeHead.classList.add(headStyle(inputDirection));
179 | }
180 | 
181 | function headStyle(position) {
182 |      let headClass;
183 |      switch (position) {
184 |           case 1:
185 |                headClass = 'ltr';
186 |                break;
187 |           case -1:
188 |                headClass = 'rtl';
189 |                break;
190 |           case GAME_ROW:
191 |                headClass = 'ttb';
192 |                break;
193 |           case -GAME_ROW:
194 |                headClass = 'btt';
195 |                break;
196 |      }
197 |      return headClass;
198 | }
199 | 
200 | function snakeHeadIntersection() {
201 |      let head = snakeBody[0];
202 |      let snakeExceptHead = snakeBody.slice(1);
203 |      return snakeExceptHead.some(segment => head === segment);
204 | }
205 | 
206 | //Add Event Listeners
207 | window.addEventListener('keydown', (event) => {
208 |      getInputDirection(event);
209 |      pauseResumeGame(event.key);
210 | });
211 | function getInputDirection(event) {
212 |      switch (event.key) {
213 |           case "ArrowUp":
214 |                if (inputDirection == GAME_ROW) return;
215 |                inputDirection = -GAME_ROW;
216 |                break;
217 |           case "ArrowDown":
218 |                if (inputDirection == -GAME_ROW) return;
219 |                inputDirection = GAME_ROW;
220 |                break;
221 |           case "ArrowRight":
222 |                if (inputDirection == -1) return;
223 |                inputDirection = 1;
224 |                break;
225 |           case "ArrowLeft":
226 |                if (inputDirection == 1) return;
227 |                inputDirection = -1;
228 |                break;
229 |      }
230 | }
231 | 
232 | function pauseResumeGame(keyPressed) {
233 |      if (keyPressed == ' ') {
234 |           gamePaused = !gamePaused;
235 |           if (gamePaused) {
236 |                clearInterval(gameInterval);
237 |           } else {
238 |                init();
239 |           }
240 |      }
241 | }
242 | 
243 | //Food Code
244 | 
245 | function randomGridPosition() {
246 |      return Math.floor((Math.random() * GRID_SIZE) + 1);
247 | }
248 | 
249 | function updateFood() {
250 |      if(snakeFoodOverlap()){
251 |           removeFood(foodPosition);
252 |           snakeBody.push(foodPosition);
253 |           drawFood();
254 |           scoreIncrement();
255 |      }
256 | }
257 | 
258 | function scoreIncrement(){
259 |      gameScore++;
260 |      scoreBoard.innerHTML = gameScore;
261 | }
262 | 
263 | function removeFood(position){
264 |      let previousFood = document.getElementById(`pixel${position}`);
265 |      previousFood.classList.remove('food');
266 | }
267 | 
268 | function drawFood() {
269 |      foodPosition = getRandomFoodPosition();
270 |      let currentFood = document.getElementById(`pixel${foodPosition}`);
271 |      currentFood.classList.add('food');
272 | }
273 | 
274 | function getRandomFoodPosition() {
275 |      let newFoodPosition;
276 |      while (!newFoodPosition || checkFoodOnSnake(newFoodPosition)) {
277 |           newFoodPosition = randomGridPosition()
278 |      }
279 |      return newFoodPosition
280 | }
281 | 
282 | function checkFoodOnSnake(foodPosition) {
283 |      return snakeBody.some(segment => foodPosition === segment);
284 | }
285 | 
286 | function snakeFoodOverlap() {
287 |      if (snakeBody[0] === foodPosition) return true;
288 |      return false;
289 | }


--------------------------------------------------------------------------------
/JS Assignments/Bomberman2.txt:
--------------------------------------------------------------------------------
  1 | Done By Lalit Patil....
  2 | ---------------------HTML---------------------
  3 | 
  4 | <div class="container">
  5 |       <div class="grid" id="grid"></div>
  6 |       <div>Flags left: <span id="flagsLeft">0</span></div>
  7 |       <div id="result"></div>
  8 |     </div>
  9 | 
 10 | ---------------------CSS----------------------
 11 | 
 12 | .container {
 13 |   width: 500px;
 14 |   align-content: center;
 15 | }
 16 | 
 17 | .grid {
 18 |   height: 400px;
 19 |   width: 400px;
 20 |   display: flex;
 21 |   flex-wrap: wrap;
 22 |   background-color: #dcd6bc;
 23 |   margin-left: 50px;
 24 |   margin-top: 20px;
 25 |   border: 10px solid #dcd6bc;
 26 |   margin-bottom: 10px;
 27 | }
 28 | 
 29 | div {
 30 |   font-size: 25px;
 31 |   text-align: center;
 32 |   font-family: "Roboto Mono", monospace;
 33 | }
 34 | 
 35 | .valid {
 36 |   height: 40px;
 37 |   width: 40px;
 38 |   border: 5px solid;
 39 |   border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
 40 |   box-sizing: border-box;
 41 | }
 42 | 
 43 | .checked {
 44 |   height: 40px;
 45 |   width: 40px;
 46 |   border: 2px solid;
 47 |   background-color: #cecab7;
 48 |   border-color: #9c998d;
 49 |   box-sizing: border-box;
 50 | }
 51 | 
 52 | .bomb {
 53 |   height: 40px;
 54 |   width: 40px;
 55 |   border: 5px solid;
 56 |   border-color: #f5f3eb #bab7a9 #bab7a9 #fff9db;
 57 |   box-sizing: border-box;
 58 | }
 59 | 
 60 | .one {
 61 |   color: #e76346;
 62 | }
 63 | 
 64 | .two {
 65 |   color: #4199d3;
 66 | }
 67 | 
 68 | .three {
 69 |   color: #57da59;
 70 | }
 71 | 
 72 | .four {
 73 |   color: #bb41d3;
 74 | }
 75 | 
 76 | #result {
 77 |   margin-top: 5px;
 78 |   color: #e76346;
 79 | }
 80 | 
 81 | ---------------------JavaScript--------------------
 82 | 
 83 | let neighboursValues = [];
 84 | let bombArray = [];
 85 | let bombPlantedAt = new Set();
 86 | let flagLeft = 10;
 87 | let score = 0;
 88 | let bombsFlagged = 0;
 89 | let gameUp = false;
 90 | 
 91 | function generateBombCells() {
 92 |     let i = 0;
 93 |     while (i < 10) {
 94 |         let bombCellIdx = Math.floor(Math.random() * 100);
 95 | 
 96 |         if (!bombArray.includes(bombCellIdx)) {
 97 |             bombArray.push(bombCellIdx);
 98 |             i++;
 99 |         }
100 |     }
101 | }
102 | 
103 | generateBombCells();
104 | 
105 | function makeBoard() {
106 |     let baord = [];
107 |     let value = 0;
108 |     for (let i = 0; i < 10; i++) {
109 |         let row = [];
110 |         for (let j = 0; j < 10; j++) {
111 |             row.push(value++);
112 |         }
113 |         baord.push(row);
114 |     }
115 | 
116 |     return baord;
117 | }
118 | 
119 | let bombermanBoard = makeBoard();
120 | 
121 | // Bomb plants
122 | function plantBomb() {
123 |     bombArray.map((bomb) => {
124 |         bombPlantedAt.add(bomb);
125 |     })
126 | }
127 | 
128 | plantBomb();
129 | 
130 | 
131 | // Neighbour cells
132 | function getNeighbours() {
133 |     for (let i = 0; i < bombermanBoard.length; i++) {
134 |         for (let j = 0; j < bombermanBoard[i].length; j++) {
135 |             let neighbour = [];
136 | 
137 |             // [0][0]
138 |             if (i == 0 && j == 0) {
139 |                 neighbour.push(bombermanBoard[i + 1][j])
140 |                 neighbour.push(bombermanBoard[i + 1][j + 1])
141 |                 neighbour.push(bombermanBoard[i][j + 1])
142 |             } // [0][9]
143 |             else if (i == 0 && j == 9) {
144 |                 neighbour.push(bombermanBoard[i][j - 1])
145 |                 neighbour.push(bombermanBoard[i + 1][j - 1])
146 |                 neighbour.push(bombermanBoard[i + 1][j])
147 |             } // [9][0]
148 |             else if (i == 9 && j == 0) {
149 |                 neighbour.push(bombermanBoard[i - 1][j])
150 |                 neighbour.push(bombermanBoard[i - 1][j + 1])
151 |                 neighbour.push(bombermanBoard[i][j + 1])
152 |             } // [9][9]
153 |             else if (i == 9 && j == 9) {
154 |                 neighbour.push(bombermanBoard[i][j - 1])
155 |                 neighbour.push(bombermanBoard[i - 1][j - 1])
156 |                 neighbour.push(bombermanBoard[i - 1][j])
157 | 
158 |             } // [0][1]---[0][8]
159 |             else if (i == 0 && j > 0 && j < 9) {
160 |                 neighbour.push(bombermanBoard[i][j - 1])
161 |                 neighbour.push(bombermanBoard[i + 1][j - 1])
162 |                 neighbour.push(bombermanBoard[i + 1][j])
163 |                 neighbour.push(bombermanBoard[i + 1][j + 1])
164 |                 neighbour.push(bombermanBoard[i][j + 1])
165 |             } // [1][0]---[8][0]
166 |             else if (j == 0 && i > 0 && i < 9) {
167 |                 neighbour.push(bombermanBoard[i - 1][j])
168 |                 neighbour.push(bombermanBoard[i - 1][j + 1])
169 |                 neighbour.push(bombermanBoard[i][j + 1])
170 |                 neighbour.push(bombermanBoard[i + 1][j + 1])
171 |                 neighbour.push(bombermanBoard[i + 1][j])
172 |             } // [9][1]---[9][8]
173 |             else if (i == 9 && j > 0 && j < 9) {
174 |                 neighbour.push(bombermanBoard[i][j - 1])
175 |                 neighbour.push(bombermanBoard[i - 1][j - 1])
176 |                 neighbour.push(bombermanBoard[i - 1][j])
177 |                 neighbour.push(bombermanBoard[i - 1][j + 1])
178 |                 neighbour.push(bombermanBoard[i][j + 1])
179 |             } // [1][9]---[8][9]
180 |             else if (j == 9 && i > 0 && i < 9) {
181 |                 neighbour.push(bombermanBoard[i - 1][j])
182 |                 neighbour.push(bombermanBoard[i - 1][j - 1])
183 |                 neighbour.push(bombermanBoard[i][j - 1])
184 |                 neighbour.push(bombermanBoard[i + 1][j - 1])
185 |                 neighbour.push(bombermanBoard[i + 1][j])
186 |             } else {
187 |                 neighbour.push(bombermanBoard[i - 1][j - 1])
188 |                 neighbour.push(bombermanBoard[i - 1][j])
189 |                 neighbour.push(bombermanBoard[i - 1][j + 1])
190 |                 neighbour.push(bombermanBoard[i][j + 1])
191 |                 neighbour.push(bombermanBoard[i + 1][j + 1])
192 |                 neighbour.push(bombermanBoard[i + 1][j])
193 |                 neighbour.push(bombermanBoard[i + 1][j - 1])
194 |                 neighbour.push(bombermanBoard[i][j - 1])
195 |             }
196 |             neighboursValues.push(neighbour);
197 |         }
198 |     }
199 | }
200 | 
201 | getNeighbours();
202 | 
203 | // Generate all cells
204 | function makeCell() {
205 |     let newCell = document.getElementById('grid');
206 | 
207 |     for (let i = 0; i < 100; i++) {
208 |         let cell = document.createElement('div');
209 | 
210 |         if (bombPlantedAt.has(i)) {
211 |             cell.classList.add('bomb');
212 |             // cell.innerText = '.';
213 |         } else {
214 |             cell.classList.add('valid');
215 |         }
216 | 
217 |         let neighbourBombCount = 0;
218 | 
219 |         neighboursValues[i].map((bombID) => {
220 |             if (bombPlantedAt.has(bombID)) {
221 |                 neighbourBombCount++;
222 |             }
223 |         })
224 | 
225 |         cell.setAttribute('data', neighbourBombCount);
226 |         cell.setAttribute('id', i);
227 | 
228 |         newCell.appendChild(cell);
229 |     }
230 | }
231 | 
232 | makeCell();
233 | 
234 | // Update Flag Count
235 | function updateFlagCount() {
236 |     let falgs = document.querySelectorAll('.flag');
237 |     flagLeft = 10 - falgs.length;
238 |     document.getElementById('flagsLeft').innerText = flagLeft;
239 | }
240 | 
241 | // Update Result
242 | function updateResult(win) {
243 |     let resultUpdate = document.getElementById('result');
244 |     if (win) {
245 |         resultUpdate.innerText = "YOU WIN!";
246 |     } else {
247 |         resultUpdate.innerText = "YOU LOSE!";
248 |     }
249 | }
250 | 
251 | // Check Win Status
252 | function checkWinStatus() {
253 |     if (bombsFlagged == 10 || score == 90) {
254 |         revealAllCells();
255 |         updateResult(true);
256 |         gameUp = true;
257 |     }
258 | }
259 | 
260 | function zeroBombNeighboursActivate(bombCell) {
261 |     neighboursValues[bombCell].map((cell) => {
262 |         let cellId = `[id='${cell}']`
263 |         let getNeighbourBombCount = document.querySelector(cellId).getAttribute('data');
264 | 
265 |         if (!document.querySelector(cellId).classList.contains('checked')) {
266 |             document.querySelector(cellId).classList.add('checked');
267 |             document.querySelector(cellId).innerHTML = getNeighbourBombCount;
268 |             score++;
269 |         }
270 |     })
271 | 
272 | 
273 | }
274 | 
275 | // Gameover
276 | function revealAllCells() {
277 |     let allCells = document.getElementsByClassName('grid');
278 | 
279 |     for (let i = 0; i < allCells[0].children.length; i++) {
280 | 
281 |         if (allCells[0].children[i].classList.contains('bomb')) {
282 |             allCells[0].children[i].innerHTML = `💣`
283 |             allCells[0].children[i].classList.add('checked');
284 |             gameUp = true;
285 |         }
286 |     }
287 | }
288 | 
289 | // Activate cells
290 | function activateCell() {
291 |     let allCells = document.getElementsByClassName('grid');
292 | 
293 |     for (let i = 0; i < allCells[0].children.length; i++) {
294 |         if (!gameUp) {
295 |             allCells[0].children[i].addEventListener('click', (e) => {
296 | 
297 |                 if (allCells[0].children[i].classList.contains('bomb') && !allCells[0].children[i].classList.contains('flag')) {
298 |                     revealAllCells();
299 |                     updateResult(false);
300 |                 } else {
301 |                     if (!gameUp && !allCells[0].children[i].classList.contains('checked') && !allCells[0].children[i].classList.contains('flag')) {
302 | 
303 |                         if (allCells[0].children[i].getAttribute('data') == 0) {
304 |                             zeroBombNeighboursActivate(i);
305 |                             allCells[0].children[i].innerHTML = +allCells[0].children[i].getAttribute('data');
306 |                             allCells[0].children[i].classList.add('checked');
307 | 
308 |                             score++;
309 |                             checkWinStatus();
310 |                         } else {
311 |                             allCells[0].children[i].innerHTML = +allCells[0].children[i].getAttribute('data');
312 |                             allCells[0].children[i].classList.add('checked');
313 | 
314 |                             score++;
315 |                             checkWinStatus();
316 |                         }
317 | 
318 | 
319 |                     }
320 |                 }
321 |             })
322 |         }
323 |     }
324 | 
325 | }
326 | 
327 | activateCell();
328 | 
329 | // Flag cell
330 | function flagCell() {
331 |     let allCells = document.getElementsByClassName('grid');
332 | 
333 |     for (let i = 0; i < allCells[0].children.length; i++) {
334 |         if (!gameUp) {
335 |             allCells[0].children[i].addEventListener('contextmenu', (e) => {
336 |                 e.preventDefault();
337 | 
338 |                 if (!gameUp && allCells[0].children[i].classList.contains('flag')) {
339 |                     allCells[0].children[i].classList.remove('flag');
340 |                     allCells[0].children[i].innerHTML = '';
341 |                     updateFlagCount();
342 |                 } else if (flagLeft > 0 && !gameUp && !allCells[0].children[i].classList.contains('checked')) {
343 | 
344 |                     if (allCells[0].children[i].classList.contains('bomb')) {
345 |                         bombsFlagged++;
346 |                     }
347 | 
348 |                     allCells[0].children[i].classList.add('flag')
349 |                     allCells[0].children[i].innerHTML = `🚩`;
350 |                     updateFlagCount()
351 |                     checkWinStatus();
352 |                 }
353 |             })
354 |         }
355 |     }
356 | }
357 | 
358 | flagCell();


--------------------------------------------------------------------------------
/JS Assignments/MovieBookingJS.txt:
--------------------------------------------------------------------------------
  1 | ----------API.js------------
  2 | 
  3 | export const database = [
  4 |     { name: '21 Jump Street', imgUrl: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRLCqM8Ispa4waG8tNLPdy6rtiJFOEZUZxdzP-y_BQzfgo953Gb' },
  5 |     { name: '22 Jump Street', imgUrl: 'https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQaoamRKQDYxVXvXg6LUl6brQmMdFbpZvOQ2G_nD6u5uq16tiVh' },
  6 |     { name: 'Cars', imgUrl: 'https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg' },
  7 |     { name: 'Cars 2', imgUrl: 'https://upload.wikimedia.org/wikipedia/en/7/7f/Cars_2_Poster.jpg' },
  8 |     { name: 'Cars 3', imgUrl: 'https://lumiere-a.akamaihd.net/v1/images/p_cars3_19643_3ab8aca1.jpeg' }
  9 | ]
 10 | export const availability = {
 11 |     '21 Jump Street': [1, 2, 5, 8, 9,19,22,20,11],
 12 |     '22 Jump Street': [1, 2, 3, 5, 6,10,11,12,13,14,15,16,17, 24],
 13 |     'Cars': [1, 2, 3, 4, 5, 6,15,16,17,18,19,20,21,22,23,24],
 14 |     'Cars 2': [4, 6, 8,10,11,12,13,14,15,16],
 15 |     'Cars 3': [3, 5, 7, 9,20,21,12,13,19,24]
 16 | }
 17 | const fetchMovieList = async () => {
 18 |     return new Promise((resolve, reject) => {
 19 |         setTimeout(() => {
 20 |             resolve(database)
 21 |         }, 500)
 22 |     })
 23 | }
 24 | 
 25 | const fetchMovieAvailability = async (movieName) => {
 26 |     return new Promise((resolve, reject) => {
 27 |         setTimeout(() => {
 28 |             for (const m in availability) {
 29 |                 if (m === movieName) resolve(availability[m])
 30 |             }
 31 |             resolve([])
 32 |         }, 500)
 33 |     })
 34 | }
 35 | 
 36 | export { fetchMovieList, fetchMovieAvailability }
 37 | 
 38 | --------style.css---------
 39 | 
 40 | *{
 41 |   margin: 0;
 42 |   padding: 0;
 43 |   box-sizing: border-box;
 44 | }
 45 | nav{
 46 |   display: flex;
 47 |   justify-content: space-between;
 48 |   align-items: center;
 49 |   padding: 12px 16px;
 50 |   color: #ffffff;
 51 |   background-color: blue;
 52 | }
 53 | .logo{
 54 |   flex: 1;
 55 | }
 56 | nav ul{
 57 |   flex: 1;
 58 |   display: flex;
 59 |   justify-content: space-evenly;
 60 | }
 61 | nav ul li{
 62 |   list-style-type: none;
 63 | }
 64 | main{
 65 |   padding: 1rem;
 66 |   width: 100%;
 67 |   background-color: #F9B4ED;
 68 | }
 69 | .movie-holder{
 70 |   display: flex;
 71 |   justify-content: space-between;
 72 |   align-items: center;
 73 |   gap: 1rem;
 74 | }
 75 | .movie-holder a{
 76 |   flex: 1;
 77 | }
 78 | #loader{
 79 |   position: relative;
 80 |   height: 60px;
 81 |   width: 60px;
 82 |   display: grid;
 83 |   place-content: center;
 84 |   border-radius: 50%;
 85 |   border: 10px solid #ccc;
 86 | }
 87 | #loader::before{
 88 |   box-sizing: border-box;
 89 |   position: absolute;
 90 |   content: "";
 91 |   height: calc(100% + 22px);
 92 |   width: calc(100% + 22px);
 93 |   top: -11px;
 94 |   left: -11px;
 95 |   border-radius: 50%;
 96 |   border-style: solid;
 97 |   border-width: 10px;
 98 |   border-color: #081563 transparent transparent transparent;
 99 |   animation: rotate .6s linear infinite;
100 | }
101 | .movie-img-wrapper{
102 |   background-size: cover;
103 |   width: auto;
104 |   height: 250px;
105 | }
106 | #booker{
107 |   display: flex;
108 |   flex-direction: column;
109 |   justify-content: center;
110 |   align-items: center;
111 |   gap: 1rem;
112 | 
113 | }
114 | #booker-grid-holder{
115 |   display: grid;
116 |   grid-template-columns: repeat(2, 200px);
117 |   gap: 2rem;
118 | }
119 | .booking-grid{
120 |   margin: 0 auto;
121 |   display: grid;
122 |   grid-template-columns: repeat(4, 1fr);
123 |   grid-template-rows: repeat(3, 1fr);
124 |   grid-gap: .5rem;
125 |   height: 150px;
126 |   width: 200px;
127 |   color: #fff;
128 |   font-weight: 600;
129 | }
130 | #confirm-purchase{
131 |   display: grid;
132 |   place-items: center;
133 |   font-size: 1.2rem;
134 | }
135 | #booking-grid-undefined{
136 |   font-size: auto;
137 | }
138 | .seat{
139 |   display: grid;
140 |   place-content: center;
141 |   /* background-color: pink; */
142 | }
143 | .available-seat{
144 |   background-color: green;
145 | }
146 | .unavailable-seat{
147 |   background-color: red;
148 | }
149 | .select-seat{
150 |   border:4px outset rgb(0, 0, 0);
151 | }
152 | 
153 | .d-none{
154 |   display: none;
155 | }
156 | .v-none{
157 |   visibility: hidden;
158 | }
159 | input, button[type="submit"]{
160 |   width: 200px;
161 |   height: 35px;
162 |   padding: .5rem;
163 | }
164 | @keyframes rotate {
165 |   from{transform: rotate(0deg);}
166 |   to{transform: rotate(360deg);}
167 | }
168 | 
169 | 
170 | ----------App.js-------------
171 | 
172 | import { fetchMovieAvailability, fetchMovieList } from "./api.js"
173 | const mainElement = document.getElementById('main');
174 | let bookerGridHolder = document.getElementById('booker-grid-holder');
175 | let bookTicketBtn = document.getElementById('book-ticket-btn');
176 | let booker = document.getElementById('booker');
177 | 
178 | async function renderMovies() {
179 |     mainElement.innerHTML = `<div id='loader'></div>`;
180 |     let movies = await fetchMovieList();
181 |     let movieHolder = document.createElement('div');
182 |     movieHolder.setAttribute('class', 'movie-holder');
183 |     movies.forEach(movie => {
184 |         createSeparateMovieTabs(movie, movieHolder);
185 |     });
186 |     mainElement.innerHTML = '';
187 |     mainElement.appendChild(movieHolder);
188 |     setEventToLinks();
189 | }
190 | renderMovies();
191 | 
192 | function createSeparateMovieTabs(data, wrapper) {
193 |     let a = document.createElement('a');
194 |     a.setAttribute('data-movie-name', `${data.name}`);
195 |     a.classList.add('movie-link');
196 |     a.href = `#${data.name}`;
197 |     a.innerHTML = `<div class="movie" data-id=${data.name}>
198 |                     <div class="movie-img-wrapper" style="background-image:url(${data.imgUrl})"></div>
199 |                     <h4>${data.name}</h4>
200 |                </div>`;
201 |     wrapper.appendChild(a);
202 | }
203 | 
204 | 
205 | function setEventToLinks() {
206 |     let movieLinks = document.querySelectorAll('.movie-link');
207 |     movieLinks.forEach(movieLink => {
208 |         movieLink.addEventListener('click', (e) => {
209 |             renderSeatsGrid(movieLink.getAttribute('data-movie-name'));
210 |         })
211 |     })
212 | }
213 | 
214 | async function renderSeatsGrid(movieName) {
215 |     bookerGridHolder.innerHTML = `<div id='loader'></div>`;
216 |     bookTicketBtn.classList.add('v-none');
217 |     let data = await fetchMovieAvailability(movieName);
218 |     renderSeats(data);
219 |     setEventsToSeats();
220 | }
221 | 
222 | function renderSeats(data) {
223 |     if (booker.firstElementChild.tagName !== "H3") {
224 |         seatsSelected = [];
225 |         booker.innerHTML = `<h3 class="v-none">Seat Selector</h3>
226 |                               <div id="booker-grid-holder"></div>
227 |                               <button id="book-ticket-btn" class="v-none">Book my seats</button>`;
228 |     }
229 |     bookerGridHolder = document.getElementById('booker-grid-holder');
230 |     bookTicketBtn = document.getElementById('book-ticket-btn');
231 |     bookerGridHolder.innerHTML = '';
232 |     booker.firstElementChild.classList.remove('v-none');
233 |     createSeatsGrid(data)
234 | }
235 | 
236 | function createSeatsGrid(data) {
237 |     let bookingGrid1 = document.createElement("div");
238 |     let bookingGrid2 = document.createElement("div");
239 |     bookingGrid2.classList.add("booking-grid");
240 |     bookingGrid1.classList.add("booking-grid");
241 |     for (let i = 1; i < 25; i++) {
242 |         let seat = document.createElement("div");
243 |         seat.innerHTML = i;
244 |         seat.setAttribute("id", `booking-grid-${i}`);
245 |         if (data.includes(i)) seat.classList.add("seat", "unavailable-seat");
246 |         else seat.classList.add("seat", "available-seat");
247 |         if (i > 12) bookingGrid2.appendChild(seat);
248 |         else bookingGrid1.appendChild(seat);
249 |     }
250 |     bookerGridHolder.appendChild(bookingGrid1);
251 |     bookerGridHolder.appendChild(bookingGrid2);
252 |     setTicketBooking();
253 | }
254 | 
255 | let seatsSelected = [];
256 | function setEventsToSeats() {
257 |     let AvailableSeats = document.querySelectorAll('.available-seat');
258 |     AvailableSeats.forEach(seat => {
259 |         seat.addEventListener('click', _ => {
260 |             saveSelectedSeat(seat);
261 |         })
262 |     })
263 | }
264 | 
265 | function saveSelectedSeat(seat) {
266 |     if (!seat.classList.contains("select-seat")) {
267 |         seat.classList.add('select-seat');
268 |         seatsSelected.push(seat.innerText);
269 |         bookTicketBtn.classList.remove('v-none');
270 |     } else {
271 |         seat.classList.remove('select-seat');
272 |         seatsSelected = seatsSelected.filter(item => seat.innerText !== item);
273 |         if (seatsSelected.length == 0) {
274 |             bookTicketBtn.classList.add('v-none');
275 |         }
276 |     }
277 | }
278 | function setTicketBooking() {
279 |     bookTicketBtn.addEventListener('click', () => {
280 |         if (seatsSelected.length > 0) {
281 |             booker.innerHTML = '';
282 |             confirmTicket();
283 |         }
284 |     })
285 | }
286 | 
287 | function confirmTicket() {
288 |     let confirmTicketElement = document.createElement('div');
289 |     confirmTicketElement.setAttribute('id', 'confirm-purchase');
290 |     let h3 = document.createElement('h3');
291 |     h3.innerText = `Confirm your booking for seat numbers:${seatsSelected.join(",")}`;
292 |     confirmTicketElement.appendChild(h3);
293 |     confirmTicketElement.appendChild(createForm());
294 |     booker.appendChild(confirmTicketElement);
295 |     success();
296 | }
297 | 
298 | function createForm() {
299 |     let form = document.createElement("form");
300 |     let formElements = `<input type="email" id="email" placeholder="email" required><br><br>
301 |                          <input type="tel" id="phone" placeholder="phone" required><br><br>
302 |                          <button id="submitBtn" type="submit">Purchase</button>`;
303 |     form.setAttribute("method", "post");
304 |     form.setAttribute("id", "customer-detail-form");
305 |     form.innerHTML = formElements;
306 |     return form;
307 | }
308 | 
309 | function success() {
310 |     let submitBtn = document.getElementById('submitBtn');
311 |     submitBtn.addEventListener('click', (e) => {
312 |         let form = document.getElementById('customer-detail-form');
313 |         if (form.checkValidity()) {
314 |             e.preventDefault();
315 |             let email = document.getElementById('email').value;
316 |             let phone = document.getElementById('phone').value;
317 |             renderSuccessMessage(email, phone);
318 |         }
319 |     })
320 | }
321 | 
322 | function renderSuccessMessage(email, phone) {
323 |     booker.innerHTML = '';
324 |     createSuccessMessage(email, phone);
325 | }
326 | 
327 | function createSuccessMessage(email, phone) {
328 |     let successElement = document.createElement("div");
329 |     successElement.setAttribute("id", "success");
330 |     successElement.innerHTML = `<h3>Booking details</h3>
331 |                                <p>Seats: ${seatsSelected.join(", ")}</p>
332 |                               <p>Email: ${email}</p>
333 |                               <p>Phone number: ${phone}</p>`;
334 |     booker.appendChild(successElement);
335 | }
336 | 
337 | ----------index.html-----------
338 | 
339 | <!DOCTYPE html>
340 | <html lang="en">
341 | <head>
342 |     <meta charset="UTF-8">
343 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
344 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
345 |     <script src="./app.js" defer type="module"> </script>
346 |     <link rel="stylesheet" href="./app.css">
347 |     <title>Document</title>
348 | </head>
349 | <body>
350 |     <nav>
351 |         <div class="logo">Movie Book</div>
352 |         <ul>
353 |             <li>Home</li>
354 |             <li>About us</li>
355 |             <li>Know more</li>
356 |         </ul>
357 |     </nav>
358 |     <main id="main">
359 |         
360 |     </main>
361 |     <div id="booker">
362 |         <h3 class="v-none">Seat Selector</h3>
363 |         <div id="booker-grid-holder"></div>
364 |         <button id="book-ticket-btn" class="v-none">Book my seats</button>
365 |     </div>
366 | </body>
367 | </html>


--------------------------------------------------------------------------------