Show Searcher Added

spss20 · Feb 22, 2023 · 3352891 · 3352891
1 parent 2b689ca
commit 3352891
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 8 deletions.
diff --git a/Ajax/app.js b/Ajax/app.js
@@ -0,0 +1,48 @@
+const searchForm = document.querySelector('#search-form');
+const searchInput = searchForm.firstElementChild;
+const todoList = document.querySelector('#todo-list');
+const imageContainer = document.querySelector('#images-container');
+
+searchForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const query = searchInput.value;
+    fetchData(query);
+})
+
+async function fetchData(show_name) {
+    const res = await fetch(`https://api.tvmaze.com/search/shows?q=${show_name}`);
+    const data = await res.json();
+    if (data === null || data.length === 0) {
+        console.log("No movie or drama found with name " + show_name);
+        return;
+    }
+    console.log(data);
+
+    const imageUrl = data[0].show.image?.medium;
+    const showName = data[0].show.name;
+
+    //Insert Show Name
+    const li = document.createElement('li');
+    li.classList.add('list-group-item');
+    li.innerText = showName;
+    todoList.insertBefore(li, todoList.firstChild);
+
+    //Insert Image
+    if (imageUrl != null) {
+        const image = document.createElement('img');
+        image.classList.add('img-fluid');
+        image.src = imageUrl;
+        imageContainer.append(image);
+    } else {
+        console.log("No image found for this show");
+    }
+
+}
+
+function surya() {
+    return new Promise((resolve, reject) => {
+        setTimeout(() => {
+            reject("Oh Fuck")
+        }, 1000);
+    })
+}
diff --git a/Ajax/index.html b/Ajax/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Ajax</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
+      crossorigin="anonymous"
+    />
+    <style>
+      @media (min-width: 768px) {
+        .container {
+          max-width: 720px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <h1 class="text-center mt-3">Show Searcher</h1>
+    <div class="container mt-5">
+      <form id="search-form" class="d-flex" action="#">
+        <input
+          class="form-control"
+          type="text"
+          placeholder="Search Show Here"
+        />
+        <button class="btn btn-primary ms-2 w-25" type="submit">Search</button>
+      </form>
+
+      <h3 class="mt-4">History</h3>
+      <ul id="todo-list" class="list-group"></ul>
+
+      <div id="images-container" class="mt-3"></div>
+    </div>
+
+    <script src="app.js"></script>
+  </body>
+</html>
diff --git a/PingPong/index.html b/PingPong/index.html
@@ -14,18 +14,15 @@
     <link rel="stylesheet" href="app.css" />
   </head>
   <body>
-    <div class="p-2">
-      <div
-        id="game-container"
-        class="container px-0 mx-auto my-5 rounded-3 border shadow-lg"
-      >
+    <div class="container mt-5">
+      <div id="game-container" class="card">
         <img
-          class="img-fluid rounded-top"
+          class="card-img-top"
           src="https://images.unsplash.com/photo-1609710228159-0fa9bd7c0827"
           alt="ping-pong-image"
         />
         <p class="px-2 py-1 border-bottom mb-0">Ping Pong Score Keeper</p>
-        <div class="game-info p-3">
+        <div class="card-body">
           <h1>
             <span id="team-one">0</span>
             <span>&nbsp;to&nbsp;</span>

diff --git a/index.html b/index.html
@@ -1 +1,38 @@
-<h1>Hi, There.</h1>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Screen Checker</title>
+    <style>
+      body {
+        padding: 0px;
+        margin: 0px;
+        color: white;
+      }
+      div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        width: 100%;
+        height: 100vh;
+        box-sizing: border-box;
+        padding: 0px;
+        background-color: black;
+        border: 10px solid red;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <h1>SURYA</h1>
+      <form action="#">
+        <label for="test-input">Name</label>
+        <input id="test-input" type="text" placeholder="Enter Here..." />
+      </form>
+    </div>
+    <div></div>
+  </body>
+</html>