Harjutus 2: JSON andmete näitamine JS kaudu

Pärast kui me avasime ja kirjutasime projekti nimi. Võime kirjutada index.js sisse koodi mis on all

JavaScript
const cars = [
  {
    Name: "Car0",
    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: "Car1",
    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"],
  },
];
JavaScript
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>
        ${cars
          .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>${car.Entertainment.map((e) => "🎵 " + e).join(", ")}</td>
            <td>${car.Accessories.map((a) => "⚙️ " + a).join(", ")}    </td>
          </tr>
        `
          )
          .join("")}
      </tbody>
    </table>
  </div>
`;

lisasin Entertainment ja Accessories emoje 🎵,⚙️. andsin Tinted windows kas on Yes või No

Lisasin stiile tableisse

CSS
body {
  font-family: sans-serif;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
}
th,
td {
  border: 1px solid #ccc;
  padding: 8px 12px;
  text-align: left;
}
thead {
  background-color: #333;
  color: white;
}
tbody tr:nth-child(even) {
  background-color: #f9f9f9;
}
tbody tr:hover {
  background-color: #d1e7fd;
}
.tinted {
  background-color: #fff2cc !important;
}

index.html

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app"></div>

    <script src="./index.js" type="module"></script>
  </body>
</html>

Ja seda me saame pärast kui kirjutasime kõikke