Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Student Cards</title>
  <style>
    .student-card {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
      width: 300px;
      display: inline-block;
    }

    .student-photo {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>Student Cards</h1>
  <div id="student-cards"></div>
</body>
</html>


$(document).ready(function() {
  // Ajax request to get student data
  $.ajax({
    url: "dummy_student_data.json",
    method: "GET",
    success: function(response) {
      renderStudentCards(response.students);
    },
    error: function() {
      console.log("Error: Failed to retrieve student data.");
    }
  });

  // Function to render student cards
  function renderStudentCards(students) {
    var studentCardsContainer = $("#student-cards");

    $.each(students, function(index, student) {
      var studentCard = $("<div class='student-card'></div>");
      var studentPhoto = $("<img class='student-photo' src='" + student.photo + "'>");
      var studentName = $("<p><strong>Name:</strong> " + student.name + "</p>");
      var studentEmail = $("<p><strong>Email:</strong> " + student.email + "</p>");
      var studentPhone = $("<p><strong>Phone:</strong> " + student.phone + "</p>");

      studentCard.append(studentPhoto);
      studentCard.append(studentName);
      studentCard.append(studentEmail);
      studentCard.append(studentPhone);

      studentCardsContainer.append(studentCard);
    });
  }
});


{
  "students": [
    {
      "name": "John Doe",
      "email": "johndoe@example.com",
      "phone": "1234567890",
      "photo": "path/to/photo1.jpg"
    },
    {
      "name": "Jane Smith",
      "email": "janesmith@example.com",
      "phone": "9876543210",
      "photo": "path/to/photo2.jpg"
    }
  ]
}
Editor is loading...