Frontend Development

🖥 The 3-Layer Frontend (5–20 min)

💻 Live Coding — Student Dashboard (20–40 min)

<!-- HTML structure -->
<div id="app">
  <h1>Student Dashboard</h1>
  <form id="addForm">
    <input id="nameInput"  placeholder="Name"  required>
    <input id="emailInput" placeholder="Email" type="email">
    <button type="submit">Add Student</button>
  </form>
  <div id="studentList"></div>
</div>

// JavaScript: fetch API to talk to Spring Boot
const API = 'http://localhost:8080/api/students';

async function loadStudents() {
    const res  = await fetch(API);
    const data = await res.json();
    document.getElementById('studentList').innerHTML =
        data.map(s => `
          <div class="student-card">
            <strong>${s.name}</strong> — ${s.dept}
            <button onclick="deleteStudent(${s.id})">🗑</button>
          </div>
        `).join('');
}

document.getElementById('addForm').addEventListener('submit', async e => {
    e.preventDefault();
    await fetch(API, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
            name:  document.getElementById('nameInput').value,
            email: document.getElementById('emailInput').value
        })
    });
    loadStudents();
});

async function deleteStudent(id) {
    await fetch(`${API}/${id}`, { method: 'DELETE' });
    loadStudents();
}

loadStudents();