Question 1: jQuery - Dynamic Content Update

Objective: Use jQuery to dynamically update a p element with user input from an input field when a button is clicked.

<!DOCTYPE html>

Dynamic Content Update

This text will be updated.

Question 2: Thymeleaf - Displaying a List of Items

Objective: Use Thymeleaf to display a list of students stored in a backend Java controller.

Info you may need:

  • student.getStatus(): Returns True if the student passed, returns False if the student failed
  • student.getName(): Returns student name
  • student.getGrade(): Returns student grade

Student Model Class:

public class Student {
    private String name;
    private int grade;
    private boolean status; // true = passed, false = failed

    // Constructor, getters, and setters
    public Student(String name, int grade, boolean status) {
        this.name = name;
        this.grade = grade;
        this.status = status;
    }

    public String getName() {
        return name;
    }

    public int getGrade() {
        return grade;
    }

    public boolean getStatus() {
        return status;
    }
}

Controller:

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Arrays;
import java.util.List;

@Controller
public class StudentController {

    @GetMapping("/students")
    public String getStudents(Model model) {
        // Creating a list of students...
        List<Student> students = Arrays.asList(
            new Student("Alice", 85, true),
            new Student("Bob", 45, false),
            new Student("Charlie", 90, true)
        );

        // Here is adding the list to the model
        model.addAttribute("students", students);

        // Here is returning the Thymeleaf template name
        return "students";
    }
}

|   import org.springframework.stereotype.Controller;

package org.springframework.stereotype does not exist

<!DOCTYPE html>

Student List

Student List

Name Grade Status
Student Name Student Grade Passed Failed
Student List

Student List

Name Grade Status

Bonus Question:

Why is Thymeleaf better than creating a regular table? What are any potential pros and cons of Thymeleaf tables?