search function added in, styled, and working

2024-11-08 12:01:26 -06:00
parent c74278ddc1
commit 536e9c2428
4 changed files with 86 additions and 42 deletions
--- a/public/index.html
+++ b/public/index.html
@ -8,6 +8,7 @@
  <title>fyrfli's favourite quotes</title>
  <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="css/styles.css">
+  <!-- <script defer src="js/app.js"></script> -->
 </head>

 <body>
@ -18,8 +19,17 @@
  </header>

  <main class="container">
-    <article class="debug"></article>
+    <article class="search">
+      <form action="javascript:void(0);" method="post" id="live-search" class="styled">
+        <fieldset>
+          <h2>search for a quote</h2>
+          <input type="text" name="search" id="filter" class="text-input" placeholder="start typing..." onkeyup="liveSearch()">
+          <span id="filter-count"></span>
+        </fieldset>
+      </form>
+    </article>
    <article class="quotes"></article>
+    <article class="debug"></article>
  </main>

  <footer class="footer">