H2: JSON andmete näitamine javascript’i abil

import "./styles.css";

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

// Näitamine html tableina
document.getElementById("app").innerHTML = `
    <div>
        <h1>Car Properies</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>
                ${car
                  .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>

`;

import "./styles.css";

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

// Näitamine html tableina
document.getElementById("app").innerHTML = `
    <div>
        <h1>Car Properies</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>
                ${car
                  .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>

`;

body {
  font-family: sans-serif;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table,
tr,
td,
th {
  border: 1px solid black;
}

body {
  font-family: sans-serif;
}
table {
  width: 100%;
  border-collapse: collapse;
}
table,
tr,
td,
th {
  border: 1px solid black;
}

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

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

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

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

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

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