<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Phone Contact</title>
  <link
    href="https://[Log in to view URL]"
    rel="stylesheet">
  <style>
    body { background-color: #F0F0F2; }
    h1   { color: #FF5A43; }
    .card-label { font-size: 11px; color: #999; text-transform: uppercase; }
    pre  { font-size: 13px; color: #333; }
  </style>
</head>
<body class="py-4">

  <div class="container">

    <h1 class="mb-1">My Phone Contact</h1>
    <p class="text-muted mb-4">
      Introduction to Objects in JavaScript — Grade 4–6
    </p>

    <!-- Contact Card -->
    <div class="card shadow-sm mb-3" style="max-width:400px;">
      <div class="card-body">
        <h5 class="card-title" style="color:#FF5A43;">Contact Details</h5>
        <ul class="list-group list-group-flush">
          <li class="list-group-item">
            <span class="card-label d-block">Name</span>
            <strong id="name">—</strong>
          </li>
          <li class="list-group-item">
            <span class="card-label d-block">Phone</span>
            <strong id="phone">—</strong>
          </li>
          <li class="list-group-item">
            <span class="card-label d-block">School</span>
            <strong id="school">—</strong>
          </li>
          <li class="list-group-item">
            <span class="card-label d-block">City</span>
            <strong id="city">—</strong>
          </li>
        </ul>
      </div>
    </div>

    <!-- Code Box -->
    <div class="card shadow-sm" style="max-width:400px;">
      <div class="card-body">
        <h6 style="color:#FF5A43;">JavaScript Object Used</h6>
        <pre id="codeDisplay"
          class="bg-light p-3 rounded border mb-0"></pre>
      </div>
    </div>

  </div><!-- /container -->

  <script>

    // Step 1 — Create the contact object
    var myContact = {
      name:   "Riya Sharma",
      phone:  "98765-43210",
      school: "Sunrise Academy",
      city:   "Mumbai"
    };

    // Step 2 — Dot notation
    var nameEl  = document.getElementById("name");
    var phoneEl = document.getElementById("phone");
    nameEl.textContent  = myContact.name;
    phoneEl.textContent = myContact.phone;

    // Step 3 — Bracket notation
    var schoolEl = document.getElementById("school");
    var cityEl   = document.getElementById("city");
    schoolEl.textContent = myContact["school"];
    cityEl.textContent   = myContact["city"];

    // Show the object in code box
    var codeEl = document.getElementById("codeDisplay");
    codeEl.textContent =
      'var myContact = {\n' +
      '  name:   "' + myContact.name + '",\n' +
      '  phone:  "' + myContact.phone + '",\n' +
      '  school: "' + myContact["school"] + '",\n' +
      '  city:   "' + myContact["city"] + '"\n' +
      '};';

  </script>

</body>
</html>