سؤالك:
باید یک صفحه وب با عناصر پویا و برنامه های درسی ایجاد کنید.
در صفحه باید جدولی با برنامه های درسی بر اساس داده های JSON وجود داشته باشد.
اگر تعداد حداکثر شرکت کنندگان رسیده باشد، دکمه "ثبت نام" غیرفعال شود.
دکمه "لغو ثبت نام" در صورتی که کاربر برای کلاس ثبت نام کرده باشد، فعال است.
کاربر فقط می تواند یک بار برای یک دوره ثبت نام کند.
هنگام فشردن دکمه "ثبت نام" و "لغو ثبت نام"، تعداد شرکت کنندگان ثبت شده را تغییر دهید.
وضعیت دکمه ها و تعداد شرکت کنندگان را به صورت زنده به روز کنید.
کد جاوا اسکریپت
إجابة الشبكة العصبية:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Registration</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
button {
padding: 5px 10px;
margin: 10px;
}
</style>
</head>
<body>
<table id="classTable">
<tr>
<th>Class Name</th>
<th>Max Participants</th>
<th>Registered Participants</th>
<th>Action</th>
</tr>
</table>
<script>
const classes = [
{ name: "Math", maxParticipants: 20, registeredParticipants: 0 },
{ name: "Science", maxParticipants: 15, registeredParticipants: 0 },
{ name: "History", maxParticipants: 25, registeredParticipants: 0 }
];
const table = document.getElementById("classTable");
classes.forEach((cls) => {
const row = table.insertRow();
row.insertCell(0).textContent = cls.name;
row.insertCell(1).textContent = cls.maxParticipants;
const registeredCell = row.insertCell(2);
registeredCell.textContent = cls.registeredParticipants;
const actionCell = row.insertCell(3);
const registerButton = document.createElement("button");
registerButton.textContent = "Register";
registerButton.addEventListener("click", () => {
if (cls.registeredParticipants < cls.maxParticipants) {
cls.registeredParticipants++;
registeredCell.textContent = cls.registeredParticipants;
}
if (cls.registeredParticipants === cls.maxParticipants) {
registerButton.disabled = true;
}
});
actionCell.appendChild(registerButton);
const cancelRegisterButton = document.createElement("button");
cancelRegisterButton.textContent = "Cancel Registration";
cancelRegisterButton.addEventListener("click", () => {
if (cls.registeredParticipants > 0) {
cls.registeredParticipants--;
registeredCell.textContent = cls.registeredParticipants;
}
if (cls.registeredParticipants < cls.maxParticipants) {
registerButton.disabled = false;
}
});
actionCell.appendChild(cancelRegisterButton);
});
</script>
</body>
</html>