Harjutus 2: Loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Loo Codesandbox-is HTML leht, mis kuvab auto andmeid

Avame uus proekt CodeSanbox’is

Lisame index.js koodiga

import "./styles.css";

const myjson = [
  {
    Car: {
      Color: "Rose red",
      "Tinted windows": true,
    },
  },
];

document.getElementById("app").innerHTML = `
  <div id="json">
    <h1>Car properties</h1>
    <p>Color: ${myjson[0].Car.Color}</p>
    <p>Tinted windows: ${myjson[0].Car["Tinted windows"]}</p>
  </div>
`;

Lisame styles.css koodiga

table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}

th,
td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}

th {
  background-color: #f4f4f4;
}

tr.tinted {
  background-color: #e0f7fa;
}

ul.entertainment-list {
  margin: 5px 0 0 20px;
  padding-left: 20px;
  list-style-type: disc;
  color: #333;
}

Deklareeri muutuja CARS ja täida see tabelist pärit andmetega.

Täidetud andmed:

const cars = [
    {
        Name: "Zhiguli",
        Color: "Rose red",
        "Tinted windows": false,
        Wheels: 4,
        "Roof cargo": null,
        Entertainment: [
            "FM Radio",
            "MP3, MP4 and MKV player",
            "harman/kardon speakers",
        ],
        Accessories: ["satnav", "cruise control"],
    },
    {
        Name: "Lada",
        Color: "Navy blue",
        "Tinted windows": true,
        Wheels: 4,
        "Roof cargo": "Thule",
        Entertainment: [
            "FM Radio",
            "Apple CarPlay/Android Auto",
            "Bowers & Wilkins Premium Sound speakers",
        ],
        Accessories: ["self drive system", "luggage cover"],
    },
    {
        Name: "Lexus",
        Color: "Black",
        "Tinted windows": true,
        Wheels: 4,
        "Roof cargo": "Thule",
        Entertainment: ["FM Radio", "MP3 and MKV player", "harman/kardon speakers"],
        Accessories: ["satnav", "cruise control"],
    },
];

Kirjutame koodi massiiviandmete kuvamiseks tabelis.

function displayCars(carsArray) {
  document.getElementById("app").innerHTML = `
      <div id="json">
        <h1>Car Properties</h1>
        <table>
          <thead>
            <tr>
              <th>Name</th>
              <th>Color</th>
              <th>Tinted Windows</th>
              <th>Wheels</th>
              <th>Roof Cargo</th>
              <th>Entertainment</th>
              <th>Accessories</th>
            </tr>
          </thead>
          <tbody>
            ${carsArray
              .map(
                (car) => `
              <tr class="${car["Tinted windows"] ? "tinted" : ""}">
                <td>${car.Name}</td>
                <td>${car.Color}</td>
                <td>${car["Tinted windows"] ? "Yes" : "No"}</td>
                <td>${car.Wheels}</td>
                <td>${car["Roof cargo"] || "None"}</td>
                <td>
                  <ul>
                    ${car.Entertainment.map((e) => `<li>${e}</li>`).join("")}
                  </ul>
                </td>
                <td>
                  ${car.Accessories.join(", ")}
                </td>
              </tr>
            `
              )
              .join("")}
          </tbody>
        </table>
      </div>
    `;
}

displayCars(cars);

Näete massiivist genereeritud autode nimekirja koos nende omadustega.

Ülesanne

  1. Lisage igale autole nupp „Näita/peida meelelahutus”.
  2. Vaikimisi peab meelelahutuse nimekiri (Entertainment) olema peidetud.
  3. Nupule vajutamisel peab meelelahutuse nimekiri ilmuma auto alla.
  4. Uuesti vajutamisel peab meelelahutuse nimekiri peituma.

Uus kood:

function displayCars(carsArray) {
    document.getElementById("app").innerHTML = `
    <div id="json">
      <h1>Car Properties</h1>
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Color</th>
            <th>Tinted Windows</th>
            <th>Wheels</th>
            <th>Roof Cargo</th>
            <th>Entertainment</th>
            <th>Accessories</th>
          </tr>
        </thead>
        <tbody>
          ${carsArray
        .map(
            (car, i) => `
              <tr class="${car["Tinted windows"] ? "tinted" : ""}">
                <td>${car.Name}</td>
                <td>${car.Color}</td>
                <td>${car["Tinted windows"] ? "Yes" : "No"}</td>
                <td>${car.Wheels}</td>
                <td>${car["Roof cargo"] || "None"}</td>
                <td>
                  <button class="toggle-entertainment" data-index="${i}">Näita meelelahutust</button>
                  <ul id="ent-${i}" class="entertainment-list" aria-hidden="true">
                    ${car.Entertainment.map((e) => `<li>${e}</li>`).join("")}
                  </ul>
                </td>
                <td>
                  ${car.Accessories.join(", ")}
                </td>
              </tr>
            `
        )
        .join("")}
        </tbody>
      </table>
    </div>
  `;

    document.querySelectorAll(".toggle-entertainment").forEach((btn) => {
        btn.addEventListener("click", () => {
            const idx = btn.getAttribute("data-index");
            const list = document.getElementById(`ent-${idx}`);
            const isVisible = list.classList.toggle("is-visible");
            btn.textContent = isVisible
                ? "Peida meelelahutust"
                : "Näita meelelahutust";
            list.setAttribute("aria-hidden", isVisible ? "false" : "true");
        });
    });
}

Styles:

button.toggle-entertainment {
  padding: 6px 12px;
  cursor: pointer;
  border: 1px solid #000;
  background-color: #fff;
  color: #000;
  border-radius: 2px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

button.toggle-entertainment:hover {
  background-color: #000;
  color: #fff;
}

ul.entertainment-list {
  display: none;
  margin: 5px 0 0 20px;
  padding-left: 20px;
  list-style-type: square;
  color: #000;
}

ul.entertainment-list.is-visible {
  display: block;
}
Scroll to Top