Lerne HTML, CSS, JavaScript/jQuery und APIs: Erstelle eine Website für die Wettervorhersage!

1. Einführung: Hallo. Mein Name ist Joan Marie Verba. Und willkommen in dieser Klasse und Web-Entwicklung. Wir werden eine Wetter-Website mit einem A P erstellen. Ich rufe an das offene Wetter ein P I A p Augen, Luftspaß und Sie können eine breite Palette von Themen unter ihnen finden, um alle möglichen interessanten Webseiten zu erstellen . Ich bin seit vielen Jahren Computerprogrammierer und Webentwickler. Ich habe eine Reihe von Websites gestrichen. Diese spezielle Website, die Sie jetzt sehen, ist meine Portfolio-Seite. Dies ist eine Seite, die meine Projekte zeigt. Dies ist eine Seite, die mein Online-Lebenslauf ist. Dies ist eine andere Seite, die ich entwickelt habe und diese ist meine Get-Hub-Seite, auf der ich meinen Code speichere . Während dieser Klasse werde ich Ihnen beibringen, eine Wetter-App mit HTML, CSS und JavaScript in einem p zu erstellen , den ich anrufe. Sie könnten diese Fähigkeiten verwenden, um Ihre eigene Wetter-Website oder eine Website mit einem anderen a p i zu erstellen . Diese Klasse könnte von denjenigen genommen werden, die einige Kenntnisse von HTML, CSS und Javascript haben . Aber es richtet sich an Studenten, die keine Erfahrung in der Web-Entwicklung haben. Diese Klasse ist ideal für Freiberufler. Side hustlers oder sogar Hobbyisten, weil Sie diese Fähigkeiten verwenden können, um eine Vielzahl von Websites mit einem P Augen zu erhalten. Am Ende dieser Klasse haben Sie den Code, um Ihre eigene Wetter-Website bereitzustellen. 2. Code-Editor: Bevor wir mit dem Programmieren beginnen, brauchen wir einen Code-Editor. Ein reiner Text. Redakteure wie No Tad funktionierten gut. Obwohl ich empfehle, eine Textverarbeitung zu verwenden, ist es besser, einen speziellen Code-Editor zu verwenden, und ich verwende Visual Studio-Code , der ein kostenloser Download ist und für Windows, Mac und andere Plattformen funktioniert . könntest du. Außerdem war er Adam, was ein weiterer kostenloser Download ist. Wenn Sie bereits einen Code-Editor wie Sublime Text oder einen anderen Code-Editor haben, ist das auch in Ordnung . Aber ich empfehle, einen Code-Editor herunterzuladen, bevor Sie mit dem nächsten Schritt fortfahren. 3. Datei-Setup: Jetzt werden wir unsere Dateien erstellen. Das erste, was wir brauchen, ist eine Mappe. Ich bin auf einem Mac, aber der Prozess in Windows ist ähnlich. Verwenden Sie einfach einen neuen Ordner. Und so werden wir Ordner erstellen. Ich nenne es Wetter, und jetzt gehen wir in unseren visuellen Studio-Code und wir werden den Ordner öffnen. Wenn es bereits erstellt ist, wie ich es vorher getan habe. Sie können dies tun oder Sie können öffnen Ordner verwenden. Aber im Moment werden wir das Wetter nehmen und bei Wetter werden wir Dateien erstellen. Wir können diesen Knopf hier drücken, um Dateien zu erstellen. Die erste Datei ist eine Index-HTML-Datei, die den Code enthält, der direkt auf dem Bildschirm geht . Unsere zweite Datei, die wir erstellen werden, ist Stil CSS und das wird eine Datei, die den Code sagt, wie es auf dem Bildschirm zu setzen. Und dann werden wir unseren Job erstellen, eine Skriptdatei, und wir werden es Weather J s nennen und diese Datei wird die Daten geben und die Daten abrufen und die Daten in ein Formular einfügen, das wir sie auf dem Bildschirm ablegen können. Also zuerst wollen sie den Index einrichten. HTML-Datei. Wenn Sie sich auf einem visuellen Studio-Code befinden, gibt es eine wirklich einfache Möglichkeit, eine Vorlage zu erhalten. Sie machen ein Shift Ausrufezeichen und dann machen Sie eine Rückkehr und es gibt Ihnen diese wirklich schöne Vorlage. Der Code, der auf dem Bildschirm angezeigt wird, befindet sich zwischen den beiden Body-Tags hier. , Dieser Code hier oben ist,um den Browser zu verdrängen. Wie Toe Interpreter Code. Der Titel hier ist der Titel, den Sie oben auf dem Bildschirm für die Browser sehen. Wir werden das heutige Wetter nennen und das benutzen, und dann werden wir das retten und weitermachen. Sehen Sie, beurteilen Sie jetzt Stil. Siehe Beurteilen. Wir brauchen im Moment nichts mit für die Java-Skriptdatei zu tun. Wir werden Sie strikt setzen, was nur ein Standardbefehl für Java-Skript ist was nur ein Standardbefehl für Java-Skript ist, und jetzt gehen wir zurück zum Index html, weil die Index-HTML-Datei wissen muss , dass der Stil CSS und , und jetzt gehen wir zurück zum Index html, weil die Index-HTML-Datei wissen muss die Wetter-Js-Dateien sind da und es muss mit ihnen kommunizieren . Also werden wir dies durch einen Befehl kalt tun und Sie können dies einfach kopieren sowie den Rest der Vorlage kopieren. Wenn Sie keine Vorlagendatei in Ihrem Browser haben, auch nur von meinem Bildschirm hier kopiert. Guter Stil. Sehen Sie, Assis. Sie gehen, um Rail gleich Stylesheet zu tun, weil das ist, was es ist. Es ist ein Stylesheet, und wir werden das abschließen. Wir machen das jetzt, das ist nicht so, wie Sie bemerken. Dies ist zwischen den beiden Kopftexten, nicht im body-Tag, und es ist das letzte, was vor dem letzten head-Tag. Und so sagen wir, HTML hier zu indizieren, dass Sie einige Befehle vom Stil erhalten werden. CSS. Das ist es, was wir jetzt für die JavaScript-Datei sagen. Die Java-Skriptdatei geht an den unteren Rand. Also werden wir die Java-Skriptdatei unten setzen, und der Weg, den wir angeben, ist damit jetzt wieder, Sie können das einfach direkt von dort kopieren, wo ich das mache, es heißt Wetter J s und dann Skript. Nun, ähm, wie Sie sehen können, einer der Vorteile der Verwendung von Visual Studio-Code ist, dass der Visual Studio-Code Ihnen das um, das endliche Skript-Tag gibt. Sobald Sie diese Startskript-Tags getan haben, müssen Sie das nicht eingeben. Wir werden das retten. Und, äh, jetzt haben Sie Ihre Akten eingerichtet. Wenn Sie Ihren Code speichern möchten,können Sie Cloud-Speicher wie Dropbox oder iCloud oder was auch immer verwenden, oder Sie können ihn auf Flash-Laufwerk kopieren. Wenn Sie Ihren Code speichern möchten, können Sie Cloud-Speicher wie Dropbox oder iCloud oder was auch immer verwenden, oder Sie können ihn auf Flash-Laufwerk kopieren können Sie Cloud-Speicher wie Dropbox oder iCloud oder was auch immer verwenden, oder Sie können ihn auf Flash-Laufwerk kopieren. können Sie Cloud-Speicher wie Dropbox oder iCloud oder was auch immer verwenden, oder Sie können ihn auf Flash-Laufwerk kopieren. Oder Sie können einen Geschenk-Hub bekommen, ähm, Repository, das über den Rahmen dieses Kurses hinausgeht, und Ihren Code dort kopieren. Aber ich empfehle, Ihren Code so ziemlich in jeder Phase zu sichern, weil es einfach ist, Ihren Code zu verlieren und dann sind Sie es, ähm Dann müssen Sie ihn erneut erstellen. Dies ist also die nur die Grundlagen, die für den Code eingerichtet wurden, und wir werden von hier aus anfangen 4. Grundlegende HTML-Seite: jetzt füllen wir die HTML-Seite gerade jetzt, es gibt nichts da. Wenn Sie die Seite jederzeit sehen möchten, können wir mit der rechten Maustaste klicken und öffnen und Standard-Browser und sehen, dass es nichts auf der Seite. Wie auch immer Sie oben schauen, es steht das heutige Wetter. Das liegt daran, dass wir das in den Titel gesetzt haben. Gehen wir zurück und fangen an, Dinge auf die Seite zu setzen. Das erste, was wir auf der Seite tun werden, ist in einen Titel oder die Seite gesetzt. Wir werden das H one Tag verwenden, das ist der größte Schriftzug. Das heutige Wetter ist jetzt H eins, wie gesagt, der größte Tag. Es gibt kleinere Tags, die jeweils kleiner als H eins H drei, ein kleiner als H zwei und H sechs ist sehr klein, so dass Sie die Größe des Schriftzugs anpassen können. Auf diese Weise ist das eine von vielen Möglichkeiten, die Schriftgröße anzupassen. Also lassen Sie uns das speichern und sehen, was passiert. Sie können einfach die Seite hier aktualisieren, und es gibt das heutige Wetter. Okay, jetzt fangen wir an, die Seite mit anderen Dingen auszufüllen, die wir mit kleinerem Schriftzug wollen. Wir werden H zwei machen und wir werden uns in den Ort setzen. Also, äh, Wetter für Ort und wir werden den Ort später füllen, und dann wollen wir die Temperatur. Also setzen wir Temperatur und wir setzen gerade ein paar Platzhalter für das. Und dann setzen wir in die Windgeschwindigkeit und dann werden wir in den Himmel Bedingungen setzen wollen über seine Qualität klar regnerisch, unabhängig von den Himmelsbedingungen. Also diese Luft-Platzhalter für das, was wir später reinkommen werden. Mal sehen, sobald wir es gespeichert haben, wie das aussieht, also können wir die Seite hier und da sie sind aktualisieren, ob für Ort , , Temperatur, Wind, Himmelsbedingungen, lassen Sie uns das aktuelle Wetter für die Lage tun. Nun gibt es einen Grund dafür, und das sind die Daten. Wir werden alle 10 Minuten Änderungen bekommen, also bekommen wir das aktuelle Wetter für jeden Ort, für den wir es sagen, um das Wetter zu bekommen . Im Moment wollen wir nur etwas auf die Seite bekommen, und das machen wir. Wir haben aktuelles Wetter für den Standort. Da sind wir. Das ist also unser grundlegendes Zeug. Und das ist unsere grundlegende HTML-Seite. Und, äh, in der nächsten Lektion wird gehen und einige Styling-Probleme adressieren 5. CSS Styling: Nun lassen Sie uns Stil die Seite mit C. S CSS CSS steht für Cascading Stylesheet. Das erste, was versuchen wird, ist eine Hintergrundfarben. Also gehen wir auf die Style-CSS-Seite und schreiben Körper, weil wir wollen, dass die Farbe für die gesamte Seite sein , die diesem Body-Tag in diesem Body-Tag entspricht. Also werden wir das tun und sagen, Sie wollen Hintergrundfarbe? Wie Sie sehen können, fordert mich Visual Studio-Code hier auf, also wähle ich Hintergrundfarbe aus. Es gibt mir auch eine Reihe von Farben zur Auswahl. Also lasst uns Himmelblau probieren. Beachten Sie, dass das body-Tag als Selektor bezeichnet wird. Dem Selektor folgt eine öffnende geschweifte Klammer, gefolgt von den gewünschten Anweisungen und endet mit einer endlichen geschweiften Klammer. Also was spart das und geht zurück und aktualisiert und wir haben den blauen Hintergrund. Großartig. Jetzt ist dies eine Standardschriftart, also lassen Sie uns sehen, ob wir einen weiteren Kampf bekommen können. Um das zu tun. Wir gehen zu Fonts dot google dot com und wir scrollen durch die Schriftarten und wir sehen, ob es etwas gibt , das wir Ihnen wollen. Also dieser sieht gut aus, also lassen Sie uns dieses versuchen, klicken Sie auf das Plus und klicken Sie dann auf das Minus hier unten und es hat zwei Codezeilen. Dies ist die erste Codezeile, die in die h t m l geht. Also werden wir kopieren und einfügen, dass das den HTML verkauft, den wir eine Schriftart haben, die wir verwenden wollten und dann die zweite ist, das CSS zu setzen. Also kopieren und fügen wir das ein und das geht darunter. Versuchen Sie es noch einmal. Da ist es. Und dann speichern wir das und gehen zurück und aktualisieren die Seite erneut. Und die Schrift hat sich geändert. Wunderbar. Jetzt versuchen wir etwas anderes. Wir werden sehen, ob wir den Header zentrieren können. Wir wollen nur das Zentrum der ersten Linie. Also gehen wir zurück zum HTML und wir werden die erste Zeile mit dem, was das Diff genannt wird, trennen . Jetzt. Visual Studio-Code erinnert mich daran, dass, wenn ich ein Start-Divi habe, es mit dem unendlichen div übereinstimmen muss. Also nehme ich das und wir werden die erste Zeile umgeben, weil wir die erste Zeile bekommen und ich sehe, dass ich das nicht kopiert habe. Richtig, also gehen wir zu hier und da ist es. Und nimm das da raus. Jetzt haben wir das getrennt, was großartig ist, aber wir wollen, ähm, die Überschrift zentrieren. Also haben wir hier eine Klasse drauf gesetzt. Klasse ist gleich und geben Sie ihm einen Namen. Ich werde es besser nennen. Es kann ein beliebiger Name sein, aber es ist gut, einen beschreibenden Namen zu haben. Wenn wir eine Klasse in CSS verwenden, setzen wir Punkt davor, damit wir sie treffen können. Wir setzen das und dann gehen wir rüber und wir sehen, ob wir bestimmen können, was, äh, Befehl für CSS zu verwenden. Also setzen wir, ähm, c S s Mittelpunkt Text. Okay, das sieht gut aus. Also gehen wir hier rüber und wir sehen den Text ausrichten. Eigentum scheint dies zu sein und w drei Schulen ist ein sehr guter Ort, um Informationen zu finden . Und wir sehen, es gibt einen Befehl namens text align center in der CSS zu verwenden. Nun, auf der linken Seite der Seite, können Sie sehen, dass es eine ganze Reihe von CSS-Befehlen gibt, und Sie können sie jederzeit nachschlagen, wenn Sie sie benötigen. Aber im Moment suchen wir nach etwas, um den Text zu zentrieren, und das ist es. Also kopieren wir und fügen Sie, dass Sie das speichern und wir gehen zurück zu unserer Seite dort. Jetzt ist es im Zentrum. Okay, wir machen es gut. Jetzt lassen Sie uns mehr Platz zwischen der oberen Zeile und dem setzen. Um das zu tun,müssen wir einen Spielraum haben. Um das zu tun, Also müssen wir es nur auf den Boden legen, weil die Marge für, du weißt schon, die Marge ist du weißt schon, . Oberer Rand, rechter Rand, links, Rand unten. Wir brauchen den unteren Rand, weil wir diesen Platz hier vergrößern werden. Also beginnen wir dies mit Marge und wieder, Visual Studio-Code fordert mich, und wir werden ah setzen, 100 Pixel. Jetzt, Pixel ist eine sehr kleine, um Länge oder mit auf der Seite, können Sie Google Pixel, wenn Sie mehr Informationen wollen. Aber im Moment werden wir das einfach tun. Und wenn wir das haben, gehen wir zurück und aktualisieren die Seite. Siehst du, da ist mehr Platz, ihre Zehe versetzt. Das ist wunderbar. Das ist es, was wir wollen. Ah, nun lassen Sie uns die Daten über etwas bewegen, um die linke Seite des Tempo zu sagen, wir wollen es nur ein wenig bewegen. Also nochmal. Wir werden all dies mit einem div umgeben. Die vier Zeilen, die wir mit den Dips trennen wollen, die wir geben und dann visueller Studio-Code erinnert uns daran, Wir müssen ein Ende haben. Also nehmen wir das und wir setzen es am Ende. Da sind wir. Okay, und jetzt brauchen wir eine andere Klasse. Wir werden diese Klassendaten aufrufen und zum CSS zurückkehren. Legen Sie eine Ente Daten. Ok. Und jetzt werden wir noch eine Marge übrig machen. Nun, dieses Mal anstelle von Pixeln, wurden etwas namens eine Ansicht mit verwenden und der Grund, warum wir das tun werden, ist so wenn Sie die Seite auf einem ah Smartphone oder auf einem Tablet oder einem anderen Gerät als einem Laptop ansehen oder Desktop-Bildschirm, das automatisch Ihre Abmessungen für Sie verkleinert und die Anpassungen vornimmt. Das ist also, wo wir das tun werden. Also lassen Sie uns tun 20 Ansicht mit und sehen, was das für so 20 Ansicht mit Daten tun wird. Sie aktualisieren die Seite. Nicht schlecht. Okay, das sieht gut aus. Okay, also, äh, das scheint ein kleines Flugzeug zu sein, also lasst uns Mitt all diese in eine Kiste stecken. Also, um das zu tun, gehen wir hier rüber Es gibt ein paar Möglichkeiten, wie wir das tun können. Ah, aber was wir tun werden, weil wir jedes davon separat in einer Box wollen, wir eine Klasse auf das H 2-Tag anstelle eines div-Tags setzen. Und das kannst du tun. Verwenden Sie also Klasse gleich Box, und dann werden wir einfach kopieren und einfügen für die anderen. Und das bedeutet, dass wir die gleiche Schachtel für jeden von ihnen haben, okay? Und das das Und jetzt gehen wir auf den Stil CS s und Stil zu gehen, die Box euronews Blöcke. Und was wir zuerst tun werden, ist, dass wir eine Literalbox erstellen, indem einen sogenannten Grenzbefehl verwenden. Also Rand drei Pixel, einfarbig lila. Nun, was das bedeutet, ist, dass wir einen Kasten um den Text herum haben. Die Rahmenlinien werden drei Pixel sein, ähm, mit und es wird massiv anstelle einer gepunkteten Linie, zum Beispiel, und die Linie wird lila. Sobald wir das getan haben, gehen wir zurück und aktualisieren die Seite. Und da sind wir, außer dass die Boxen länger laufen, als wir wollen. Also lasst uns etwas anderes machen. Du willst eine Marge, oder? Richtig. Und wieder, wir werden View mit verwenden und wir werden versuchen, eine 50-Sicht mit und sehen, was das tut. Also eine Marge, richtig? 50 Ansicht mit in, dass Schrumpfungen sind Boxen für uns. Wunderbar. Außer, dass die Boxen Luft Art der Berührung des Textes. Und wir wollen vielleicht eins ein wenig Platz dort. Mal sehen, ob wir ein wenig Platz bekommen. Also, um den kleinen Abstand zu tun, verwenden Sie den Befehl padding und wollen, dass wollte rund um den Text sein, so dass wir nicht oben unten links, rechts, Obwohl wir könnten. Also werden wir 10 Pixel für diesen einen verwenden, weil er eine kleine Länge hat. Also werden wir Pixel verwenden und dann tun wir das, und wie Sie die Boxen sehen können oder größer, wundervoll aussehend, ziemlich gut bis jetzt, das ist wunderbar. Lassen Sie uns also die Boxen mit einer Hintergrundfarbe versetzen, so dass die Boxen ein wenig anders aussehen als der Hintergrund. Also lasst uns das machen. Wir werden eine Hintergrundfarbe Pfund Farbe machen. Jetzt stellen Sie fest, dass dies anders ist als die obere Hintergrundfarbe, da dies für den gesamten Körper. Aber dieser Hintergrund Farben auf Lee für die Box. Das ist es, was das bedeutet. Also, kleines Mädchen, versuchen Sie Beige, wenn das und speichern Sie das. Und wir aktualisieren die Seite und sehen, was passiert. Und da, Äh, das sieht ziemlich gut aus. Also, jetzt sind wir bereit, die Javascript-Datei zu machen. 6. API-Aufruf einrichten: Jetzt sind wir bereit, mit JavaScript zu beginnen, aber bevor wir Javascript verwenden, müssen wir in der Lage sein, einige Daten zu erhalten, mit denen wir arbeiten können. Also gehen wir auf die offene gehen, ob ein p i, das ist, dass Open Wetterkarte Punkt org Schrägstrich ap I und wir werden sehen, welche Art von Daten wir das Wetter abrufen wollen. Ap. Ich bietet alle Arten von Daten für Wetter aktuelle Wetterdaten drei sind Prognose, 16 Tage Prognose und alle Arten von anderen Daten, die wir verwenden können. Im Moment werden wir nur die aktuellen Wetterdaten verwenden. Also werden wir uns die A P. I, doc und in, dass wir sehen, dass wir die aktuellen Wetterdaten nach Stadtname City I D geographische Koordinaten, Postleitzahl und alle möglichen anderen Möglichkeiten, um die Daten zu erhalten bekommen. Um die Daten zu erhalten, müssen Sie einen so genannten Acht p I Schlüssel haben. Also, was Sie tun müssen, um einen A p I Schlüssel zu erhalten, ist, sich anzumelden. So erstellen Sie ein Konto und füllen Sie das leere Kreaturen-Konto. Sobald Sie Ihr Konto erstellt haben, melden Sie sich an und klicken Sie dann auf einen P I Schlüssel und erhalten Ihren A P I Schlüssel. Ich werde das hier nicht tun, aber du bekommst deinen A P i Schlüssel. Ich werde es dir zeigen. Es wird eine sehr lange Zeichenfolge von Buchstaben und Zahlen sein. Dann gehen Sie zurück zum A p I und wir müssen herausfinden, welches Format wir verwenden müssen, um sich zurückzuziehen. Jetzt werden wir nach dem Namen der Stadt abrufen. Also hier ist unser A P Ich nenne Format. Und so werden wir das kopieren und wir werden es jetzt hier einfügen, um ein A P zu machen, das ich mit Java-Skript aufrufe, müssen wir ein Bedürfnis haben, dies zu haben. Wir müssen ein u r l haben, das wir verwenden können, das den Schlüssel darin hat. Nun, dafür werden wir eine Variable erstellen. Nun, Variablen sind Dinge, die Sie sich aus Mathematik-Klasse erinnern können. Sie haben vielleicht X gleich Y plus Z gesehen, wo X weinsier Variablen in Javascript mich Variablen deklarieren . Wir können das auf eine von drei Arten tun. Verwenden Sie const. Sie können einen Aufzug benutzen. Wir können eine Messe nutzen, und die Const bedeutet einfach, dass wir keine zusätzliche Veränderung erwarten. Warum bedeutet, dass wir erwarten, dass wir erwarten, warum wir uns ändern. Und es gibt entweder einen. In diesem Fall werden wir Const verwenden, weil wir nicht erwarten, dass sich dies ändert. Es wird jedes Mal der gleiche Anruf sein. Und wir werden das etwas aussagekräftiges nennen, „u R l und wir werden gleich machen. Und jetzt wollen wir das nutzen. Also werden wir das tun und wir werden die Räume schließen, was immer eine gute Idee ist. Nun, das wird ein das wird ein Aufruf an eine Webadresse sein. Also für eine Web-Adresse, wir brauchen http und wir haben es fast hier. Wir müssen einen Städtenamen auswählen. Wir werden Chicago aussuchen, nur um Illustrationszwecke. Und jetzt müssen wir unseren Tee reinlegen. , Die Art und Weise,wie wir das tun, ist, dass wir ein kaufmännisches Und-Zeichen mit AP verwenden. Ich d gleich und danach ist der Schlüssel. Jetzt haben konstruktive Fakey hier wieder, er wird eine Reihe von Buchstaben und Zahlen sein. Wir werden das dort setzen und dann werden wir das in Anführungszeichen setzen. Und damit könnten wir das machen, was man A nennt. Ich rufe die offene Wetterkarte an , um unsere Daten zu erhalten, und wir werden das in der nächsten Liste besprechen. 7. Daten Retrieve: Jetzt werden wir mit Java-Skript-Aufrufen arbeiten und um JavaScript-Aufrufe zu verwenden, werden wir etwas namens Jake Weary verwenden. Also müssen wir Index html alarmieren, dass wir J Query verwenden. Also gehen wir zu G Weary CD in und klicken Sie auf die CD en, und Sie wollen die 1. 1 J Abfrage Kern verwenden 3.3 Punkt ein un komprimiert verwendet, dass wir eine Kopie auf diesem tun , in der Tat, in der h t. Und jetzt und setzen Sie es hier und die JavaScript geht an der Unterseite und wir werden es nur über den Aufruf an das Wetter J s und jetzt gehen wir zu dem Wetter J s und beginnen damit zu arbeiten. Was müssen wir also tun, um die Daten vom Wetter abzurufen? Acht p. i. Und übrigens ein P I. P steht ein P I. Pfür Anwendungsprogrammierschnittstelle. Es ist eine Schnittstelle. Also werden wir das benutzen, was man Ajax-Anruf nennt. Und das ist das Format Küken und, wie üblich, wie üblich, visueller Studio-Code füllt es in seinem Ajax mit der Startfront, die Saison offen, äh, wirklich Klammer und dann schließt geschweifte Klammer und schließt dann Klammern, und wir werden die ganze Aktion hier machen. Also werden wir mit dir anfangen R l Du bist jetzt krank. Dieses u r l sagt ihm, dass wir es ein u r l senden werden und dieses u R l mit diesem übereinstimmt. Wir hätten es alles nennen können, was es nennen könnte. Wir hätten hier Namen und Namen geben können. Das ist in Ordnung, aber wir setzen u r l Also das ist, was das ist. Und jetzt sagen wir nach Erfolg, das heißt, die Daten wurden erfolgreich abgerufen. Wir werden alle Daten in eine Variable namens Ergebnis setzen. Und wieder benutzten wir die offene enge, wirklich Zahnspange. Wir werden das schließen, und die ganze Aktion geht innerhalb der geschweiften Klammern hier. Also, welche Art von Aktion wollen wir es zuerst? Nun, zuerst wollen wir nur bestätigen, dass wir Daten haben, also werden wir Konsolenergebnis zu tun. Und was das bedeutet, ist, den Inhalt des Ergebnisses zu setzen, die Daten, die wir aus dem offenen Wetter abgerufen haben ap I in das Ergebnis zu setzen und dann all das Zeug auf die Webseite zu setzen. Und jetzt schauen wir uns die Webseite an. Sobald wir unseren Code gespeichert haben, ob Punkt J s, gehen wir zurück zu unserer Seite und wir aktualisieren. Und wo sind unsere Daten? Nun, es ist auf der Seite, aber wir müssen einen Rechtsklick machen, inspizieren und schauen, was die Dev-Tools genannt wird, um zu sehen, ob diese Luft namens Dev Tools und das hat den HTML für die Seite. Aber wir trösten keine Protokolle. Wir werden auf Konsul klicken und es gibt ein Objekt, das unsere Daten sind. nun Wenn Sienuneine Fehlermeldung erhalten, stellen Sie sicher, dass sich Jay Query auf der HTML-Seite befindet. Stellen Sie sicher, dass Ihr Schlüssel an der richtigen Stelle ist. Stellen Sie sicher, dass alles korrekt geschrieben ist und dass Sie die richtige Anzahl von geschweiften Klammern haben . Überprüfen Sie all diese Dinge, wenn Sie einen Fehler erhalten. Aber wir haben keinen Araber. Wir haben unsere Daten. Also sind die Daten in einem Objekt und das Objekt ist einfach ein Weg Zehen. Organisieren Sie Ihre Daten. Wenn Sie mehr über Objekte wissen möchten, können Sie zu W drei Schulen dot com gehen und JavaScript-Objekte nachschlagen, und es wird alles darüber erklären, was ein Objekt ist und wie es organisiert ist. Aber ich zeige Ihnen, was wir von dem Objekt hier bekommen müssen. Wir müssen auf den Pfeil klicken, und jetzt haben wir einige Daten. Das ist großartig. Es steht der Name der Stadt Chicago, was wunderbar ist. Wir haben eine Temperatur. Großartig. Du hast hier eine Windgeschwindigkeit. Wir haben noch keine Himmelsbedingungen, also werden wir anfangen, Pfeile zu klicken. Und ich weiß zufällig, dass es dieser Pfeil hier ist. Und wir haben eine Beschreibung, Klare Himmel. Also haben wir die Daten, mit denen wir arbeiten müssen. Jetzt müssen wir diese Daten interpretieren. Also müssen wir zurück zur aktuellen Wetterdatenseite auf offener Wetterkarte gehen und nach unten scrollen , und wir sehen, dass es einen Ort gibt. Die Gespräche über Jason und Jason sind die Art und Weise, wie das Objekt organisiert ist. Jason steht für arbeitslose JavaScript-Objektnotation, und das ist, was wir wollen, weil wir in JavaScript arbeiten. Also gehen wir runter und schauen uns die Parameter an und sehen, was wir hier haben. Die Verfeinerung der Temperatur ist Hauptpunkttemperatur und es ist in Kelvin Grad. Also müssen wir ein paar Berechnungen machen, in Fahrenheit einsteigen. Die Windgeschwindigkeit beträgt Meter pro Sekunde, also müssen wir ein paar Berechnungen machen. Er hat keine Maus pro Stunde, und dann hast du einen Namen, Stadtnamen. Und wir haben, ähm, Bedingungen, ob Beschreibung, ob Beschreibung innerhalb der Gruppe. Also haben wir alle unsere Daten, und so sagen wir, was wir haben. Also, was wir dann tun werden, für das heutige Wetter, ist, dass wir uns zuerst den Namen schnappen. Und der Name ist Chicago hier. Das ist am einfachsten zu fangen. Also gehen wir zurück zu unserer Seite und wir werden sehen, ob wir diese Daten erfassen können. Jetzt sagt er seinen Namen. Schreiben Sie Ihren Namen, aber wir haben etwas vor ihm zu setzen, weil denken Sie daran, die Daten wurde ein Objekt namens Ergebnis gesetzt. Und denken Sie daran, dass in den Wetterdaten alles punktiert ist. Also gehen wir zurück zu unserem Code und wir gehen hierher und wir wollen nicht nur sehen, ob wir den Namen bekommen können . Also werden wir Protokollergebnisse zu konsolen. Das ist der Name der Objekte in und Name, das ist der Ort innerhalb des Objekts, das es iss. Wir tun das, speichern Sie das, gehen Sie zurück, wir aktualisieren die Seite und wir machen das Konsolenprotokoll erneut. Und hier ist unser Objekt an der Spitze. Und dann ist hier unser Name. - Chicago. Also haben wir unseren Namen. Wir wissen, dass wir den Namen vom Ergebnis Punktnamen bekommen können und wir können von hier aus gehen. 8. Daten auf der Website Platzieren: Nun, was wir tun wollen, ist, dass wir alle Daten auf der Webseite setzen wollen. Beginnen wir also mit dem Namen der Stadt. Das ist der Ort. Also, um das auf der Webseite zu setzen, werden wir J müde nutzen, um das zu tun. Machen Sie einen Mann wie diesen Ort. Ich habe einen Text, um einen Text zu setzen und den Namen zu ergeben. Denken Sie daran, Ergebnis. Dieser Name ist Chicago. Also an Ort und Stelle in dem Ort namens Location, werden wir Chicago setzen. Das ist es, was der Befehl bedeutet. Also gehen wir zurück zum Index html und wir brauchen Standort, und wir haben so etwas. Also lassen Sie es uns hier in Chicago an Stelle des Standorts hier setzen. Aber wir müssen es tun, damit Jake, wo du es erkennst? Also werden wir sagen, dass Span Spanne nur ein Halter ist. Ich d ist gleich Standort. Und dann müssen wir die Spannweite schließen, was Visual Studio-Code uns sagt zu tun. Das bedeutet also aktuelles Wetter für was auch immer vor Ort war und das I d. Entspricht Zahn-Hashtag genau hier. Okay, wenn Sie eine Idee haben, es die Hashtag-Signale, um eine TML zu indizieren, die Idee-Position ist. Also gehen wir zurück auf unsere Webseite und aktualisieren das aktuelle Wetter für Chicago. Wir haben es. Wir machen Fortschritte. Gut. Das nächste, was wir versuchen werden, ist die Himmelsbedingung. Also werden wir hier etwas Platz schaffen. Und wir konnten sehen, dass wir unter diesem gesehen haben, dass es in der Wetterbeschreibung ist. Also werden wir das versuchen. Außer, als wir das getan haben. Wir inspizieren hier. Console-Objekt. Es gibt Wetter. Es gibt eine Beschreibung. Aber da ist diese Null hier. Also, was ist das? Null. Die Null dort signalisiert uns, dass sich innerhalb des Objekts ein Array befindet. Ein Array ist einfach eine Sequenz von Elementen. Sie können Java-Skript nachschlagen, eine Erhöhung auf W drei Schulen und es wird Ihnen sagen, jetzt ist dies Null Index, was bedeutet, dass dieses Array von Autos hier ist dies Index Null. Dies ist Index eins, und das ist Index, obwohl es drei Elemente hat, es 012 Also was das hier bedeutet , ist , dass es das erste Element ist, weil Element Null und das Array hier uns sagt, dass Sie Array mit nur einem Element erhalten haben darin und das erste Element ist Null. Also werden wir sagen Wetter Null Punkt Beschreibung. Okay, das ist also, wo die Himmelsbedingung ist. Der gesamte Pfad, daher ist Ergebnis Ergebnis Punkt Wetter Punkt Beschreibung Jetzt müssen wir dies in setzen. J Abfrage gebildet. Legen Sie es auf die Seite. Dieses Mal werde ich diesen Kerl anrufen und es ist in Textform. Schließen Sie ab. Drucken Sie den Aufhörungs- und Anti-Semikolon-Index. Sie können die Spanne Formation verwenden, die ich d gleich diesmal Es ist Himmel wird abschließen Spanne, dass. Geh hierher zurück. Hier. Lassen Sie uns Saidiya Mais hier. Das könnte sein. Und so aktualisieren wir es wieder. Himmel Zustand klarer Himmel Wunderbar. Wir machen fantastisch. Okay, mal sehen, ob wir die Temperatur machen können. Also haben wir nochmal inspiziert. Konsole, Objekt. Okay, Temperatur. Es gibt die Temperatur jetzt die Temperaturen und Kelvin Es ist in Maine und seine in Temperatur Also müssen wir einige Berechnungen mit der Temperatur machen. Javascript ist also wunderbar für Berechnungen. Es gibt viele Möglichkeiten, eine Fahrenheit Temperatur von Kelvin zu berechnen und Sie können sie auf Google nachschlagen. Ich werde eine bestimmte Formel verwenden, die für mich funktioniert. Lassen Sie uns also eine Variable F deklarieren, um Fahrenheit darzustellen. Also lassen Sie, wenn gleich ist und wir wissen, dass die Temperatur im Ergebnis ist. Das ist unser Objekt. Und es war in Maine Punkt Kemp und wir füllen den Rest der Formel hier und minus I Punkt 67 Also das ist unsere Formel für Temperatur, die uns die Temperatur in Fahrenheit geben wird. Ähm, die mathematischen Operatoren für Java-Skript sind die gleichen, mit denen Sie vertraut sind. Minus bedeutet minus plus bedeutet plus Schrägstrich Division und Stern bedeutet Multiplikation. jedoch Wir werdenjedochmehrere Dezimalstellen erhalten, wenn wir diese Berechnung vornehmen und wir eine schöne runde Zahl wollen . Es gibt also Funktionen in Java-Skript, die wir verwenden können, und Sie können Funktionen nachschlagen. Aber dieses besondere Mal werden wir eine Funktion verwenden. Es heißt Math Round, und das wird uns eine schöne Runde Zahl Mathematik rund um alles in Klammern geben und verwendet , dass für unsere Berechnungen. Jetzt haben wir eine schöne Runde Nummer. jedoch Wenn JavaScriptjedochmathematische Berechnungen durchführt, setzt es die Zahlen in Binärdatei, wandelt die Zahlen auf dem Bildschirm in binäre, und so müssen wir es von Brian Eri toe eine Zahl, die wir anzeigen können auf dem Bildschirm. Betrachten Sie also eine Java-Skriptmethode und Sie können viele Methoden auf Google nachschlagen. Aber ich werde eine Messe verwenden und zwei Strings genannt, so dass f Punkt zu String die Zahl von einer Binärdatei in ein Formular transformiert , das wir auf der Seite setzen können und darüber sprechen, es auf der Seite zu setzen . Wir müssen RJ Curry wieder benutzen. Also dieses Mal werden wir Temperament ziehen. Sicher, es wird der nächste sein, und unsere Nummer ist in Fahrenheit 19 und das und so gehen wir Index html und was wir wieder tun , ist, dass wir wieder tippen. Ich habe das schon für dich eingegeben. Es ist Spanne I d gleich Temperatur schließen Spanne, bevor wir es auf die Seite setzen. Also lasst uns hier ein wenig Styling machen. Setzen wir hier einen Doppelpunkt, ein paar Leerzeichen und dann ein Leerzeichen und dann Grad und speichern Sie das. Also gehen wir zurück auf die Seite und aktualisieren Temperatur. Neun Grad waren großartig. Das nächste, was wir tun, ist, dass wir den Wind kriegen. Also gehen wir zurück. Du siehst uns unser Objekt an. Wir sehen, dass der Wind hier ist und es wird Wind-Punkt-Geschwindigkeit Schweller Adler zurück zu unserem Java-Skript hier und wir beginnen, über den Wind zu denken, jetzt, wo Wind in Metern pro Sekunde gegeben wird . Also müssen wir das in MPH umwandeln. Und die Formel, die wir dafür verwenden werden, wird Windgeschwindigkeit Geschwindigkeit gleich Masse Runde und seine resultierende Windgeschwindigkeit und die geteilt durch 0.44704 Das sollte uns geben, wo wir jetzt gehen wollen. Etwas, was ich möchte, dass Sie hier notieren. Windgeschwindigkeit. Sie haben einen Großbuchstaben in der Mitte. Dies ist eine Variable, die in dem sogenannten Camel Fall geschrieben wird. Das ist. Sie kombinieren zwei oder mehr Wörter und Großbuchstaben jedes Wort nach der 1. 1 Dies ist ziemlich Standard in Java-Skript. Keine Notwendigkeit, J-Abfrage zu verwenden, um es auf der Seite zu erhalten. Also werden wir in Jaqui Reform kalten Wind setzen, nächste Windgeschwindigkeit, außer dass das kein Text ist. Es ist binär. Also müssen wir uns daran erinnern, dass wir es in eine String-Form geben müssen. Also werden wir Windgeschwindigkeit verwenden, um zu schnüren und dann werden wir diesen Sieg machen, also sollte das uns dorthin bringen, wo wir jetzt hinwollen. Wir gehen zum Index dot html und legen es dort hinein und machen es wieder spannend, und die Idee ist Wind. Und mal sehen, ob wir das raus haben, gewinnen Sieben MPH. Das ist großartig. Jetzt haben wir eine komplette Webseite. Sie könnten an dieser Stelle anhalten und eine vollkommen ausreichende Webseite haben. Wenn du das zu deinem Projekt machen willst,ist das in Ordnung. Wenn du das zu deinem Projekt machen willst, , Es ist perfekt zu finden,dass Sie daran Änderungen vornehmen könnten. Aber ich möchte Ihnen zeigen, wie wir uns auch in diesem Bereich verbessern können, also wird das unsere nächste Liste sein. 9. Code: Jetzt sehen wir mal. Es würde den Code effizienter machen. Zuerst können wir Kommentare hinzufügen. Kommentare werden auf dem Code angezeigt, aber nicht auf der Webseite. Ihre verschiedenen Formen für den Index, den Stil und die Js-Dateien. Also hier ist für die HTML-Datei. Siehst du, das sind der Dank. Das ist ein Kommentar. Der einfachste Weg, dies zu tun, um dies zu markieren und dann auf einem Mac-Befehl Schrägstrich oder auf einem Windows-Computer Control Schrägstrich. Oder Sie könnten diese einfach eingeben. Aber so bezeichnen Sie einen Kommentar in der h t m l im, um, um, CSS. Es ist ein bisschen anders. Also sagst du, setze 18 Uhren, Dega und so hoch. Und wieder können Sie einfach die's eingeben oder einfach die Tastenkombination verwenden, je nachdem, was Sie bevorzugen, und dann in JavaScript ist es immer noch anders. Also lasst uns das zum Ort bringen. Das ist also die der Kommentare im Java-Skript. Nun, obwohl unser Code perfekt für die Seite geeignet ist, gibt es effizientere Möglichkeiten, den Text mit Jake müde hinzuzufügen, und das verwendet etwas namens E. S six Format, das Sie können schauen Sie auf Google, wenn Sie mehr Informationen wollen, aber lassen Sie mich Ihnen zeigen, wie es hier geht. Anstatt die Fahrenheit hier zu schreiben, werden wir etwas anderes schreiben, was sagen würde Aufzug, Anzeige. Tim, das ist wieder unser Kamelfall, gleich. Und jetzt haben wir den ganz oberen linken Tastendruck verwendet, und wir sagen Temperatur-Dollar-Zeichen. - Ja. Und was das ist, ist dieses f entspricht diesem f hier, also brauchen wir das nicht mehr. Und was das Dollarzeichen und die Klammern bedeuten, ist, dass die Temperatur ein Literal ist und dies eine Zahl ist, und Sie müssen die Zahl nicht in eine Textnummer umwandeln. Sie können dies einfach verwenden und das wird es automatisch tun. Und jetzt wollen wir ein Abschlusszeichen. Also, wie macht man ein Abschlusszeichen? Ähm, es gibt Möglichkeiten, das zu tun. Und das Gradzeichen Symbole in HTML, das ist, was wir auf der Seite setzen werden, ist kaufmännisches Und-Zeichen. Hashtag 176 Semikolon. Dass du das tun könntest, aber wir wollen unser eigenes f. hinzufügen aber wir werden nur das Gradsymbol verwenden, und das ist genau hier. Dies ist, dass alle Codes Punktnetz und Sie können es dort oben suchen. Also gehen wir zurück und wir werden in das Grad-Symbol setzen, Hash-Tag 176 Semikolon. Und dann werden wir unser eigenes f einbauen. Okay, jetzt haben wir das. Und hier unten müssen wir das ändern, damit wir thisted html ändern müssen, weil wir nicht nur Text mehr setzen. Route Putting HTML, dies ist HTML. Dies wird in HTML umgewandelt werden und dies ist HTML. Und anstelle von Fahrenheit, werden wir Display Versuchung angezeigter Temperatur setzen, und wir können einen Kommentar zu diesem Effekt hinzufügen. Zeigen Sie die Temperatur an. Ok. Und dass wir das gerettet haben. Und du gehst zurück und wir erfrischen uns. Wie Sie sehen können, haben wir zweimal Temperatur. Jetzt. Warum ist das so? Was? Wir müssen zurück zum Code und wir sehen, dass wir die Temperatur hier setzen, um auf die Seite zu setzen, aber wir haben vergessen, es hier raus zu nehmen. Also gehen wir raus, kommen hierher, und wir werden ein I d gleich Temperatur hinzufügen. Wir könnten eine Klasse eine Idee in der gleichen haben, also brauchen wir wirklich nichts anderes als die Klasse und ich hier. Und die Tags, die zeigen, wie groß der Schriftzug sein wird. Also gehe ich zurück zu diesem. Überprüfe das. Ok? Und da ist die Temperatur, für die wir das I D setzen. Also gehen wir zurück zum dorthin. Jetzt haben wir es. Okay, das ist gut. Jetzt können wir dasselbe für den Standort, den Wind und die Himmelsbedingungen tun . Fangen wir damit an. So Lage beleuchtet Display Stadt kühlt das aktuelle Wetter in So dass Oh, jeden Tag. Also der Name und so Michael Ende und dann Ort gleich Es ist html Habe die endende geschweifte Klammer html und es ist HTML-Display-Stadt jetzt spielen Stadt, und dann müssen wir hier zurück und nehmen all das heraus. Ändern Sie die i d zu. Okay, also schauen wir uns das an. Okay, das funktioniert. Also, jetzt lasst uns den Wind versuchen. Okay, das bleibt also gleich, und statt dessen, haben wir Splay Wind statt der wirklich Klammer in der Geschwindigkeit. Es bricht wirklich MPH, und dies wird Displaywind, und dies wird html Zurück zum Index html Wind auf und schließen Sie dies. Alles, was wir brauchen, ist ID gleich Wind. Sieh dir das an. Funktioniert immer noch. Gut. Die letzte Himmelsbedingung. Jetzt tun wir das gleiche für die Himmelbedingung Himmelsdisplay Himmel kühlt Himmelzustand, Dollarzeichen, geschweifte Klammer. Und wir wollen das und Curly Klammer und und Linie. Ok. Und dann geht es hoch, Mr. Knorr. Und dann geht das zurück zu html und das geht zur Anzeige. Scott, geh zurück und alles, was wir brauchen, ist das Ich für den Himmel und geh zurück und überprüfe das. Ok? Es funktioniert alles wunderbar. Dies bereinigt also den Code erheblich und macht effizienter und lesbarer. 10. Bilder hinzufügen: Lassen Sie uns also einen interessanteren Hintergrund für die Webseite bekommen. Also schauen wir uns die Bilder gehorchen an. Das ist einer meiner Lieblingsorte, um Bilder zu bekommen , um . Sie sind lizenzfrei, und Sie können sie für kommerzielle Zwecke verwenden. Mal sehen, ob wir Sonnenuntergänge für Sonnenuntergänge braun machen können. Dieser lässt sich nehmen, und es ist ein kostenloser Download für kommerzielle Nutzung, keine Namensnennung erforderlich. Also, das ist gut. Wir können es verwenden und kostenlos herunterladen. Und das ist eine gute Größe. Also nehmen wir einfach den Download und wir bekommen es. Aber ich habe das bereits heruntergeladen, und ich habe es auf meinem Desktop gelegt und in etwas umbenannt, das ein kürzerer Name war. Und was ich dann tun muss, ist, dass ich dieses Bild in den Ordner legen muss. Denken Sie daran, wir haben einen Ordner, der aufgerufen wird, ob die Teczar Index HTML oder Stil CSS und ob CSS wir brauchen, um diese in diesen Ordner eine Kopie ihrer und da ist es. Also, was wir jetzt tun, ist, dass wir zurück zum Code gehen, und wir gehen zurück zum Stil C s s und wir werden tun, statt dieses 'll. Wir werden ein Hintergrundbild machen und was wir brauchen, um Sie zu sehen, sind l und da es okay ist, und dann nehmen wir das raus, weil wir den Hintergrund nicht mehr benutzen werden, gehen, um den Hintergrund des Bildes zu verwenden. Das retten wir. Wir erfrischen das. Und jetzt haben wir unseren wunderbaren Boden, obwohl er, ähm, nicht weiß ist, wie wir es uns vorgestellt hatten. Also müssen wir ein paar Anpassungen vornehmen. Also lasst uns diese Anpassungen hier vornehmen. Die Anpassungen, die ich machen möchte, dass die Bodengröße seufzt 100%, was bedeutet, wir wollen, dass der Hintergrund die gesamte Webseite abdeckt. Minimale Höhe. 100% Das ist eine weitere Anpassung zu machen und mit 100%. Also wollten wir den gesamten Bildschirm füllen. Deshalb nehmen wir hier all diese CSS-Anpassungen vor. Also gehen wir zurück und wir sind frisch dort. Das ist jetzt haben wir das gesamte Bild auf der Seite. Ach, die andere Sache ist, dass das nicht kontrastiert wird, also müssen wir etwas damit machen. Die Art und Weise, wie wir den Textkontrast besser machen, ist dies Zunächst einmal wissen wir, dass wir den Header bereits mit seiner eigenen Klasse haben, so dass uns etwas Codierung erspart. Also gehen wir zurück zum Stil CSS und es gibt die Kopfzeile und es gibt etwas namens Farbe und die Farbe bedeutet die Farbe des Textes. Also lassen Sie uns das verwenden und machen die Farbe gleich weißem Doppelpunkt politicals weiß. Speichern Sie das. Gehen Sie zurück hier, aktualisieren Sie ihre Jetzt haben Sie einen bitteren Kontrast. Okay, wir machen es gut. Nehmen wir nun an, dass wir hier ein Bild hinzufügen möchten. Wir haben das Hintergrundbild. Was sagen wir, dass wir ein anderes Bild hinzufügen wollen, also wollen wir sagen, einen Sohn hinzufügen sagen, . Also habe ich schon einen Sohn gerettet. Also lassen Sie mich die Sonne setzen und ich habe das von Picks einen Köder zu Sun Tiantian. Da ist die Sonne. Jetzt, wo wir unser Sohn Bild haben, wo wollen wir es hinstellen? Nun, wir haben es in den Index html gesetzt. Wir stellen es nicht in den Hintergrund, weil es kein Hintergrund ist. Wir legen es in den Index html. Nehmen wir also an, wir wollen die Sonne über dem Header beenden. Also, hier ist, was wir tun. Wir sagen, Bildquelle entspricht dem Namen mit dem Bild Sohn PNG und es ist immer gut, einen Altar zu haben, was bedeutet, dass, wenn das Bild aus irgendeinem Grund nicht erscheint, wir einen Text an seine Stelle setzen müssen. Dieser Sohn schließt es ab, rettet es, geh zurück und stell es hier rein. Außer, dass es irgendwie groß ist. Also mal sehen, was wir dagegen tun können. Wir gehen hier zurück und wir setzen richtige Kühlen und das sind keine Pixel. Wir setzen Höhe von 50 Pixeln und wir wollen mit 50 Pixeln. Schlafen Sie mit Daddy rein, speichern Sie das, gehen Sie zurück und erfrischen Sie sich. Okay, es ist weit hier drüben. Wir können es hier rüber haben, wenn wir wollen. Das ist vollkommen in Ordnung, wenn Sie das Bild dort haben wollen. Aber lassen Sie es uns in die Mitte und es gibt eine wirklich einfache Möglichkeit, es in die Mitte zu setzen weil das heutige Wetter bereits zentriert ist. Wir können diese Zeile einfach hier verschieben und sie wird automatisch zentriert, da der Klassenkopf in allem im Div zentriert ist. Also tun Sie das und wir haben es. Also, jetzt haben wir eine schön aussehende Website 11. Schlussbemerkung: Jetzt haben wir einen kompletten Satz von Dateien, um unsere Website zu machen. Wir haben den Index HTML, was ist das? Wir haben unseren Stil CSS, was ist das? Und wir haben unser Javascript, das ist dies und alles, was Sie mit dem Java-Skript tun müssen , ist , Ihren eigenen Schlüssel einzugeben, und eine Reihe von Anführungszeichen danach und einen Semikolon danach zu setzen und es ist fertig, Sie können die Stadt ändern. Wenn Sie in einer anderen Stadt wohnen und Ihre persönliche Wettervorhersage wünschen, können Sie Denver sagen, speichern. Geh zurück und hol dir das Wetter für Denver. Wenn du in einer Stadt wie San Francisco lebst, muss ich einen Plus-Sand plus Freund setzen. Ich denke, das und setzen Sie das da, also haben wir das aktuelle Wetter in San Francisco, um es zurück zu bringen. Chicago hier tun, dass, um Ihnen zu zeigen, dass, wenn Sie Dinge wie die Feuchtigkeit oder die e um, Zeit oder was auch immer die Wolken hinzufügen möchten e um, , es ist alles hier, und Sie können einfach auf diese klicken und fügen Sie die's und auch zahnartig gehen. Offenes Wetter AP. Ich finde heraus, in welchem Format sie ausgestellt sind. Diejenigen, wenn du willst. Es gibt also viele Dinge, die Sie hier tun können. Sie können die Stile ändern, weil Sie CSS jetzt wissen, können Sie den Hintergrund ändern. Sie können die Bilder ändern, die Schriftarten ändern. Wenn Sie eine Seite machen möchten, die direkt im Web statt nur simuliert Seite geht, können Sie eine Hosting-Site erhalten, verwenden Sie ihre sehen Panel, und alles, was Sie tun müssten, ist, alle diese Dateien zu kopieren, diese drei Dateien und diese beiden Bilder direkt in dort. Und Sie würden Ihre eigene persönliche Webseite haben, die Ihr eigenes aktuelles Wetter für Ihre eigene Stadt hat . Um, damit Sie dies zu Ihrem Projekt machen können, können Sie Ihr Projekt posten, Sie können Bewertungen schreiben und Sie können meinem Profil folgen. Also hast du jetzt alles, um alles zusammenzufassen. Und ich wünsche Ihnen viel Glück. Und ich danke Ihnen für Ihre Aufmerksamkeit. Ok,