Ich habe ein Problem mit einem HTML, CSS und Javascript Code (Real-time Weather App Vanilla JavaScript and API)?

regex9  31.03.2024, 20:21

Dein Google Drive Link führt zu einer 403-Seite. Lege doch besser ein Fiddle an (Code einfügen, Bilder z.B. gegen Placeholder tauschen, Save > URL kopieren und hier einfügen).
Sushigodthanh 
Fragesteller
 31.03.2024, 20:57

Okay das mache ich dann mal. Kann man auch einen einfachen Download link schicken, wenn es geht ?

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet
regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
HTML, CSS, JavaScript
01.04.2024, 16:55

Zuallerst möchte ich darauf eingehen:

(...) der Stundenvideos macht, in denen man kostenlos seine Projekte nachcoden (...) kann, um zu üben (...)

denn hier steht doch tatsächlich die Frage im Raum, wie du effektiv als (vermutlich) Anfänger etwas lernen kannst. Wenn ich so stichprobenhaft durch das Video springe, höre ich stets nur Tippgeräusche, aber keinerlei Erklärung zu dem, was er tut oder der allgemeinen Strategie. Insofern sehe ich das eher als verschwendete Lebenszeit an - sich einfach nur den fertigen Quellcode herunterzuladen und den dann zu benutzen, geht doch viel schneller (und sorgenfreier).

Ich würde dir grundsätzlich von Abtippkursen deutlich abraten, zumal sie dich eben sehr schnell in so eine Situation bringen, in der du nun steckst. An irgendeinem Punkt wurde etwas nicht richtig nachgemacht und diese(n) Fehler gilt es nun zu finden. Wenn du nun auch den Code nicht richtig verstehst, stehst du am selben Punkt wie zuvor. Du bleibst abhängig von den Lösungen anderer.

Sollten dir noch generelle Grundlagenkenntnisse zu HTML, CSS oder JavaScript (mitsamt der DOM-API) fehlen, solltest du dich erst einmal damit auseinandersetzen.

Gute Lernquellen in dieser Hinsicht bieten diese drei Seiten:

Eine Wetterapp wäre im Anschluss zwar kein schlechtes Anfängerprojekt, allerdings wäre es besser, so etwas ohne Vorlage anzugehen. Natürlich dauert das länger und ist am Ende sicherlich noch nicht so qualitativ hochwertig, doch es bietet viel mehr Lernpotenzial. Vor allem, da du selbst schauen musst, wie du Lösungen zu deinen gestellten Problemen (Anforderungen) findest.

Ohne Grundlagenkenntnisse brauchst du von hier an übrigens nicht mehr weiterlesen.

Ich bin mehrmals durch den Code gegangen und habe einige Fehler finden können, aber es wurde nicht besser (...)

Da der Google Drive-Link inzwischen funktioniert, habe ich mir den Code aus dem weatherio-software-starter-duc-thanh-neuer-versuch-Ordner kurz angeschaut. Ob die Probleme, die ich gefunden habe, nun von dir stammen oder bereits im Originalquellcode falsch sind, habe ich nicht geprüft (es ist eh unwichtig).

Im HTML- und CSS-Code habe ich direkt diese Fehler gefunden:

  1. Im Humidity-Teaser ist der schließende sub-Tag unvollständig.
  2. In der Feels Like-Card fehlt der schließende sup-Tag. Das gilt sowohl in der index.html, als auch in der app.js.
  3. Mehreren img-Tags fehlt ein alt-Attribut. Dessen Wert stellt einen textuellen Ersatz des Bildes dar, sofern dieses zum Seiteninhalt aktiv beiträgt (also nicht dekorativer Bedeutung ist). Die Icons bei der 5d-Vorhersage stellen beispielsweise bedeutungsvollen Inhalt dar. Bei dem Logo handelt es sich normalerweise um ein dekoratives Element, weshalb da der Wert leer sein sollte (alt=""). Da es bei dir allerdings in einem Link liegt, der keinen Linktext hat, sollte das alt-Attribut den Linktext verkörpern (alt="Go to start page").
  4. Der href-Wert des Powered by OpenWeather Api-Links ist invalid. Innerhalb der URL dürfen keine Leerzeichen vorkommen.
  5. Ab und an werden Paragraphen innerhalb von span-Elementen verschachtelt (anders ausgedrückt: Du setzt ein Blockelement in ein Inline-Element). Das ist ein Widerspruch und nicht zulässig. Verzichte entweder auf das span oder vertausche das span gegen ein Blockelement (wie div) oder noch besser: Vertausche die Verschachtelung (das span-Element kommt in den Paragraph).
  6. In der CSS-Regel mit dem Selektor .search-field ::-webkit-search-cancel-button ist der display-Wert falsch (noen statt none).
  7. Für das overflow-y-Property wird zweimal der Wert overlay gesetzt. Das ist allerdings ein ungültiger Wert. Schau hier für die, die tatsächlich möglich sind.
  8. Wenn ein CSS-Property mehrmals in einer CSS-Regel gesetzt wird, überschreibt das letzte Vorkommen übrigens die vorherigen (siehe .search-view .view-list). Es ist dahingehend kein Fehler, doch ich würde solche Redundanzen vermeiden.
  9. In der CSS-Regel für den Footer ist der Name des CSS-Properties --on-surface-variant aufgrund des zwischengesetzen Leerzeichens nicht richtig.
  10. In der app.js wird einmal das HTML-Entity ° falsch geschrieben (vor dem Semikolon ist ein Leerzeichen).
  11. Bei den Media Queries wurde width stets falsch geschrieben. Das dürfte dein Grid-Problem dann auch lösen.

Bezüglich des JavaScript-Codes fällt Folgendes auf:

1) Keines der Skripte ist im Dokument eingebunden. Insofern wird da auch nie etwas ausgeführt werden.

Achte im Übrigen darauf, die Seite am besten über einen Webserver auszuführen. Andernfalls wird dein Browser die AJAX-Requests automatisch blockieren (Stichwort: CORS). Das steht so dann auch in der Browserkonsole.

2) Die Variablennamen in der getDate-Funktion sind falsch. Sowohl logisch (es soll ein Wochentags- und ein Monatsname gespeichert werden - Singular statt Plural) als auch sprachlich. Letzteres an einem kurzen, vereinfachten Beispiel erklärt:

const a = a;

Hier gibt es den Versuch, die Variable a zu erstellen und mit dem Wert von a zu definieren. Das ist ein Widerspruch, da a ja noch nicht wirklich existiert (bzw. undefiniert ist). Würde das rechtsseitige a aus einem äußeren (globalen) Kontext kommen (so wie auch in deinem Fall), wäre das bedeutungslos, da die Deklaration der (linksseitigen) Konstante a tatsächlich zuerst erfolgt und globale gleichnamige Symbole überdeckt.

Von daher:

const weekDayName = weekDayNames[date.getUTCDate()];
const monthName = monthNames[date.getUTCMonth()];

return `${weekDayName} ${date.getUTCDate()}, ${monthName}`;

3) Zwei Fehler betreffen fehlende bzw. unauffindbare Elemente.

Zum einen wird für das aktuelle Wetter ein Element mit einem data-location-Attribut gesucht, welches im Template-String wohl nicht gesetzt wurde:

<p class="title-3 meta-text" data-location>data-location</p>

Ebenso kann bei der Ausgabe der Wettervorhersage kein Element mit einem data-temp-Attribut gefunden werden. Das liegt schlichtweg daran, dass der gesamte Inhalt des Elternelements ([data-hourly-forecast]) zuvor überschrieben und anschließend nirgendwo mehr das data-temp-Attribut gesetzt wird. Wenn du in das (initiale) HTML schaust, siehst du, dass es auf dem Slider (.slider-list) liegen sollte.

4) Bei der Ausgabe für die heutigen Höhepunkte wird im Template-String eine undefinierte Variable api benutzt. Vermutlich ist das ein Tippfehler und aqi wäre richtig.

5) Bei der Extraktion der Wetterdaten (currentWeather) ist das Property visibility falsch geschrieben. Dieser Schreibfehler muss auch im Template-String weiter unten behoben werden, damit die Berechnung klappt.

6) Die 5d-Vorhersage wird nicht gerendert, da die Schleife vollkommen falsch ist. Bei forecastList handelt es sich um ein Array, folglich kannst du es nicht mit einer Zahl vergleichen. Richtig wäre ein Vergleich mit der Länge:

for (let i = start, day = 0; i < forecastList.length && day < 5; i += 8, ++day)

Die Variable day würde in diesem Zug dazu dienen, die Anzahl an Tagen zu begrenzen und im Schleifenkörper die richtigen Datumsangaben zu berechnen.

Des Weiteren wird der Startindex statisch gesetzt, obwohl die Startzeit der Einträge im Array zeitlich variiert. So ist aktuell der erste Eintrag für den 1.4., 15 Uhr. Der vierte Eintrag entspricht bereits dem 2.4..

Du solltest also zuerst ermitteln, für welche Startzeit die API-Rückgabe erfolgt, um dann den richtigen Startindex für die Schleife zu finden. Die Stundenanzahl des ersten Eintrags kannst du dir über dessen dt-Property holen:

const startHours = new Date(forecastList[0].dt * 1000).getUTCHours();

Die Multiplikation mit 1000 ist notwendig, um einen Zeitstempel in Millisekunden zu erhalten.

Möglicherweise gibt es noch weitere (logische) Fehler. Die solltest du dann allerdings selbst erst einmal prüfen (oder zumindest genauer beschreiben).

Nutze für eigene Analysen die Webentwicklungstools deines Browsers (Konsole, Debugger, Inspektor). Solltest du einen Chromium-basierten Browser nutzen (Chrome, Brave, Edge, Opera), kann dir die Chrome DevTools-Dokumentation für einen Einstieg helfen. Firefox hat ebenso eine Dokumentation zu seinen Entwicklungstools.
Sushigodthanh 
Fragesteller
 01.04.2024, 17:46

Ich danke dir für das anschauen der Website. Ich mache mich dann mal an die Arbeit. Ich danke dir

0