H2. JSON andmete näitamine JS kaudu

import "./styles.css";

//masiiv
const car = [
  {
    Name: "HONDA",
    Color: "blue",
    "Tinted windows": false,
    Wheel: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM radio",
      "MP3, MP4 and MKV player",
      "harman/karbon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  {
    Name: "Merc",
    Color: "black",
    "Tinted windows": false,
    Wheel: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM radio",
      "MP3, MP4 and MKV player",
      "harman/karbon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  {
    Name: "Audi",
    Color: "green",
    "Tinted windows": true,
    Wheel: 4,
    "Roof cargo": null,
    Entertainment: [
      "FM radio",
      "MP3, MP4 and MKV player",
      "harman/karbon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
];

//näitame html tableina
document.getElementById("app").innerHTML = `
<div>
<h1>Car properties</h1>
<table>
    <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>
    <tbody>
    ${car.map(
      (car) => `
        <tr>
        <td>${car.Name}</td>
        <td>${car.Color}</td>
        <td>${car["Tinted windows"] ? "Yes" : "No"}</td>
        <td>${car.Wheel}</td>
        <td>${car["Roof cargo"] || "None"}</td>
        <td>${car.Entertainment.map((e) => "🤡" + e).join(", ")}</td>
        <td>${car.Accessories.map((e) => "😎" + e).join(", ")}</td>
        </tr>
        `
    )}
    </tbody>
</table>
</div>
`;

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  margin: 0;
  padding: 0;
}

div {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

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

th {
  background-color: #470692;
  color: white;
  font-weight: bold;
  text-transform: uppercase;
}

tr:hover {
  background-color: #f1f1f1;
}

tr:nth-child(even) {
  background-color: #f9f9f9;
}

tr:nth-child(odd) {
  background-color: #ffffff;
}

table {
  margin-bottom: 20px;
}
td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}