Harjutused

import "./styles.css";

const myjson = [
  {
    Car: {
      Color: "Yellow",
      "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>`;

import "./styles.css";

const myJson = [
  {
    Color: "Rose red",
    "Tinted windows": false,
    Wheels: 4,
    "Roof cargo": null,
    Entertainment: [
      "Fm Radio",
      "Mp3, Mp4, MKV player",
      "harman/kardon speakers",
    ],
    Accessories: ["satnav", "cruise control"],
  },
  {
    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"],
  },
];
document.getElementById("app").innerHTML += "<ul>";
myJson.forEach((element) => {
  document.getElementById("app").innerHTML += `
  <h1>Car properties</h1>
        <li>Color: ${element.Color}</li>
        <li>Tinted windows: ${element["Tinted windows"]}</li>
        <li>Wheels: ${element.Wheels}</li>
        <li>Roof cargo: ${element["Roof cargo"]}</li>
        <li> Entertainment: <dl>
    `;
  element.Entertainment.forEach((element1) => {
    document.getElementById("app").innerHTML += `
        <dd>${element1},</dd>
        `;
  });
  document.getElementById("app").innerHTML += `
  </dl>
  <br />
  <li> Accessories: <dl>
  `;
  element.Accessories.forEach((element1) => {
    document.getElementById("app").innerHTML += `
        <dd>${element1},</dd>
        `;
  });
});
document.getElementById("app").innerHTML += "</dl></ul>";