Semester_4
01_Introduction
02_DeployAzure
03_JSBasic
04_OOP
05_GET
06_POST
07_PUT
08_PATCH
09_DELETE
10_FrontendTable
11_FrontendAdd
12_FrontendDelete
13_FrontendEdit
14_Database



content

html and css

Add an input section to the index.html:

  <main>
    <!-- Input Section -->
    <section class="input-section">
      <input type="text" id="student-name"   placeholder="Name of the student..."/>
      <input type="text" id="student-course" placeholder="Course ..."/>
      <button id="add-btn">Add Student</button>
    </section>

    <div id="status" class="status">Lade Daten…</div>

Add css for the input section styles.css:

.input-section {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

#student-input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

#add-btn {
  padding: 8px 16px;
  background: #0078ff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

#add-btn:hover {
  background: #005fcc;
}
001.png

Add listener

Runs the JavaScript function add() when the button is clicked.

index.html

<button onclick="addClick()" id="add-btn">Add Student</button>

Implement the function addClick():

app.js:

async function addClick() {
    const nameInput   = document.getElementById("student-name");
    const name = nameInput.value.trim();
    const courseInput = document.getElementById("student-course");
    const course = courseInput.value.trim();
    const button = document.getElementById("add-btn");
    const statusEl = document.getElementById("status");

    if (!name || !course) {
      statusEl.textContent = "Name and course required.";
      return;
    }

    button.disabled = true;
    await addStudent(name, course);
    button.disabled = false;

    nameInput.value = "";
    courseInput.value = "";
    nameInput.focus();
}

Implement the function addStudent(name, course):


async function addStudent(name, course) {
  const statusEl = document.getElementById("status");
  try {
    const res = await fetch("/students", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ name, course }),
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    await fetchStudents();
    statusEl.textContent = "Student added.";
  } catch (err) {
    console.error(err);
    statusEl.textContent = `Error while added a student: ${err.message}`;
  }
}

const res = await fetch("/students", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name, course }), });

This line sends a POST request to the server at /students, with a JSON body that includes the new student’s name and course.

Part Meaning
fetch("/students", {...}) Sends an HTTP request to the /students API endpoint on your server.
method: "POST" Tells the server this is a POST request — used to create a new student (not just read data).
headers: { "Content-Type": "application/json" } Tells the server that you’re sending JSON data in the request body.
body: JSON.stringify({ name, course }) Converts the JavaScript object { name, course } into a JSON string before sending it.
await Waits for the request to complete before moving to the next line.
const res Stores the server’s response in a variable called res.

Test

002.png
003.png
004.png

GIT

Do not forget.

Azure

Deploy and test.