Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

guteantwort626  03.12.2023, 00:16

Was ist der "erste Hintergrund" und was der "zweite"? Kann ich leider nicht wirklich nachvollziehen...

MrOsmo 
Fragesteller
 03.12.2023, 09:05

Diese Orangene Divs. Siehst du da wo Date steht? Und da wo „dede“ steht. Diese beiden sollten mit Plätze getauscht werden
guteantwort626  03.12.2023, 10:03

Also dass Date oben steht oder wie? Dann änder doch einfach im HTML die Reihenfolge
MrOsmo 
Fragesteller
 03.12.2023, 10:08

Warte ich versuche mal

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, Webseite, CSS
03.12.2023, 11:57
Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern.

Ändere die Farbwerte in den Selektoren:

.tasks .date {
  background-color: rgb(219, 182, 112);
  /* ... */
}

.tasks .date .information {
  background-color: orange;
  /* ... */
}       
Diese Orangene Divs. Siehst du da wo Date steht? Und da wo „dede“ steht. Diese beiden sollten mit Plätze getauscht werden

Via JavaScript sollte der neue Knoten nicht als letztes, sondern als erstes Element angehängt werden. Statt appendChild kannst du dafür insertBefore nutzen.

tasksDate.insertBefore(dateInfoAdd, tasksInformation);

Hierbei entspricht tasksDate dem Elternelement und tasksInformation ist das Element, dem das neue Element vorgehängt werden soll.

In der CSS-Regel für .tasks .date müsste zudem noch der Innenabstand (padding-bottom) herausgenommen werden.

PS.: Auf Eingabefeldern für Datumseingaben (type=date) ist das placeholder-Attribut nicht zulässig. Das das nicht klappt, siehst du auch schon in der Ausgabe des Browsers.

Wenn du das Eingabefeld zusätzlich beschriften möchtest, nutze ein Label.

<label for="inputTwo">Your date:</label>
<input id="inputTwo" type="date">
MrOsmo
02.12.2023, 22:11

JAVASCRIPT:

document.addEventListener("DOMContentLoaded", function() {
  const tasksInformation = document.querySelector(".tasks .date .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 addTaskButtonFunction = () => {
      
      const taskInfo = inputOne.value
  
      const taskInfoAdd = document.createElement("p")
      taskInfoAdd.textContent = taskInfo
  
      tasksInformation.appendChild(taskInfoAdd)
  
      inputOne.value = "";
  
      
     tasksInformation.style.display = "block"
     
    }


  const anotherAddTasksButtonFunction = () => {
    const dateInfo = inputTwo.value
    const dateInfoAdd = document.createElement("p")
    dateInfoAdd.textContent = dateInfo


    tasksDate.appendChild(dateInfoAdd)
    inputTwo.value = ""
    
    tasksDate.style.display = "block"
    
    
  }


  
  
  const removeAllButtonFunction = () => {
    while (tasks[0].firstChild) {
      tasks[0].removeChild(tasks[0].firstChild);
    }
  }


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


})