Webseite – die neusten Beiträge

Verwandte Themen
MrOsmo
14.12.2023, 19:47
Mit Links

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

Software, App, HTML, IT, Webseite, programmieren, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
1 Antwort
Snwman
14.12.2023, 18:55

Unternehmen versucht mich zu bestechen, damit ich die schlechte Bewertung lösche? (Rückerstattung nach Onlinekauf nicht vollständig)?

Hi, ich habe in einem fragwürdig aussehenden online Shop bestellt, was dumm war. Viel mir dann auch unmittelbar auf. Ich habe sofort versucht, die Bestellung zu stornieren, aber man versicherte mir per Mail, dass der Rückversand kostenlos und aus Deutschland problemlos möglich sei.

Dachte ich habe es dann ja schwarz auf weiß, im Notfall.

Dann ging es los. Artikel passte nicht, Rücksendeadresse konnte ich nicht finden. Ewiges Mailschreiben, wochenlang, immer wieder darauf beharren, dass man mir kostenlosen Rückversand versichert hätte. Hat ewig gedauert, ne Rücksendung möglich zu machen, die wurde erst verweigert, nur Umtausch sei möglich. Bestimmt hatte ich da schon 20 Mails geschrieben.

Ich wollte ein frankiertes Etikett zum Versand, aber man hat mir dann einfach 7 Euro per PayPal überwiesen. Die hat man dann am Ende aber doch wieder von meinem erstatteten Betrag abgezogen. Es sind zwar nur sieben Euro, und die meisten verzichten dann darauf, aber mir geht es ums Prinzip. Außerdem hatte ich eh schon viel Zeit investiert.

Auf PayPal sieht es so aus, als wäre der volle Betrag erstattet worden. Deshalb kann man da nichts machen.

Also habe ich wieder mehrere Mails geschrieben, mit PayPal und schlechten Bewertungen im Netz gedroht. Man hat behauptet, man hätte mir ja alles überwiesen und nach mehreren Erklärungen, warum nicht, keine Reaktion.

Hab auf trustpilot meine Erfahrung geschildert. Und auf deren Website.

Und sofort kam ne Mail, wenn ich meine negative Bewertung löschen würde, dann würde man mir 10 Euro überweisen. Die Bewertung auf Ihrer Website haben sie natürlich selbst gelöscht.

Hab geschrieben, was diese Dreistigkeit soll, sie schulden mir sieben Euro, da können sie nichts von mir verlangen und mich mit drei Euro mehr bestechen. Ich mache außerdem gar nichts, bevor mein Geld nicht da ist, und erst recht nicht die Bewertung weg. Will ja nicht, dass andere auch darauf hereinfallen. Wenn Sie mein Geld nicht überweisen würden, würde ich die Geschichte mit in die Bewertung aufnehmen.

Dann wieder der Shop: ich müsse ja verstehen, dass das nicht geht....

Fast die selbe Geschichte hat eine andere Bewerterin auch erzählt, Rückversand sei nur möglich, nachdem die Bewertung entfernt worden sei.

Also habe ich wieder meine Bewertung bearbeitet und den Rest dazu erzählt.

Dann kamen mehrere Mails, hier ist eine

Hallo,

 

Ich habe zugestimmt, Ihnen 10 Euro Versandkosten zu erstatten. Werden Sie die Bewertung entfernen, aber Sie bearbeiten die schlechte Bewertung immer wieder und schaden unserem unfairen Geschäft?

 

Ich bitte Sie noch einmal, die schlechte Bewertung zu entfernen. Ich bin auch ein kleiner Arbeitgeber. Das ist passiert, weil der letzte Arbeitgeber den Job aufgegeben hat, eine neue Person eingestellt wurde und er nicht weiß, wie das System funktioniert.

 

Als der neue Mitarbeiter sah, dass wir Ihnen bereits 100 % zurückerstatteten, war er verwirrt und ergriff keine Maßnahmen.

 

Ich bin der Geschäftsführer von (.....), ich entschuldige mich bei Ihnen und schäme mich für die Unannehmlichkeiten.

 

Ich hoffe, Sie können mir eine Chance geben und die Bewertung für 10 Euro entfernen.

Mir sind die 7 Euro mittlerweile wirklich völlig egal, es geht mir nur darum, das sowas nicht mehr anderen passiert. Die meisten werden ja nicht die Lust haben, stundenlang Schuhe zurück zu senden. Was kann man denn da machen? Das ist doch rechtlich alles nicht okay? Wie ist das alles rechtlich gesehen, kennt sich da jemand aus?

Versand, Betrug, Webseite, Sex, Recht, Bestechung, Bestellung, käuferrecht, Käuferschutz, PayPal, Rücksendung, Shopify
1 Antwort
Noway28YT
07.12.2023, 13:38

HTML Taschenrechner?

Hey ich habe einen HTML Taschenrechner von einer Website kopiert von einer Website und ich will jetzt den Taschenrechner so programmieren das er nicht über hundert rechen kann bzw. Eine Fehler Meldung dann kommt so das immer ein Fehler kommt wenn ich über hundert rechnen tun ich hab schon im Internet mich belesen aber finde nix leider vielleicht könnt ihr mir helfen

<html>
<head>
<title>HTML-Taschenrechner </title>
</head>
<body bgcolor= "# 000000" text= "gold">
<form name="calculator" >
<input type="button" value="1" onClick="document.calculator.ans.value+='1'">
<input type="button" value="2" onClick="document.calculator.ans.value+='2'">
<input type="button" value="3" onClick="document.calculator.ans.value+='3'">
<input type="button" value="+" onClick="document.calculator.ans.value+='+'">
<input type="button" value="4" onClick="document.calculator.ans.value+='4'">
<input type="button" value="5" onClick="document.calculator.ans.value+='5'">
<input type="button" value="6" onClick="document.calculator.ans.value+='6'">
<input type="button" value="-" onClick="document.calculator.ans.value+='-'">
<input type="button" value="7" onClick="document.calculator.ans.value+='7'">
<input type="button" value="8" onClick="document.calculator.ans.value+='8'">
<input type="button" value="9" onClick="document.calculator.ans.value+='9'">
<input type="button" value="*" onClick="document.calculator.ans.value+='*'">
<input type="button" value="/" onClick="document.calculator.ans.value+='/'">
<input type="button" value="0" onClick="document.calculator.ans.value+='0'">
<input type="reset" value="Reset">
<input type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)">
Solution is
<input type="textfield" name="ans" value="">
</form>
</body>
</html>

LG

HTML, Webseite, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung
3 Antworten
SomeDude2304732
06.12.2023, 19:13
Mit Links

http zu https redirect-Fehler auf Wordpress-Seite?

Ich habe eine Wordpress-Website, nennen wir sie example.com, die von IONOS gehostet wird. Es handelt sich um eine HTTPS-Website mit einem funktionierenden SSL-Zertifikat, sodass alle HTTP-Anfragen auf die angeforderte Seite umgeleitet werden sollten, aber dabei das HTTP durch HTTPS ersetzt wird.

Beispiel: http://example.com sollte auf https://example.com umgeleitet werden (das funktioniert). http://example.com/subpage sollte auf https://example.com/subpage umgeleitet werden (das funktioniert jedoch nicht!). Stattdessen passiert Folgendes: http://example.com/subpage leitet auf https://example.com/ um.

Das Hauptproblem dabei ist, dass die Google Search Console fälschlicherweise einen Umleitungsfehler für jede Unterseite erkennt, die sie zu indexieren versucht, obwohl die Indexanfrage speziell für die HTTPS-Seite (https://example.com/subpage) gesendet wurde.

Ich verwende die neueste Version von Wordpress. Die derzeit installierten Plugins sind:

  • Advanced Import
  • Duplicate Page
  • Elementor Pro
  • IONOS Assistant (deaktiviert)
  • IONOS Help (deaktiviert)
  • IONOS Journey (deaktiviert)
  • IONOS Login
  • IONOS Loop (deaktiviert)
  • IONOS Navigation
  • IONOS Performance
  • IONOS Security
  • Music Player for Elementor
  • Title Remover
  • WPvivid Backup Plugin
  • Yoast SEO Premium

Diese Teile meiner .htaccess-Datei könnten für das Problem verantwortlich sein:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(/(.*))?$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
    # ENGINE ON
    RewriteEngine on

    # set hostname directory
    RewriteCond %{HTTPS} on
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:https-%{HTTP_HOST}]

    RewriteCond %{HTTPS} off
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:%{HTTP_HOST}]

    # set subdirectory
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_METHOD} GET
    RewriteCond %{REQUEST_URI} !(.*)/$
    RewriteCond %{REQUEST_FILENAME} !.(gif|jpg|png|jpeg|css|xml|txt|js|php|scss|webp|mp3|avi|wav|mp4|mov)$ [NC]
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}/]

    RewriteCond %{REQUEST_URI} /$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}]

    RewriteCond %{REQUEST_URI} ^$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:/]

    # gzip
    RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:]
    <IfModule mod_mime.c>
        RewriteCond %{HTTP:Accept-Encoding} gzip
        RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:.gz]
        AddType text/html .gz
        AddEncoding gzip .gz
    </IfModule>

    # Main Rules
    RewriteCond %{HTTP_ACCEPT} .*text/html.*
    RewriteCond %{ENV:INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{ENV:REDIRECT_INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{QUERY_STRING} ^$
    RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-content/cache)/.*
    RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
    RewriteCond /homepages/9/d4297862886/htdocs/./wordpress/wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} -f
    RewriteRule ^(.*) /wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} [L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Meine Permalink-Einstellung in Wordpress ist wie folgt:

https://example.com/%category/%postname%/
Homepage, HTML, Webseite, WordPress, Webentwicklung, Webserver, htaccess, ionos
2 Antworten
GeldGeil457
05.12.2023, 15:38
Beitrag wurde 1 Mal erneut eingestellt
Mit Links

Wie klicke ich auf diese Elemente mit Python und Selenium?

Hallo,

Ich versuche, auf die folgenden Elemente auf dieser Webseite (https://www.bing.com/search?q=Bing+AI&showconv=1&FORM=hpcodx) mit Python und Selenium zu klicken.

//*[@id=“tone-options”]/li[3]/button

//*[@id=“camera-container”]/button

//*[@id=“camera-container”]/cib-flyout/cib-visual-search//div[3]/button[1]

Ich habe XPATH, CSS probiert.

Fehler:

selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//*[@id="tone-options"]/li[3]/button"}

 (Session info: chrome=119.0.6045.200)

Stacktrace:

GetHandleVerifier [0x00007FF7D97B82B2+55298]

(No symbol) [0x00007FF7D9725E02]

(No symbol) [0x00007FF7D95E05AB]

(No symbol) [0x00007FF7D962175C]

(No symbol) [0x00007FF7D96218DC]

(No symbol) [0x00007FF7D965CBC7]

(No symbol) [0x00007FF7D96420EF]

(No symbol) [0x00007FF7D965AAA4]

(No symbol) [0x00007FF7D9641E83]

(No symbol) [0x00007FF7D961670A]

(No symbol) [0x00007FF7D9617964]

GetHandleVerifier [0x00007FF7D9B30AAB+3694587]

GetHandleVerifier [0x00007FF7D9B8728E+4048862]

GetHandleVerifier [0x00007FF7D9B7F173+4015811]

GetHandleVerifier [0x00007FF7D98547D6+695590]

(No symbol) [0x00007FF7D9730CE8]

(No symbol) [0x00007FF7D972CF34]

(No symbol) [0x00007FF7D972D062]

(No symbol) [0x00007FF7D971D3A3]

BaseThreadInitThunk [0x00007FF8125E7344+20]

RtlUserThreadStart [0x00007FF8130026B1+33]

kann mir jemand helfen? Danke.

HTML, Webseite, CSS, HTML5, Code, PHP, Programmiersprache, Python, Webdesign, Webentwicklung, Frontend, Python 3, Selenium
1 Antwort
MrOsmo
03.12.2023, 22:31

javascript hilfe dringendd?

Hallo zusammen!

Ich habe angefangen eine ToDoListe zu machen und bin schon fast fertig. Allerdings muss ich noch zwei Buttons fertigen und ich weiss nicht wie. Das erste Button ist "Delete All", dieser sollte alle Aufgaben (Aufgaben der ToDoListe) löschen. Das zweite ist "Change Status", dieser sollte, sofort alle Aufgaben wegstreichen oder zeigen dass diese Aufgaben gemacht worden sind. Ich hoffe auf eure Hilfen!

Bin schon richtig müde, und muss die Aufgaben schon bis morgen abschicken..

Dankeschön im Voraus!

LG

const todoInput = document.querySelector(".todo-input");
const todoInputTwo = document.querySelector(".todo-input-two")
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
const filterOption = document.querySelector(".filter-todo");
const deleteAllTodos = document.querySelector(".deleteAll button")


document.addEventListener("DOMContentLoaded", getLocalTodos);
todoButton.addEventListener("click", addTodo);
todoList.addEventListener("click", deleteCheck);
filterOption.addEventListener("change", filterTodo);


function addTodo(event) {
    event.preventDefault();
    const todoDiv = document.createElement("div");
    todoDiv.classList.add("todo");
    const newTodo = document.createElement("li");
    newTodo.innerText = `${todoInput.value}, Date: ${todoInputTwo.value}`; 
    newTodo.classList.add("todo-item");
    todoDiv.appendChild(newTodo);
+
    saveLocalTodos(todoInput.value);
    
    const completedButton = document.createElement("button");
    completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
    completedButton.classList.add("complete-btn");
    todoDiv.appendChild(completedButton);


    const trashButton = document.createElement("button");
    trashButton.innerHTML = '<i class="fas fa-trash"></li>';
    trashButton.classList.add("trash-btn");
    todoDiv.appendChild(trashButton);
    
    todoList.appendChild(todoDiv);
    todoInput.value = "";
}


function deleteCheck(e) {
    const item = e.target;


    if(item.classList[0] === "trash-btn") {
        const todo = item.parentElement;
        todo.classList.add("slide");


        removeLocalTodos(todo);
        todo.addEventListener("transitionend", function() {
            todo.remove();
        });
    }


    if(item.classList[0] === "complete-btn") {
        const todo = item.parentElement;
        todo.classList.toggle("completed");
    }
}


function filterTodo(e) {
    const todos = todoList.childNodes;
    todos.forEach(function(todo) {
        switch(e.target.value) {
            case "all": 
                todo.style.display = "flex";
                break;
            case "completed": 
                if(todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
            case "incomplete":
                if(!todo.classList.contains("completed")) {
                    todo.style.display = "flex";
                } else {
                    todo.style.display = "none";
                }
                break;
        }
    });
}


function saveLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.push(todo);
    localStorage.setItem("todos", JSON.stringify(todos));
}


function getLocalTodos() {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }
    todos.forEach(function(todo) {
        const todoDiv = document.createElement("div");
        todoDiv.classList.add("todo");
        const newTodo = document.createElement("li");
        newTodo.innerText = todo;
        newTodo.classList.add("todo-item");
        todoDiv.appendChild(newTodo);


        const completedButton = document.createElement("button");
        completedButton.innerHTML = '<i class="fas fa-check-circle"></li>';
        completedButton.classList.add("complete-btn");
        todoDiv.appendChild(completedButton);


        const trashButton = document.createElement("button");
        trashButton.innerHTML = '<i class="fas fa-trash"></li>';
        trashButton.classList.add("trash-btn");
        todoDiv.appendChild(trashButton);


        todoList.appendChild(todoDiv);
    });
}


function removeLocalTodos(todo) {
    let todos;
    if(localStorage.getItem("todos") === null) {
        todos = [];
    } else {
        todos = JSON.parse(localStorage.getItem("todos"));
    }



  deleteAllTodos.addEventListener("click", removeAllTodos);



    const todoIndex = todo.children[0].innerText;
    todos.splice(todos.indexOf(todoIndex), 1);
    localStorage.setItem("todos", JSON.stringify(todos));
}
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webentwicklung, Frontend
1 Antwort
Codeline
03.12.2023, 14:09
Beitrag wurde 1 Mal erneut eingestellt

Drehen von Dokumentationen - Ratschläge?

Guten Mittag meine Liebe GuteFrage Community,

Ich betreibe seit geraumer Zeit einen YouTube Kanal mit welchem ich versuche, dass Angebot an digitalen Bildungsmedien umfassend in allen Bereichen zu erweitern.

Nun denke ich zur Zeit darüber nach, zusätzlich zu kleineren Erklärungen zu spezifischen Themen auch Dokumentationen in „größerem“ Umfang zu veröffentlichen. In Anbetracht dessen, dass ich eine angenehm anzusehende Qualität erreichen möchte, habe ich im folgenden ein Paar Fragen an euch.

Vorab: Ich benutze für den Videoschnitt die Software „Shotcut“ und zur Aufnahme der Audiospur Audacity.

  • Kennt ihr gute Möglichkeiten an Bildmaterial zu kommen, welches frei verwendet werden kann? Das was sich selbst erstellen lässt, plane ich bestmöglich selber zu tun, allerdings besitze ich weder eine Drohne für Luftaufnahmen noch habe ich Zugang zu allen Dingen dieser Welt, um diese „aufzunehmen“.
  • Kennt ihr Software, mit denen sich Diagramme oder ähnliche Darstellungen animiert „aufbauen“ lassen?
  • Kennt ihr im Allgemeinen gute Webseiten oder Tools (die passende Nutzungsrechte bieten), um einzelne Animationen zu erstellen, die ich mit meinen bisherigen Möglichkeiten nicht erstellen konnte?
  • Habt ihr gute Ansätze, Kontakt zu Leuten aufzubauen (Experten auf Fachgebieten?), die bereit sein könnten, in einer Dokumentation ihre Meinung zu einem Thema oder ihre Expertise zu eben jenem zu vertreten?
  • Bisher habe ich für verschiedene Video“Clips“ Pixabay verwendet, bin allerdings teilweise aufgrund der Lizenz besorgt, mitunter auch, da geschrieben wird, dass die Nutzungsrechte jederzeit entzogen werden können und jegliches Bildmaterial vernichtet werden müsste. Wenn ich nun eine Dokumentation schon öffentlich habe und dann ein einzelnes Material löschen müsste, könnte es unschön werden, da ich die komplette Dokumentation erneut hochladen müsste.
  • Habt ihr im Allgemeinen ergänzende Ratschläge und Tipps? Ich bin für alles offen, was gute Verbesserungsmöglichkeiten gibt und bin auch offen dazu, neue Technologien zu lernen.
  • Habt ihr Empfehlungen, wo sich gut Informationen sammeln lassen? Die gängigen Möglichkeiten sind mir natürlich bekannt.
  • An welcher Stelle sollte ich verwendete Quellen angeben? Vermutlich ist das Ende der Dokumentation der passende Ort.

Den genauen Umgang mit Blender plane ich mir in Zukunft beizubringen, allerdings wird dies seine Zeit kosten, weshalb zusätzliche Möglichkeiten an Bildmaterial und Videomaterial wie bei Pixabay praktisch wären.

Mit freundlichen Grüßen,

euer Codeline

Video, Doku, Software, YouTube, App, Videobearbeitung, Webseite, Bildung, Infos, Diagramm, Dokumentation, recherche, Videobearbeitungssoftware, Zusammenarbeit, Kooperation, Quellen, Videomaterial
1 Antwort
MrOsmo
02.12.2023, 22:09
Beitrag wurde 1 Mal erneut eingestellt
Mit Bildern

Wie kann ich die Reihenfolge der Hintergrundfarben ändern?

Hallo zusammen!

ich mache gerade die Hausaufgaben in IT aber ich komme leider nicht weiter.

Wie ihr auf dem Foto bereits seht, habe ich zwei Hintergründe.

Aber das Problem ist, dass der erste Hintergrund unten sein soll und der zweite Hintergrund, der gerade unten ist, soll nach oben kommen. Also einfach gesagt, ich möchte die Reihenfolge der Hintergrundfarben ändern. Ich habe schon wirklich lange daran gesessen.

Ich weiß nicht, wie man es weiter macht. Könnte mir bitte jemand helfen?

P.S. JavaScript passt leider nicht in die Frage hinein. Ihr findet es in den Kommentaren!

Dankeschön im Voraus.

LG!

Übrigens, hier die Codes:

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 class="information"></div>
        </div>
      </div>
    </section>    
   <section>
    <div class="buttons">
      <button id="buttonOne">Delete all!</button>
      <button>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;
  gap: 10px;
  margin-top: 50px;
}

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

.tasks .date {
  background-color: orange;
  width: 20%;
  padding-bottom: 20px;
  border-radius: 9px;
  display: none;  
}

.tasks .date .information {
  background-color: rgb(219, 182, 112);
  padding-top: 220px;
  border-radius: 5px;
  text-align: start;
  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;
}

.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;
}
Bild zum Beitrag
HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
2 Antworten

Meistgelesene Beiträge zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite