JAVASCRIPT DRINGEND HILFE BITTE!!!

[MrOsmo]

Hallo,
ich mache gerade die Hausaufgaben in IT, und ich habe leider ein Problem. Das ist das letzte Problem, bevor meine Aufgabe erledigt ist. Also bitte, ich flehe euch an, helft mir, so schnell wie möglich, denn ich muss sie bis morgen schicken, und gleich muss ich schon schlafen gehen.

Meine Codes:

const title = document.createElement("h1");
        title.textContent = "My favourite movies!";
        document.body.appendChild(title);

        const inputOne = document.createElement("input");
        document.body.appendChild(inputOne);
        inputOne.placeholder = "Enter a movie name!";

        const inputTwo = document.createElement("input");
        document.body.appendChild(inputTwo);
        inputTwo.placeholder = "Add a link!";

        const buttonsDiv = document.createElement("div");
        document.body.append(buttonsDiv);

        const addMovieButton = document.createElement("button");
        addMovieButton.textContent = "Add this movie!";
        buttonsDiv.appendChild(addMovieButton);

        const otherButtonsDiv = document.createElement("div");
        document.body.append(otherButtonsDiv);

        const deleteLastMovieButton = document.createElement("button");
        deleteLastMovieButton.textContent = "Remove last!";
        otherButtonsDiv.appendChild(deleteLastMovieButton);

        const deleteAllMoviesButton = document.createElement("button");
        deleteAllMoviesButton.textContent = "Remove all!";
        otherButtonsDiv.appendChild(deleteAllMoviesButton);

        const movieDivs = document.createElement("div");
        document.body.append(movieDivs);

        document.body.style.backgroundImage = "url(https://i.pinimg.com/564x/55/af/85/55af8508354f18b2ffbb325a36a3c2bb.jpg)";
        //TITLE_STYLE
        title.style.textAlign = "center"
        title.style.fontSize = "3rem"
        title.style.fontFamily = "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"
        title.style.color = "#fff"


        //INPUT_ONE_STYLE
        inputOne.style.width = "50%"
        inputOne.style.height = "35px"
        inputOne.style.marginLeft = "24%"
        inputOne.style.marginTop = "10%"
        inputOne.style.borderRadius = "7px"
        
        
        //INPUT_TWO_STYLE
        inputTwo.style.width = "50%"
        inputTwo.style.height = "35px"
        inputTwo.style.marginTop = "13px"
        inputTwo.style.marginLeft = "24%"
        inputTwo.style.borderRadius = "7px"
        
        
        //BUTTON_DIV_STYLE
        buttonsDiv.style.marginLeft = "355px"
        buttonsDiv.style.marginTop = "20px"
        
        
        //ADD_MOVIE_BUTTON_STYLE
        addMovieButton.style.width = "13%"
        addMovieButton.style.height = "30px"
        addMovieButton.style.background = "linear-gradient(45deg, rgba(201,37,107,1) 15%, rgba(116,16,124,1) 75%)";
        addMovieButton.style.color = "#fff"
        addMovieButton.style.fontWeight = "600"
        addMovieButton.style.borderRadius = "7px"
        addMovieButton.style.border = "#fff"
        addMovieButton.style.cursor = "pointer"
        
        
        //OTHER_BUTTONS_DIV_STYLE
        otherButtonsDiv.style.marginLeft = "355px"
        otherButtonsDiv.style.marginTop = "25px"


        //REMOVE_LAST_MOVIE_BUTTON
        deleteLastMovieButton.style.width = "11%"
        deleteLastMovieButton.style.height = "30px"
        deleteLastMovieButton.style.background = "linear-gradient(45deg, rgba(201,37,107,1) 15%, rgba(116,16,124,1) 75%)";
        deleteLastMovieButton.style.color = "#fff"
        deleteLastMovieButton.style.fontWeight = "600"
        deleteLastMovieButton.style.borderRadius = "7px"
        deleteLastMovieButton.style.border = "#fff"
        deleteLastMovieButton.style.cursor = "pointer"


        //REMOVE_ALL_MOVIES_BUTTON
        deleteAllMoviesButton.style.width = "11%"
        deleteAllMoviesButton.style.height = "30px"
        deleteAllMoviesButton.style.background = "linear-gradient(45deg, rgba(201,37,107,1) 15%, rgba(116,16,124,1) 75%)";
        deleteAllMoviesButton.style.color = "#fff"
        deleteAllMoviesButton.style.fontWeight = "600"
        deleteAllMoviesButton.style.borderRadius = "7px"
        deleteAllMoviesButton.style.border = "#fff"
        deleteAllMoviesButton.style.cursor = "pointer"
        deleteAllMoviesButton.style.marginLeft = "15px"

        addMovieButton.onclick = async () => {
            const pictureLinkAdd = inputTwo.value;
            const textAdd = inputOne.value;

            

            if (pictureLinkAdd && textAdd) {
                try {
                    const response = await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                        },
                        body: JSON.stringify({ pictureLink: pictureLinkAdd, text: textAdd }),
                    });

                    const data = await response.json();

                    const pictureAdd = document.createElement("img");
                    pictureAdd.src = data.pictureLink;
                    movieDivs.appendChild(pictureAdd);

                    pictureAdd.style.height = "350px"
                    pictureAdd.style.width = "250px"
                    pictureAdd.style.display = "flex"
                    pictureAdd.style.flexDirection = "column"
                    pictureAdd.style.marginTop = "315px"
                    pictureAdd.style.marginLeft = "355px"

                    const textAdding = document.createElement("h3");
                    textAdding.innerHTML = data.text;
                    movieDivs.appendChild(textAdding)

                    textAdding.style.marginLeft = "650px"
                    textAdding.style.marginTop = "-360px"
                    textAdding.style.fontSize = "50px"
                    textAdding.style.color = "#fff"
                    textAdding.style.fontFamily = "'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif"
                } catch (error) {
                    console.error('Error:', error);
                }

                inputTwo.value = ""
                inputOne.value = ""
            }
        };

        deleteAllMoviesButton.onclick = async () => {
          try {
              const response = await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies');
              const data = await response.json();
      
              if (data.length > 0) {
                  movieDivs.innerHTML = "";

                  const movieIds = data.map(movie => movie._id);
      
                  await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies', {
                      method: 'DELETE',
                      headers: {
                          'Content-Type': 'application/json',
                      },
                      body: JSON.stringify({ ids: movieIds }),
                  });
              }
          } catch (error) {
              console.error('Error:', error);
          }
      };
      

        deleteLastMovieButton.onclick = async () => {
            const lastMovie = movieDivs.lastChild;
            const another = movieDivs.lastChild

            if (lastMovie) {
                try {
                    const response = await fetch('https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies');
                    const data = await response.json();

                    if (data.length > 0) {
                        const lastItemId = data[data.length - 1]._id

                        await fetch(`https://crudcrud.com/api/c74c6269d5c245c3bbe96bec091fc01d/movies/${lastItemId}`, {
                            method: 'DELETE',
                        });

                        movieDivs.removeChild(lastMovie);

                        if(lastMovie) {
                            movieDivs.removeChild(another)
                        }
                        
                    }
                } catch (error) {
                    console.error('Error:', error);
                }
            }
        }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My favourite movies</title>
  <script defer src="./script.js"></script>
</head>
<body>
</body>
</html>

MEIN PROBLEM:
Mein Problem ist, dass wenn ich auf das Button "Delete Last" drücke, dann sollten zwei "items" in dem div "movieDivs" entfernt werden. Warum zwei? Weil ich mein Code von Anfang an unstrukturiert geschrieben habe, und deshalb gehören, das Bild und der Text zusammen. Aus diesem Grund, sollen auch der "Titel der Movie" und selbst das Movie (also img) zusammen gelöscht werden! ich habe schon alles ausprobiert, sodass ich jetzt gar keine Ideen mehr habe. Sogar diese KI - ChatGPT hat mir nicht geholfen! Ihr seid meine Einzige Hoffnungen!


Ich hoffe auf eure sehr schnelle und hilfreiche Antworten!
MfG
MrOsmo

 

[Marinek]

Hi,

also ich weiß nicht, wie du das meinst. Ehrlich gesagt.

Das Konzept müsste sein:

<div id="movie#ID>

die ID bekommst du aus dem Service


Darin sollte man ein img und p text erstellen.

Dein delete scheint schon das letzte Element zu löschen.

Aber dann entfernst du irgend ein Bild aus deinem DIV. Das kann nicht richtig sein, da die Reihenfolge ja theoretisch anders sein kann und, wenn du sagst, dass du zwei löschen willst ehh noch zwei HTML Elemnte erwischen musst.

Ich würde sagen, wenn die API das Löschen durchgeführt hat, müsste man den gesamten Pane aktualisieren. Dann muss man da nicht irgendwelche Hacks machen.

Allerdings habe ich das hinzufügen der vorhandenen movies aus der API bei dir im Code nicht finden können. Habe aber nur einmal durchgescrollt.