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>
<html lang="en">
<head>
    <title>prblem 1</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="userInput" placeholder="Enter text here">
    <button id="updateBtn">Update</button>
    <p id="outputText">skibidi toilet</p>
    <script>
        $(document).ready(function(){
            $("#updateBtn").click(function(){
                var userInput = $("#userInput").val();
                $("#outputText").text(userInput);
            });
        });
    </script>
</body>
</html>

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 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?

Thymeleaf templates are all processed on the server side before being sent to the user. The alternative way to create dynamic content is to send a static HTML file and then make API calls in Javascript, but since JS is executed on the client side this means that even more HTTP requests have to be sent, so this increases the amount of bandwidth used and having more JS running on the client side puts more strain on the client’s device. Instead, if you can just run this all on the server side to populate the information, the entire template can be modified by the server right before being sent to the client. There can be a downside to this though, since additional processing on the server side means that it can take longer for the client to receive the page, which isn’t very sigma good.