Don't load HTML template on first load

April 11, 2023

I have a basic HTML template that is populated by cards through a search bar given some conditions. This works fine, the only problem is that on first load all the cards are shown and I want none shown until the conditions are met.

This is my code: https://jsfiddle.net/barkwegn/6/

HTML

<!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">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
    <title>Document</title>
  </head>

  <body>
    <div class="search-wrapper">
      <input type="search" id="search"  placeholder="Search the catalogue" data-search>
    </div>
    <div class="user-cards" data-user-cards-container></div>
    <template data-user-template>
      <div class="card">
        <a href="https://www.url.com/#">
          <div class="header" data-header></div>
        </a>
        <div class="body" data-body></div>
      </div>
    </template>
  </body>

Javascript

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()
  const xy = value.split(' ')

  users.forEach(user => {

    if (parseFloat(value.length) < 3) {
      user.element.classList.toggle("hide", true)
    } else {
      var distance = Math.sqrt(
        Math.pow(parseFloat(xy[0]) - parseFloat(user.x), 2) +
        Math.pow(parseFloat(xy[1]) - parseFloat(user.y), 2))
      const isVisible =
        user.name.toLowerCase().includes(value) || distance <= 10
      user.element.classList.toggle("hide", !isVisible)
    }
  })
})

fetch("https://ucc.ar/_clusters/test.json")
  .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.company
      userCardContainer.append(card)
      return {
        name: user.name,
        x: user.x,
        y: user.y,
        element: card
      }
    })
  })

CSS

.search-wrapper {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

input {
  width: 80%;
  margin: 0 auto;
  display: block;
  padding: 12px 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 18px;
  background-color: #ffffff;
}

.user-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .25rem;
  margin-top: 1rem;
}

.card {
  border: 1px solid black;
  background-color: white;
  padding: .5rem;
  text-align: center;
}

.card > .header {
  margin-bottom: .25rem;
}

.card > .body {
  font-size: .8rem;
  color: #777;
  font-weight: bold;
}

.hide {
  display: none;
}

>Solution :

Add the hide class to the elements when creating them in the initial fetch.

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.company
card.classList.add('hide');

You could also directly add it to the card in the template.