JanefrancessC · JanefrancessC · Oct 8, 2022 · Oct 11, 2022 · Oct 14, 2022 · Oct 14, 2022
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "liveServer.settings.port": 5501
+}
diff --git a/episodes.js b/episodes.js
@@ -1,5 +1,6 @@
 //DO NOT EDIT THIS FILE
 
+
 //This content is from https://www.tvmaze.com/
 //specifically: https://api.tvmaze.com/shows/82/episodes
 

diff --git a/img/not-found.png b/img/not-found.png
diff --git a/img/not-found.png:Zone.Identifier b/img/not-found.png:Zone.Identifier
diff --git a/index.html b/index.html
@@ -3,19 +3,84 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>TV Show Project | My Name (My GitHub username)</title>
+    <title>TV Show Project | Chioma Okeke (Janefrancess)</title>
     <link href="style.css" rel="stylesheet" />
+    <link href="queries.css" rel="stylesheet" />
     <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+    <!-- <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"
+      integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    /> -->
   </head>
 
   <body>
     <div id="root">
+      <section class="search">
+        <!-- <section id="page-load">
+
+
+        </section> -->
+        <section id="home-page">
+          <input type="button" id="back" value="Home" />
+        </section>
+        <section id="all-shows">
+          <select name="select-show" id="select-show">
+            <option value="" disabled selected>--select show--</option>
+          </select>
+        </section>
+
+        <section id="show-search" class="">
+          <i class="fa-solid fa-magnifying-glass search-icon"></i>
+          <input
+            type="search"
+            id="search-show"
+            placeholder="---search for show---"
+            onblur="showPlaceholder()"
+            onfocus="clearShowPlaceholder()"
+            onclick="reloadShows()"
+          />
+        </section>
+        <section id="select-reset">
+          <select name="episodes" id="episodes" class="select-episodes">
+            <option value="" disabled selected>Select an Episode</option>
+          </select>
+          <input type="button" id="btnReset" value="Reset" />
+        </section>
+        <section id="input-search">
+          <div class="search-input-wrapper">
+            <!-- <i class="fa-solid fa-magnifying-glass search-icon"></i> -->
+            <input
+              type="search"
+              placeholder=" ---Search for Episode---"
+              id="search-field"
+              name="search-field"
+              onfocus="clearPlaceholder()"
+              onclick="reloadEpisodes()"
+              onblur="returnPlaceholder()"
+            />
+          </div>
+          <section class="display">
+            <p id="display-count"></p>
+          </section>
+        </section>
+      </section>
+      <section id="container"></section>
     </div>
 
     <!-- Loads a provided function called getAllEpisodes() which returns all episodes -->
     <script src="episodes.js"></script>
 
+    <!-- Loads all shows  -->
+    <script src="shows.js"></script>
+
     <!-- Loads YOUR javascript code -->
     <script src="script.js"></script>
   </body>
+  <footer>
+    Data retrieved from
+    <a href="https://www.tvmaze.com/">TVMaze.com</a>
+  </footer>
 </html>
diff --git a/queries.css b/queries.css
@@ -0,0 +1,54 @@
+@media (max-width: 1024px) {
+  #container {
+    width: 100%;
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+}
+
+@media (max-width: 600px) {
+  .search {
+    background-color: rgb(9, 9, 9);
+    width: 100%;
+    height: 8rem;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    gap: 1rem;
+    margin: auto;
+  }
+
+  #container {
+    display: grid;
+    grid-template-columns: 1fr;
+    width: 80%;
+  }
+
+  .episode-container {
+    width: 75%;
+    margin: 1.5rem 2rem;
+    margin-left: 3rem;
+  }
+
+  #select-reset {
+    margin-top: 2rem;
+  }
+
+  #input-search {
+    justify-content: center;
+    align-items: center;
+    gap: 0.7rem;
+    padding-left: 6rem;
+    margin-bottom: 1.5rem;
+  }
+
+  #display-count {
+    color: rgb(218, 33, 16);
+    font-weight: 700;
+    font-size: small;
+  }
+
+  #search-field[placeholder="&#128269"] {
+    opacity: 0;
+  }
+}