Verwandte Themen

MrOsmo
19.12.2023, 14:45
Mit Links
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
1 Antwort
Inkognito-Nutzer
19.12.2023, 11:09
Mit Bildern
Mit Links
Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

Bild zum Beitrag
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung
1 Antwort

Meistgelesene Beiträge zum Thema Webseite

Mehr meistgelesene Fragen zu Webseite