03. Search in list

import { towns } from "./towns.js";
import { html, render } from 'https://unpkg.com/lit-html?module';

function search() {
   let button = document.querySelector("button")
   let input = document.getElementById("searchText");


   let townsDiv = document.getElementById("towns");
   function createTownTemplate(town) {
      return html`
      <li>${town}</li>`
   }

   let townsLis = towns.map(t => createTownTemplate(t));
   let ul = document.createElement("ul");
   render(townsLis, ul);
   render(ul, townsDiv)


   button.addEventListener("click", function (e) {
      let matches = 0;
      let searchQuery = input.value;

      function createActiveLi(town) {
         return html`
             <li class="active">${town}</li>`
      }

      let differentLis = [];
      towns.forEach(t => {
         if (t.toLowerCase().includes(searchQuery.toLowerCase())) {
            matches++;
             differentLis.push(createActiveLi(t))
         } else {
            differentLis.push(createTownTemplate(t))
         }
      })

      render(differentLis, ul);
      render(ul, townsDiv);
      let resultDiv = document.getElementById("result");
      resultDiv.textContent = `${matches} matches found`;
   })
}

search()