Javascript Spaß: Eine Running Tracker App erstellen!

1. Willkommen beim Kurs!: Hey, willkommen in dieser Klasse. Wenn Sie ein Webentwicklungsanfänger sind, kommen Sie schon, also springen Sie einfach ein und bauen Sie einige lustige Projekte. Du bist an der richtigen Stelle gekommen. Die Idee hinter dieser Serie ist es, Ihnen zu zeigen, was Sie mit normalem HTML, CSS und JavaScript tun können . Wenn es darum geht, irgendwelche Frameworks, irgendwelche Boilerplate, Bibliotheken oder Vorlagen zu verwenden, werden wir stattdessen alles komplett von Grund auf neu erstellen, Schritt für Schritt, um Ihnen zu zeigen, wie diese kostenlosen Technologien alle arbeiten zusammen. Das Projekt für diese Klasse ist eine laufende [unhörbare] Anwendung, in der der Benutzer protokollieren kann, wie viele Meilen er täglich ausgeführt hat. Wir haben ein Eingabefeld ganz oben, wo wir die Anzahl der Meilen protokollieren können und diese werden als die letzten sieben Tage Werte aufgezeichnet werden . Wenn Sie eine zweite hinzufügen, wird diese dann auf der rechten Seite hinzugefügt und es speichert die letzten sieben Werte, die wir eingeben. Alle diese Werte werden dann direkt unten gespeichert. Wir können die Gesamtzahl der Meilen sehen. Diese Summe wird dann durch die Anzahl der Einträge geteilt, um uns einen Durchschnitt zu geben, zusammen mit dem, was auf dem höchsten Eintrag ist, den der Benutzer auch für diese Woche eingegeben hat. Zusätzlich zu diesem direkt unten, werden wir auch einen Fortschrittskreis hinzufügen, in dem wir ein wöchentliches Ziel hinzufügen können, und dann wird dieser Fortschrittskreis für jeden Wert aktualisiert, den der Benutzer hinzufügt. Dies wird uns ein schönes visuelles Feedback darüber geben, wie die Woche auch läuft. Dieses Projekt ist komplett von Grund auf neu erstellt. Wir werden HTML für die Benutzeroberfläche verwenden, wir werden benutzerdefinierte Schriftart hinzufügen, wir werden Styling hinzufügen, wir werden alles über die JavaScript-Grundlagen wie Funktionen lernen, Variablen und Konstanten erstellen, wir werden mit Arrays arbeiten, wir werden Berechnungen erstellen, arbeiten wir mit dem DOM, wir arbeiten mit Ereignissen, bedingten Anweisungen und allen Grundlagen, die Sie in JavaScript benötigen. Ihr Fortschrittskreis wird auch vollständig kundenspezifisch sein. Wir werden JavaScript und auch CSS verwenden, um dies auf dem neuesten Stand zu halten. Nun, danke, dass du diesen Kurs überprüft hast und ich sehe dich in der ersten Lektion. 2. Teile deine Arbeit auf Skillshare!: Wenn Sie an einem Kurs teilnehmen, ist es wirklich wichtig, dass Sie sich nicht angewöhnen diesen Kurs zu verfolgen , nur um eine weitere Vorlesung abzuhaken. Nehmen Sie sich Zeit, um jede Lektion zu bearbeiten. Überprüfen Sie den Code, den Sie schreiben, und überlegen Sie, wie Sie diese Lösungen selbst angehen könnten . Vor diesem Hintergrund ist dieser Kurs projektbezogen und bietet Ihnen die Möglichkeit, wirklich etwas Persönliches und Einzigartiges zu schaffen. Sie müssen sich nicht zu sehr verirren und vom Unterricht ablenken . Sie können sogar einen Schritt zurücktreten, nachdem Sie den Kurs beendet haben, zurückkommen und anschließend einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das, was du im Unterricht gelernt hast, praktisch anzuwenden. Denken Sie auch daran, Ihr Projekt auch hier auf Skillshare zu teilen, und ich werde es mir nicht nur ansehen, sondern es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, wo du nicht nur dein Projekt hochladen kannst, sondern auch andere Klassenprojekte sehen kannst. In diesem Sinne freue ich mich darauf zu sehen, was Sie erstellen und hier auf Skillshare hochladen. 3. So erstellst du die Benutzeroberfläche: Dies ist ein Blick auf das, was wir in diesem kommenden Satz von Videos bauen werden. Wir werden eine Running Track-Anwendung erstellen, in der sich der Benutzer jeden Tag anmelden kann, wie viele Meilen er gelaufen ist. Zum Beispiel könnten wir einen Wert für heute wie 1.9 hinzufügen, und dieser wird dann am Ende dieses Arrays hinzugefügt. Jeden Tag können wir einen Wert hinzufügen, und wir werden die Werte für die letzten sieben Tage aufzeichnen. Jedes Mal, wenn ich Wert hinzufüge, werden wir einen dieser Platzhalter ersetzen, fügen wir den neuen in hier hinzu, und diese alle stiegen hier von der Kante ab, also haben wir die letzten sieben Tage bekommen. nach unten scrollen, haben wir einen Bereich, in dem wir alle unsere Statistiken überprüfen können. Also nur die Summe, die in dieser speziellen Woche laufen wird, die durchschnittliche Entfernung und auch der höchste aufgezeichnete Wert für diese spezielle Woche. Ganz untenkönnen wir auch ein Ziel innerhalb des Codes hinzufügen, können wir auch ein Ziel innerhalb des Codes hinzufügen wo wir sagen können, wie viele Meilen wir für diese bestimmte Woche laufen wollen. Dies wird dann jedes Mal aktualisiert, wenn ich einen neuen Wert hinzufüge, und dann sehen wir diesen schönen Fortschrittskreis unten unten unten. Fügen wir den neuen Wert hinzu, und dies wird dann zu unserer Gesamtsumme hinzugefügt und auch den Fortschrittskreis aktualisiert. Wir werden in diesem Video beginnen, indem wir die Benutzeroberfläche mit HTML erstellen, und um dies zu tun, können wir auch dieses Bild oben verwenden, die in SVG ist. Sie können natürlich Ihre eigenen finden, aber wenn Sie dasselbe verwenden möchten, das ich im Kurs verwende, gehen Sie zu diesem Link auf GitHub, der chrisdixon161/fun-javascript-projects.com ist. In diesem Repository finden Sie den gesamten fertigen Code für jedes dieser Projekte. Wenn du in den Running Tracker gehst, siehst du auch eine runner.svg. Um dies innerhalb unseres Projekts zu verwenden, müssen wir auf das Code-Symbol klicken, und das ist der Code, den wir gerade hier brauchen. Wir werden nun damit beginnen, unser Projekt zu erstellen, und wir werden sehr bald darauf zurückkommen. Gehen wir rüber zum Desktop. Ich werde einen neuen Ordner erstellen. Ich werde das den Running-Tracker nennen. Öffnen Sie Visual Studio-Code und dann können wir über unsere Projekte ziehen. Das erste, was wir brauchen, ist eine index.html Seite zu erstellen, dies wird für unsere Benutzeroberfläche sein. Lassen Sie uns eine neue Datei innerhalb unseres Ordners erstellen, dies ist die index.html. Wenn Sie Visual Studio-Code verwenden, können Sie die Verknüpfung verwenden, die html:5 ist, und drücken Sie die Eingabetaste. Dies gibt uns dann unsere Ansatzpunkte für unsere HTML-Seite. Ich kann dies auch im Browser öffnen, indem ich auf die Registerkarte , den Pfad kopieren und dann in den Browser einfügen. Wie immer können Sie auf die Datei index.html doppelklicken, die sich auch in unserem Projektordner befindet. von ganz oben arbeiten, werden wir diese SVG gleich zu Beginn einbeziehen. Um dies zu tun, werde ich einen div-Abschnitt erstellen, die Klasse des Logos haben wird. Innerhalb dieses Abschnitts können wir nun unsere SVG nutzen. Ich kopiere den Code von GitHub, füge ihn ein. Nach unten bewegen; das nächste, was wir für unser Projekt brauchen, ist der Eingabe-Abschnitt. Wir werden dies mit einem Etikett und dann eine Zahleneingabe erstellen, und dann eine Schaltfläche, um dieses Formular zu senden. unter unserem Logobereich oder dem Wrapper div, erstellen Sie unser Formular. Wir brauchen auch nicht die Aktion, wir werden mit einem Label beginnen. Dieses Label wird für eine Eingabe mit der ID des Eintrags sein, und dann wird der Text die Anzahl der Meilen heute sein. Sie können dies auch ändern, um Kilometer oder einen anderen Wert, den Sie verwenden möchten, das ist auch in Ordnung und es wird sich nicht auf diese Anwendung auswirken. Ein Break-Tag, setzen Sie dies auf eine neue Zeile. Dann unsere Eingabe, die den Typ der Zahl haben wird, die ID des Eintrags, die unserem Label entsprechen wird, und dann ein Schritt-Attribut von 0.1, was bedeutet, dass unsere Werte innerhalb der Zahleneingänge um den Wert von 0.1 erhöhen. Danach wird ein neues Break-Tag, so dass wir dann unsere Submit-Button hinzufügen können. Die Schaltfläche benötigt die Art der Absendung, die dies ermöglicht, unser Formular zu senden. Im Moment haben wir kein JavaScript an Ort und Stelle, um die Zahlen zu nutzen, die der Benutzer eingibt, aber im um die Zahlen zu nutzen, die der Benutzer eingibt, Moment können wir diese Bindestriche als Platzhalterwerte hinzufügen. Wir werden dies tun, indem wir einen Wrapper für den Abschnitt erstellen, eine ungeordnete Liste erstellen, und jeder dieser Werte wird ein Listenelement sein. Unter unserer Form, eine horizontale Regel, nur um den Abschnitt zu teilen. Die Abschnittselemente auf der Klasse, so können wir dies innerhalb des CSS verwenden wird die EntriesWrapper sein. Der Titel der letzten sieben Tage. Wie wir gerade erwähnt haben, und ungeordnete Listen, um alle diese Werte zu speichern, die auch eine ID haben können, so dass wir dies innerhalb von JavaScript zielen können. Denn jetzt wird unser Platzhalterwert einfach ein Bindestrich sein. Da wir mit den letzten sieben Tagen arbeiten, werde ich dies duplizieren, um sieben Listenelemente zu bewerten, und lassen Sie uns das überprüfen. Als nächstes haben wir einen Datenabschnitt, der alle Statistiken für unsere Anwendung sein wird. Wir werden einen Abschnitt und drei separate divs erstellen, und jedes dieser divs wird einen Titel und auch einen Wert haben. Wir können dies auch in einem neuen Abschnitt in unserem HTML schreiben. Ein Abschnitt kann eine Klasse von Daten haben, und dann unser erstes div für unseren gesamten Abschnitt. Aber jeder dieser Titel auf der linken Seite werde ich dies in ein p Elemente wickeln, und dann eine Spanne über auf der rechten Seite. Das erste p ist für den Text der Summe und dann einen Doppelpunkt. Die erste Spanne, die Sie sogar leben können, ist leer oder in einen Platzhalterwert gesetzt, dies wird auch eine ID benötigen, also werden wir dies in JavaScript aktualisieren. Nach diesem div können wir uns dann auf unseren durchschnittlichen Entfernungsabschnitt konzentrieren. Neues div, die p-Elemente und der Text für dieses ist die durchschnittliche Entfernung. Die Spanne für diesen wird auch eine eindeutige ID haben, die der Durchschnitt sein wird. Auch hier können Sie eine Platzhalternummer hinzufügen, dies ist jedoch völlig optional. Der dritte Abschnitt ist für die wöchentliche High-Value. Unsere p Elemente, wir gingen diese Wochen hoch. Unsere Spanne mit der ID, die hoch sein wird, und dann ein Standardwert. Werfen wir einen Blick auf das. Der größte Teil der Benutzeroberfläche ist jetzt vorhanden, aber wir müssen nur einen Blick auf die Unterseite werfen und dann unseren Fortschrittskreis hinzufügen. All dieser Fortschrittskreis wird vom JavaScript und auch vom CSS abhängig sein, das wir in zukünftigen Videos hinzufügen werden, aber jetzt können wir ein Label und auch einen div Abschnitt erstellen, so dass wir dies später im Kurs verwenden können. Der letzte Abschnitt unten ganz unten, können Sie eine Klasse von Fortschritt hinzufügen. Dann geht unser Level 3 oben an der Spitze, was wöchentlich Ziel ist. Dieser wöchentliche Zielabschnitt wird auch zwei separate Werte haben. Wir haben die Gesamtanzahl der Meilen für diese spezielle Woche und dann auch einen Schrägstrich gefolgt vom Ziel. Um dies zu tun, werde ich zwei separate Span-Elemente hinzufügen. Die erste, dies wird eine ID der Fortschrittssumme haben, einen Platzhalterwert von Null nach der Spanne, fügen Sie einen Schrägstrich hinzu. Dann ein zweites span Element, lassen Sie uns einen Standardwert von 25 hinzufügen, und auch eine ID, die gleich Ziel sein wird. Nach diesen beiden Spannweiten müssen wir auch den Text von Meilen direkt am Ende nach unserer letzten Spanne hinzufügen. Lassen Sie uns dies auf ihre eigene Zeile hinzufügen, damit es besser lesbar ist, da gehen wir. Stellen Sie außerdem sicher, dass all dies in der Überschrift der Ebene 3 enthalten ist, speichern Sie den Browser und laden Sie ihn neu. Wir haben eine Überschrift, und das allerletzte, was unter der Überschrift der Ebene drei zu tun ist, ist, ein neues div hinzuzufügen, das für unseren Fortschrittskreis sein wird. Wir können dies nur mit einer Klasse von Fortschrittskreis Wrapper hinzufügen. Wie bereits erwähnt, müssen wir nichts anderes mit diesem Abschnitt tun, dies wird einfach ein Platzhalter-div sein, wir werden dies später mit CSS und auch JavaScript beschäftigen. Denn jetzt nennen wir dieses Video fertig, unsere Benutzeroberfläche ist jetzt vorhanden, und im nächsten Video werden wir es mit CSS viel schöner aussehen lassen. 4. Schriftarten und Design: Lassen Sie uns nun diese Anwendung ein wenig schöner machen, indem Sie etwas CSS verwenden und auch eine Google-Schriftart hinzufügen. Das erste, was, wenn wir die Seitenleiste öffnen und in unser Projekt gehen, lassen Sie uns die styles.css erstellen und dann diese im Kopf unserer index.html verknüpfen. Ich habe bereits eine Schriftart aus Google Fonts ausgewählt, aber Sie können eine andere Schriftart auswählen, die Sie bevorzugen. Dies ist der, den ich verwenden werde , der auf der Homepage ist, aber Sie können oben nach einem anderen Wert wählen oder suchen. Um dies einzubeziehen, genau wie das frühere Projekt, lassen Sie uns darauf klicken und dann können wir eine der Schriftgewichtungen auswählen. Ich werde für die 300, die 500 und eine kühne 700-Version gehen. Einbetten, und dann lassen Sie uns diesen Link kopieren, den Sie in unserer Index-Seite platzieren können, direkt über unserem Stylesheet, und dann wird unsere Schriftfamilie in unserer styles.css platziert. Wir können dies in der Wurzel unter dem HTML-Element hinzufügen. Fügen Sie dies in und wir können auch eine Root-Schriftgröße auswählen. Ich werde für 10 Pixel gehen. Sie können auch eine Hintergrundfarbe festlegen. Dies wird für den Abschnitt hinter unseren Inhalten sein. Wenn wir den Browser auf der endgültigen Version dehnen, ist dies die Farbe, die wir außerhalb des Körperabschnitts sehen. Die Lautstärke, die ich verwenden werde, ist 2d3740. Lassen Sie uns überprüfen, dass dies funktioniert und unser Stylesheet korrekt verknüpft ist. Laden Sie dies neu und wir sehen die Hintergrundfarbe, wir sehen eine andere Schriftart und auch die Schriftgröße hat wirksam. Der Grund, warum wir all diesen Hintergrund sehen, anstatt ihn nur auf der Außenseite, ist, weil wir noch keine Farbe für unseren Körperbereich festgelegt haben. Lass uns das jetzt machen. Zunächst einmal einige Polsterung, die Ihnen einige Abstände um unsere Ränder von 1rem geben wird , das ist 10 Pixel, dann einen Hintergrund für den Abschnitt. Die Lautstärke, die ich verwenden werde, ist 1c262f. Die Schrift ist ein wenig schwer zu lesen mit diesem dunklen Hintergrund, so dass wir auch die Schriftfarbe ändern können. Wir können wieder einen Hex-Wert verwenden, genau wie wir oben verwendet haben, oder wir können auch eine RGB-Farbe verwenden, wählen Sie einfach einen unserer Werte. Eine RGB-Farbe ist eine Möglichkeit, Rot-, Grün- und Blauwerte zu kombinieren , um eine bestimmte Farbe zu erhalten. Ich werde für einen roten Wert von 230, 225 für das Grün und 225 für das Blau gehen. Dies wird uns diese hellweiße Farbe geben, die für alle unsere Körperabschnitte wirksam wird. Um mehr über diese speziellen Farbwerte zu erfahren, können wir eine Suche nach HTML-Farbauswahl durchführen. Es gibt verschiedene Farbauswahl, die Sie online sehen können, oder diese Standardauswahl, die mit der Suchmaschine kommt. Wir können für jeden Farbton sehen, den wir auswählen, einen roten, grünen und blauen Wert haben, und auch den äquivalenten Hex-Wert, den wir gerade oben gesehen haben, zusammen mit einigen verschiedenen Werten hier auch. Dies ist nur ein paar verschiedene Möglichkeiten, mit denen Sie Farbwerte auswählen können. Als nächstes zurück in den Körperbereich, die Breite von 90 Prozent, nur um die Gesamtbreite des Projekts zu beschränken, und auch diese mit Marge Null Auto zentrieren. Denken Sie daran, wenn wir diesen automatischen Wert nicht hatten, wird dieser verschoben. Lasst uns das einfach überprüfen. Dies wird auf der linken Seite des Projekts verschoben. Aber jetzt mit dem Autowert links und rechts hat sich dieser nun auf beiden Seiten gleichermaßen aufgeteilt. Nach dem Körper lässt sich für den Logobereich gehen , der ganz oben ist. Wir können dies mit Text-Align-Zentrum Sensor. Die aktuelle Füllfarbe für unser Bild oben fällt derzeit nicht zu gut auf diesem dunkleren Hintergrund. Wie wir in der endgültigen Version sehen, können wir auch das ändern. Wir können dies auch im CSS anvisieren, oder wir können dies in unserer index.html tun. Der Weg, dies innerhalb unseres SVG-Elements zu tun, besteht darin, einen Blick auf den Pfadabschnitt zu werfen. Jeder dieser Abschnitte hat ein Füllattribut, das wir ändern können. Ich möchte dies ändern, um einen Wert von Grau zu sein, aktualisieren, und jetzt ist der Kopfabschnitt grau, und wir können das gleiche für den Körperabschnitt tun. Zurück zu unserem Stylesheet, wir gehen jetzt nach unten zum Formularabschnitt, der der Wrapper für unser Label, die Formulareingaben und auch die Submit-Button sein wird . Alles, was wir für diesen Wrapper tun müssen, ist, die Textzeile in die Mitte zu setzen. Wir müssen das Etikett etwas größer machen, also lasst uns das anvisieren. Die Schriftgröße, ich möchte für 1.8rems gehen, was 18 Pixel bis zur Zahleneingabe entspricht. Zuerst wählen Sie alle Formulareingaben, dann innerhalb der eckigen Klammern, können wir unsere bestimmte Art von Zahl auswählen. Nicht jede Art von Zahl ist für dieses Projekt nicht besonders wichtig , da wir nicht mehrere Eingaben haben, aber auf diese Weise sind wir abgedeckt vier ein Projekt sollte zu einem späteren Zeitpunkt wachsen. Standardmäßig erbt die Formulareingabe nicht den Rest der Schriftfamilie. Wir können sehen, dass dies eine völlig andere Schriftart ist als der Rest des Projekts. Schriftfamilie, wir können das so einstellen, dass es erben wird. Erben Sie nun den Schriftstil aus dem Rest des Projekts. Der Hintergrund, um die Dinge konsistent zu halten. Lassen Sie uns auch die gleiche RGB-Farbe greifen, die wir für den helleren Text verwendet haben. Die Breite von 80 Prozent. Einige Abstände oben und unten, 1rem und dann ein Wert von Null auf der linken und rechten Seite. Um die tatsächliche Formulareingabe auch größer zu machen, können wir etwas Polsterung innerhalb hinzufügen. 0.8rems oben und unten und dann Null links und rechts. Entfernen Sie den Standardrahmen mit Rahmen none, eine Schriftgröße, um dies ein wenig größer zu machen, wenn Sie Eingaben oder Wert verwenden. Lassen Sie uns für unsere 1.2rems gehen und auch die Textausrichtung zentriert sein. Nach unten bewegen, das nächste, was wir haben, ist dieses Formular senden Button. Um dies genau wie die fertige Version zu machen, werden wir eine Hintergrundfarbe hinzufügen. Wir werden einen 50 Prozent Grenzradius hinzufügen, um diese vollständig abgerundet zu machen, zusammen mit der Einstellung der Breite und Höhe. Lasst uns unser unteres Element anvisieren. Auch hier müssen wir die Schriftfamilie erben. Die Schriftgröße ein wenig größer und auch das Schriftgewicht wird kühner sein. Um dies zu einem abgerundeten Boden zu machen, werden wir auch eine Breite und auch eine gleiche Höhe festlegen. Ich werde für acht Pixel und auch einen passenden Wert für die Höhe gehen. Mal sehen, wie dies im Browser aussieht. Dies ist die gleiche Breite und Höhe, aber wir müssen auch die Ecken mit dem Randradius runden und auch alle Standardrahmen entfernen. Beginnen wir mit Grenze none und dann mit dem Grenzradius, der einen Wert von 50 Prozent hat. Um diesem die blaue Farbe zu geben, die wir in der endgültigen Version sehen, müssen wir die Hintergrundfarbe einstellen. Ich möchte für einen Hex-Wert gehen, der gleich 0ad9ff ist, gefolgt von einigen Randwerten. Ganz oben, 0,5rems oben, Null auf der rechten Seite, 1rem auf der Unterseite und dann Null auf der linken Seite. Sie sich auf unsere Werte der letzten sieben Tage bewegen, ist dies innerhalb einer anderen Liste. Entfernen Sie die Standardauffüllung mit dem Wert Null, und wir müssen auch die Aufzählungszeichen des Listenelements entfernen, und dann können wir diese so einstellen, dass sie über die Seite gehen, indem Sie den Anzeigetyp auf flex setzen. Entfernen Sie die Aufzählungszeichen mit dem List-Stil, um keine zu sein , und lassen Sie uns mit den Bindestrichen, die wir für jedes Listenelement haben. einen Blick auf die fertige Version werfen, haben wir auch einige gleiche Abstände zwischen jedem dieser Elemente, und wir können dies tun, indem wir den Inhalt rechtfertigen, um Abstand zwischen haben. Auf der Liste ist ein Schritt in die richtige Richtung für das Styling des Abschnitts. Das nächste, was wir tun müssen, ist, jeden unserer Listenelemente anzusprechen. Beginnend mit den Grenzen hebt sich jedes dieser Gegenstände mehr hervor. Lassen Sie uns für einen Wert von einem Pixel, eine durchgezogene Linie und dann einige Polsterung innerhalb dieser Listenelemente gehen, um einige Abstände hinzuzufügen. Ein Rem oben und unten und 1,5 links und rechts. Lassen Sie uns in diesem Abschnitt die Überschrift der Ebene drei anvisieren, die Schriftgröße erhöhen und auch etwas Padding hinzufügen, um ihm einen gewissen Abstand zu geben , genau wie in der endgültigen Version. Um dies oft in der index.html zu tun, haben wir einen Abschnitt mit der Klasse der Einträge Wrapper. Lasst uns das ins Visier nehmen. Einige können mit unserer Überschrift der Ebene 3 arbeiten und auch einige Abstände zu unseren Abschnitten hinzufügen. Dies ist eine Klasse, also brauchen wir die Punkte. Zuallererst können wir etwas Padding hinzufügen, um dies einen Abstand oben und unten von 1rem zu geben , Null auf der linken und rechten Seite, und dann auch die Standardschriftgröße auf 1.6rems. Weiter oben die Rubrik der Stufe 3, die für den Titel der letzten sieben Tage ist. Wir können jeden Standard-Rand entfernen, den der Browser bereitstellt, und Sie können sehen, dass dies den Standard-Rand ganz oben in unserer Überschrift entfernt. Wir können dies in die Mitte schieben, mit text-align. Dies ist auch ziemlich fett, also lassen Sie uns das Schriftgewicht ändern, um leichter zu sein. Im Folgenden haben wir alle weiteren Informationen für unsere App. Wir haben die Summe, die Entfernungen und auch die wöchentliche Höhe. Dies ist alles in einen Abschnitt mit der Klasse der Daten eingeschlossen. Gehen wir runter, lassen Sie uns das anvisieren. Zuallererst können wir die Standardschriftgröße auf ein wenig größer einstellen, also 1.4rems. Jeder unserer Abschnitte ist innerhalb eines div zwei umgeben, so dass wir ziel.data und dann div. Beginnen wir mit der Hintergrundfarbe für jeden unserer Abschnitte. Der Wert, den ich verwenden werde, wird 141c22 sein. Der Anzeigetyp wird gleich flex sein. Wir können die Flexbox verwenden, um unser Etikett und auch den Wert auf der gleichen Linie zu zentrieren, zusammen mit einem gewissen Abstand dazwischen. Wir platzieren diese zuerst auf ihre eigene Zeile mit einem Zeilenpunktcenter, und jetzt ist es am Abstand dazwischen, können wir Rechtfertigungsinhalte verwenden. Dies schiebt nun alle unsere Werte nach rechts. Das nächste, was zu tun ist, ist etwas Padding hinzuzufügen. Diese sind nicht gegen den linken und rechten Rand und auch einen gewissen Rand zur Außenseite unseres div, so dass alle drei Abschnitte etwas Abstand dazwischen haben. Zuallererst, der Rand oben und unten, werde ich 0.5rems, null auf der linken und rechten Seite unddann etwas Polsterung innerhalb unserer divs verwenden null auf der linken und rechten Seite und . Wir haben bereits einige Abstände oben und unten, also lassen Sie uns einfach einige Abstände auf der linken und rechten Seite hinzufügen. Null und dann 1rem. Dies ist jetzt der Großteil des Stylings für unsere Anwendung. Wir müssen nur den Abschnitt unten später anvisieren , wenn wir den Fortschrittskreis hinzufügen. Aber jetzt wollen wir zum nächsten Video gehen und etwas JavaScript zu unserem Projekt hinzufügen, damit wir unsere Einträge aktualisieren können. 5. Neue Einträge hinzufügen: Das Styling für unser Projekt ist so ziemlich jetzt an Ort und Stelle, es gibt nur ein wenig, um später wieder zu kommen. Wenn wir diesen Abschnitt unten ganz unten hinzufügen. Nun, im Moment werden wir jedoch fortfahren, um unsere Skriptdatei hinzuzufügen , um etwas JavaScript einzuführen. Insbesondere in diesem Video werden wir die Eingaben des Benutzers erfassen und dann unsere letzten sieben Tage aktualisieren. Das erste, was wir innerhalb unseres Projekts tun müssen, ist, eine neue Datei zu erstellen, die diese script.js sein wird. Das erste, was zu tun ist, ist, dies ganz unten zu verknüpfen, knapp über unserer Nähe und Körper Abschnitt. Wir können dies mit den Skriptelementen verknüpfen. Dies ist auch im [unhörbaren] Projekt neben unserem Index. Wir können dies einfach mit script.js referenzieren. Lassen Sie uns kurz darüber nachdenken, was wir hier tun wollen. Wir haben eine Formulareingabe nur hier, wo der Benutzer den Wert hinzufügen wird. Wir wollen auf alle Formulare Einreichungen hören. Sobald dies geschieht, wollen wir keine Funktion ausführen. Lassen Sie uns mit diesem in dieser script.js beginnen. Das erste, was zu tun ist, einen Verweis auf unser Formular zu greifen. Für diesen Formularabschnitt müssen wir nun auf das Submit-Ereignis hören. Das Submit-Ereignis wird jedes Mal aufgerufen, wenn der Benutzer in dieser Eingabe eingeben oder auf unseren Submit-Button klickt. Lassen Sie uns im Skript einen Verweis auf dieses Formular erstellen. Konst-Form. Alle Formularreferenz bleibt immer gleich. Dies kann als Konstante innerhalb eines Ziels, des vollständigen Dokuments, verwendet werden. Dann können wir den Abfrage-Selektor verwenden. Abfrageselektor ist eine Möglichkeit, HTML-Elemente zu erfassen, und wir können jedes der Elemente in unserem HTML erfassen. Die Art und Weise, wie wir dies tun, ist genau die gleiche wie unsere Stylesheets. Wenn wir irgendwelche Elemente anvisieren, verweisen wir auf die Elemente durch den Namen. Wenn es sich um eine Klasse handelt, verwenden wir den Punkt, gefolgt vom Klassennamen. Wenn es eine ID wäre, würden wir das Hash-Präfix verwenden. Da unsere Form, ist einfach ein Formelement. Wir können das anvisieren. Dann möchten wir einen Ereignis-Listener hinzufügen. den Ereignissen, auf die Sie warten möchten, handelt es sich um das Submit-Ereignis. Dann wollen wir eine Funktion ausführen. Wir fügen den Namen unserer Funktion als zweiten Wert durch ein Komma getrennt. Der Funktionsname wird ein Handle senden sein. Wir haben diese Handle Submit-Funktion noch nicht erstellt. Direkt über unserem Event-Listener können wir dies jetzt erstellen. Handlesubmit wird die Ereignisinformationen aufnehmen , die an die Funktion jedes Mal übergeben werden, wenn das Formular gesendet wurde. Das erste, was wir tun möchten, ist, diese Ereignisinformationen zu greifen und dann default aufzurufen. Standardwerte verhindern das Standardverhalten der Formularübermittlung, die den Browser neu laden soll. Für diesen Anwendungsfall möchten wir den Browser nicht aktualisieren , da alle unsere Informationen verloren gehen. Stattdessen wollen wir hier tatsächlich die Benutzereingaben aus diesem Feld erfassen. Lassen Sie uns wieder QuerySelector verwenden. Dies wird unsere Formulareingabe zu greifen. Wir könnten dies entweder mit dem Eingabennamen greifen oder auch die ID des Eintrags kaufen. So Document.QuerySelector. Genau wie bei CSS zielen wir dies mit dem Hash und dann dem ID-Namen ab. Wir können dann den Wert erfassen und diesen auch innerhalb einer Variablen oder einer Konstante speichern. Wenn Sie sich von Anfang an erinnern, als wir den Tip Rechner erstellt haben, eines der Probleme, die wir hatten, als wir die vom Benutzer übermittelten Informationen ergriffen , der Wert kam in Form von String. Da wir mit Zahlen arbeiten, möchten wir dies in einen Zahlentyp konvertieren. Das könnte das sein, ich werde diesen String-Wert in Zahl konvertieren dies in die JavaScript-Zahlenfunktion umgehen. Bevor wir weitermachen, lassen Sie uns ein Konsolenprotokoll mit dem Wert des Eintrags machen und überprüfen, dass alles gut funktioniert. Klicken Sie mit der rechten Maustaste auf Inspect und wir können in die Konsole gehen. Klicken Sie auf die Registerkarte „Konsole“. Lassen Sie uns hier einige Zufallszahlen hinzufügen. Also 1.2, 6.4, was bedeutet, dass wir jetzt erfolgreich auf ein Submit-Ereignis hören und auch die Eingabe des Benutzers erfassen. Es gibt auch ein paar Möglichkeiten, wie wir dies verbessern können, wenn wir zu unserer Eingabe gehen und den Wert von Null eingeben, wir sehen immer noch, dass der Wert von Null immer noch protokolliert wird. Dies könnte zu einem Problem führen, wenn der Benutzer versehentlich eingegeben wurde , bevor er seinen Wert eingegeben hat. Auch jedes Mal, wenn ein Wert hinzugefügt wird, möchten wir dieses Formular auch löschen, damit es für den nächsten Eintrag verfügbar ist. Zurück zu unserer Funktion können wir eine if-Anweisung verwenden, um zu überprüfen, ob kein Eintrag gemacht wurde. Verwenden Sie das Ausrufezeichen. Dies bedeutet, wenn kein Eintrag vorhanden ist oder der Wert falsch ist. Dann können wir das Schlüsselwort return verwenden, um aus unserer Funktion auszubrechen , da kein Wert eingegeben wurde. Das nächste, was zu tun ist, ist, die Formulareingabe jedes Mal zu löschen, wenn ein Wert gesendet wurde. Lasst uns zuerst alle Form greifen. So Document.QuerySelector. Wir können uns unser Formular schnappen. Dann können wir die Reset-Methode aufrufen, die alle unsere Formulareingaben löschen wird. Geben Sie den Wert ein. Jetzt, wenn wir einen Wert eingeben und Enter drücken, Ich werde die Eingabe wird gelöscht. Damit wir uns darum kümmern, ist das nächste, was wir tun möchten, tatsächlich alle Benutzerwerte innerhalb eines Arrays zu speichern. Ich werde unser Array namens Einträge initialisieren und dies auf ein leeres Array setzen. Beachten Sie hier, dass wir das Schlüsselwort let anstelle const verwenden , weil wir die Werte von Einträgen aktualisieren möchten. Wenn dies gesagt wurde, const zu sein, werden wir dieses Array nicht erhalten können, indem wir neue Werte schieben. Nun ist der Weg, um tatsächlich einen neuen Wert innerhalb unseres leeren Arrays hinzuzufügen , das zuerst durch den Variablennamen von Einträgen zu zielen. Dann hat ein Array eine Push-Methode, die es uns ermöglicht, einen neuen Wert an das Ende unseres Arrays zu schieben. Der Wert, den Sie schieben möchten, ist unser Eintrag , der aus unserer Benutzereingabe erfasst wurde. Lassen Sie uns dies mit einem Konsolenprotokoll testen. Wir können nun den Wert der Einträge ausgeben, die unser Array ist. Nachladen. Fügen Sie hier ein paar Werte ein, mal sehen, was passiert. Dadurch wird nun unser Array mit den Benutzereingaben aktualisiert. dies alles jetzt funktioniert, lassen Sie uns unser Konsolenprotokoll entfernen und wir könnten weiter mehr Code zu dieser HandleSubmit-Methode hinzufügen. Aber um dies sauberer zu halten, werde ich eine neue Funktion erstellen, die unsere Benutzeroberfläche aktualisieren wird. Jedes dieser Array-Elemente wird an das Ende unserer ungeordneten Liste verschoben werden. Lassen Sie uns eine neue Funktion über die ganz oben erstellen, und ich werde dieses AddNewEntry aufrufen. Ich werde diese Funktion auch jedes Mal aufrufen, wenn der Benutzer eine neue Eingabe eingibt, auch den Wert des Eintrags analysiert. Dieser Eintragswert wird dann innerhalb unserer Funktion empfangen, und ich werde diesen NewEntry aufrufen, aber der Wert wird genau derselbe sein. Lassen Sie uns zunächst ein Konsolenprotokoll mit dem Wert des NewEntry machen, nur um zu überprüfen dass wir dies korrekt in unserer Funktion erhalten. Fügen Sie einen Wert hinzu. Ok. Gut. Jetzt hat unsere Funktion Zugriff auf jede dieser Benutzereingaben. Eines der großartigen Dinge über die Verwendung von JavaScript ist, dass wir es auch verwenden können , um neue Elemente in unserem DOM zu erstellen. Wenn wir zu unserer index.html gehen, haben wir bisher alle diese Elemente innerhalb unserer HTML-Seite erstellt. Aber wir können auch JavaScript verwenden, um diese zu erstellen. Die Art und Weise, wie wir dies in dieser Funktion verwenden, ist, dass wir diese ungeordnete Liste anvisieren, und dann für jede neue Nummer, die der Benutzer hinzufügt, werden wir dann ein neues Listenelement erstellen. Der Weg dazu besteht darin, Document.CreateElement zu verwenden. Beim Erstellen eines neuen HTML-Elements können wir den gleichen Elementnamen wie das öffnende Tag verwenden. Wir können eine ungeordnete Liste, ein Listenelement, eine Überschrift der Ebene 3 oder sogar einen Abschnitt erstellen. Wir werden einen Listeneintrag verwenden, damit wir diesen an das Ende unserer Liste schieben können. Beginnen wir dies innerhalb einer Konstante namens ListItem, und dann, als nächstes, brauchen wir auch einen Wert zwischen unseren Elementen zu gehen. Im Moment wird dies nur ein Listenelement erstellen, das genau so ist. Aber wir müssen auch einige Textinhalte im Inneren erstellen. Wir tun dies in JavaScript mit Document.CreateTextNode. Wir können alles analysieren, wie eine Textzeichenfolge. Aber in unserem Fall wollen wir den neuen Eintrag analysieren, dann auch in einer Konstante speichern, und wir werden dies den Listenwert nennen. Dies hinterlässt uns nun mit den eigentlichen Elementen und dem Inhalt. Aber das sind zwei separate Knoten. Wir müssen unseren Listenwert tatsächlich zu unserem Listeneintrag hinzufügen. Die Art und Weise, wie wir dies tun können, besteht darin, unser ListItem zu greifen, und dann verwenden wir appendChild. Dies wird einen NewChild Knoten hinzufügen. Unter newChild Knoten, eine, die wir hinzufügen möchten, ist der ListValue. Hier, was wir im Grunde tun, ist das Erstellen eines Listenelements mit dieser ersten Zeile. Dann erstellen wir mit der zweiten Zeile einen Wert aus unserem neuen Eintrag. Wenn der Benutzer 2.7 eingibt, wird dieser in ListValue gespeichert. Wir fügen dann in diesem ListValue in unser ListItem. Dies wird unseren Wert zu greifen und diesen in unsere Elemente zu platzieren. Dies lässt uns jetzt mit einem vollständig konstruierten Listenelement. Dieser Listeneintrag muss nun auf unsere ungeordnete Liste verschoben werden. Die Art und Weise, wie wir dies tun können, ist, indem wir zuerst auf unsere ungeordnete Liste, finden Sie die ID der Einträge. Außerhalb unserer Funktion werde ich eine Konstante erstellen, die unser EntriesWrapper genannt wird. Dies wird gleich document.querySelector sein, mit der ID der Einträge. Dies ist unsere ungeordnete Liste, und jetzt müssen wir das ListItem schieben, das wir hier haben. Die Art und Weise, wie wir dies tun können, ist sehr ähnlich zu dieser Zeile gerade hier. Wir holen uns unsere ungeordnete Liste. Wieder verwenden Sie AppendChild und fügen Sie unser vollständiges ListItem hinzu. Dies wird jetzt unser Listeneintrag hinzufügen, bis zum Ende unserer ungeordneten Liste, die einen neuen Wert am Ende erstellt. Gehen Sie zum Browser und laden Sie erneut, und fügen Sie einige Werte hinzu, 1.4, und diese sind jetzt alle am Ende unserer Liste hinzugefügt. Das ist alles gut. Dies bedeutet jetzt, dass unsere Einträge in unserer Arbeit in unser Array verschoben werden, und wir erstellen auch ein neues Listenelement und aktualisieren das DOM. Nur eine kleine Sache, die wir tun müssen, bevor wir dieses Video einpacken. Diese drei neuen Werte, die wir soeben hinzugefügt haben, werden zu den bestehenden sieben Einträgen hinzugefügt. Wir wollen nur die letzten sieben Tage aufzeichnen. Jedes Mal, wenn wir einen Wert am Ende des Arrays hinzufügen, möchten wir auch den ersten Wert entfernen. Die Art und Weise, wie wir dies in JavaScript tun, ist ziemlich das Gegenteil von dem, was wir gerade hier getan haben. Hier haben wir die ungeordnete Liste erfasst und ein newChild-Element angehängt. Stattdessen wollen wir das Gegenteil tun, nämlich ein Kind zu entfernen. Lassen Sie uns dies am Anfang unserer AddNewEntry-Funktion tun. Schnappen Sie sich den EntriesWrapper, die unsere ungeordnete Liste ist, und dann können wir removeChild aufrufen. Wenn wir einfach removeChild aufrufen, wird JavaScript nicht genau wissen, welches untergeordnete Element wir entfernen möchten. Mit untergeordnetem Element meinen wir jedes dieser Listenelemente. Aber glücklicherweise bietet uns JavaScript eine einfache und einfache Möglichkeit, die ersten untergeordneten Elemente anzusprechen. Dies ist eine Eigenschaft namens FirstChildElement. Wenn ich zu unserem Skript gehe, können wir den EntriesWrapper anvisieren, der alle unsere ungeordnete Liste ist, und dann das FirstElementChild auswählen. Speichern wir nun diese Datei und gehen Sie zurück zum Browser und überprüfen Sie, ob dies funktioniert. Lassen Sie uns einige Werte hinzufügen, 4, 5, 6, 7. Nun, für jedes Element, das wir hinzufügen, sehen wir, dass wir insgesamt noch sieben Tage haben. Lassen Sie uns die Nummer 8 hinzufügen, und wir sehen, dass der Wert von eins jetzt vom Anfang unserer Liste entfernt wurde. Versuchen wir es noch mal. Der Wert von neun. Dadurch wird der Wert von zwei entfernt. All dies mag ziemlich komplex aussehen, wenn es etwas ist, das Sie noch nicht gemacht haben, aber alles, was wir tun, ist hier ein neues Listenelement hinzuzufügen und dann das allererste zu entfernen. Dies ist jetzt ein wirklich wichtiger Teil unserer laufenden Lkw-Anwendung jetzt komplett. Als nächstes gehen wir nach unten zu unserem Startbereich, wo wir die Summe und auch die durchschnittliche Entfernung hinzufügen . 6. Gesamt- und Durchschnittswerte berechnen: Lassen Sie uns jetzt an einigen dieser Statistiken unten unten arbeiten. In diesem Video werden wir uns auf die Berechnung der Gesamt- und auch die durchschnittliche Entfernung konzentrieren. Nun, um dies zu tun, werden wir eine JavaScript-Array-Methode namens reduzieren. Werfen wir einen kurzen Blick darauf, wie wir das nutzen können. Wenn Sie die reduzierte Methode noch nicht verwendet haben, kann sie ziemlich komplex aussehen, aber es ist wirklich nicht zu schwierig zu verwenden. Das Hauptkonzept hinter einer Reduce-Methode ist, dass es alle Elemente nehmen wird , alle Werte, die innerhalb eines Arrays sind, in unserem Fall wird es alle unsere Entfernungen sein, und dann werden wir es in einem einzelner Wert. In unserem Fall werden wir alle unsere Werte reduzieren, indem wir sie alle zusammen addieren. Dies wird uns unsere Gesamtsumme geben, die wir gerade hier brauchen, und dann können wir dies auch in der durchschnittlichen Entfernung nutzen , indem wir diese Summe durch die Anzahl der Einträge dividieren. Zurück zum Reduzierstück werden wir eine Funktion wie diese erstellen. Das Beispiel, das wir hier sehen, ist ziemlich genau, wie wir es verwenden müssen. Wir werden alle Werte im Array zusammenfügen. Wir tun dies, indem wir eine Methode aufrufen, die den aktuellen Wert auf die vorherige Summe hinzufügt. Für das erste Element innerhalb des Arrays, das eins ist, wird es dann diese Methode aufrufen, aber dieses erste Mal haben wir nur den aktuellen Wert, wir haben nicht die Summe, so dass der Reduzierer gleich eins ist. Für den zweiten Wert, der zwei ist, wird der aktuelle Wert von zwei zur Summe von eins addiert, was zu einem Wert von drei führt. Weiter wird dann der Wert von drei zur aktuellen Gesamtsumme addiert, so dass diese sechs werden . Der Wert von vier vervollständigt dann den Reduzierer, was zu einem Gesamtwert von 10 führt. Zurück zu unserer script.js, werden wir beginnen, indem wir eine Funktion erstellen, die das gleiche Verhalten haben wird. Ich werde meins direkt über unserem HandlesUBMIT machen. Die Funktion, die ich den Reduzierer nennen werde , nimmt unsere beiden Werte an, die die Summe und dann den aktuellen Wert sind. Ich werde das nur als Gesamt und nicht als Akkumulator bezeichnen, da es klarer erscheint. All diese Funktion wird tun, ist, den neuen Wert zurückzugeben , der der Summe entspricht, die dem aktuellen Wert hinzugefügt wurde. Genau wie eine Randnotiz hier, fügen wir den aktuellen Wert zur Summe hinzu, aber Sie könnten andere Dinge tun, wie zum Beispiel nehmen Sie es auch weg. Die ganze Idee ist genau die gleiche. Der Reduzierer soll unsere Array-Werte in einen einzigen Wert reduzieren. Das nächste, was zu tun ist, werden wir eine neue Funktion direkt unten erstellen, und ich werde diese CalTotal aufrufen. Diese Funktion wird alle unsere Einträge erfassen, eine Reduce-Methode verwenden und dann unseren Wert nur hier aktualisieren. Um dies zu tun, muss es auch alle unsere aktuellen Einträge aufnehmen, die sich innerhalb unseres Arrays befinden. Wir können dann unsere Einträge Array greifen, das sind nur Werte, die hier gespeichert sind. Wir können dann die reduzierte Methode aufrufen, die wir gerade auf der Mozilla-Website angesehen haben, und dann können wir unsere Reduzierfunktion übergeben. Dies wird uns dann unseren einzigen Gesamtwert geben, und wir können diesen auch innerhalb einer Konstante speichern. Jetzt habe ich diesen Wert, wir werden das DOM aktualisieren. Die beiden Werte, die wir aktualisieren wollen, wenn wir einen Blick auf unser Projekt werfen, ist der gesamte Abschnitt gerade hier, und wir haben auch eine Summe, die für unsere wöchentlichen Ziele aktualisiert wird. Lassen Sie uns die Dokumente greifen, wir können ein Element durch die ID greifen. Das erste, das wir greifen möchten, ist für die Summe nur hier, scrollen Sie nach unten zum Datenabschnitt, und wir haben eine Spanne mit der ID der Summe. Wir können dann den innerText-Inhalt so einstellen, dass er unserem Gesamtwert entspricht. Lassen Sie uns diese Zeile duplizieren, und wir können diese auch verwenden, um die wöchentlichen Ziele zu aktualisieren. Nun unten auf unserer Indexseite, dies ist dieses ProgressTotal, das derzeit den Wert Null hat, wir könnten den Platzhalter entfernen, unsere ID aktualisieren. Wir haben jetzt unsere Funktion, die die Summe berechnet. In der Tat sollte es nur CalcTotal sein. Jetzt wollen wir jedes Mal, wenn wir uns unten an der Unterseite beschäftigen, diese Funktion aufrufen. Wenn wir dies aufrufen, können wir auch die Einträge übergeben. Die Einträge waren der Wert aus unserem Array ganz oben hier, oder wir können dies für diesen speziellen Fall leer lassen, da dies eine globale Variable ist. Wenn wir eine Variable außerhalb einer dieser Funktionen deklarieren, bedeutet dies, dass dies jetzt im globalen Umfang ist, was bedeutet, dass wir auf den Wert von Einträgen überall innerhalb unseres Programms zugreifen können. Wenn unsere Variable innerhalb einer bestimmten Funktion deklariert wurde, konnten wir nur innerhalb dieser Funktion darauf zugreifen. Da dies global ist, können wir darauf innerhalb dieser Funktion und auch diese nur hier zugreifen. Mit diesem an Ort und Stelle, jetzt speichern wir das und über in den Browser. Lassen Sie uns einige neue Werte hinzufügen. Eins und zwei, diese beiden addierten geben uns die Summe von drei, und auch unten in unserem Ziel auch. Lassen Sie uns noch einen hinzufügen, und unsere Summen werden jetzt aktualisiert. Mit diesem Funktionieren gehen wir nun zur durchschnittlichen Entfernung über. Die durchschnittliche Distanz wird ziemlich einfach sein, da wir bereits unsere Reduzierfunktion an Ort und Stelle haben. Alles, was wir tun müssen, ist eine neue Funktion zu schaffen, um sich darum zu kümmern. Ich werde das Calcaverage nennen. Die Art und Weise, wie wir den Durchschnitt berechnen können, besteht darin, zuerst alle Gesamtwerte zu erfassen, die Sie addiert haben. Wir wissen, wie man das von unserer Funktion direkt oben macht. Dann können wir es durch die Anzahl der Einträge teilen, die wir derzeit haben, geben uns den Durchschnitt. Beginnen wir dies innerhalb einer Konstante namens Durchschnitt. Dies entspricht unseren Einträgen Array, können wir wiederunsere Reduce-Methode aufrufen, unsere Reduce-Methode aufrufen, indem wir unsere Reducer-Funktion übergeben. Dies wird uns dann die Summe geben, und das nächste, was wir tun müssen, ist, dies durch die Anzahl der Einträge zu teilen. Wir können dies tun, indem wir unsere Einträge Array greifen und dann auf.length. Der nächste Schritt besteht darin, das DOM mit document.getElementById zu aktualisieren. Die ID, die Sie in der index.html packen möchten, ist diese durchschnittliche ID nur hier. Genau wie oben werden wir auch den InnerText so einstellen , dass er gleich unserer durchschnittlichen Variablen von oben ist. Der letzte Schritt besteht darin, diese Funktion, Calcaverage, aufzurufen. Dies muss auch nichts daran übergeben werden, da es nur das Eintragsarray ausnutzt, das wir oben haben. Speichern Sie diese Datei und deaktivieren Sie sie im Browser. Wenn wir nun zwei verschiedene Werte hinzufügen, sehen wir die Summe von vier. Die Summe von 4 geteilt durch 2 ergibt uns einen Durchschnitt von 2. Versuchen wir es noch einmal, gehen Sie für 10. Unser Durchschnitt wird jetzt aktualisiert. Nur ein letzter Schliff, den wir mit diesem Projekt für diese beiden Werte tun können , besteht darin, diese auf eine Dezimalstelle zu runden. Im Moment erhalten wir eine gerundete Zahl von 14, aber wenn wir etwas wie 2.7 tun, aber ich möchte dies konsistent halten und sicherstellen, dass alle Werte auf eine Dezimalstelle liegen. Genau wie früher besteht der Weg, dies zu tun, darin, toFixed zu verwenden. Ich werde dies auf eine Dezimalstelle setzen, so dass der Wert von eins übergeben wird. Das wird für unsere Gesamtsumme sein, und wir können das auch für unseren Durchschnitt tun. Wir müssten dies in unsere Klammern einwickeln und dann aufFixed für die Summe aufrufen. Wenn wir dies nicht in Klammern wickeln, würde toFixed für die einträge.length anstelle der Gesamtsumme aufgerufen werden . Lassen Sie uns das testen. Eins und fünf geben uns insgesamt sechs, was jetzt einen Wert von 6.0 hat. Der Durchschnitt, lassen Sie uns einige weitere Werte hinzufügen. Wir können jetzt sagen, dass unser Gesamtwert und der Durchschnitt auf eine Dezimalstelle gerundet ist. Wir können das Gleiche auch für unsere Einträge nur hier tun. Wir können dies oben tun, wo wir unsere neuen Einträge erstellt haben, und auch hier, wo wir den neuen Eintrag als unsere Textnotiz hinzufügen. Genau wie zuvor können wir auch toFixed aufrufen, indem wir den Wert von eins übergeben und jetzt, wenn wir einige Einträge hinzufügen, sehen wir diese auf eine Dezimalstelle gerundet. Dies ist jetzt unser Gesamtwert und der Durchschnitt, der jetzt betreut wird, und im nächsten Video werden wir einen Blick auf das wöchentliche Ziel werfen, und auch das wöchentliche High. 7. Wöchentlicher Höchstwert und Ziele: Wir haben jetzt die Gesamtwerte und auch die durchschnittliche Entfernung. Wir wollen nun den höchsten Wert dieser Woche berechnen und auch unser Ziel unten aktualisieren. Um dies zu tun, gehen wir zurück zu unserer script.js und wir können eine Funktion erstellen, um dies zu berechnen. Der Name dieser Funktion wird WeeklyHigh sein, und alles, was wir tun müssen, ist, den höchsten Wert zu berechnen , der in unsere Einträge Array hinzugefügt wurde. Speichern Sie dies in einer Konstante namens hoch. Die Art und Weise, wie wir dies tun können, ist durch die Verwendung einer Fehlfunktion JavaScript bietet, die Math genannt wird. Im Inneren können wir in verschiedenen Werten wie vier,12, und sechs übergeben. Nun, wenn wir ein Konsolenprotokoll für den Wert von high machen, sollten wir sehen, dass der Wert von 12 ausgegeben wird. Lassen Sie uns dies innerhalb unserer Funktion HandleSubmit nennen, und wir können überprüfen, dass dies in der Konsole funktioniert. Wir können hier jeden Wert hinzufügen. Drücken Sie Enter, und wir sehen den Wert von 12. Aber stattdessen wollen wir den höchsten Wert aus unserem Einträgen Array zu holen. Lassen Sie uns finden Ja, wir können unsere Einträge Array übergeben und überprüfen, dass dies funktioniert. Also fünf, sechs und eins. Dies gibt uns jetzt ein Problem in der Konsole. Der Grund, warum dies geschieht, ist, weil Math.max eine Reihe von Zahlen erwarten wird. Wir übergeben jedoch ein Eintragsarray. Also tun wir effektiv in so etwas. Stattdessen möchten wir die tatsächlichen Werte aus unserem Array extrahieren, so dass es eher so aussieht. Die Art und Weise, wie wir dies tun können, ist die Verwendung des JavaScript-Spread-Operators, der die drei Punkte ist. Dies extrahiert dann alle Werte innerhalb unseres Eintrags Arrays und dies sollte jetzt in der Konsole funktionieren. Jetzt wird der hohe Wert haben, können wir jetzt das DOM aktualisieren. Also document.getElementById, die ID, die wir wollen, wenn wir auf die Indexseite gehen, ist der Wert von high. Lassen Sie uns den inneren Text setzen , der gleich unserer Variablen sein wird. Das ist raus, also der Wert von eins, fünf, wir sehen, dass das wöchentliche Hoch ein Wert von fünf ist. Sieben, das wird aktualisiert. Wenn wir die niedrigeren Werte addieren, die drei sind, hat dies immer noch den hohen Wert von sieben. Als Nächstes können wir auch unser wöchentliches Ziel dynamischer gestalten, indem wir dies über unsere Skripte steuern. Wir müssen dies nicht durch eine Funktion tun, wir können dies einfach tun, sobald unser Skript geladen wird. Lassen Sie uns also eine Variable an der Spitze oder eine Konstante erstellen. Ich werde das unser Ziel nennen. Setzen Sie diesen Wert auf einen beliebigen Wert wie z. B. Wir können dann einen Abfrage-Selektor oder getElementById verwenden, um unser Ziel zu aktualisieren. Die Ziel-ID und dann müssen wir die in einem Text setzen, um unserem Ziel gleich zu sein. Wir können auch den Platzhalterwert von 25 entfernen und auch überprüfen, dass dies im Browser funktioniert. Wir haben nichts, um dieses Ziel von der Benutzeroberfläche zu erreichen. Ich habe dies nur als Wert innerhalb des Skripts fest codiert. Aber natürlich, wenn Sie eine kleine Herausforderung wollen, können Sie voran gehen und dies dem Projekt hinzufügen, damit wir vom Benutzer aktualisiert werden können. größte Teil der Funktionalität ist jetzt vorhanden. Der letzte Teil, den wir tun werden, wenn wir einen Blick auf die endgültige Version werfen, ist, diesen Fortschrittskreis unten unten zu erstellen. 8. Kreis zum Messen von Fortschritten: Willkommen zurück und zu diesem abschließenden Video von diesem Projekt. In diesem Video geht es darum, sich auf unseren ProgressCircle zu konzentrieren , den wir erstellen werden, genau wie in der endgültigen Version, gerade hier. Jedes Mal, wenn der Benutzer einen Wert in das Zahlenfeld eingibt, wird das wöchentliche Ziel aktualisiert und dies wird in einen Prozentsatz umgewandelt, damit wir den ProgressCircle aktualisieren können. Ich bin mir bewusst, dass es viele verschiedene Möglichkeiten gibt, das zu tun. Wir können Dinge wie die Leinwand verwenden, und es gibt viele komplexere Optionen, die wir verwenden können. Ich habe jedoch versucht, dies für dieses Projekt so einfach wie möglich zu halten. Die Art und Weise, wie wir dies tun, besteht darin, eine CSS-Funktion zu verwenden , die den konischen Farbverlauf genannt wird. Die Art und Weise, wie dies funktioniert, besteht darin, einen Farbverlauf zu erstellen , der um den Mittelpunkt übergeht. Hier können wir sehen, dass wir den ersten Abschnitt haben, rot ist, und das ist von 0-6 Grad, der orangefarbene Abschnitt geht dann von 6-18 Grad weiter, dann haben wir den gelben Abschnitt bis zu 45 Grad und dieses Ding geht weiter. Wenn wir nach unten scrollen, können wir den Unterschied zwischen dem Kegelverlauf und dem Radial-Gradient sehen . Der konische Typ ist besser für unsere Bedürfnisse geeignet, da wir diese Rotation nutzen werden, um unser ProgressElement zu erstellen. Der radiale Farbverlauf hingegen sorgt für den Übergang von der Mitte nach außen, wodurch diese Ringe entstehen, die für unseren Kreis nicht wirklich viel genutzt werden. Beginnen wir von vorn in der index.html. Früh haben wir einen Wrapper für diesen Abschnitt hinzugefügt und dann einen To-Do-Abschnitt erstellt. Hier drinnen werde ich zwei neue divs erstellen. Dieser erste wird das eigentliche div für unseren Kreis sein. Also werde ich diesem eine ID von ProgressCircle geben. Dann werde ich als nächstes ein zweites div hinzufügen. Dies hat die ID von ProgressCenter. Der Grund für diesen Abschnitt wird sehr bald klarer werden. Zunächst einmal werden wir auf all diesen Abschnitt, der unten unten ist, angefangen mit unserem Text. Dies ist innerhalb des Fortschrittsabschnitts enthalten. Speichern wir das und gehen Sie zu unserer styles.css. Ganz unten können wir beginnen, indem wir den Fortschrittsbereich anvisieren. Wir können den Text in der Mitte ausrichten und auch etwas Polsterung ganz unten hinzufügen. Als nächstes ist der Text in der Überschrift der Ebene 3 enthalten. Lassen Sie uns den Fortschritt h3, Schriftgröße von 1.6 rems, und auch diese Schriftgewicht, wir werden dies auf leichter einstellen. Als nächstes können wir mit der Arbeit an unserem ProgressCircle beginnen. Also haben wir den äußeren Wrapper, der ProgressCircleWrapper ist. Wir werden diese greifen, setzen die Flexbox und dann rechtfertigen, dass der Inhalt in der Mitte ist. Zurück zu unserem Stylesheet. Fügen Sie dies in hinzu. Sie können die gesamte Flexbox verwenden, so dass wir dann unsere Inhalte in der Mitte rechtfertigen können. Dies wird den Kreis platzieren, sobald wir ihn in die Mitte unseres Abschnitts erstellt haben. Als nächstes haben wir den ProgressCircle selbst , der den konischen Gradient haben wird. Zurück zu unserem Stylesheet. Das war ein Ausweis. Um dies gleich zu machen, können wir die Breite einstellen. Ich möchte für 250 Pixel und auch eine passende Höhe gehen. Das Beispiel, das wir zuvor auf der Mozilla-Website gesehen hatten, verwendete einen quadratischen Abschnitt, genau wie wir hier sehen. Aber stattdessen werde ich dies in einen Kreis verwandeln, indem ich einen Grenzradius hinzufüge. Ein Wert von 50 Prozent macht diesen Kreislauf. Jetzt können wir unseren konischen Farbverlauf nutzen, indem wir dies als Hintergrundeigenschaft festlegen. Wir haben viele verschiedene Werte in dem Beispiel zuvor gesehen. Aber alles, was wir brauchen, sind zwei verschiedene Werte. Wir brauchen nur die grünen Werte, d. h. die Gesamtzahl der Meilen, die der Benutzer ausgeführt hat , und dann den grauen Abschnitt für den Rest des Kreises. Diese werden vorerst nur Platzhalterwerte sein, und wir werden diese sehr bald mit JavaScript aktualisieren. Die grüne Farbe ist 70db70. Fügen Sie einen beliebigen ersten Wert von 50 Prozent hinzu, bedeutet, dass dieser Wert von Null bis zu 50 Prozent läuft. Der zweite Wert wird ein Hex-Wert von 2d3740 sein. Wenn wir für den zweiten Wert auf 50 Prozent setzen, wenn wir keinen zweiten Wert wie 70 hinzufügen, wird dies bis zu 100 Prozent laufen. Jetzt speichern wir das und gehen zu unserem Projekt. Nachladen. Damit wird unser konischer Farbverlauf nun in die volle Größe unseres Kreises versetzt. Aber wenn wir einen Blick auf die endgültige Version werfen, haben wir den Mittelkreis gerade hier, als das Aussehen eines Rings gegeben. Dies ist der Abschnitt, den Sie in der Mitte von ProgressCenter hinzugefügt haben . Lasst uns das schnappen. Alles, was wir tun werden, ist, dies effektiv als Maske zu verwenden , die die Mitte des Kreises bedeckt. Dies wird ähnlich wie oben sein, aber wir werden es ein wenig kleiner machen, indem wir die Breite auf 220 setzen. Dasselbe für die Höhe. Dies wird auch einen Randradius benötigen, also ist es ein Kreis. Um dies auch ein Aussehen eines Rings zu geben, müssen wir die Hintergrundfarbe die gleiche wie der Rest der App machen . Der aktuelle Wert war 1c262f. Auf unser Projekt und lassen Sie uns sehen, wie das aussieht. Wir haben jetzt das Zentrum des Kreises an Ort und Stelle, aber wir müssen nur sicherstellen, dass dies zentriert ist. Wir können dies innerhalb unseres ProgressCircleWrapper tun. Lassen Sie uns dies mit dem Anzeigetyp von Flex einstellen. Denken Sie daran, dass dies für den Wrapper ist. Wir können dann den Inhalt über die Seite in der Mitte ausrichten und auch die vertikale Ausrichtung mit Align-Items festlegen. Gut. Das sieht jetzt genau so aus, wie wir es wollen. Nun gehen wir zu unserer script.js und wir können eine Funktion erstellen, die dies aktualisieren wird. Nennen wir das CalcGoal. Das erste, was wir innerhalb dieser Funktion tun müssen, ist, auf unseren Gesamtwert zuzugreifen. Das ist der Wert gerade hier. Sobald wir das haben, können wir das durch unser Ziel teilen. Die Art und Weise, wie wir das greifen können, genau wie oben, werden wir den Gesamtwert greifen. Lassen Sie uns das kopieren. Fügen Sie dies ein, und dies nutzt unsere Reduzierfunktion, um alle Elemente innerhalb unseres Arrays zu greifen und sie alle zusammen hinzuzufügen. Der nächste Schritt, den wir machen müssen, ist, einen Prozentsatz zwischen Null und 100 zu berechnen. Wir werden dann diese Werte innerhalb unseres CSS verwenden, um unsere beiden Farben zu aktualisieren. Um dies in einen Prozentsatz umzuwandeln, nehmen wir zuerst den Gesamtwert und dann, um dies als Prozentsatz zu erhalten, müssen wir dies durch unser Ziel dividieren durch 100. Wir können das dann in einer Konstante speichern. Lassen Sie uns das CompletedPercent nennen. Wir können auch eine console.log machen, bevor wir weiter gehen und überprüfen, dass alles gut funktioniert. Fügen Sie dies in unserem Protokoll hinzu. Wir können diese Funktion auch von handle submit aufrufen. Lasst uns das retten. Öffnen Sie die Entwicklertools mit der rechten Maustaste und überprüfen Sie die Konsole. Fügen wir den Wert 10 hinzu. Dies geteilt durch unser Ziel wird uns einen Wert von 40 Prozent geben. Wenn wir 2,5 tun, sind 10 plus 2,5 gleich der Hälfte unseres Ziels, was zu 50 Prozent führt. Jetzt habe ich diesen Wert, wir können diesen jetzt verwenden, um das Styling unseres ProgressCircle zu aktualisieren. Lassen Sie uns dies durch die ID von im Skript greifen. Zurück zu CalcGoal. Wir können die console.log entfernen und dann Document.QuerySelector aufrufen. Der Selektor war eine ID, also übergeben wir den Hash-Wert in von ProgressCircle. Offensichtlich innerhalb eines konstanten Aufrufs ProgressCircle. Anstatt das konisch-strahlende Licht hier hartcodiert zu haben, können wir dies jetzt auskommentieren und dann in JavaScript hinzufügen. Der Weg, dies zu tun, besteht darin, auf unsere ProgressCircle-Elemente zuzugreifen. Wir können jede Stil-Eigenschaft wie unseren Hintergrund setzen. Wir können dies nochmals unserem konischen Farbverlauf gleich setzen. Lassen Sie uns den Abschnitt kopieren, genau wie er innerhalb des Stylings ist, fügen Sie ihn als Zeichenfolge innerhalb der Zitate ein. Dies sind immer noch nur hartcodierte Werte. Probieren wir das aus. Alle Werte, die wir innerhalb von hier hinzufügen, führen immer noch zu einem 50-50 Split. heißt, unser nächster Schritt besteht darin, diese beiden Werte jetzt dynamischer zu machen. Die Art und Weise, wie wir dies tun können, wenn wir die Zitate entfernen, kann diese durch die Backticks ersetzen. Diese Backticks werden es uns ermöglichen, eine Vorlagenzeichenfolge zu erstellen, die eine Möglichkeit ist, Variablen in unseren regulären Text einzufügen. Wir können unsere 50 Prozent entfernen. Die Art und Weise, wie wir eine Variable einfügen, besteht darin, das Dollar-Symbol und dann die geschweiften Klammern zu verwenden. Der erste Wert wird das Äquivalent unseres variablen abgeschlossenen Prozentsatzes sein. Fügen wir das hier hinzu. Wir brauchen auch das Prozentsymbol, und dann müssen wir unseren zweiten Wert aktualisieren. Auch hier wird dies unser CompletedPercent bis zu 100 Prozent sein. Da dies unser erster Wert ist, geht dies von Null bis zu unserem CompletedPercent. Sagen Sie, das ist 50 Prozent, es wird von Null auf 50 gehen. Der zweite Wert geht dann von 50 bis zum Ende unseres Kreises, das ist 100 Prozent. Kurz bevor wir unseren ProgressCircle aktualisieren, können wir eine bedingte Anweisung direkt oben hinzufügen. Wir können eine if-Anweisung hinzufügen, um zu überprüfen, ob der abgeschlossene Prozentsatz mehr als 100 ist. Wenn ja, dann werden wir das auf 100 zurücksetzen. So geht unser ProgressCircle immer von 0-100. Wir können überprüfen, ob der CompletedPercent größer als 100 ist. Wenn ja, setzen wir das auf 100 Prozent zurück. Probieren wir das aus. 12.5, das ist genau die Hälfte, unser ProgressCircle ist jetzt 50-50. Fügen Sie einen neuen Wert ein. Lass es uns auf 100 Prozent runter bringen. 22.5, wir müssen nur einen Wert von 2.5 hinzufügen. Das schließt nun unseren Kreis ab. Wenn wir versuchen, einen neuen Wert hinzuzufügen, sehen wir, dass der ProgressCircle nicht weiter geht. Da wir 100 Prozent unseres Ziels für diese Woche erhalten haben, ist dies nun die gesamte Funktionalität für unseren Running Tracker komplett. Nur um dies zu beenden, werden wir eine Medienabfrage hinzufügen, nur um die maximale Breite einiger dieser Elemente einzuschränken. Zurück zu unseren Styles. Lassen Sie uns eine Medienabfrage hinzufügen, die unsere Bildschirme abzielen wird, neben der minimalen Bildschirmbreite von 800 Pixeln. Bisher beschränken 800 Pixel-Geräte und höher die Körperbreite auf 60 Prozent. Wir können auch die Breite dieser Zahleneingabe einschränken. Immer noch innerhalb der Medienabfrage, die Eingabe mit der Art der Zahl, alles, was wir wieder tun müssen, ist die eingestellte Breite und diese Zeit von 40 Prozent. Schließlich können wir auch die Größe dieses SVG auf den größeren Bildschirmen reduzieren. Lassen Sie uns auf die svg zielen und die maximale Breite auf 50 Prozent setzen. [ unhörbar] wird immer noch sehen, dass es viel Abstand über dem oberen und unteren Rand dieses SVG gibt. Der Weg, dies zu beheben, wenn wir zu unserer index.html gehen, besteht darin, zu unserem svg öffnenden Tag zu gehen. Innerhalb dieses Typs können wir sehen, dass wir noch die Breite und die Höhe eingestellt haben. Wir können diese entfernen, so dass die Dimensionierung mit unserem Stylesheet gesteuert werden kann. Speichern Sie dies und jetzt nimmt svg weniger Platz ein. Herzlichen Glückwunsch, dass Sie jetzt das Ende dieses Projekts erreicht haben, und wir sehen uns im nächsten. 9. Folge mir auf Skillshare!: Ein herzlicher Glückwunsch von mir, dass ich das Ende dieser Klasse erreicht habe. Ich hoffe, Sie haben es wirklich genossen und gewinnen etwas Wissen daraus. Wenn Sie diese Klasse genossen haben, stellen Sie sicher, dass Sie den Rest meiner Klassen hier auf Skillshare überprüfen, und folgen Sie mir auch für alle Updates und auch um über alle neuen Klassen informiert zu werden, sobald sie verfügbar sind. Also nochmals vielen Dank, viel Glück, und hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.