Meinung zur Website?

Servus, ich wollte Mal fragen was eure Meinung zu dieser Website ist

https://msa.mm-rp.de/

und ob ihr noch Tipps zum verbessern habt oder ähnliches.

Answer 1

[regex9]

Zum Inhalt:

• Der Toggle-Button sollte eine deutsche Beschriftung erhalten.
• Rechtschreibfehler: Jahresvortgang und fehlendes Komma vor wenn
• Sind dem von dir angepeilten Zielnutzer wirklich alle Abkürzungen bekannt?
• Der Text in der roten Box deutet an, dass der Rechner wohl nicht wirklich getestet wurde und prinzipiell wohl als unbrauchbar betrachtet werden kann. Immerhin liegen dem Programm doch keine hochkomplexen Rechenwege vor.
• Der Rechner berechnet auch dann einen Wert, wenn nicht alle Felder ausgefüllt wurden. Eine bessere Feldvalidation, die im besten Fall sogar das erste Fehlerfeld fokussiert, wäre praktisch.
• Je nach Zielgruppe wäre es gut, wenn die Seite auch auf einem mobilen Endgerät vernünftig bedienbar wäre.
• Der Seite fehlt ein Impressum.
• Du trackst Daten, ohne dir die Einwilligung des Seitenbesuchers zu holen, geschweige denn ihn überhaupt darüber zu informieren.

Zum Design:

• Der Toggle-Button sollte den gleichen Cursor bei Mouseover erhalten, wie der andere Button.
• Wieso sind nicht alle Felder auch Nummernfelder (mit einer Begrenzung auf einen validen Zahlenbereich)?
• Nummernfelder sollten breiter sein, sodass man Eingaben besser sieht.

Zur technischen Umsetzung:

• Der Wechsel zwischen Hell- und Dunkelmodus ließe sich einfacher mittels CSS-Variablen lösen. Im body-Element erstellst du je Farbe eine Variable mit einem Standardwert. Überall wo du via CSS Farben setzt, referenzierst du nun auf die entsprechende Variable. Zusätzlich legst du eine Regel (z.B. mit dem Klassenselektor dark) an, in der du deinen Variablen die Werte für den Dunkelmodus zuordnest. Bei Klick auf den Button ordnest du dem body-Element die Klasse dark zu oder entfernst sie wieder.
• Dem HTML-Entity   fehlt bei dir stets das abschließende Semikolon.
• Der alt-Wert von .gms ist unpassend. Er soll einen ädaquaten Textersatz zum Bild liefern. Wenn das Bild eh nur zur Dekoration ist (typisch für Logos), dann lasse den Wert leer.
• Auf Eingabefeldern des Typs number ist das maxlength-Attribut nicht erlaubt.
• Ein einheitlicher Stil bei der Benamung von Elementen wäre vorteilhaft. Aktuell verwendest du mal englische Wörter, dann wieder deutsche. Mal beginnen die Namen mit einem Großbuchstaben, dann wieder nicht.
• Ebenso wären eindeutige, aussagekräftige Namen von Vorteil. Der Name myFunction für eine Funktion, die zwischen Hell- und Dunkelmodus der Seite hin- und herschalten soll, ist beispielsweise ein Negativbeispiel. Ein anderes ist updateGes2 - die Funktion berechnet doch einen Wert für das Fach Mathematik. Im Funktionsnamen kommt diese Information jedoch nicht vor.
• Die grundsätzliche Umsetzung der Formularbox finde ich nicht gut. Eignen würde sich eine Tabelle (innerhalb eines Formulars). Du bastelst dir stattdessen alles mit Paragraphen, HTML-Entities und br-Elementen zusammen. Für die beiden letztgenannten Elemente wäre CSS die bessere Wahl.
• Wieso verwendest du durchgehend var zur Deklaration deiner Variablen, statt const oder let?
• Es gibt keinen Grund, mehrere Timer zu starten. Zum einen sollen die Berechnungen doch erst bei Buttonklick starten. Zum anderen würde selbst wenn ein einziger Timer vollkommen genügen.
• All die update-Funktionen könnten abstrahiert werden, sodass nur noch eine Funktion benötigt wird. Im Grunde benötigst du zum Zusammenrechnen mehrerer Felder lediglich einen geeigneten Selektor.

Beispiel:

const fields = Array.from(document.querySelectorAll(".math input[type=number]"));
const sum = fields.reduce((partialSum, field) => {
  const value = parseFloat(field.value);
  return partialSum + value;
}, 0);
const average = sum / fields.length;