register.js:

const init = async function () {
    const selectEl = document.querySelector("select")
    const formEl = document.querySelector("form")
    const notifEl = document.querySelector(".success-notif")
    const errNotifEl = document.querySelector(".fail-notif")

    // code for closing the notification boxes.
    const deleteButtons = document.querySelectorAll("button.delete")
    deleteButtons.forEach((button) => {
        button.addEventListener("click", () => {
            const parentElement = button.parentElement
            parentElement.classList.add("is-hidden")
        })
    })

    // docker container must be running already.
    const res = await fetch("http://localhost:8080/courses")
    const data = await res.json()

    data.forEach((course) => {
        const optionEl = document.createElement("option")
        optionEl.setAttribute("value", course.code)
        optionEl.innerText = `${course.code} ${course.name}`

        selectEl.append(optionEl)
    })

    formEl.addEventListener("submit", async function (event) {
        // to prevent the form from reloading the page 
        // once submitted.
        event.preventDefault()

        const data = new FormData(formEl)
        const objectData = Object.fromEntries(data)

        try {
            const res = await fetch("http://localhost:8080/registrations", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(objectData)
            })

            const backendResponse = await res.json()
            if (res.status === 200) {
                // the record was created successfully
                // so we need to show the success notification box.
                notifEl.classList.remove("is-hidden")
            }

        } catch {
            // something went wrong here.
            errNotifEl.classList.remove("is-hidden")
        }
    })
}

init()

courses.js:

const init = async function () {
    // docker container must be running already for this to work.
    const res = await fetch("http://localhost:8080/registrations")
    const data = await res.json()
    const sectionContainerEl = document.querySelector("#section-container")

    data.forEach((course) => {
        // one iteration per course.
        const sectionEl = document.createElement("section") // <section></section>
        sectionEl.classList.add("section") // <section class="section"></section>

        const h2El = document.createElement("h2")
        h2El.classList.add("title")
        h2El.innerText = `${course.code} ${course.name}`

        const ulEl = document.createElement("ul")
        course.students.forEach((student) => {
            // I need to create a <li> per student.
            const liEl = document.createElement("li")
            liEl.innerText = `${student.name} ${student.student_id}`
            ulEl.append(liEl)
        })

        sectionEl.append(h2El)
        sectionEl.append(ulEl)

        // now add the section to the page.
        sectionContainerEl.append(sectionEl)
    })
}

init()