Javascript ToDoListe - komme nicht weiter?

MrOsmo · 3. Dez 2023

Hallo meine Freunde,
ich mache gerade aus Spaß eine ToDoListe um meine Fähigkeiten zu stärken. Jedoch komme ich nicht weiter... Und zwar das mit dem "Change Status" - Button. Wenn ich darauf klicke und mein Kärtchen "orange" ist, dann sollte es in "grün umwandeln", und es sollte eine img erscheinen (Also es sollte dann so aussehen, als würde ich "Completed" - Button drücken. Und wenn es schon grün ist dann sollte es in orange umwandeln.) Also es ist besser wenn ihr euch meinen ganzen Code anseht. Ich hoffe auf eure Hilfen! Ich sitze schon wirklich den ganzen Tag da drum und sterbe gleich. Dankeschön im Voraus!

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tasks</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <div class="bodyDiv">
  <header>
    <div class="title">
      <h1>My Tasks</h1>
    </div>
  </header>

  <main>
    <section>
      <div class="inputs">
        <input id="inputOne" type="text" placeholder="Enter your task!">
        <input id="inputTwo" type="date" placeholder="Enter your date!">
        <button id="buttonForInputs">Add task!</button>
      </div>
    </section>

    <section>
      <div class="tasks">
        <div class="date"></div>
        <div class="information"></div>
      </div>
    </section>
   
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button id="buttonTwo">Change status!</button>
    </div>
   </section>
  </main>
  </div>
</body>
</html>

CSS:

*{
  margin: 0;
  box-sizing: border-box;
}



/*BODY_AND_HTML*/

html {
background-image: linear-gradient(161deg, rgba(117, 117, 117, 0.03) 0%, rgba(117, 117, 117, 0.03) 50%,rgba(8, 8, 8, 0.03) 50%, rgba(8, 8, 8, 0.03) 100%),linear-gradient(59deg, rgba(245, 245, 245, 0.05) 0%, rgba(245, 245, 245, 0.05) 50%,rgba(68, 68, 68, 0.05) 50%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(286deg, rgba(107, 107, 107, 0.07) 0%, rgba(107, 107, 107, 0.07) 50%,rgba(7, 7, 7, 0.07) 50%, rgba(7, 7, 7, 0.07) 100%),linear-gradient(123deg, rgba(9, 9, 9, 0.09) 0%, rgba(9, 9, 9, 0.09) 50%,rgba(120, 120, 120, 0.09) 50%, rgba(120, 120, 120, 0.09) 100%),linear-gradient(170deg, rgba(202, 202, 202, 0.01) 0%, rgba(202, 202, 202, 0.01) 50%,rgba(19, 19, 19, 0.01) 50%, rgba(19, 19, 19, 0.01) 100%),linear-gradient(210deg, rgba(64, 64, 64, 0.04) 0%, rgba(64, 64, 64, 0.04) 50%,rgba(4, 4, 4, 0.04) 50%, rgba(4, 4, 4, 0.04) 100%),linear-gradient(90deg, rgb(249, 17, 190),rgb(100, 28, 213));
background-repeat: no-repeat;
background-size: cover;
height: 1000px;
}



/*HEADER*/

header .title {
  display: flex;
  justify-content: center;
}

header h1 {
  font-size: 4rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #fff;
}

/*MAIN*/


.tasks {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 50px;
}

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 3px;
  display: none;
}
.tasks .date p {
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-top: 9px;
}

.tasks .information {
  background-color: rgb(219, 182, 112);
  width: 20%;
  padding-top: 220px;
  border-radius: 2px;
  text-align: start;
  display: none;
}

.tasks .information p {
  margin-top: -210px;
  margin-left: 30px;
  color: #fff;
  font-weight: 100;
  font-size: 15px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 
}



.inputs {
 display: flex;
 justify-content: center;
 flex-direction: column;
 align-items: center;
}

.inputs input {
  width: 30%;
  height: 30px;
  border-radius: 7px;
}

.inputs #inputOne {
  margin-top: 150px;
}

.inputs #inputTwo {
  margin-top: 10px;
}

.inputs button {
  margin-top: 15px;
  width: 8%;
  height: 30px;
  margin-right: 320px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

.buttons {
  display: flex;
  justify-content: center;
  margin-right: 150px;
  margin-top: 30px;
  gap: 10px;
}

.buttons button {
  width: 11%;
  height: 30px;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  background-image: linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80));
  text-transform: uppercase;
  cursor: pointer;
  border: none;
}

Javascript:

document.addEventListener("DOMContentLoaded", function() {
  const tasksInformation = document.querySelector(".tasks .information");
  const tasksDate = document.querySelector(".tasks .date");
  const addTasksButton = document.getElementById("buttonForInputs");
  const tasks = document.getElementsByClassName("tasks");
  const inputOne = document.getElementById("inputOne");
  const inputTwo = document.getElementById("inputTwo");
  const deleteAllButton = document.getElementById("buttonOne");
  const changeStatusButton = document.getElementById("buttonTwo");
  const buttonTwo = document.createElement("button")
  let completedClicked = false;

  // ADD_TASK_BUTTON
  // FOR_INFORMATION_INPUT
  const addTaskButtonFunction = () => {
    const taskInfo = inputOne.value;
    const taskInfoAdd = document.createElement("p");
    taskInfoAdd.textContent = taskInfo;

    tasksInformation.appendChild(taskInfoAdd);
    inputOne.value = "";

    // COMPLETED_BUTTON
    const buttonOne = document.createElement("button");
    buttonOne.textContent = "COMPLETED";
    tasksInformation.appendChild(buttonOne);

    buttonOne.addEventListener("click", () => {
      completedClicked = true;
      tasksInformation.style.backgroundColor = "rgb(113, 194, 113)";
      tasksDate.style.backgroundColor = "green";
      const image = document.createElement("img");
      image.src = "https://static-00.iconduck.com/assets.00/process-completed-icon-499x512-mhraisqh.png";
      tasksInformation.append(image);
      buttonOne.remove();

      image.style.width = "100px";
      image.style.height = "100px";
      image.style.marginLeft = "180px";
      image.style.marginTop = "105px";

      tasksInformation.appendChild(buttonTwo)
      buttonTwo.style.marginLeft = "20px"
      buttonTwo.style.position = "relative"
      buttonTwo.style.top = "-40px"

      const changeStatusFunction = () => {
        if (completedClicked) {
          tasksInformation.style.backgroundColor = "rgb(219, 182, 112)";
          tasksDate.style.backgroundColor = "orange";
          completedClicked = false;
         
        } else {
          tasksInformation.style.backgroundColor = "rgb(113, 194, 113)";
          tasksDate.style.backgroundColor = "green";
          const u = document.createElement("h1")
          u.textContent = "JS IS SHIT"
          tasksInformation.append(u)
          completedClicked = true;
      }
       
      };
   
      buttonTwo.addEventListener("click", changeStatusFunction);
    });

    tasksInformation.style.display = "block";

    buttonOne.style.color = "#fff";
    buttonOne.style.fontWeight = "600";
    buttonOne.style.marginTop = "170px";
    buttonOne.style.marginLeft = "20px";
    buttonOne.style.borderRadius = "10px";
    buttonOne.style.background = "rgb(93,186,19)";
    buttonOne.style.background = "linear-gradient(353deg, rgba(93,186,19,1) 39%, rgba(211,237,190,1) 74%)";
    buttonOne.style.border = "none";
    buttonOne.style.cursor = "pointer";

    // DELETE_TASK_BUTTON
    buttonTwo.textContent = "DELETE TASK"
    tasksInformation.append(buttonTwo)

    buttonTwo.style.borderRadius = "10px"
    buttonTwo.style.color = "#fff"
    buttonTwo.style.fontWeight = "600"
    buttonTwo.style.backgroundImage = "linear-gradient(353deg, rgb(242, 82, 69),rgb(131, 28, 80))"
    buttonTwo.style.cursor = "pointer"
    buttonTwo.style.border = "none"
  };

  // FOR_DATE_INPUT
  const anotherAddTasksButtonFunction = () => {
    const dateInfo = inputTwo.value;
    const dateInfoAdd = document.createElement("p");
    dateInfoAdd.textContent = `Date: ${dateInfo}`;

    tasksDate.appendChild(dateInfoAdd);
    inputTwo.value = "";
   
    tasksDate.style.display = "block";
  };
 
  // REMOVE_ALL_BUTTON
  const removeAllButtonFunction = () => {
    while (tasks[0].firstChild) {
      tasks[0].removeChild(tasks[0].firstChild);
    }
  };

  // CHANGE_STATUS_BUTTON
  const changeStatusFunction = () => {
    if (completedClicked) {
      tasksInformation.style.backgroundColor = "rgb(219, 182, 112)";
      tasksDate.style.backgroundColor = "orange";
      completedClicked = false;
    } else {
      tasksInformation.style.backgroundColor = "rgb(113, 194, 113)";
      tasksDate.style.backgroundColor = "green";
      completedClicked = true;

    }
  };

  // EVENT_LISTENERS
  changeStatusButton.addEventListener("click", changeStatusFunction);
  addTasksButton.addEventListener("click", () => {
    addTaskButtonFunction();
    anotherAddTasksButtonFunction();
  });
  deleteAllButton.addEventListener("click", removeAllButtonFunction);
});

Marinek · 3. Dez 2023

Also unabhängig davon, ist Java Script kein Java. Die beiden Sprachen haben bis auf den Namen nur einen extrem kleinen Teil gleich.

Kannst du noch beschreiben, was aktuell funktioniert was nicht funktioniert und welchen Fehler du bekommst

MrOsmo · 3. Dez 2023

Apple’s Jünger hat gesagt.:
Also unabhängig davon, ist Java Script kein Java. Die beiden Sprachen haben bis auf den Namen nur einen extrem kleinen Teil gleich.

Kannst du noch beschreiben, was aktuell funktioniert was nicht funktioniert und welchen Fehler du bekommst

Hallo!
Erstmal dankeschön, dass wenigstens jemand bereit ist, mir zu helfen!)))

Nun zu meinen Problemen:
1) Wenn ich auf das Button "Change Status" drücke, dann kommt bei mir ein grüner Hintergrund raus. (Das ist schon mal gut)

2) Aber nun möchte ich das Button "Completed" entfernen (wenn ich auf Change Status drücke), sodass "Delete Task" alleine steht
3) Außerdem möchte ich so einen Haken (image) einfügen (wie auf dem Bild)

4) So, und wenn mein Hintergrund schon grün ist (nachdem ich auf Button "Completed" drücke dann sollte wieder ein orangener Hintergrund erscheinen, anstatt grünen (Deswegen heisst es ja auch: Change Status)

Ich weiss ich habe glaub ich zu kompliziert geschrieben, aber ich hoffe, ich hoffe, dass du verstehen wirst, was ich meine

MrOsmo · 3. Dez 2023

Apple’s Jünger hat gesagt.:
Also unabhängig davon, ist Java Script kein Java. Die beiden Sprachen haben bis auf den Namen nur einen extrem kleinen Teil gleich.

Kannst du noch beschreiben, was aktuell funktioniert was nicht funktioniert und welchen Fehler du bekommst

Und ich habe noch zwei letzte Probleme, es tut mir Leid, dass ich es jetzt getrennt aufschreibe...

und zwar:
1) Es ist ja eine ToDoList und das heißt, dass ich unendliche Aufgaben erstellen kann. Aber das Problem ist, dass wenn ich nach dem ersten Kärtchen ein zweites Kärtchen erstelle, dann kommt da sowas raus (siehe Bild). Es sollten eigentlich immer zwei Kärtchen neben stehen und dann nach unten gehen (paarweise):

2) Und mein letztes (jetzt wirklich Letztes): Delete Task funtioniert gar nicht(Jedes erstellte Kärtchen sollte so ein Button haben, und wenn man da drauf klickt, dann sollte es dieses Kärtchen löschen)((( Ja, ich weiss, dass dies das Einfachste Part ist, aber ich habe schon wirklich alle Möglichkeiten ausprobiert, die in meinem Kopf waren. Google hat auch nichts gebracht.. Bitte hilf mir..

Marinek · 3. Dez 2023

MrOsmo hat gesagt.:
1) Wenn ich auf das Button "Change Status" drücke, dann kommt bei mir ein grüner Hintergrund raus. (Das ist schon mal gut)

2) Aber nun möchte ich das Button "Completed" entfernen (wenn ich auf Change Status drücke), sodass "Delete Task" alleine steht

So wie du es oben bereits mehrfach gemacht hast, musst du zunächst das Element selektieren:

Code:

var meinElement = document.getElementById("deinElementId");

Dann kann man es mit

Java:

meinElement.style.display = "none";

unsichtbar machen

MrOsmo hat gesagt.:
2) Aber nun möchte ich das Button "Completed" entfernen (wenn ich auf Change Status drücke), sodass "Delete Task" alleine steht

Ist im Wesentlichen das gleiche wie in 1) aber du kannst das Element display auf den benötigten Wert setzen. Du kannst das Element ja vorher schon in HTML vorsehen und per Default ist es unsichtbar.

MrOsmo hat gesagt.:
1) Es ist ja eine ToDoList und das heißt, dass ich unendliche Aufgaben erstellen kann. Aber das Problem ist, dass wenn ich nach dem ersten Kärtchen ein zweites Kärtchen erstelle, dann kommt da sowas raus (siehe Bild). Es sollten eigentlich immer zwei Kärtchen neben stehen und dann nach unten gehen (paarweise):

Das ist deutlich komplizierter.

Hier muss man sich also Gedanken über eine Datenstruktur machen:

Woraus besteht eine Karte?

Diese Datenstruktur kann man dann in HTML erstellen durch DOM Manipulation.

Dazu wiederrum muss man ein Gerüst haben für die Karte. Und man muss sich Gedanken machen, wie man das über IDs eindeutig referenzieren kann.

M.L. · 4. Dez 2023

Für JavaScript-Programmierung könnte dieses Cheat-Sheet auch sinnvoll sein: https://basta.net/cs-javascript-2023/

Javascript ToDoListe - komme nicht weiter?

MrOsmo

Mitglied

Anhänge

Marinek

Bekanntes Mitglied

MrOsmo

Mitglied

MrOsmo

Mitglied

Marinek

Bekanntes Mitglied

M.L.

Top Contributor

Aktuelle Jobs

Neue Themen