KabirSinghMehrok · vens8 · Jan 6, 2023 · Jan 6, 2023
diff --git a/src/host/DELETEME.md b/src/host/DELETEME.md
diff --git a/src/host/farmlist.html b/src/host/farmlist.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <link  href="/src/styles/output.css" rel="stylesheet"/>
+    <meta charset="UTF-8">
+    <title>My Farms</title>
+    <div class="flex justify-center">
+      <div class="search-wrapper">
+    <label for="search">Search Farms</label>
+    <input type="search" id="search" data-search>
+  </div>
+  <div class="user-cards" data-user-cards-container></div>
+  <template data-user-template>
+    <div class="card">
+      <div class="header" data-header></div>
+      <div class="body" data-body></div>
+    </div>
+  </template>
+        <div class="flex items-center justify-center">
+        <div class="datepicker relative form-floating mb-3 xl:w-96">
+            <input type="text"
+            class="form-control block w-full px-3 py-1.5 text-base font-normal text-gray-700 bg-white bg-clip-padding border border-solid border-gray-300 rounded transition ease-in-out m-0 focus:text-gray-700 focus:bg-white focus:border-blue-600 focus:outline-none"
+            placeholder="Select a date" />
+        <label for="floatingInput" class="text-gray-700">Select a date</label>
+        </div>
+      </div>
+    </div>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/src/host/farmlist.json b/src/host/farmlist.json
@@ -0,0 +1,50 @@
+[{"farmName":"Predovic Inc","hostName":"Phil","phoneNo":"7998170343","email":"[email protected]","gender":"Female","city":"Wysoka Strzyżowska","state":null,"type":"augue vestibulum"},
+{"farmName":"Harber-Gerlach","hostName":"Merwin","phoneNo":"7526657938","email":"[email protected]","gender":"Male","city":"Nāḩiyat Hīrān","state":null,"type":"enim sit"},
+{"farmName":"Becker Inc","hostName":"Nico","phoneNo":"8705398970","email":"[email protected]","gender":"Male","city":"Cumanayagua","state":null,"type":"integer"},
+{"farmName":"Kuhic-Heathcote","hostName":"Roxane","phoneNo":"6982187305","email":"[email protected]","gender":"Polygender","city":"Thetford-Mines","state":"Québec","type":"volutpat"},
+{"farmName":"Runolfsdottir Inc","hostName":"Gwenni","phoneNo":"4063357503","email":"[email protected]","gender":"Female","city":"Boljoon","state":null,"type":"mus vivamus"},
+{"farmName":"Mills-Labadie","hostName":"Prudy","phoneNo":"5711733657","email":"[email protected]","gender":"Female","city":"Santa Cruz Muluá","state":null,"type":"in"},
+{"farmName":"Gutmann-Beer","hostName":"Dolph","phoneNo":"5264380823","email":"[email protected]","gender":"Male","city":"Fomento","state":null,"type":"id"},
+{"farmName":"Kreiger-Hayes","hostName":"Thorin","phoneNo":"7107549497","email":"[email protected]","gender":"Male","city":"Ballymahon","state":null,"type":"nunc proin"},
+{"farmName":"Reynolds, Fahey and O'Keefe","hostName":"Rex","phoneNo":"4179288012","email":"[email protected]","gender":"Male","city":"Jinjiang","state":null,"type":"posuere cubilia"},
+{"farmName":"Funk Inc","hostName":"Barton","phoneNo":"1565456645","email":"[email protected]","gender":"Male","city":"Ýdra","state":null,"type":"ut massa"},
+{"farmName":"Walker, Nader and Hagenes","hostName":"Thornton","phoneNo":"5669525280","email":"[email protected]","gender":"Male","city":"Petrolina de Goiás","state":null,"type":"dapibus"},
+{"farmName":"Hintz, Keeling and Carroll","hostName":"Elspeth","phoneNo":"7342492447","email":"[email protected]","gender":"Female","city":"Seda","state":null,"type":"suscipit"},
+{"farmName":"Wilderman, Goyette and Christiansen","hostName":"Suzie","phoneNo":"9038370457","email":"[email protected]","gender":"Female","city":"Chone","state":null,"type":"in"},
+{"farmName":"Hegmann and Sons","hostName":"Chrissy","phoneNo":"5493824327","email":"[email protected]","gender":"Female","city":"Zhangpu","state":null,"type":"pede ac"},
+{"farmName":"Koelpin-Dooley","hostName":"Val","phoneNo":"5749355322","email":"[email protected]","gender":"Female","city":"Kuwayris Sharqī","state":null,"type":"volutpat in"},
+{"farmName":"Veum-Corkery","hostName":"Leena","phoneNo":"6446128997","email":"[email protected]","gender":"Female","city":"Sterlitamak","state":null,"type":"duis"},
+{"farmName":"Pfeffer-Dach","hostName":"Donna","phoneNo":"2689724500","email":"[email protected]","gender":"Female","city":"Aurelliana","state":null,"type":"turpis"},
+{"farmName":"Lesch Group","hostName":"Gavin","phoneNo":"7507208155","email":"[email protected]","gender":"Male","city":"Nadezhda","state":null,"type":"eu"},
+{"farmName":"Paucek-Koepp","hostName":"Skippie","phoneNo":"2701994230","email":"[email protected]","gender":"Male","city":"Shinao","state":null,"type":"nulla"},
+{"farmName":"Kemmer-Lesch","hostName":"Cam","phoneNo":"1683155827","email":"[email protected]","gender":"Male","city":"Kamionka Wielka","state":null,"type":"ac lobortis"},
+{"farmName":"McLaughlin, Medhurst and Deckow","hostName":"Powell","phoneNo":"8684785107","email":"[email protected]","gender":"Male","city":"Emiliano Zapata","state":"Morelos","type":"justo"},
+{"farmName":"Medhurst-VonRueden","hostName":"Ellery","phoneNo":"1699038245","email":"[email protected]","gender":"Male","city":"Xiji","state":null,"type":"nec euismod"},
+{"farmName":"Funk and Sons","hostName":"Lyon","phoneNo":"9786596810","email":"[email protected]","gender":"Non-binary","city":"Salon-de-Provence","state":"Provence-Alpes-Côte d'Azur","type":"interdum"},
+{"farmName":"Oberbrunner-Mertz","hostName":"Verney","phoneNo":"8832734094","email":"[email protected]","gender":"Male","city":"Taoyuan","state":null,"type":"eu"},
+{"farmName":"Mayer Inc","hostName":"Joe","phoneNo":"3474719416","email":"[email protected]","gender":"Male","city":"New York City","state":"New York","type":"sed tristique"},
+{"farmName":"Cormier LLC","hostName":"Sileas","phoneNo":"7546755037","email":"[email protected]","gender":"Female","city":"Lhokkruet","state":null,"type":"sollicitudin mi"},
+{"farmName":"Hoppe LLC","hostName":"Charlie","phoneNo":"2086099551","email":"[email protected]","gender":"Male","city":"Ubay","state":null,"type":"elit proin"},
+{"farmName":"Little-Rogahn","hostName":"Lethia","phoneNo":"6892810546","email":"[email protected]","gender":"Female","city":"Bayog","state":null,"type":"varius"},
+{"farmName":"Nolan Group","hostName":"Ansel","phoneNo":"2848842400","email":"[email protected]","gender":"Male","city":"Baruunsuu","state":null,"type":"et"},
+{"farmName":"Haley-Kub","hostName":"Ulick","phoneNo":"1033621445","email":"[email protected]","gender":"Male","city":"Tha Uthen","state":null,"type":"tincidunt in"},
+{"farmName":"Harber, Daugherty and Streich","hostName":"Dov","phoneNo":"5554988794","email":"[email protected]","gender":"Male","city":"Buriwutung","state":null,"type":"sollicitudin ut"},
+{"farmName":"Hamill, Prosacco and Hansen","hostName":"Sigismund","phoneNo":"3252626321","email":"[email protected]","gender":"Male","city":"Oslo","state":"Oslo","type":"lobortis est"},
+{"farmName":"Jaskolski-King","hostName":"Broderick","phoneNo":"4029662050","email":"[email protected]","gender":"Male","city":"Dillenburg","state":"Hessen","type":"erat"},
+{"farmName":"Littel, Denesik and Watsica","hostName":"Gleda","phoneNo":"4901984390","email":"[email protected]","gender":"Female","city":"Zhelin","state":null,"type":"suspendisse"},
+{"farmName":"Becker, Denesik and Cummings","hostName":"Waldon","phoneNo":"2735724491","email":"[email protected]","gender":"Male","city":"Solo","state":null,"type":"duis"},
+{"farmName":"Jast and Sons","hostName":"Henrieta","phoneNo":"7994382789","email":"[email protected]","gender":"Female","city":"Niepos","state":null,"type":"sem"},
+{"farmName":"Crona, Quitzon and Hermann","hostName":"Lesley","phoneNo":"1585321596","email":"[email protected]","gender":"Female","city":"Vienne","state":"Rhône-Alpes","type":"diam erat"},
+{"farmName":"Hilll, Howell and Reinger","hostName":"Idell","phoneNo":"4663003534","email":"[email protected]","gender":"Female","city":"Tanshi","state":null,"type":"iaculis"},
+{"farmName":"Farrell, Kreiger and Altenwerth","hostName":"Isacco","phoneNo":"4052658466","email":"[email protected]","gender":"Male","city":"Södertälje","state":"Stockholm","type":"sit amet"},
+{"farmName":"McDermott Inc","hostName":"Rubina","phoneNo":"2909195645","email":"[email protected]","gender":"Female","city":"Tegalwero","state":null,"type":"velit"},
+{"farmName":"Kunze-Wuckert","hostName":"Jehanna","phoneNo":"4486445012","email":"[email protected]","gender":"Female","city":"Ampanihy","state":null,"type":"libero"},
+{"farmName":"Doyle-Lemke","hostName":"Erma","phoneNo":"7251428536","email":"[email protected]","gender":"Female","city":"Itajubá","state":null,"type":"laoreet"},
+{"farmName":"Homenick, Bauch and O'Keefe","hostName":"Olenka","phoneNo":"5719677240","email":"[email protected]","gender":"Female","city":"Merrifield","state":"Virginia","type":"nec dui"},
+{"farmName":"Towne Inc","hostName":"Terra","phoneNo":"8446261057","email":"[email protected]","gender":"Agender","city":"Hongchuan","state":null,"type":"vivamus"},
+{"farmName":"Stroman, Blick and Wunsch","hostName":"Herschel","phoneNo":"7049890744","email":"[email protected]","gender":"Male","city":"Qianzhou","state":null,"type":"pharetra"},
+{"farmName":"Borer and Sons","hostName":"Marian","phoneNo":"4216743667","email":"[email protected]","gender":"Female","city":"Dianqian","state":null,"type":"eu sapien"},
+{"farmName":"Kub Group","hostName":"Saundra","phoneNo":"8425524555","email":"[email protected]","gender":"Female","city":"Valenciennes","state":"Nord-Pas-de-Calais","type":"libero"},
+{"farmName":"Davis, Gleichner and Huel","hostName":"Worth","phoneNo":"8317287450","email":"[email protected]","gender":"Male","city":"Tiwi","state":null,"type":"nunc"},
+{"farmName":"Hilll, Toy and Bergstrom","hostName":"Abby","phoneNo":"7558980541","email":"[email protected]","gender":"Male","city":"Xianxiang","state":null,"type":"sem praesent"},
+{"farmName":"Adams, Doyle and Reichel","hostName":"Rora","phoneNo":"2894546382","email":"[email protected]","gender":"Female","city":"Lusk","state":null,"type":"dapibus dolor"}]
diff --git a/src/host/script.js b/src/host/script.js
@@ -0,0 +1,29 @@
+const userCardTemplate = document.querySelector("[data-user-template]")
+const userCardContainer = document.querySelector("[data-user-cards-container]")
+const searchInput = document.querySelector("[data-search]")
+
+let users = []
+
+searchInput.addEventListener("input", e => {
+  const value = e.target.value.toLowerCase()
+  users.forEach(user => {
+    const isVisible =
+      user.name.toLowerCase().includes(value) ||
+      user.email.toLowerCase().includes(value)
+    user.element.classList.toggle("hide", !isVisible)
+  })
+})
+
+fetch("https://jsonkeeper.com/b/NWLV")  // farmlist.json hosted here
+  .then(res => res.json())
+  .then(data => {
+    users = data.map(user => {
+      const card = userCardTemplate.content.cloneNode(true).children[0]
+      const header = card.querySelector("[data-header]")
+      const body = card.querySelector("[data-body]")
+      header.textContent = user.name
+      body.textContent = user.email
+      userCardContainer.append(card)
+      return { name: user.name, email: user.email, element: card }
+    })
+  })