Fetch JavaScript Hilfe?

Hallo,

bei mir klappt Folgendes nicht:

Wenn ich bei "Registration Form" alle inputs ausfülle, dann kommt ein sogenanntes "Kärtchen" mit deinem Avatar raus. Jedes "Kärtchen" enthält einen button "Log out", und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (aber nicht aus Backend Server- Api) und der "logged" sollte im Backend Server auf false gesetzt werde.

Wie kann man das machen? Ich habe schon davor mit fetch gearbeitet, aber so ein Problem kommt bei mir zum ersten Mal (Bin ja noch komplett ein Noob in JavaScript).

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration | Form</title>
  <link rel="stylesheet" href="./CSS/settings.css">
  <link rel="stylesheet" href="./CSS/style.css">
  <link rel="stylesheet" href="./CSS/javascriptStyles.css">
  
  <script defer src="./JavaScript/script.js"></script>
</head>
<body>
  <div class="container">
    <div class="container-two">
    <div class="registration-form">
      <h2 id="heading">● Registration Form ●</h2>
      <div class="forms">
        <input id="emailInput" type="text" placeholder="example@gmail.com">
        <input id="userInput" type="text" placeholder="Username">
        <input id="pictureInput" type="text" placeholder="Picture">
        <button id="createButton">Create Account</button>
      </div>
      <p id="signInText">Already have an account? <a href="../PageTwo/index.html" id="aText">Sign in</a></p>
    </div>
    </div>
  </div>


  <div id="registerList">
  </div>
</body>
</html>

JavaScript-Code:

const registerList = document.getElementById("registerList")


const forms = document.getElementById("forms")
const email = document.getElementById("emailInput")
const user = document.getElementById("userInput")
const picture = document.getElementById("pictureInput")


const createButton = document.getElementById("createButton")


const url = "https://crudcrud.com/api/dac4c32dac5c4861a46ad8aee63df14c/todos"



const dataRender = (posts) => {
if (posts === undefined) {
  console.log("Loading...");
}
  else{
    let dataList = posts.map((post) => {
    return `
    <div class="register-container">
    <div class="inner-container">
      <img id="registerPicture" src="${post.picture}" alt="${post.user}"> 
      <h2 id="registerUser">${post.user}</h2>
      <h5 id="registerEmail">${post.email}</h5>
      <button onclick=logOutButton("${post._id}") id="registerButton">Log out</button>
    </div>
  </div>
  `
  })
  registerList.innerHTML = dataList.join("")
}
}


//GET METHOD
fetch (url)
.then(response => response.json())
.then (data => dataRender(data))


//POST METHOD
createButton.addEventListener("click", () => {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      user: user.value,
      email: email.value,
      registered: true,
      logged: true
    })
  })
  .then(response => response.json())
  .then(data => {
    const dataArray = []
    dataArray.push(data)
    dataRender(dataArray)
    
    email.value = ""
    user.value = ""
    picture.value = ""


    console.log(`User ${user.value} registered successful!`)
  })
})


//PUT METHOD
const logOutButton = (id) => {
  const data = {
    user: user.value,
    email: email.value,
    registered: true,
    logged: false
  }
  fetch(`${url}/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => { 
    
  })


}


Bitte helft mir! Ich weiss wirklich nicht wie das geht und möchte jetzt auch nicht den ganzen Tag dazu verschwenden! Denn ich habe noch andere Hausaufgaben.. Dankeschön im Voraus!

LG

MrOsmo

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
Programmieraufgabe Hilfeee?

Hallo, ich habe hier eine Programmmieraufgabe, wo ich nicht richtig weiterkommme und hoffe ihr könnt mir da helfen!

Die Aufgabe lautet:

Es sollen drei Klassen geschrieben werden, die den Konzepten StudentTutorium und Sekretariat entsprechen. Implementiert:

  • Die Klasse Student mit folgenden Attributen: name, matrikelnummer.
  • Einen Konstruktor public Student( String name, int matrikel ) für die Klasse Student mit den entsprechenden Übergabeparametern zum Setzen der jeweiligen Attribute.
  • Eine Methode public void ausgeben() in der Klasse Student gibt die Eigenschaften eines Students auf dem Bildschirm aus.

Die Ausgabe muss wie folgt aussehen (die Fragezeichen stehen für die Eigenschaften):


Matrikel Nr.: ?, Name: ?
  • Die Klasse Tutorium mit den Attributen tutorraumNrfach und teilnehmer (dies soll ein Array von Studenten sein).
  • Einen Konstruktor public Tutorium( int kapazitaet, int raumNr, String tutor, String fach )kapazitaet bezeichnet die maximale Anzahl der Studenten in einem Tutorium. Bei der Erzeugung des Tutorium wird das teilnehmer Array mit Null-Referenzen gefüllt und bleibt so, solange keine Studenten aufgenommen wurden.
  • Eine Methode public void ausgeben() in der Klasse Tutorium. Gibt die Eigenschaften eines Tutoriums und eine Liste der teilnehmenden Studenten auf dem Bildschirm aus.

Die Ausgabe muss so aussehen (die Fragezeichen stehen für die Eigenschaften)

 
Tutorium ? bei ? in Raum ? Teilnehmer:
??
??(Hier kommen dann die Studierenden)
  • Die Klasse Sekretariat, zur Verwaltung von Tutorien. Darin sind folgende Methoden zu implementieren:
  1. public static boolean istVoll( Tutorium t ). Überprüft ob noch freie Plätze im Tutorium t vorhanden sind.
  2. public static boolean studentAufnehmen( Tutorium t, Student st ). Nimmt einen übergebenen Student st in dem Tutorium t auf, falls das möglich ist. Die Methode soll zurückgeben, ob die Aufnahme möglich war.

Meine Student class ist schonmal fertig

public class Student {

  String name;

  int matrikelnummer;

  public Student(String name, int matrikelnummer) {

    this.name = name;

    this.matrikelnummer = matrikelnummer;

  }

  public void ausgeben() {

    System.out.println("Matrikel Nr.: " + matrikelnummer + ", Name: " + name);

  }

  public static void main(String[] args) {

    // Erstelle eine Instanz von Student

    Student student = new Student("Leo", 3450);

    // Rufe die Methode ausgeben() auf

    student.ausgeben();

  }

}

Allerdings weiss ich nicht wie ich die anderen Klassen erstellen soll, weil die im Compiler nicht funktionieren, weil die mit der Student Class verbunden sein müssen.

Hat da jemand eine Ahnung wie das geht?

Java, Programmiersprache

Meistgelesene Beiträge zum Thema Programmiersprache