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!

MrOsmo

1 Antwort

Vom Beitragsersteller als hilfreich ausgezeichnet

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, JavaScript

19.12.2023, 15:45

Attributwerte werden von Anführungszeichen umklammert.

<button onclick="logOutButton('${post._id}')" ...

(...) und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (...)

Wie man Elemente löschen kann, hatte ich dir schon in dieser Antwort geschrieben. Die Aktion würde ich im (bei dir noch leeren) fetch-Callback durchführen.

(...) und der "logged" sollte im Backend Server auf false gesetzt werde. (...)

Das tust du schon bzw. wenn die aktuelle Implementation nicht funktioniert, wäre eine genauere Analyse notwendig:

Welche Daten werden konkret verschickt (nachgestellt an einem konkreten Beispiel)?
Was ist die Antwort?

Beides kannst du in den Entwicklungstools deines Browsers nachverfolgen. Im Network-Tab (o.ä., je Browser kann der Name etwas variieren) werden alle Requests aufgeführt, die verschickt werden. Du kannst je Request den Payload sowie den Response auslesen.

MrOsmo

Beitragsersteller

19.12.2023, 15:56

Dankeschön für deine Antwort! Ich wollte nochmal nachfragen, wo genau du, das mit dem fetch-Callback meinst? Meinst du, dass ich es hier schreiben soll.?

Also da wo Put-methode

.then(data => {

})

MrOsmo

Beitragsersteller

19.12.2023, 16:04

@MrOsmo

Bitte antworte ich brauche es dringend

Ähnliche Beiträge

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

...zum Beitrag

Spotify API Get Methode Blocked?

Moin, hab mal ne Frage, da ich es einfach nicht hin bekomme. Ich habe vor sowas wie eine Musikwunsch Seite für ein Schul Projekt zu coden. Dafür will ich die Spotify API nutzen, damit man über diese Songs suchen kann. Es kommt aber immer in der Netzwerkanalyse der Fehler NS_BINDING_ABORTED, obwohl mein Access Token korrekt ist. Hier ist meine script.js

const API_ENDPOINT = "https://api.spotify.com/v1/search";
const ACCESS_TOKEN = "your_access_token";

function searchSong() {
    let songName = document.getElementById("song-name").value;

    fetch(`${API_ENDPOINT}?q=${songName}&type=track`, {
        headers: {
            "Authorization": `Bearer ${ACCESS_TOKEN}`
        }
    })
    .then(response => response.json())
    .then(data => {
        let songResults = data.tracks.items;

        if (songResults.length > 0) {
            let songList = document.createElement("ul");

            for (let i = 0; i < songResults.length; i++) {
                let song = songResults[i];

                let songItem = document.createElement("li");
                songItem.innerHTML = `<a href="javascript:void(0)" onclick="selectSong('${song.id}')">${song.name} by ${song.artists[0].name}</a>`;

                songList.appendChild(songItem);
            }

            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "";
            songResultsDiv.appendChild(songList);
        } else {
            let songResultsDiv = document.getElementById("song-results");
            songResultsDiv.innerHTML = "Sorry, no songs found.";
        }
    })
    .catch(error => {
        const errorMessage = document.getElementById("error-message");
        errorMessage.innerText = error;
    });
}

function selectSong(songId) {
    fetch("db.php", {
        method: "POST",
        body: JSON.stringify({songId: songId}),
        headers: {
            "Content-Type": "application/json"
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert("Song added to the list!");
        } else {
            alert("Error adding song to the list.");
        }
    })
    .catch(error => {
        console.log(error);
    });
}

Hier ist dann noch die Index.html:

 <!DOCTYPE html>
<html>
<head>
    <title>DJ Song Request</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>DJ Song Request</h1>
    <form>
        <label for="song-name">Enter song name:</label>
        <input type="text" id="song-name" name="song-name">
        <button type="submit" onclick="searchSong()">Search</button>
    </form>
    <div id="song-results"></div>
</body>
</html>

Vielleicht kann mir ja jemand helfen, da ich echt nicht mehr weiter weiß, im vorraus schon mal Vielen Dank ;D

...zum Beitrag

Return ergibt undefined?

Moin

ich habe mit einem projekt gestartet und in diesem projekt hole ich mir von einer Github page die version nd vergleiche sie bzw. ich wollte das. Ich habe es mit Fetch() probiert. In node.js

fetch(adress).then(r => {
    return r.json()
})

und so

fetch(adress).then(r => {
    console.log(r.json());
}).then(data => {
    return data
})

Ich kriege aber wenn ich es console immer

undefined

zurück

...zum Beitrag

Kennt sich einer mit Programmieren aus?

Hey. Ich wollte mal Fragen ob man bei Anton.app (keine werbung) sich auch trophäen mit Scrips geben kann wie Coins oder Sterne (Sinnlose Punkte).Code für die Sterne (Punkte):

 score = 69420,
sourceId = localStorage.getItem('sourceId').split('"').join(''),
deviceLogId = localStorage.getItem('deviceLogId').split('"').join(''),
users = JSON.parse(localStorage.getItem('users'));
users.forEach(users__value => {
fetch('https://logger-lb-5.anton.app/events', {
method: 'POST',
'headers': { 'Content-Type': 'application/json' },
body: JSON.stringify({
"events":[{"event":"finishLevel","score":score,"src":sourceId,"created":(new Date()).toISOString()}],
"log":users__value.l,
"credentials":{"authToken":users__value.t,"deviceLogId":deviceLogId}
}),
}).then(v=>v).catch(v=>v).then(data => { window.location.reload(); });
});

Für Coins:

coins = 42,
sourceId = localStorage.getItem('sourceId').split('"').join(''),
deviceLogId = localStorage.getItem('deviceLogId').split('"').join(''),
users = JSON.parse(localStorage.getItem('users'));
users.forEach(users__value => {
  fetch('https://logger-lb-5.anton.app/events', {
    method: 'POST',
    'headers': { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      "events":[{"event":"adjustCoins","value":coins,"src":sourceId,"created":(new Date()).toISOString()}],
      "log":users__value.l,
      "credentials":{"authToken":users__value.t,"deviceLogId":deviceLogId}
    }),
  }).then(v=>v).catch(v=>v).then(data => { window.location.reload(); });
});

Kann man sich Trophäen geben oder ist es nicht möglich?
Da ich bis jetzt nur die Codes gefunden habe und dazu änderungen (mit Halbwissen) nicht geklappt hat.

...zum Beitrag

Python requests findet Seite nicht?

Hi ich nutze requests um eine Suchanfrage auf einer Seite zu starten.
Wenn ich den Link über den Brower öffne finde ich den gesuchen inhalt.

Wenn ich nun den gleichen link über python requests aufsuche finde ich keinen Inhalt.
Ich bin absolut verzweifelt.

Link:
https://saddle-world-online.de/wp-json/wp/v2/media?search=ex_18-13_schwarz

Ich nutze folgenden Code:

import requests

url =  'https://saddle-world-online.de/wp-json/wp/v2/media?search=ex_18-13_schwarz'
response = requests.get(url)
result = response.json()

Ergebnis: []

...zum Beitrag

React JS, was ist <React.StrictMode>?

Das ist ja standardmäßig in der index.js aber was bringt es genau ?
Wenn ich es nicht weglasse dann werden meine Funktionen innerhalb der Komponente doppelt aufgerufen die zwischen dem <React.StrictMode> sind.

Also kann ich es weglassen ?

App JS :

import {React,useEffect,useState} from 'react'
export default function App() {
useEffect(() => {
  // http://api.icndb.com/jokes/random
  const fetchJoke = async()=>(
    await fetch(`http://api.icndb.com/jokes/random`)
    .then(response => response.json())
    .then(data => console.log(data.value.joke))
  )
fetchJoke()
}, [])
  return (
    <div>App</div>
  )
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>    
 <App />
<React.StrictMode> 
);

Hab ja auch useEffect Hook benutzt damit es nur 1x beim laden ausgeführt werden soll.

...zum Beitrag

Javascript Ajax Php kein Wert?

Console:

HTML javascript Code ajax:

function send(text){
   console.log("Text kurz vor versenden:\n" +text);
//hier hat er noch einen wert
   $.ajax({
     method: "POST",
     url: "DataSender.php",
     data: { text: text}
   }).done(function( response ) {
       console.log(response);
     console.log("weiterleitung

Php Code Ajax Übertragung wo es nicht geht:

      $text = $_POST['text'];
      $sql = "INSERT INTO `Xss-Data` (`ID`,`DATA`, `created_at`) VALUES (null, '{$text}' , CURRENT_TIMESTAMP)";

      if (empty($text)) {
              //das ist empty!
              echo("Error:\nEs ist leer\nText wäre\n$text");
          } else

Sind die wichtigen Code snippets

Der String hat keinen Wert. Warum? Wie löst man das?

...zum Beitrag

Warum funktioniert dieser code nicht?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beta</title>
    <script>
        const bodyElement = document.querySelector("body");

        function setColorBlue() {
            bodyElement.background-color = "blue";
        };

        function setColorRed() {
            bodyElement.background-color = "red";
        };

        function setColorGreen() {
            bodyElement.background-color = "green";
        }
    </script>
</head>
<body>
    <div class="color-picker">
        <button onclick="setColorBlue()">Blue</button>
        <button onclick="setColorRed()">Red</button>
        <button onclick="setColorGreen()">Green</button>

    </div>
</body>
</html>

...zum Beitrag

Wie kriege ich den Response der API in mein TextViewField in Android Studio?

Hallo,

momentan sitze ich daran, eine Android App mit Android Studio zu entwickeln. Die App soll GET und POST benutzen können, um mit einer API arbeiten zu können.

Soweit funktioniert das auch alles. Meine Frage bezieht sich hier auf Folgendes:

Ich habe in der MainActivity den TextView TW_Rueckgabe. Hier soll der Response der POST-Funktion gespeichert werden, da ich den gerne in der App anzeigen lassen will.

Nun habe ich aber bereits ein paar Sachen ausprobiert, allerdings vergebens.

Nun zu meiner eigentlichen Frage:

Wie kriege ich hin, das der Response der POST-Klasse in dem TextView TW_Rueckgabe gespeichert wird?

Danke im Voraus.

MfG

MainActivity.java

final TextView[] TW_Rueckgabe = {
  findViewById(R.id.textViewRueckgabe)
};
Button sendBtn = findViewById(R.id.sendBtn);
sendBtn.setOnClickListener(v -> {
  String POST_url = "http://dphost.ddns.net:1573/cool/post.php";
  String requestData = "data=" + TW_Benutzername.getText().toString();
  POSTRequestTask test = (POSTRequestTask) new POSTRequestTask().execute(POST_url, requestData);
  TW_Rueckgabe[0].setText(test.fetching_data);
});

POSTRequestTask.Java

class POSTRequestTask extends AsyncTask<String, Void, String> {
  @Override
  protected String doInBackground(String... params) {
    String url = params[0];
    String requestData = params[1];
    String response = "";

    try {
      URL obj = new URL(url);
      HttpURLConnection con = (HttpURLConnection) obj.openConnection();

      // add request header
      con.setRequestMethod("POST");
      con.setDoOutput(true);

      // add request data
      DataOutputStream wr = new DataOutputStream(con.getOutputStream());
      wr.writeBytes(requestData);
      wr.flush();
      wr.close();

      int responseCode = con.getResponseCode();
      System.out.println("\nSending 'POST' request to URL : " + url);
      System.out.println("Response Code : " + responseCode);

      BufferedReader in = new BufferedReader(new InputStreamReader(con.getInputStream()));
      String inputLine;
      StringBuffer responseBuffer = new StringBuffer();

      while ((inputLine = in.readLine()) != null) {
        responseBuffer.append(inputLine);
      }

      in.close();
      response = responseBuffer.toString();
    }
    catch (IOException e) {
      e.printStackTrace();
    }

    return response;
  }

  @Override
  protected void onPostExecute(String result) {
    // print result
    System.out.println("\n\n\n" + result + "\n\n\n");
    fetching_data = result;
  }

  public String returnString() {
    return fetching_data;
  }
}

...zum Beitrag

Hilfe mit CSS Flexbox?

wie kann ich die 4 Bilder wie folgt anordnen?

ich code noch nicht so lange, doch hier der code den ich bis jetzt habe. Also bitte nicht auslachen ^^

CSS:

/* Dienstleistungen*/

.dienstleistungen{

justify-content: center;

width: 75%;

}

.mofa-zündung-service{

height: 50%;

width: auto;

}

.mofa-getriebe-revisionen{

height: 25%;

width: auto;

align-self: top;

}

.mofa-vergaser-tuning{

height: 25%;

width: auto;

align-self: top;

}

.mofa-kolben-ersatzteile{

height: 25%;

width: 50%;

}

/*!Dienstleistungen*/

HTML:

<h3>Dienstleistungen</h3>

<li><a href="#">Service</a></li>

<li><a href="#">Revisionen</a></li>

<li><a href="#">Tuning</a></li>

<li><a href="#">Ersatzteile</a></li>

</div>

so sieht es bis jetzt aus:

Ich verstehe vor allem nicht wie ich die Bilder untereinander und gleichzeitig neben einem anderen Bild anordnen kann. (kolben)

...zum Beitrag

CURL Code in Java umwandeln?

Ich versuche über die DEEP API ein Bild generieren zu lassen.

Der Curl code dazu ist:

curl \
    -F 'text=YOUR_TEXT_URL' \
    -H 'api-key:quickstart-QUdJIGlzIGNvbWluZy4uLi4K' \
    https://api.deepai.org/api/text2img

Mein Java Code ist:

URL url = new URL("https://api.deepai.org/api/text2img");
HttpURLConnection con = (HttpURLConnection)url.openConnection();
con.setRequestMethod("POST");
con.setRequestProperty("Content-Type", "application/json");

JSONObject data = new JSONObject();
data.put("text", "TEXT");
data.put("api-key", "quickstart-QUdJIGlzIGNvbWluZy4uLi4K");

con.setDoOutput(true);
con.getOutputStream().write(data.toString().getBytes());

try(BufferedReader br = new BufferedReader(
        new InputStreamReader(con.getInputStream(), "utf-8"))) {
    StringBuilder response = new StringBuilder();
    String responseLine = null;
    while ((responseLine = br.readLine()) != null) {
        response.append(responseLine.trim());
    }
    return response.toString();
}

Ich bekomme jedoch folgende Fehlermeldung:

Server returned HTTP response code: 401 for URL: https://api.deepai.org/api/text2img

Kann mir jemand weiterhelfen?

...zum Beitrag

Cross Origin Anfrage blockiert?

Ich möchte gerade eine REST-API für mein Heimnetzwerk einrichten um über z.B. einen button einen CMD befehl auf dem Server PC auszuführen.

Mein Pythonscript für die API:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/execute-command', methods=['POST'])
def execute_command():
  # Hier wird der Code zum Ausführen des Befehls eingefügt
  result = "Befehl wurde ausgeführt."
  return jsonify({"response": result})

if __name__ == '__main__':
  app.run(host='0.0.0.0', port=5000)

Mein HTML Script<!DOCTYPE html>
<html>
<head>
  <title>API Test</title>
</head>
<body>
  <button id="executeBtn">Befehl ausführen</button>
<script>
  document.getElementById('executeBtn').addEventListener('click', function() {
    fetch('http://localhost:5000/execute-command', { // Verwende absolute URL
      method: 'POST',
    })
    .then(response => response.json())
    .then(data => {
      console.log(data);
    })
    .catch(error => {
      console.error('Fehler:', error);
    });
  });
</script>
</body>
</html>

Ich bekomme als Fehler von Firefox in der Konsole:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:5000/execute-command. (Grund: CORS-Anfrage schlug fehl). Statuscode: (null).

Fehler: TypeError: NetworkError when attempting to fetch resource

Entschuldigung wenn es offensichtlich ist, bin da noch sehr frisch und habe keine Lösung gefunden.

...zum Beitrag

Daten senden mit fetch?

Hallo,

ich will mit der Fetch API Daten senden und abrufen. Aber wen ich dies tue, kommt ein Fehler:

POST http://127.0.0.1:5500/api net::ERR_ABORTED 405 (Method Not Allowed)

Ich weiß gar nicht, wie ich diesen Fehler beheben soll. Ich habe dazu auch nichts hilfreiches bis jetzt gefunden.

Mein Ziel ist es, Daten mit Javascript an einen Server (für den Anfang an localhost) zu senden und diese dann von einem weiteren localhost-Server abrufen.

Das ist meine Index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section id="control-center">
        <button id="get-btn">Get Data</button>
        <button id="post-btn" onclick="test()">Post Data</button>
        <script>
            function test(){
                const data = {"name": "somename"}
                const options = {
                    method: "POST",
                    headers: {'Content-Type': 'application/json'},
                    body: JSON.stringify(data)
                }
                fetch('/api', options)
            }
        </script>
    </section>
</body>
</html>

Und das ist meine app.js:

const express = require('express')
const app = express()
app.listen(3000, () => console.log('3000'))
app.use(express.static('public'))

app.post('/api', (req, res) => {
    console.log(req)
})

Wenn jemand eine bessere Methode hat, Daten an einen Server zu senden, dann würde ich diese auch mal gerne probieren.

...zum Beitrag

HTML, CSS, JavaScript Animation einfügen?

Ich habe folgenden Code, der bei Klick auf ein Menüpunkt einen bestimmten Code anzeigt.

Wie implementiere ich eine Fade-In und Fade-Out Animation.

Wenn z.B. gerade Content 1 angezeigt wird und man auf den Menüpunkt 2 klickt Content 2 angezeigt wird:

...dass Content 1 von Opacity 100 auf 0 geht
...dass Content 1 in Minus Y-Richtung 20px bewegt wird
...dass Content 2 von Opacity 0 auf 100 geht
...dass Content 2 von -20px in Plus Y-Richtung 20px bewegt wird

Alles in einer Zeit von 0,3 Sekunden.

Wie mache ich das am Besten?

Danke.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
  #wrapper_main {
    display: flex;
    width: 100%;
  }
  #wrapper_menue {
    width: 20%;
    margin-right: 10%;
  }
  #wrapper_content {
    width: 70%;
  }
  .menu-item, .submenu-item {
    cursor: pointer;
    padding: 10px;
    margin: 5px;
    background-color: #f0f0f0;
  }
  .menu-item:hover, .submenu-item:hover {
    background-color: #dddddd;
  }
  .content {
    display: none;
  }
  #submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
  }
  #wrapper_menue:hover #submenu {
    max-height: 200px;
  }
</style>
</head>
<body>
<div id="wrapper_main">
  <div id="wrapper_menue">
    <div class="menu-item" onclick="showContent('content_1')">Menüpunkt 1</div>
    <div class="menu-item" id="menu-item-2" onclick="showContent('content_2')">
      Menüpunkt 2
      <div id="submenu">
        <div class="submenu-item" onclick="showContent('content_2_1', event)">Submenüpunkt 1</div>
        <div class="submenu-item" onclick="showContent('content_2_2', event)">Submenüpunkt 2</div>
        <div class="submenu-item" onclick="showContent('content_2_3', event)">Submenüpunkt 3</div>
        <div class="submenu-item" onclick="showContent('content_2_4', event)">Submenüpunkt 4</div>
      </div>
    </div>
    <div class="menu-item" onclick="showContent('content_3')">Menüpunkt 3</div>
  </div>
  <div id="wrapper_content">
    <div id="content_1" class="content">
      <h2>Inhalt 1</h2>
    </div>
    <div id="content_2" class="content">
      <h2>Inhalt 2</h2>
    </div>
    <div id="content_2_1" class="content">
      <h2>Inhalt 2.1</h2>
    </div>
    <div id="content_2_2" class="content">
      <h2>Inhalt 2.2</h2>
    </div>
    <div id="content_2_3" class="content">
      <h2>Inhalt 2.3</h2>
    </div>
    <div id="content_2_4" class="content">
      <h2>Inhalt 2.4</h2>
    </div>
    <div id="content_3" class="content">
      <h2>Inhalt 3</h2>
    </div>
  </div>
</div>

<script>
function showContent(id, event) {
  if (event) {
    event.stopPropagation();
  }
  var contents = document.querySelectorAll('.content');
  contents.forEach(content => {
    content.style.display = 'none';
  });
  document.getElementById(id).style.display = 'block';
}
window.onload = function() {
  showContent('content_1');
};
</script>
</body>
</html>

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen