EntropyStarRover

02. Http Status Cats

Mar 11th, 2021 (edited)
551
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import { cats } from "./catSeeder.js";
  2. import { html, render } from 'https://unpkg.com/lit-html?module';
  3. function loadCats() {
  4.     let allCats = document.getElementById("allCats")
  5.    
  6.     //create array of li
  7.     const itemTemplates = [];
  8.     for (const c of cats) {
  9.         itemTemplates.push(html`<li><img src="./images/${c.imageLocation}.jpg" width="250" height="250" alt="Card image cap">
  10.     <div class="info">
  11.         <button class="showBtn" @click=${function (e) {
  12.                 showStatus(c.statusCode, e.target)
  13.             }}>Show status code</button>
  14.         <div class="status" style="display: none" id="${c.statusCode}">
  15.             <h4>Status Code: ${c.statusCode}</h4>
  16.             <p>Continue</p>
  17.         </div>
  18.     </div>
  19.     </li>`);
  20.     }
  21.     //render ul
  22.     let ul = html`<ul> ${itemTemplates}</ul>`;
  23.     //append it
  24.     render(ul, allCats)
  25.  
  26. }
  27.  
  28. function showStatus(statusCode, button) {
  29.     let statusDiv = document.getElementById(statusCode);
  30.     if (statusDiv.style.display == "none") {
  31.         statusDiv.style.display = "block";
  32.         button.textContent = "Hide status code";
  33.     } else {
  34.         statusDiv.style.display = "none";
  35.         button.textContent = "Show status code";
  36.     }
  37. }
  38.  
  39. loadCats();
  40.  
  41.  
  42.  
RAW Paste Data Copied