Möglicherweise befindet sich der Spinner außerhalb des sichtbaren Bereichs, weil er in irgendeiner Form überdeckt/abgeschnitten wird.

Ich würde erst einmal die Höhe und Breite des Pseudoelements anpassen (z.B. auf jeweils 20px), sodass man wieder erkennt, dass sich es sich um einen Kreis handeln soll. Dann wäre das Element auch so groß, sodass es über dem Text liegt. Wenn du einen roten Hintergrund verwendest, ändere auch die Rahmenfarben des Spinners.

Wenn das Element daraufhin noch nicht sichtbar ist, dann schau dir die Elemente im Webinspektor (in den Entwicklungstools deines Browsers) an. Zum einen sollte dem div-Element immer noch die loader-Klasse zugeordnet sein (andernfalls gibt es entweder ein Skript, welches dynamisch Einfluss auf das Element nimmt oder das initiale Markup, welches geladen wird, passt doch nicht). Zum anderen kannst du via Mouseover über dem Knoten des Pseudoelements sehen, wo es auf der Seite liegt (die entsprechende Fläche wird farblich im Browserfenster hervorgehoben).

(...) sondern egal was ich in der style.css definiere es erscheint das Wort "Ladebalken" auf weißem Grund.

Das Wort ist initial gesetzt. Via CSS kannst du es nicht wirklich entfernen (nur durch Ausblenden des kompletten Elements, was den Spinner inkludieren würde).

Solltest du bei deinen Versuchen gemerkt haben, dass sich das CSS, welches von der Seite geladen wird, nicht ändert, obwohl du die Datei modifiziert hast, dann wird die CSS-Datei wohl in einem Cache gehalten. Hänge nach jeder Änderung der Datei einen anderen Querystring an die Ressourcen-URL.

Beispiel:

<link href="style.css?v=123" rel="stylesheet">

Der Setter gewährt dir eine Schnittstelle, über die du den Wert des privaten Feldes setzen kannst. Praktischerweise könntest du so auch zusätzliche Logik implementieren, die beispielsweise den neuen Wert zuerst auf Validität prüft.

Beispiel:

class Person {
  private int age;

  public void setAge(int age) {
    if (age > 0 && age <= 122) {
      this.age = age;
    }
  }
}

Die Datei wurde mit dem All-in-One WP Migration and Backup-Plugin generiert. Mit diesem Plugin kannst du die Daten auch wieder importieren.

https://www.youtube.com/watch?v=BpWxCeUWBOk

1) Bei der Definition des command für deinen Button rufst du die Funktion neum direkt auf. Das heißt, ihr Rückgabewert (None) wird anschließend dem Argument command zugewiesen.

Richtig wäre die Übergabe einer Funktionsreferenz:

knopf = ctk.CTkButton(main, text="n", command=neum)

2) Die Fehlermeldung

TypeError: 'module' object is not subscriptable

weist daraufhin, dass du ein Modul so behandelst, als sei es ein Objekt.

Beispiel:

# --- a.py ---
a = { "test": 123 }

# --- b.py ---
import a
print(a["test"]) # error: a is the module, not the dict

# --- c.py ---
import a
print(a.a["test"]) # 123

# --- d.py ---
from a import a
# or: from a import *
print(a["test"]) # 123

Konsoleneingaben kannst du mit einer Scanner-Instanz lesen.

Scanner reader = new Scanner(System.in);
String input = reader.next();

Einen String kannst du mittels if und equals prüfen.

String firstWord = "first";
String secondWord = "second";

if (firstWord.equals(secondWord)) {
  // ...
}

Für Textausgaben auf der Konsole gibt es println.

System.out.println("Some output");

Du rufst die toogleTopnav-Funktion nirgendwo auf. Die Funktion myFunction wird wohl auch nicht definiert.

Noch ein paar weitere Anmerkungen:

• Es gibt Elemente wie header oder nav, mit denen dein Markup besser strukturiert werden könnte, als nur mit div-Elementen
• Für den Menübutton würde ich auch ein button-Element (type="button") verwenden, statt einen Link; via CSS kann er genauso gut nach Bedarf visuell angepasst werden
• Dein Logolink hat keinen Linktext. Füge ihn entweder (z.B. in einem inneren span-Element) hinzu und blende ihn visuell aus oder setze ihn im alt-Attribut des Bildes
• So lange du nur Text setzt, ist das textContent-Property passender als innerHTML

Es sind aber noch alle Daten auf Dem SQL Server da. Reicht das, um die Seite wieder online zu bekommen?

Nein. In der Datenbank sind doch andere Daten gespeichert, als in den Dateien, die gelöscht wurden.

Der Hoster meint, sie sei gelöscht worden. Nur wie?

Vielleicht kann dir der Hoster mehr Informationen liefern.

Auf deiner Seite wäre es nicht unklug zu prüfen, wer Zugriff auf deinen Rechner hat und es wäre gut, die Anmeldedaten des Webspace-Accounts zu ändern.

Was mache ich jetzt?

Frage beim Webhoster, ob es ein Backup gibt. Wenn dem nicht der Fall ist, musst du selbst schauen, wie du von deiner Seite aus die Daten wiederbeschaffen kannst (neu entwickeln oder möglicherweise hast du sie noch irgendwo vorliegen).

Für die Zukunft solltest du definitiv immer ein Backup der zuletzt hochgeladenen Daten bei dir selbst hinterlegen.

Warum funktioniert meine bindDelete-Funktion nicht, um die li-Elemente wieder zu löschen?

Die Variable that wird von dir nicht definiert. Entweder du packst die Definition mit an den Funktionsanfang:

const that = this;

oder du nutzt zum einen eine Arrow-Funktion, um den Event Handler zu definieren und zum anderen this statt that.

button.addEventListener('click', () => {
  /* ... */
  this.order.addArticle(article);
  this.renderOrder();

Wie kann ich es schaffen, dass der Preis von jedem li-Element genau so untereinander ist, sodass man ihn schön zusammenrechen könnte:

Es gibt verschiedene Wege:

• Verwende keine Liste, sondern eine Tabelle mit festen Spaltenbreiten; ordne Name, Preis und Button dabei in unterschiedliche Spalten ein
• Packe die jeweiligen Angaben (Name, Preis) in einzelne (span-)Elemente. Gib denen mit CSS (width) eine entsprechende Breite oder ordne die Elemente mit einem CSS Grid an (via grid-template-columns kannst du die Spaltenbreiten vorgeben)

Zusätzlich wäre es wohl besser, die Preise mit CSS rechtsbündig auszurichten (text-align: right).

Zuletzt noch ein paar Anmerkungen zu deinem restlichen geteilten Code:

1) Diese Zeile ist überflüssig:

body.innerHTML = "";

Du überschreibst den Inhalt des body-Elements doch im Anschluss gleich noch einmal.

Wenn der Inhalt, den du in renderPage setzt, im Übrigen initial beim Laden der Seite angezeigt werden soll, würde ich ihn auch nicht dynamisch mit JavaScript einbinden, sondern direkt von Anfang an im body-Bereich ausliefern.

Mehr Sinn würde es m.E. machen, die konkreten Inhalte (Artikelname, Beschreibung, Preis, ID) in ein JSON-Objekt auszulagern und dann die einzelnen Artikelelemente via Schleife zu generieren. Statt mit innerHTML zu arbeiten, würde sich ein template-Element für diesen Fall gut eignen.

2) Es gibt kein HTML-Element namens sidebar. Naheliegend zu dem wäre ein aside-Element.

3) Solltest du strong allein aus dem Grund nutzen, den Preis visuell zu formatieren, dann entferne es und style den Text stattdessen mit CSS (siehe font-weight).

Ein Weg wäre die Installation des DuckDB CLI. Lade die passende Version für dich herunter und entpacke sie. Die Datenbankdatei würde ich im Anschluss (der Einfachheit halber) direkt mit in das Verzeichnis kopieren.

Öffne im Anschluss die Kommandozeile deines Betriebssystems (meine folgenden Code-Snippets beziehen sich auf Windows OS) und navigiere zu dem entpackten Ordner, in dem die duckdb.exe liegt.

cd "c:/path/to/duckdb/folder"

Dann kannst du auch schon eine Verbindung herstellen:

duckdb hotelkette.db

Sollte deine Datenbankdatei doch noch in einem anderen Pfad liegen, gib stattdessen den absoluten Dateipfad an. Am besten umklammert von Anführungszeichen, falls einer der Verzeichnisnamen ein Leerzeichen enthalten sollte.

duckdb "c:/path/to/hotelkette.db"

Sobald sich der Client mit der Datenbank verbunden hat, solltest du via SQL Daten auslesen oder schreiben können. Der beste Startpunkt wäre wohl, erst einmal in Erfahrung zu bringen, was für Tabellen überhaupt in der Datenbank liegen und wie sie strukturiert sind.

Die information_schema_tables-View beinhaltet bspw. Informationen über alle verfügbaren Tabellen in der Datenbank:

SELECT table_name FROM information_schema.tables

Die Struktur einer bestimmten Tabelle kannst du in Erfahrung bringen, indem du in der information_schema.columns-View nach der Tabelle suchst:

SELECT * FROM information_schema.columns WHERE table_name = 'name of a table'

Mehr zu den information_schema-Views kannst du in der Dokumentation nachschlagen.

Alternativ zu diesem Weg macht es dir DBeaver an der Stelle natürlich deutlich einfacher. Auf deinem ersten Screenshot hast du die Datenbank ja bereits geöffnet. Wenn du im linken Dialog (Datenbanknavigator) die Knoten von beispielsweise main oder pg_catalog einmal aufklappen würdest, solltest du ebenso die Tabellen finden, die in der Datenbank so vorliegen.

Explizit relevant für dich sind natürlich nur die Tabellen, die irgendetwas mit Hotels zutun haben.

Sollte dir nun aber noch Wissen zu dem Aufbau von Datenbanktabellen fehlen (z.B. Was Constraints oder Datentypen sind), würde ich dir empfehlen, dich dazu erst einmal zu belesen. Hilfreiche Artikel gibt es zum Beispiel auf datenbanken-verstehen.de. Bezüglich der SQL-Syntax solltest du in der DuckDB-Dokumentation nachschlagen.

(...) um an dieser Datei neue Dinge hinzuzufügen (...)

Neue Daten kannst du mittels INSERT INTO zu einer bestehenden Tabelle hinzufügen.

Beispiel:

Angenommen, wir haben eine Tabelle hotelpersonal, die das Hotelpersonal auflisten soll. Es gibt die Spalten vorname (VARCHAR), nachname (VARCHAR), gehalt (DECIMAL) und position (VARCHAR).

Das Hinzufügen eines neuen Datensatzes könnte folgendermaßen aussehen:

INSERT INTO hotelpersonal (vorname, nachname, gehalt, position)
VALUES ('Zéro', 'Moustafa', 2400, 'Page');

Für Weiteres dazu würde ich erneut auf die DuckDB-Dokumentation verweisen.

Schau nach, wo die Variable vorkommt (z.B. mittels Volltextsuche o.ä. Editorfunktionen) und wie ihr Werdegang ist. Bei einer Fehlermeldung seitens des Programms solltest du auch schon Informationen dazu bekommen, zu welchem Zeitpunkt die Variable ohne Wert ist.

Letzten Endes musst du dann natürlich schauen, dass ihr ein entsprechender Wert zugewiesen wird.

Zu Klipper gibt es eine Dokumentation: https://www.klipper3d.org/Overview.html.

Wenn die linke Spalte nicht gebraucht wird, sollte sie auch nicht herausgerendert werden. Das heißt, der Browser sollte in diesem Fall nur so ein Markup für den Container erhalten:

<div class="container">
  <div class="right-column">
    <!-- ... -->
  </div>
</div>

Da du das HTML offensichtlich selbst definierst, sollte das kein Problem darstellen.

Im Notfall könnte man auch die linke Spalte mitsamt Trenner via CSS ausblenden, vorausgesetzt, das Element ist tatsächlich leer (keinerlei Kindelemente oder Text, inklusive Leerzeichen):

.whatis .left-column:empty,
.whatis .left-column:empty + .divider {
  display: none
}

Die linke Spalte hingegen leer, aber sichtbar mitsamt Trenner herauszurendern und die Überschrift über die rechte Spalte zu verschieben, erscheint für mich unlogisch. Zum einen zeigst du dann überflüssige Inhalte an (die von einem Seitenbesucher vermutlich als unästhetisch und fehlerhaft gewertet werden) und zum anderen unterbricht es den Lesefluss.

Wenn du es aber unbedingt erzwingen möchtest, wäre es besser, der Titelbox (.whatis-titlebox) eine zusätzliche Modifikatorklasse zuzuweisen, mit der sie verschoben wird.

Beispiel:

<div class="whatis-titlebox whatis-titlebox-right">
  <h2 class="whatis-title-txt">Über</h2>
</div>

CSS:

.whatis-titlebox-right {
  margin-left: calc(45% + 1px);
}

Elemente zu duplizieren und dann übereinanderzuschieben ist keine gute Idee.

PyCharm verwendet eine eigene Konsolenimplementation, die sich nicht direkt so verhält, wie du es bei der Windows Konsole erwarten könntest. Aufrufe wie cls funktionieren in ihr nicht. Wenn du den Fensterinhalt leeren möchtest, musst du auf die GUI-Funktionalitäten von PyCharm zurückgreifen (z.B. Rechtsklick in das Konsolenfenster > Clear All).

Die IDE stellt allerdings auch eine Einstellung bereit, mit der eine OS-Konsole zumindest emuliert werden kann (siehe: Emulate terminal in output console in den Run/Debug Configurations). Wenn du die aktivierst, sollte ein Aufruf wie

import os
os.system("cls")

die Konsole leeren.

Für eine tatsächliche Sicherheit, dass all deine Anweisungen an die Konsole wie erwartet funktionieren, solltest du dein Python-Skript allerdings in der echten Konsole von Windows ausführen.

Direkt schreiben/definieren kannst du Methoden immer nur innerhalb einer Klasse oder einem Interface. Objekte sind die Instanzen von Klassen, die sich später auf bestimmte Methoden beziehen können, die in der Klasse (oder einer Basisklasse) definiert wurden.

Beispiel:

class Car {
  public void drive() {
    System.out.println("Wrumm wrumm");
  }
}

// main:
Car herbie = new Car();
herbie.drive();

Hier wird eine Klasse Car angelegt, in der eine Methode drive definiert wird. Später kann ein Objekt dieser Klasse kreiert werden. Dieses Objekt hat Zugriff auf die Methode drive.

Weiterführend wird bei Methoden, die du in einer Klasse definierst, grundsätzlich zwischen objektgebundenen (Instanz-) und klassengebundenen (statischen) Methoden unterschieden. Letztere werden mit dem static-Modifier gekennzeichnet.

Beispiel:

class Car {
  public static int compareCars(Car car1, Car car2) {
    // ...
  }
}

// main:
Car herbie = new Car();
Car docHudson = new Car();
Car.compareCars(herbie, docHudson);

Der wesentliche Unterschied bei statischen Methoden liegt darin, dass sie über die Klasse aufgerufen werden. Das heißt, du brauchst kein Objekt für einen Aufruf und innerhalb ihres Körpers gibt es keine this-Referenz (d.h. es besteht kein Zugriff auf objektgebundene Elemente), so wie in objektgebundenen Methoden.

Welche Methodenart je Fall passend ist, kann logisch erfragt werden. Verhaltensweisen/Aktionen, die ein Objekt ausmachen, sollten bspw. objektgebunden definiert sein.

a) Es gibt Dateiversionierungssyteme wie Git oder Mercurial, deren Repository zentral gehostet werden kann (siehe Bitbucket, GitLab, GitHub, Sourceforge). Das Repository beinhaltet all eure Projektdateien und ebenso eine Verlaufsgeschichte über jegliche Änderungen, die in ihm einmal registriert wurden.

Jeder in eurem Team kann sich folgend dieses (Remote) Repository klonen und in diesem seine Änderungen einfügen (Commits). Später werden diese auf das zentrale Repository geschoben. Sollten zwei Personen zeitgleich an einer Datei gearbeitet haben, ist es notwendig, die Änderungen zusammenzuführen (Merge).

Die Arbeit mit solchen Versionierungssystemen ist gängiger Standard in der Industrie.

b) Für einige Entwicklungsumgebungen/Editoren gibt es Kollaborationssoftware, über die man in Echtzeit gemeinsam an einem Projekt arbeiten kann. Für Eclipse gibt es da z.B. das Saros Plugin oder für Visual Studio und VS Code gibt es Live Share.

c) Zu guter Letzt steht euch natürlich noch offen, via Kommunikationssoftware (Microsoft Teams, Skype, o.ä.) Pair Programming zu organisieren.

1) Dein HTML ist an verschiedenen Stellen invalid.

• select-Elemente kennen kein Attribut test
• Das erste Anführungszeichen muss raus
• option-Elemente kennen kein Attribut href

2) Bei nur einer Option in der Auswahlbox hat der Nutzer nicht die Möglichkeit, die Auswahl zu ändern (und somit ein change-Event zu triggern).

3) Da dein option-Element kein value-Attribut definiert, wird das Label (in deinem Fall -test) als Wert verwendet.

Eine korrigierte Fassung könnte folgendermaßen aussehen:

<select name="test" onchange="window.open(this.value, '_self'); return false;">
  <option selected disabled>Please choose a target</option>
  <option value="index.html">-test</option>
</select>

Sofern der Container als Rahmen für das Bild agieren soll, wäre es die bessere Lösung, dem Bild via CSS einen Rahmen zu geben.

Beispiel:

.image {
  border: 16px solid blue;
}

Andernfalls passt die initiale Darstellungsform des Containers nicht. Blockelemente orientieren sich für die Berechnung ihrer Größe an den Elternelementen, nicht ihrem Inhalt.

Man kann nun entweder mit

width: fit-content;

die Containergröße an die Breite der Content-Box anpassen (lies hier mehr dazu) oder stattdessen die Darstellungsform ändern:

<!doctype html>
<head>
  <title>Example</title>
  <style>
    .image-container {
      background: blue;
      display: inline-block;
      padding: 16px;
    }
  </style>
</head>
<body>
  <div class="image-container">
    <img alt="..." height="..." src="..." width="...">
  </div>
</body>

Die Größe des Containers wird auch hier durch seinen Inhalt (und den Innenabstand) bestimmt. Wenn du nun trotzdem eine (maximale) Breite (max-width / width) vorgeben möchtest, musst du beachten, dass das Bild über den Rand läuft, wenn es größer als der Container sein sollte. Daher wäre es in diesem Fall besser, noch für das Bild eine Skalierung vorzugeben:

.image {
  height: auto;
  width: 100%;
}

Je Bildschirmbreite / Breite des Containers wird das Bild nun größer/kleiner skalieren (ohne sein ursprüngliches Größenverhältnis zu verlieren).

Das ist eher eine Aufgabe für HTML + JavaScript. Mit CSS kannst du nur das Aussehen von Seitenelementen beeinflussen.

Eine einfache Umsetzung könnte so aussehen:

<!doctype html>
<title>Example</title>
<button onclick="prompt('Dialog title', 'Field default value')" type="button">Click me</button>

Der klickbare Knopf wird mittels eines button-Elements umgesetzt. Dieses Element bekommt einen Event Handler zugeordnet, der bei Klick auf den Button aufgerufen wird. Der Handler ruft die prompt-Funktion auf, die einen Dialog mit Textfeld anzeigt.

(...) aber ich glaube das ist egal was man nutzt oder?

Es ist nur wichtig, einen Texteditor zu haben, mit dem man Text speichern kann.

Der Connectionstring gibt an, mit welcher Datenbank du dich verbindest. Wenn der Pfad, den du als DataSource angibst, relativ ist, geht er von dem Ordner aus, in dem sich dein auszuführendes Programm befindet. Builds wandern typischerweise in den bin-Ordner.

Mindestens der Text sollte in einen eigenen Container. Bei dem Bild würde ich allerdings ebenso einen Container drumherum setzen, um die Skalierung leichter handzuhaben.

Welche Elemente dabei konkret zum Einsatz kommen, hängt vom Kontext ab. Wenn der Text beispielsweise das Bild beschreibt und diese Einheit essentiell zum Hauptinhalt der Seite beiträgt, dann wäre ein figure-Element passend.

<figure class="container">
  <div class="container__image-box">
    <img alt="..." class="container__image" height="..." src="..." width="...">
  </div>
  <figcaption class="container__text">Some text</figcaption>
</figure>    

Die Elemente kannst du nun mittels Flexbox oder einem Grid horizontal nebeneinander anordnen.

CSS:

.container {
  column-gap: 10px;
  display: flex;
  margin: 0;
}

.container__text {
  flex: 1 1 0px;
  text-align: right;
}

.container__image {
  height: auto;
  width: 100%;
}

Zu beiden Features findest du hier ausführliche Guides:

• A Complete Guide to Flexbox
• A Complete Guide to CSS Grid