Javascript Fun: Baue einen Trinkgeldrechner!

1. Willkommen beim Kurs!: Hey, willkommen in dieser Klasse. Wenn Sie ein Webentwicklungsanfänger sind und einfach nur einspringen und einige lustige Projekte erstellen möchten, Sie bei uns genau richtig. Die Idee hinter dieser Serie ist es, Ihnen zu zeigen, was Sie mit normalem HTML, CSS und JavaScript tun können . Wir werden keine Frameworks, keine Boilerplate, keine Bibliotheken oder irgendwelche Vorlagen verwenden. Stattdessen werden wir alles komplett von Grund auf neu aufbauen, Schritt für Schritt, um Ihnen zu zeigen, wie diese freien Technologien alle zusammenarbeiten. Projekt dieser Klasse wird ein Tipp Taschenrechner Anwendung sein. Der Benutzer kann einen beliebigen Wert oder die Gesamtsumme in das oberste Eingabefeld eingeben. Wir können dann einen Prozentsatz oder die Spitze auswählen, die sie hinzufügen möchten, und dann werden automatisch alle Werte neu berechnet. Sie sehen den Gesamtwert der Spitze, die berechnet wird, und dann wird dies auch zur Gesamtrechnung hinzugefügt. Wenn sie möchten und sie die Rechnung auf mehrere Personen aufteilen wollen, haben wir diesen Bereichsschieber auch hier. Dann können wir die Rechnung auf mehrere Personen aufteilen. Dies berechnet dann die Gesamtrechnung pro Person und auch den Spitzenwert pro Person neu. Dieses Projekt wird komplett von Grund auf neu gebaut. Wir werden die Benutzeroberfläche mit HTML erstellen. Wir gehen auf das Hinzufügen von Styling mit CSS. Zusammen mit dem Betrachten, wie man diese vollständig benutzerdefinierten Bereich [unhörbar] auch hinzufügen kann. Wir werden uns Schriftart, Browserpräfixe ansehen und dann unsere Anwendung vollständig interaktiv mit JavaScript machen. Sie erfahren mehr über Funktionen, Mathematik, Ereignisse, alle [unhörbaren] Währungswerte, das Lesen und Aktualisieren des DOM und vieles mehr. Dieses Projekt wurde für Anfänger entwickelt und ist ideal für jemanden mit wenig HTML-, CSS- und JavaScript-Wissen. Ich freue mich, Ihnen diese Klasse beizubringen, und wir sehen uns 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, dem nur zu folgen um eine weitere Vorlesung abzubrechen. Nehmen Sie sich die Zeit, jede Lektion zu bearbeiten, den von Ihnen geschriebenen Code zu überprüfen und darüber nachzudenken, 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. Du brauchst dich nicht zu sehr zu verirren und vom Unterricht abgelenkt zu werden. Du kannst sogar einen Schritt zurücktreten, wenn du den Kurs beendet hast, und danach zurückkommen und einige Projektänderungen vornehmen. Das gibt dir wirklich eine gute Gelegenheit, das Gelernte außerhalb des Unterrichts zu üben . Denke auch daran, dein Projekt auch hier auf Skillshare zu teilen und nur ich werde es mir ansehen, aber es wird auch Kommilitonen inspirieren. Weitere Informationen zum Klassenprojekt findest du auf der Registerkarte Projekt und Ressourcen, der Registerkarte Projekt und 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 hier auf Skillshare erstellen und hochladen. 3. So erstellst du die Benutzeroberfläche: In diesem Abschnitt geht es darum, unseren Tip Calculator zu erstellen. Dies wird die endgültige Version sein, die wir in diesem Abschnitt erstellen werden. Der Benutzer kann eine Rechnung in das Eingabefeld oben eingeben. Dann direkt unten können wir den Tipp Prozentsatz hinzufügen , den wir zu dieser Rechnung hinzufügen möchten. Gehen wir zum Beispiel für 20 Prozent und alle restlichen Werte werden dynamisch aktualisiert. Unmittelbar unten haben wir den Spitzenwert und dies wird auch auf die Gesamtrechnung hinzugefügt, um uns die Summe zu zahlen. Darunter haben wir auch einen separaten Abschnitt, der es dem Benutzer ermöglicht , die Rechnung auf mehrere Personen aufzuteilen. Im Moment haben wir dies nur als eine Person, also sind alle Werte gleich. Wenn wir wollen, dass dies auf zwei Personen aufgeteilt wird, werden die Werte halbiert und wir sehen genau, wie viel jeder Benutzer zahlen muss. Dieses erste Video wird sich auf die Erstellung der Benutzeroberfläche mit HTML konzentrieren. In den kommenden Videos werden wir etwas Styling und Layout mit CSS hinzufügen, und dann gehen wir zu den Arbeitsschritten und Berechnungen, und auch machen die Benutzeroberfläche dynamisch mit JavaScript. Beginnen wir mit dem Erstellen eines neuen Ordners. Ich werde meinen auf den Desktop hinzufügen und dies den Tipp Taschenrechner nennen. Sie können dies auch innerhalb eines Projektordners organisieren, wenn Sie es bevorzugen, aber ich werde nur damit beginnen, diesen Projektordner in Visual Studio Code zu ziehen. Das erste, was wir brauchen, ist eine Index-Seite, die den HTML enthält. innerhalb des Projekts Erstellen Sieinnerhalb des Projektseine neue Datei. Ich werde dies die index.html nennen, und wir können auch die Sidebar für mehr Platz schließen. Visual Studio Code kommt komplett mit einem Plugin namens Emmet, das es uns ermöglicht, Verknüpfungen hinzuzufügen, um unsere HTML-Struktur zu erstellen. Zum Beispiel können wir HTML Spalte 5 hinzufügen, drücken Sie „Enter“, und dies wird uns einen Ausgangspunkt für unser Projekt geben. Es enthält einfach alle Metadaten, die wir häufig hinzufügen, wie das Ansichtsfenster-Meta-Tag und auch den Zeichensatz, den wir verwenden. Der Titel oben, ich werde meinen Quick-Tip nennen, und dann können wir an die Arbeit bekommen, indem wir unseren Inhalt innerhalb des Körperabschnitts erstellen. Wir können alle diese Tip Calculator innerhalb der Haupt-Tags einwickeln, gefolgt von einer Überschrift der Ebene 1, die der Titel unseres Projekts sein wird. Speichern Sie diese Datei, und jetzt, wenn wir mit der rechten Maustaste klicken, kopieren Sie den Pfad, fügen Sie diesen in den Browser ein, dies ist jetzt der Link zu unserem Projekt. Sie können auch in den Projektordner gehen und auf die „Index.html“ doppelklicken, die dies auch im Standardbrowser öffnet. Was wir als nächstes tun werden, ist durch alle verfügbaren Abschnitte von oben nach unten gehen . Wir werden diesen weißen Abschnitt oben an der Spitze erstellen, der für die Benutzereingaben wie die Rechnung und den Tipp Betrag sein wird , wir werden bestimmte divs hinzufügen, die Sie alle diese Elemente umschließen werden, und dann fügen wir unsere zweite Abschnitt unten. Unter der Überschrift der Ebene 1 können wir unseren ersten Abschnitt hinzufügen Hier werden wir unser erstes div hinzufügen, das für unseren ersten Abschnitt ist, der das Etikett der Rechnung und auch die Zahleneingabe enthält . Lassen Sie uns das einschließen. Jetzt haben wir unser div. Dies wird ein Label namens Bill haben, unser Input. Nun, da dies eine Zahleneingabe sein wird, können wir diesem eine Art von Zahl geben. Wir können auch das Platzhalterattribut hinzufügen, das der Text Ihrer Rechnung sein wird. Dies wird der Wert sein, der innerhalb der Eingaben angezeigt wird , wenn keine Nummer hinzugefügt wurde, gefolgt von einer eindeutigen ID, die Ihre Rechnung sein wird. Dies ermöglicht es uns, diese Eingabe mit JavaScript zu zielen , so dass wir den Wert, den der Benutzer eingegeben hat, erfassen können. Wir können dies auch mit unserem Label verknüpfen, indem wir den gleichen Namen für Attribut hinzufügen. Dies bedeutet, wenn wir dies speichern und zum Browser gehen, jedes Mal, wenn wir auf das Etikett klicken, wird dies auch unsere Zahleneingabe aktivieren. Nach unten bewegen, haben wir auch einen Bereich Schieberegler, der gerade hier ist. Dies wird einen Abschnitt haben, der sowohl die Eingaben als auch das Etikett und auch den Prozentsatz umschließt . Fügen wir dies jetzt als div hinzu, und dann können wir ein neues div hinzufügen, das innen verschachtelt ist. Dies wird für die oberste Zeile des Etiketts und Prozentsatz sein. Die Beschriftung hat die Beschriftungselemente und den Wert von select tip. Kurz danach erstellen wir ein Span-Element und geben diesem eine ID, damit wir dies von unserem JavaScript aus ansprechen können. Wir können das „TipPercent“ nennen. Später füllen wir den Inhalt dieses mit JavaScript aus. Moment fügen wir dies nur als Null Prozent hinzu, damit wir sehen können, wie das in unserer Benutzeroberfläche aussieht. Kurz nach dem umgebenden div können wir dann unsere Eingabe erstellen, und dies wird eine Art von Bereich sein. Dies wird uns diesen Bereich Schieberegler geben, den wir in der endgültigen Version sehen werden, obwohl es im Moment ein wenig anders aussehen kann. Wir können den Anfangswert einstellen, wir wollen, dass dies bei Null Prozent, gefolgt von einer ID von TipInput beginnen. Auch hier können wir das für das Etikett verwenden. Dies wird auch später mit JavaScript verwendet, um den Tip Wert zu erfassen. Lassen Sie uns das speichern und sehen, wie dies im Browser aussieht. Die Struktur ist da, wir haben das Etikett, wir haben den Prozentsatz und auch den Bereichsschieber. Dies sieht offensichtlich viel anders aus als unsere fertige Version, aber wir werden dies sehr bald mit CSS beheben. Wenn wir zurück zur fertigen Version gehen, brauchen wir als nächstes einen Tipp Abschnitt. Das wird ziemlich einfach sein. Wir haben das Etikett und auch den Wert auf der rechten Seite. Wir haben eine horizontale Regel und dann einen Abschnitt, der für die Summe sein wird. Lassen Sie uns zuerst diesen Tipp Abschnitt direkt unter unserem letzten div erstellen. Erstellen Sie ein neues div für diesen Abschnitt, eine Spanne mit dem Wert von tip, gefolgt von einer leeren Spanne mit der ID, die gleich TipValue sein wird. Dies ermöglicht es uns, später diese Elemente durch die ID zu greifen und dann einen Wert innerhalb zu platzieren. Danach eine horizontale Regel, um unsere Linie zu erstellen, und dann den letzten Abschnitt unten am unteren Rand. Fügen Sie unser div als Wrapper hinzu, die Spanne mit dem Text der Summe. Dann wie oben fügen wir eine leere Spanne hinzu, die mit JavaScript aktualisiert wird. Der Wert wird die Summe sein, die einen Tipp enthält. Wir nennen das TotalWithTip. Dies sind jetzt alle Elemente an Ort und Stelle für unseren ersten Abschnitt, wenn wir den Browser neu laden, sind diese alle jetzt an Ort und Stelle. Das nächste, was zu tun ist, ist, nach unten in den letzten Abschnitt zu bewegen, der ist, die Rechnung zu teilen. Unmittelbar unter unserem schließenden Tag für diesen Abschnitt, lassen Sie uns einen neuen Abschnitt erstellen. Die erste Runde in div wird für die geteilte Eingabe sein. Dieser Abschnitt ist nur hier. Genau wie wir es mit dem Spitzenwert oben getan haben, werden wir ein div erstellen, das das Label und auch die Anzahl der Personen enthält. Wir folgen diesem dann mit einem Range-Schieberegler. Das div für den Text, dies wird das Label mit dem Text von split haben. Daneben fügen wir eine Inline-Spanne mit der ID von SplitValue hinzu. Dies wird mit dem Wert einer Person aktualisiert. Wenn dies zunimmt, werden dies zwei Personen sein, drei Personen und so weiter. Direkt unter diesem div Abschnitt können wir dann die Eingabe erstellen. Genau wie oben haben wir die Art der Reichweite. Wir können auch die Werte innerhalb dieser Bereichseingabe einschränken. Um zu beginnen, wollen wir den Mindestwert von eins erstellen. Dies liegt daran, dass immer ein Minimum von einer Person, die die Rechnung wird aufgeteilt werden. Wir können einen Maximalwert festlegen. Dies kann ein beliebiger Wert sein, den Sie bevorzugen. Ich werde für 10 gehen und den anfänglichen Standardwert auf eins setzen. Dazu ist auch eine eindeutige ID erforderlich. Ich werde dies den SplitInput nennen, den wir auch mit dem Label übereinstimmen können. Lassen Sie uns überprüfen, ob dies alles funktioniert, aktualisieren Sie den Browser, und wir haben eine neue Bereichseingabe. Sie können hier auch einen Standardwert hinzufügen, wenn Sie es bevorzugen. Also eine Person und wir werden dies im Browser sehen. Als nächstes haben wir zwei weitere einfache Abschnitte am unteren Rand, die ein einfaches div mit dem Label und auch den Werten auf der rechten Seite ist. Das erste div, dies wird eine Spanne mit dem Wert der Rechnung jeder haben, gefolgt von einer leeren Spanne mit der ID von BillEach. Der letzte Abschnitt unten ist die Spitze und auch der Wert. Erstellen Sie ein neues div, die Spanne mit dem Text von tip jeweils, gefolgt von einer leeren Spanne mit der ID, die TipEach gleich sein wird. Speichern Sie unsere index.html Datei und das ist jetzt alle HTML-Inhalte, die wir brauchen. Laden Sie den Browser neu und alles ist jetzt an Ort und Stelle. Offensichtlich sieht unser Tip Calculator im Moment nicht so aus wie die endgültige Version, aber wir werden anfangen, dies im nächsten Video zu beheben, wo wir einige CSS anwenden werden. 4. Design mit CSS: Wenn wir von unserem HTML weitergehen, werden wir unser Projekt jetzt viel schöner aussehen und fühlen, und wir werden dies tun, indem wir etwas CSS anwenden. Das erste, was wir tun müssen, wenn wir über diese Seitenleiste öffnen , ist, eine neue Datei zu erstellen, unsere Stile. Ich werde meine styles.css nennen, und dann können wir dies in der index.html verknüpfen. Wir tun dies über die obere Innenseite des Kopfabschnitts benötigt Link-Element. Dies ist eine Beziehung zu einem Stylesheet, daher ist dies in Ordnung, und die href ist der Speicherort dieser Datei. Diese Datei ist neben dieser Indexseite enthalten, so dass wir einfach mit dem Namen styles.css darauf verweisen können. Zurück zu unserem Stylesheet können wir mit dem HTML-Element beginnen, das die Wurzel unseres Projekts ist. Ich werde beginnen, indem ich die Schriftgröße als Wert von 10 Pixel deklariere. Nun, dieser Wert ist völlig optional, genau wie all diese CSS, die wir hinzufügen werden. Sie können es zu Ihren eigenen machen, Sie können Werte ändern um es aussehen und fühlen genau so, wie wir es wollten. Jetzt habe ich bei 10 Pixeln für die Root-Projektgröße ausgewählt , weil es eine schöne gerundete Zahl ist und wir die REM-Werte verwenden können. Die Waage ist ganz einfach nach oben und unten. Zum Beispiel, wenn wir einen Wert von padding als ein rem erstellen, wird dies ein Wert von 10 Pixel sein. Wenn wir wollen, dass dies 16 Pixel ist, wird dies 1,6 Rems sein, so dass gerundeter Wert die Dinge schön und einfach macht, wenn Sie nach oben und unten skalieren. Als nächstes legen wir den Wert der Farbe fest. Das wird die Farbe unseres Textes sein. Die Farbe, die ich wählen werde, ist 4e4d4d. Schauen wir uns das an und testen Sie, ob das funktioniert. Speichern Sie die Datei, laden Sie den Browser neu, ich werde sehen, die Stile sind jetzt wirksam. Wir werden die geteilte Ansicht innerhalb von Visual Studio Code öffnen, so dass Sie sowohl die Indexseite als auch die Stile nebeneinander sehen können. Das nächste Element, das ich stylen werde, ist der Hauptcontainer. Wenn Sie sich an das letzte Video erinnern, haben wir den ganzen Tipp Rechner in diesem Hauptabschnitt umgeben. Dies wird unser Haupt-Wrapper sein. Wir können die maximale Breite des Spitzenrechners auf 50 rem einstellen. Denken Sie daran, da wir die Stammschriftgröße auf 10 Pixel gesetzt haben, werden 50 mal 10 dies zum Äquivalent von 500 Pixeln machen. Wir können dies auch zentrieren, indem wir die Marge Null auto verwenden. Dies gilt für den Nullrand oben und unten und teilt den Rest des Raumes links und rechts gleichmäßig auf. Speichern und aktualisieren, und dies hat jetzt die gleiche Menge an Leerraum auf der linken Seite platziert wie auf der rechten Seite. Aber nur um dies einige Abstände von ganz oben auf der Seite zu geben, können wir diesen Wert in zwei Rems ändern, um uns 20 Pixel Rand zu geben. Als Nächstes können wir die Hintergrundfarbe einstellen. Wir können dies als normale einfarbige Hintergrundfarbe festlegen, oder ich werde meine festlegen, um die Vorteile der linearen Farbverläufe zu nutzen. Dieser lineare Farbverlauf ermöglicht es uns, in einer geraden Linie von einer Farbe zur anderen zu wechseln. Lassen Sie uns etwas Raum, wenden Sie den linearen Farbverlauf, und dann können wir zwei Werte hinzufügen, zwischen denen Sie übergehen möchten. Der erste Wert, den ich hinzufügen werde, ist ein Wert von 3dc0c0, getrennt durch ein Komma, unser zweiter Wert ist 5bceae. Wenn wir dies speichern, sollten wir sehen, dass der Hauptabschnitt jetzt einen Übergang von einem Schatten zum anderen hat. Standardmäßig werden diese Farben vertikal von oben nach unten übergehen. Wir können auch den Winkel als ersten Wert ändern. Ich will meins auf 30 Grad ändern. Aktualisieren, dies ändert jetzt unseren Farbverlauf von vertikal, um über die Seite in einem Winkel von 30 Grad zu gehen. Nach unserem Hintergrund können wir auch einige Füllungswerte hinzufügen, und hier werde ich vier verschiedene Werte hinzufügen. Also drei rem, 1.6 rem, sechs, und dann endlich 1.6 rems. Diese vier Werte des Auffüllens werden oben, rechts, unten und links angezeigt. Lassen Sie uns den Browser speichern und aktualisieren, so dass dieser Platz an den Rändern bleibt. Als nächstes wird der Grenzradius, und ich werde dies als Wert von vier Rems hinzufügen. Dies wird ziemlich groß sein, und das gilt für alle vier Seiten unseres Taschenrechners. Um diesem Tipp Rechner den Eindruck von etwas Tiefe zu geben, können wir auch einen Box-Schatten hinzufügen. Ich werde einen Box-Schatten ganz unten in unserem umgebenden Hauptabschnitt hinzufügen. Dieser Box-Shadow wird vier verschiedene Werte annehmen. Die erste ist die x-Position, wir haben die y-Position, wir haben den Wert der Unschärfe und dann auch die Farbe, die angewendet werden soll. Wenn wir auf die Mozilla-Website gehen, hat dies einen Box-Schatten-Generator, so dass wir besser sehen können, was los ist. Im Moment haben wir nur ein einfaches Element mit einer Grenze. Wenn wir einen Box-Schatten hinzufügen, können wir dann mit den x- und y-Werten spielen. Die X-Achse ist der Wert von links nach rechts oder über die Seite. Nur y-Wert ist nach oben und unten. Derzeit beträgt der x-Wert fünf Pixel, also wird dieser von fünf Pixeln verschoben. Wir können dies auch auf negativ fünf setzen, und dies wird diese fünf Pixel nach links platzieren. Auf der Y-Achse, die oben und unten ist, ist dies ein Wert von negativem Fünf, wir haben dies geändert, um positiv zu sein, dies wird dann unten erscheinen. Wir können auch die Farben ändern, wir können die Unschärfewerte ändern und diese wirklich groß machen. Aber für unser Beispiel werden wir das nur ziemlich subtil machen, also werden wir bei einigen kleinen Werten bleiben. Der erste Wert, der sich auf der X-Achse befindet, werde ich dies als Null setzen, damit es nicht von der linken oder der rechten Seite über schiebt. Der zweite Wert ist zwei Pixel, so dass dieser am unteren Rand unseres Elements angezeigt wird. Daneben haben wir den Wert der Unschärfe. Auch hier wird dies ziemlich klein sein, und dann auch eine ziemlich helle und subtile Farbe von hellgrau. Zurück zu unserem Projekt, aktualisieren Sie den Browser und wir sehen einen sehr kleinen Box-Schatten unten in unserem Hauptabschnitt. Dies kümmert sich um das Styling für unseren Hauptabschnitt, und jetzt arbeite ich an den einzelnen Elementen im Inneren. Ausgehend von ganz oben, haben wir den schnellen Tipp, der in der Ebene 1 Überschrift umgeben ist. Lasst uns das h1 anvisieren. Wir können die Textausrichtung so einstellen, dass sie in der Mitte ist. Wir wollen auch, dass dies ein wenig größer ist, damit wir diese Schriftgröße den Wert von drei rem einstellen können . Level 1-Überschriften haben einen Standardrand, der vom Browser angewendet wird Daher werde ich dies entfernen, indem ich diesen Wert auf Null setze. Gleich über dieser Überschrift der Ebene 1 werden wir sehen, dass oben viel mehr Platz als unten ist. Dies liegt daran, dass das Haupt-umgebende div diesen Füllwert von drei rem ganz oben hat. Wir können dies auch innerhalb unserer Level-1-Überschrift ausgleichen, indem wir einige Polsterung auf der Unterseite auch von drei Rems hinzufügen. Wenn wir einen Blick auf die endgültige Version werfen, werden wir sehen, dass jeder unserer Abschnitte auch diese weiße Hintergrundfarbe hat. Wir können dies auch innerhalb unseres CSS anvisieren, also lasst uns das Abschnittelement greifen, und wir können mit der Hintergrundfarbe von Weiß beginnen. Die Schriftgröße, können wir dies auf 18 Pixel einstellen, was das Äquivalent von 1.8 rems ist. Speichern und neu laden. Es gibt derzeit keinen Platz zwischen unseren beiden Abschnitten, also können wir dies mit einem gewissen Rand auf der Unterseite beheben. Lass uns für 1,6 Rems gehen. Im Padding, das uns den Abstand innerhalb unseres weißen Abschnitts gibt, wenn wir mit Padding Marge arbeiten, wenn wir nur zwei Werte hatten, wird der erste Wert der obere und untere sein , den ich als Null setzen werde, und der zweite Wert ist der linke und auch der rechte. Wenn es konsistent ist, fügen wir dies auch als 1.6 rems hinzu, um uns einige Abstände links und rechts von jedem dieser Abschnitte zu geben. Ein Randradius von einem Rem und dann auch ein Kastenschatten zum Abschnitt 2. Um dies konsistent zu geben, können wir unsere Werte von vorher abgleichen. Also Null, zwei Pixel, zwei Pixel verwischen, und auch die Farbe von hellgrau. Der einzige Unterschied, den wir in diesem Abschnitt gesehen haben, ist, dass wir wollen, dass dies so aussieht, als ob es innerhalb des Hauptabschnitts eingebettet ist. Wir können den Wert von Einschub zu unserem Box-Schatten hinzufügen, und dies wird den Box-Schatten innerhalb anstatt außerhalb des Elements ersetzen. Wenn wir auf die Mozilla-Website zurückgehen, können wir dies deutlicher sehen. Wir können auf „Inset“ klicken und auch die Unschärfe reduzieren, und wir sehen, dass diese Unschärfe jetzt innerhalb des Elements und nicht außerhalb wie zuvor. eine Ebene tiefer von allen Abschnitten hineingehen, sehen wir, dass jeder unserer Teile unseres Tipprechners in einem div umgeben ist. Wir können dies nun im CSS anvisieren. Wir möchten alle divs ansprechen, die ein direktes Kind des Abschnitts sind. Wir haben den Abschnitt und dann eine Ebene in, und wir haben dieses div, dann haben wir dieses div. Das gesamte Styling gilt für diese ersten divs, die innen verschachtelt sind. Zum Beispiel ist diese, die wir hier sehen, eine Ebene weiter in. Dies gilt also nicht für den Abschnitt. Wenn wir möchten, dass das Styling auf alle unsere divs innerhalb des Abschnitts angewendet wird, würden wir das CSS genau so machen, aber wir möchten nur die direkten Kinder auswählen. Alles, was wir hier tun werden, ist, einige Füllungswerte von 1,6 Rems oben und unten undNull auf der linken und rechten Seite hinzuzufügen von 1,6 Rems oben und unten und . Dies wird uns den Abstand um jeden dieser Abschnitte geben. Als nächstes fügen wir unserem Rechnungsabschnitt am Anfang unseres ersten Abschnitts etwas Styling hinzu. Um dies zu tun, können wir eine Klasse zu diesem Wrapper von Rechnung hinzufügen, und dann können wir dies im CSS anvisieren. Da es sich um eine Klasse handelt, verwenden wir den Punkt so.bill, und wir werden die CSS-Flexbox verwenden. Wir tun dies, indem wir zuerst den Wrapper so einstellen, dass den Anzeigetyp Flex, Speichern und Aktualisieren hat. Wir sehen noch keinen Unterschied, aber wir können jetzt auch diese Anzeige von Flex verwenden , um Styling auf diese Kinder anzuwenden, die innen verschachtelt sind. Im Inneren verschachtelt wird die Beschriftung und auch die Eingabe mit dem Typ und der Nummer. Beginnen wir mit dem Etikett. So. Bill und das Etikett. Dadurch wird das Etikett innerhalb unseres Rechnungsabschnitts angestrebt. Da wir die Flexbox verwenden, können wir einen Flex-Wert von eins festlegen, und dann direkt darunter können wir die Rechnungseingabe anvisieren und diesem einen Flex-Wert von drei geben. Speichern und neu laden. Dies bedeutet nun, dass die Eingabe das Dreifache des verfügbaren Platzes als unser Label beansprucht. Als nächstes fügen wir diese Eingaben mit dem Zahlentyp etwas Styling hinzu. Denken Sie daran, in unserem HTML haben wir verschiedene Eingaben. Wir haben diesen hier, wir haben unser Sortiment, und auch die Reichweite unten unten auch. Wie sind wir spezifischer mit der Art der Eingabe, auf die Sie Styling anwenden möchten? Nun, wir können dies innerhalb dieser eckigen Klammern tun, indem wir den Typ auswählen. Nur Typ, den wir anvisieren wollen, ist die Zahl. Dies bedeutet, dass der Stil, den wir in diesen geschweiften Klammern hinzufügen , nur für unsere Zahleneingaben gelten wird, anstatt unseren Bereich direkt darunter. Lassen Sie uns zunächst die Hintergrundfarbe festlegen. Der Wert, den ich verwenden werde, ist f4f4f5. Die Schriftgröße, um dies ein wenig größer zu machen, 1,6 Rems, das entspricht 16 Pixel. Der Rahmen, können wir die Dicke auf ein Pixel, die Linie fest zu sein, und lassen Sie uns dies eine hellgraue Farbe geben. Wir können auch die Ecken runden, indem wir einen Randradius von 0,5 Rems anwenden , etwas Polsterung, und wieder möchte ich vier verschiedene Werte hinzufügen, also 0,8 Rems oben, Null auf der rechten Seite, 0,8 auch auf unten, und 0,8 rem auf der linken Seite. Laden Sie den Browser neu, und dies gibt uns gleich Abstand oben, links und unten und Null auf der rechten Seite. Jetzt ist unsere Eingabe etwas größer, wir werden jetzt ein Problem sehen, das mit der Rechnung verbunden ist. Wenn Sie sich die endgültige Version ansehen, wird dies auch in der Mittellinie unserer Eingabe aufgereiht sein. Nun, da wir den Abschnitt so einstellen, dass er den Anzeigetyp von flex hat, können wir dies leicht beheben, indem wir eine Flex-Eigenschaft namens align-self hinzufügen, setzen Sie dies als Mittelpunkt. Dies richtet sich nun an die Mittellinie unserer Eingabe. Als nächstes werden wir einen Kastenschatten hinzufügen, genau wie auf der fertigen Version. Um mit unserem umgebenden Abschnitt übereinzustimmen, werden wir auch diese Einstellung so einstellen, dass sie eingebaut ist. Auch die Verwendung der gleichen Werte wie früher. Der Kastenschatten wird eingeblendet sein. Die x- und y-Werte werden Null und zwei Pixel sein, eine Zwei-Pixel-Unschärfe, gefolgt von der Farbe Hellgrau. Als nächstes sehen wir, wenn wir einen Blick auf unsere endgültige Version werfen, dass jeder unserer Abschnitte, wie der Tipp und der Wert, auf jeder Seite unseres Rechners basiert. Dies gilt auch für den Gesamtabschnitt, die Spitze und auch für den Wert, und auch für diese Werte unten auch. Die Art und Weise, wie wir den Abstand erstellen können, ist auch die Vorteile der Flexbox. Die Flexbox hat eine Eigenschaft namens justify-content, wo wir den Raum zwischen diesen beiden Elementen setzen können. Um dies zu tun, müssen wir mehrere Abschnitte unseres HTML Ziel, so dass wir jeder von ihnen eine Klasse hinzufügen können. Der erste wird die Auswahltip-Beschriftung und der Wert sein. Werfen wir einen Blick darauf in unserem HTML. Dies ist der Abschnitt gerade hier. Lassen Sie uns eine Klasse hinzufügen. Lasst uns für den Raum zwischen gehen. Kopieren Sie dies und wir können dies an mehreren Stellen wiederverwenden. Wir müssen dies auch dem Tipp Abschnitt hinzufügen, und auch dem Gesamtabschnitt, in dem wir zwei Werte auf der gleichen Zeile haben. Der Tip Wrapper, der Wrapper für unseren gesamten Abschnitt, der Split und auch die Abschnitte Billeach und TipEach unten unten. Jetzt im CSS können wir diesen Leerraum zwischen anvisieren, setzen Sie den Anzeigetyp auf flex. Wenn wir nun Rechtfertigungsinhalt auswählen, können wir all diese Räume anwenden, um dazwischen zu sein. Speichern und neu laden. Nun, anstatt den Text und die Werte nebeneinander zu haben, haben diese jetzt unseren Raum dazwischen. Nur um das CSS für dieses Video abzurunden, werden wir unsere gesamte Sektion ein wenig kühner machen. Wir können dies tun, indem wir eine Klasse zu unserem Gesamtabschnitt hinzufügen. Kurz nach Leerzeichen können wir eine zweite Klasse hinzufügen, diese in das CSS einbinden. Lassen Sie uns zuerst die Schriftgröße auf zwei Rems setzen und auch die Schriftstärke fett sein. Reload, wir haben jetzt diesen größeren mutigeren Text. Dies lässt uns jetzt mit dem wichtigsten CSS für dieses Projekt getan. Im nächsten Video werden wir jedoch weitermachen und noch ein paar schöne letzten Schliff hinzufügen. Zum Beispiel werden wir eine andere Schriftart einschließen. Wir werden auch unseren eigenen benutzerdefinierten Bereichsschieber erstellen, anstatt den Browser-Standard zu verwenden , den wir derzeit hier sehen. 5. Schriftarten, benutzerdefinierte Schieberegler und Browserprefixe: Lassen Sie uns weiter mit unserem Styling für dieses Projekt fortfahren, indem Sie einen benutzerdefinierten Bereichsschieber erstellen. Im Moment, wenn wir uns das Projekt auf der Bühne ansehen, woran wir uns gerade befinden. Dies nutzt den Browser-Standardbereich, und es sieht nicht zu gut aus oder passt in unser aktuelles Projekt. Lassen Sie uns also darüber sprechen, wie wir unseren eigenen benutzerdefinierten Schieberegler erstellen können. Zuerst müssen wir das Aussehen unserer aktuellen Bereichsschieberegler auf keine festlegen, um alle Standard-Styling zu entfernen. Dann können wir voran gehen und unsere eigenen mit einigen benutzerdefinierten CSS erstellen. Die Browser-Unterstützung ist jedoch nicht perfekt für einige der Techniken, die wir verwenden werden. Wir können dies umgehen, indem wir Hersteller-Präfixe verwenden. Das Hinzufügen eines Anbieterpräfix zu einer CSS-Eigenschaft ist eine Möglichkeit bestimmte experimentelle CSS-Eigenschaften sowie Eigenschaften zu verwenden, die derzeit in bestimmten Browsern noch nicht vollständig unterstützt werden. Wenn wir nach unten scrollen, sehen wir die wichtigsten Präfixe, die wir verwenden können. Das erste ist Webkit, das für alle diese Browser gilt, wie Chrome und Safari. Wir haben dann das moz-Präfix, das für Firefox-Browser gilt. Wir können auch ältere Versionen von Opera und auch Internet Explorer ansprechen. Aber für dieses spezielle Projekt werde ich mich auf die ersten beiden konzentrieren. Alles, was wir tun müssen, ist eine bestimmte CSS-Eigenschaft zu finden, wie Übergang, und fügen Sie dann die Moz oder Webkit-Präfix-Inferenz hinzu. Mit diesen lernen wir, dem Browser mitzuteilen, dass wir diese gerne verwenden, und versuchen diese, bevor sie vollständig im Browser implementiert sind. Um dies zu tun, müssen wir beide Eingaben mit dem Typ des Bereichs ansprechen. Also zuerst, wir haben diesen hier. Lassen Sie uns eine Klasse von Bereich hinzufügen. Ich werde auch das gleiche für unseren zweiten Bereich Schieberegler tun, der gerade unten ist. Dies bedeutet, dass unser Styling auf beide unserer Produkteingänge angewendet wird. Beginnen wir also knapp unter unserer Gesamtsumme. Wir können unser Sortiment auswählen. Das erste, was wir tun müssen, ist, den Standard-Bereichsschieber zu entfernen. Wir können dies tun, indem wir das Aussehen auf keine setzen. Die Eigenschaft „Erscheinungsbild“ wird in Webkit-Browsern noch nicht vollständig unterstützt. Daher müssen wir auch das Webkit-Präfix davor hinzufügen. Wenn wir jetzt speichern und zu unserem Projekt gehen, laden Sie neu. Wir sehen, dass dies den Fortschrittsbalken von hinten entfernt hat. Wir werden auch sehr bald mit dem Styling dieses Formular-Schiebereglers fortfahren. Moment werden wir uns nur auf den eigentlichen Schieberegler konzentrieren. Zunächst einmal können wir die Breite auf 100 Prozent einstellen. Das ist also die volle Breite unseres Containers. Die Höhe von acht Pixeln, und wir können auch die Hintergrundfarbe unseres Schiebereglers einstellen. Ich möchte dieses hellgrau machen, was der Wert eines Eee ist. Wir können beginnen zu sehen, dass unser Schieberegler jetzt Gestalt annimmt. Lassen Sie uns nun etwas Rand ganz oben hinzufügen, um uns einige Abstände vom Text zu geben, und auch einen Randradius. Also vor allem der Rand auf der Oberseite von 1,2 rem, und auch ein Grenzradius von 0,3 rem. Das nächste, was wir anvisieren können, wenn dies aktiv ist oder angeklickt ist, ist die Rahmenfarbe, die um die Außenseite geht. Wir können dies mit der Umrissfarbe auswählen und den Standardwert ändern, um eine beliebige Farbe zu sein, die wir mögen. Ich werde für einen Marschwert gehen, den wir im linearen Farbverlauf verwendet haben. Also 5bceae. Aktualisieren. Nun, wenn wir auf einen dieser Schieberegler klicken, sehen wir jetzt diese grüne Farbe. Der nächste Schritt besteht darin, diesen kleinen Kreis, der als Schieberfilm bezeichnet wird, anzusprechen . Wir können dies wieder im CSS tun. Also lasst uns auf unseren Bereich zielen. Wenn wir dann die doppelten Doppelpunkte genau so verwenden, ist dies ein Pseudo-Element. Ein Pseudo-Element ermöglicht es uns, einen bestimmten Teil eines Elements zu zielen. Wenn wir zum Beispiel einen Textabsatz anvisieren, hätten wir Pseudoelemente zur Auswahl des ersten Buchstabens oder sogar der ersten Zeile. Aber da wir mit unserem Sortiment arbeiten, werden wir den Schieberfilm ins Visier nehmen. Insbesondere werden wir die Webkit-Versionen ansprechen. Dies wäre also für Chrome- und Safari-Browser. Der einzige Wert, den wir brauchen, ist Schieberfolie. Wir werden auch den Firefox-Browser in einem Moment anvisieren. So, wie wir es mit dem Bereich getan haben, werden wir das Aussehen so einstellen, dass es keine ist. Dann müssen wir die Breite und die Höhe unseres kleinen Filmschiebers einstellen. Also lasst uns für die Breite gehen, 2.2 rem. Die Höhe, die auch gleich sein wird. Wenn wir den Grenzradius auf 50 Prozent setzen, wird dies der vollständige Kreis. Werfen wir einen Blick auf das. Wir sehen es noch nicht, weil wir auch eine Hintergrundfarbe zuweisen müssen. Ich möchte dies fast so einstellen, dass es eine Farbe ist, die wir zuvor im Farbverlauf verwendet haben. Wir sehen jetzt unseren Filmschieber. Eine andere Sache, die wir tun werden, ist, den Cursor zu einem Zeiger zu ändern. Da gehen wir. Als Nächstes. Mal sehen, wie es in einem anderen Browser aussieht. Ich werde für Firefox gehen. Aber natürlich müssen Sie diesen Schritt nicht folgen, wenn Sie nicht wollen. also innerhalb des Tipprechners Lassen Sie unsalso innerhalb des Tipprechnersdie index.html öffnen. Wir sehen, dass wir derzeit nur das Standard-Styling für den Hintergrund haben. Wir sehen das Film-Styling noch nicht. Also lassen Sie uns dies beheben, indem wir einen Abschnitt für den Moz Range Film erstellen. Derzeit sind wir nur auf die Webkit-Version ausgerichtet. Also lassen Sie uns das kopieren und es unten einfügen. Dann hier drinnen, anstatt die Webkit-Version zu haben, die ich früher das meiste Präfix war, und anstatt Schieberfilm, wird dies der Range-Film genannt. Speichern Sie diese und laden Sie den Firefox-Browser neu. Ich sehe, der Film wurde geändert. Also ein paar Dinge, die hier zu beachten sind. Wir sehen, dass es eine Grenze um den Film gibt, in diesem Browser. So können wir die Grenze so einstellen, dass sie keine ist. Dies wird dann entfernen. Wir müssen auch nicht das Webkit-Erscheinungsbild von keines für diesen Browser einschließen. Eine Sache, die wir verbessern können, wenn wir klicken und diese aktiv machen, ist diese gepunktete Linie um die Außenseite. Der Weg, dies innerhalb von Firefox zu tun, ist, indem Sie den Bereich Schieberegler. Wieder sehen Sie die doppelten Doppelpunkte für die Pseudo-Elemente, und die Elemente, die wir wollen, werden moz sein. Verwenden Sie das Moz-Präfix für den Firefox-Browser. Dann ist der Name der Elemente Aufrufe in diesem ist der Fokus außen. Wir können den Rahmen auf einen Wert von 0 setzen, aktualisieren, und dies wurde jetzt entfernt. Diese Browser-Präfixe sind also etwas, auf das man achten muss , wenn man mit mehreren Browsern arbeitet, und auch alles, was noch nicht vollständig unterstützt wird. So ist das unsere Kundenpalette Schieberegler jetzt komplett. Nur eine Sache, die schnell zu beachten ist, wenn wir zurück zum Bereich Bereich scrollen, hier, wir zielen auf das Aussehen nur für die Webkit-Browser. Sie fragen sich vielleicht, warum wir nicht auf die Mozilla-Versionen ausgerichtet haben. Nun, das liegt daran, für diese besondere Erscheinung Eigenschaft, Firefox-Browser werden auch die Webkit-Versionen respektieren. Dies ist aus Kompatibilitätsgründen. Das letzte Stück Styling, das ich anwenden werde, lassen Sie uns diesen Firefox-Browser schließen, ist einige Google Fonts anzuwenden. Also lassen Sie uns eine Suche nach Google Fonts machen und gehen Sie zu fonts.google.com. Ich werde eine Schriftart namens Roboto verwenden. Also lassen Sie uns eine Suche nach diesem machen. Das ist die, die wir gerade hier brauchten. Um dies in unser Projekt aufzunehmen, können wir das Schriftgewicht auswählen, und auch wenn wir eine kursive Version wollen. Ich werde für die leichte 300-Version, das Medium, und auch eine kühne Version zu gehen. Um diese einzubeziehen, müssen wir auf den eingebetteten Link klicken. Kopieren Sie die Verknüpfung zum Stil. Dies geht in unsere index.html. Ich füge dies innerhalb des Kopfabschnitts direkt über unseren benutzerdefinierten Stylesheets ein. Speichern Sie diese Datei. Das nächste, was zu tun ist, ist auch die Schriftfamilie innerhalb unseres Stylesheets zu setzen. Kopieren Sie also die font-family Eigenschaft. Öffnen Sie unsere styles.css, und wir können dies für all unser Projekt innerhalb der Root-HTML-Elemente anwenden . Aktualisieren Sie den Browser. Unsere Schrift ist nun wirksam. Wir können auch die Standard-Schriftgewichtungen festlegen. Ich will 300 gehen. Jetzt sieht unser Styling viel mehr wie die fertige Version aus. Nur um dieses Projekt Styling abzuschließen. Es ist ziemlich schwer, von unserer Eingabe nur hier zu sagen , weil die Schriftarten nicht zu verschieden sind , aber standardmäßig erbt eine Eingabe die Schriftfamilie nicht. Um dies zu tun, müssen wir nach unten zu unserer Eingabe scrollen, die Art der Zahl. Wir können die Schriftfamilie sogar wie eine Kabine einstellen. Oder wir können das so einstellen, erben. Laden Sie den Browser neu, und dies wird jetzt wirksam. Dies ist nun das Ende des Stylingabschnitts für unseren Tip Calculator. Als nächstes werden wir fortfahren, um diese Funktion mit JavaScript zu machen. 6. Ereignisse und Benutzereingaben: Lassen Sie uns weitergehen, um unserem Projekt etwas JavaScript hinzuzufügen, wo wir unser Projekt wirklich zum Leben erwecken werden. Um dies zu tun, werden wir einen Skript-Abschnitt unten ganz unten erstellen. Wenn wir also bis zum Ende unserer index.html scrollen, direkt über dem schließenden body-tag, können wir unser JavaScript innerhalb der Skriptelemente einfügen. Dies wird ein öffnendes und schließendes Tag haben, und all unser Code wird zwischen diesem Abschnitt gehen. Also lasst uns darüber nachdenken, was wir hier tun wollen. Wir haben den Rechnungsabschnitt oben und der Benutzer wird hier einen Wert hinzufügen. Sobald dies geschehen ist, möchten wir einen Code ausführen, um alle Werte zu aktualisieren. Um dies zu tun, können wir eine Funktion erstellen, die für all diese Änderungen verantwortlich sein wird . Wir tun dies mit dem Funktionsschlüsselwort gefolgt von einem Namen, den Sie es dieser Funktion geben möchten. Wir könnten möglicherweise auch eine Erweiterung zwischen diesen Klammern einfügen, wenn wir wollten. Ich werde einen Blick darauf werfen, wie das später in diesem Projekt zu tun ist. Wir wissen jetzt, dass wir verstehen müssen, dass alles, was wir zwischen diesen geschweiften Klammern hinzufügen , jedes Mal ausgeführt wird, wenn wir diese Update-Funktion aufrufen. Wie rufen wir diese Updatefunktion tatsächlich auf? Nun, es gibt mehrere Möglichkeiten, das zu tun. Als Beispiel können wir dies tun, wenn ein Element angeklickt wurde. Scrollen wir nach oben zu unserem Rechnungsabschnitt. Wenn wir unsere Eingabe als Attribut finden, können wir auf ein Ereignis hören. Ein Ereignis ist, wenn etwas passiert, z. B. auf ein Element geklickt wird oder eine Eingabe aktualisiert wird. Dies ermöglicht es uns dann, unsere Funktion aufzurufen. Als Beispiel werden wir auf einen Klick hören, so dass wir auf Klick verwenden können. Innerhalb der Zitate fügen wir den Code hinzu, den wir ausführen möchten. In unserem Fall möchten wir die Update-Funktion gefolgt von den Klammern aufrufen , genau wie folgt. Wenn wir dies speichern und den Browser neu laden, wenn wir auf diese Eingabe klicken, sehen wir noch nichts passiert. Dies liegt daran, dass wir keinen Code zwischen diesen geschweiften Klammern haben. Wir können überprüfen, dies funktioniert, indem Sie ein Konsolenprotokoll, das eine Nachricht an die Konsole ausgibt, die Sie sagen, Funktion aufgerufen, speichern Sie unsere Datei. Wenn wir den Browser neu laden, können wir jetzt in die Entwickler-Tools gehen. Wir tun dies mit der rechten Maustaste und inspizieren. Klicken Sie auf die Registerkarte „Konsole“. Da wir ein Click-Ereignis hören, möchten wir nun auf diese Eingabe klicken, nur hier. Listen-Ausgabe erkennt die Funktionsaufrufe. So wird unsere Funktion jetzt korrekt aufgerufen. Lassen Sie uns dies auch für später offen halten und den Browser nach unten verkleinern. Allerdings ist das Aufrufen dieser Funktion, wenn darauf geklickt wird, kein guter Anwendungsfall. Wir wollen diese Funktion tatsächlich jedes Mal ausführen, wenn der Benutzer etwas innerhalb dieses Eingabefeldes eingibt. Wir können zurück zu unserer Eingabe scrollen und den Typ ändern, um auf Eingaben zu sein. Lasst uns das ändern. Anstatt auf Klick, müssen wir auf Eingaben. Laden Sie den Browser neu. Jedes Mal, wenn wir eine Zahl innerhalb dieses Feldes eingeben, sehen wir, dass unsere Funktion nun dreimal aufgerufen wurde. Für diese Funktion möchten wir sie jedoch etwas nützlicher machen, anstatt nur einige Texte an die Konsole zu protokollieren. Stattdessen wollen wir den Wert unserer Rechnung, den Prozentsatz für unseren Schieberegler und auch die Anzahl der Personen,auf die die Rechnung aufgeteilt wird, greifen den Prozentsatz für unseren Schieberegler und auch die Anzahl der Personen, . Um dies zu tun, können wir auf die Werte zugreifen, die Eingaben in eines dieser Felder gewesen sind. Zuallererst wählen wir die vollständigen Dokumente aus, die die Webseite ist. Wir können dies dann eingrenzen, um ein einzelnes Element auszuwählen. Eine der Möglichkeiten, wie wir dies greifen können, besteht darin, dies anhand der ID des Elements auszuwählen. Also der erste, den wir packen wollen, ist der Wert dieses Gesetzes. Wenn wir bis zur Rechnung scrollen, hat dies den Wert Ihrer Rechnung. So können wir davon Gebrauch machen. Wir sagen Dokumente. Dann können wir ein Element durch die ID greifen und den Wert Ihrer Rechnung hinzufügen. Jetzt haben wir Zugang zu diesen besonderen Elementen. Wir können dies jetzt innerhalb einer Variablen lösen. Wir können eine Variable mit dem Schlüsselwort let erstellen und dann den gleichen Namen geben, wie Rechnung. Dadurch wird nun der Wert von allem auf der rechten Seite gespeichert, für diesen Wert namens bill. Wenn wir überprüfen möchten, dass dies funktioniert, können wir auch ein neues Konsolenprotokoll in den Wert der Rechnung übergeben. Dies wird jedes Mal aufgerufen, wenn wir etwas zu unserer Eingabe hinzufügen. Wenn wir einen Blick auf die Konsole werfen, sehen wir den Wert der tatsächlichen Eingänge, Elemente mit der Art der Zahl. Was wir jedoch für unseren Tip Rechner wollen, ist , den Inhalt, den der Benutzer eingibt, tatsächlich zu greifen. Wir können dies mit.value tun. Lassen Sie uns dies erneut versuchen, indem Sie erneut laden, geben Sie einen Wert ein. Nun wird der vom Benutzer eingegebene Istwert nun in dieser Rechnungsvariablen gespeichert. Also, jetzt wissen wir, wie das geht. Wir können auch die Spitze Prozent und auch die Spaltung. Also lassen Sie uns dies kopieren und in mehr Zeiten einfügen. Der zweite ist der TipPercent. Wir müssen uns auch einen Ausweis schnappen. Also lassen Sie uns einen Blick darauf werfen. Die erste Bereichseingabe hat die ID von TipInputs. Also kopieren Sie das. Es ist drin. Der dritte wird für die Spaltung sein. Dies hat eine ID der geteilten Eingabe. Kurz bevor wir fortfahren, lassen Sie uns alle drei dieser Werte protokollieren und überprüfen, dass ihre funktionieren. Der nächste ist der TipPercent und auch der Split. Laden Sie den Browser neu, lassen Sie uns für den Wert 67 gehen. So sehen wir den Wert von 67. Dann haben wir den Wert der Spitze, die derzeit Null ist und dann die Spaltung, die ein Prozent ist. Genau wie ein kurzer Tipp, wenn die Konsole mehrere Werte anmeldet, können wir diese auch in die geschweiften Klammern wickeln, um diese in ein Objekt zu verwandeln , und diese werden viel einfacher zu lesen sein. Fügen Sie einen Wert hinzu. Dadurch wird der Eigenschaftsname zusammen mit dem Wert ausgegeben, um ihn in der Konsole viel lesbarer zu machen. Dies bedeutet jetzt, dass wir alle unsere Benutzereingaben erfassen und wir können sehr bald mit diesen Werten arbeiten. Wenn wir mit den Bereichseingaben arbeiten, werden Sie jedoch feststellen, dass keiner der Werte in der Konsole aktualisiert wird. Dies liegt daran, dass wir diese Update-Funktion nur jedes Mal aufrufen , wenn der Benutzer etwas in diese Rechnung eingibt. Für unseren Anwendungsfall wäre es jedoch viel praktischer, wenn diese Funktion aktualisiert wurde, wenn der Benutzer auf eine dieser Eingaben klickt. Um dies zu tun, entfernen wir den On-Input-Ereignishandler. Stattdessen können wir dies auf dem Hauptwrapper platzieren. In diesem Hauptbereich werden alle unsere Eingaben umhüllt. Also, wenn wir das speichern, den Browser aktualisieren, und jetzt jedes Mal, wenn eine unserer Eingaben aktualisiert wurde, wird dies jetzt unsere Funktion aufrufen. Wir sehen, dass der Spitzenprozentsatz erhöht wird, und auch die Spaltung ist jetzt zwischen drei Personen. Dies bedeutet, dass unsere Update-Funktion nun für alle drei Eingänge aufgerufen wird. Aber wir können dies auch verbessern, indem wir unser JavaScript entfernen und dieses auch vom HTML trennen. Wie wir dies tun können, wenn wir eine ID setzen, lassen Sie uns für einen Container gehen. Wir können dies jetzt als reines HTML behalten und nur unser JavaScript im Skriptbereich unten haben. Lassen Sie uns zunächst einen Verweis auf diesen Haupt-Wrapper erstellen. Wir tun dies genau wie oben mit document.getElementById. Der ID-Name, den wir gerade platziert haben, ist Container und wir können dies in einer Variablen namens Container speichern. Also jetzt haben wir unseren Container. Wir möchten unsere auf Input Ereignishandler wieder einführen. Wir können dies mit addEventListener tun. Dies wird zwei Werte annehmen. Der erste Wert ist der Typ des Ereignisses, auf den wir hören möchten. Genau wie zuvor können wir Dinge wie Klick oder Eingaben verwenden und dann durch ein Komma trennen, den Namen der Funktion, die wir aufrufen möchten. In unserem Fall ist dies Update. Lassen Sie uns diese Datei speichern und überprüfen, dass dies in Ordnung ist. Wenn wir auf die Rechnung klicken, wird dies aktualisiert. Wenn wir die Spitze erhöhen, wird dies auch aktualisiert. Schließlich wird der Split-Wert. Dies lässt unsere Funktion jetzt mit Zugriff auf alle Informationen, die wir brauchen. Als nächstes werden wir alle diese Werte verwenden, um unsere Tippberechnungen zu erstellen und sie dann in der Benutzeroberfläche anzuzeigen. 7. %-Berechnung Werte anzeigen: Wir haben jetzt eine hübsche, einfache Update-Funktion, die alle unsere Benutzereingaben erfasst. Dann können wir nun diese Werte verwenden, um unsere Tip Outputs zu berechnen. Wir werden diese verwenden, um einige Berechnungen durchzuführen und dann die Benutzeroberfläche zu aktualisieren. Zum Beispiel müssen wir den Wert unserer Spitze über auf der rechten Seite ausgeben. Wir müssen die Summe ausgeben. Wir müssen auch sicherstellen, dass, wenn wir diesen Spitzenwert erhöhen, dass der Prozentsatz auch angezeigt wird, und auch das gleiche für diese Split-Werte. Fangen wir an. Ich möchte dieses Konsolenprotokoll aus dem letzten Video entfernen, und dann können wir diese Werte verwenden, um unsere Berechnungen durchzuführen. Der erste, den ich greifen werde, ist für den Spitzenwert. Wie sollen wir das vorgehen? Nun, zum Beispiel, wenn der Benutzer eine Rechnung wie 100 und einen Spitzenwert von 20 Prozent eingibt, wollen wir sicherstellen, dass der Spitzenwert in Geld 20 ist. Wir haben also einen Rechnungswert von 100, und die Art und Weise, wie wir dies tun können, ist, diesen Wert mit dem Prozentsatz der Spitze zu multiplizieren , z. B. Sie können sehen, auf der Zeile unten zurückgegeben, wir haben einen Wert von 2.000. Dies liegt daran, dass wir den Spitzenwert durch 100 dividieren müssen. Dies gibt uns jetzt den richtigen Wert gerade hier. Wenn das 15 Prozent war, wird uns das den Wert von 15 geben. Wir können dies jetzt in unserer Update-Funktion verwenden, und wir können dies innerhalb einer Variablen speichern. Wir können dies einen Tip Value nennen, und wir werden dies durch die gleiche Berechnung, die wir gerade durchgeführt haben, gleich setzen. Das 100 Äquivalent ist also der Wert der Rechnung. Wir werden sagen, Rechnung multipliziert mit unserem Tipp Prozent geteilt durch 100, um sicherzustellen, dass die Spitze Prozent zuerst durch 100 geteilt wird, und dann multiplizieren mit der Rechnung. Wir können diese in die Klammern einwickeln , um sicherzustellen, dass die Berechnung korrekt durchgeführt wird. Lassen Sie uns ein Konsolenprotokoll machen und wir können überprüfen, dass alles gut funktioniert. Die Spitze Prozent. Aktualisieren Sie den Browser. Gehen wir für die gleiche Berechnung. So 100, können wir den Spitzenwert auswählen. Sie können sehen, ob wir das ganz nach oben verschieben, die aktualisierten Werte werden nun angezeigt. Jetzt haben wir den Gesamtwert der Spitze. Wir können jetzt leicht herausfinden, wie viel der Tipp pro Person ist. Lassen Sie uns eine neue Variable direkt unten erstellen, lassen Sie dies den Tipp jeder nennen. Das wird ziemlich unkompliziert sein. Alles, was wir tun werden, ist, den Spitzenwert zu nehmen , den wir gerade oben haben, und dann durch die Anzahl der Menschen zu teilen. Dies ist in der Variablen oben genannt Split verfügbar. Das nächste, was wir ganz unten tun können, ist herauszufinden, wie viel die Gesamtrechnung pro Person ist. Dies wird wieder eine ziemlich unkomplizierte Berechnung sein. Wir haben derzeit die Gesamtrechnung, die wir innerhalb dieser Variablen packen, und alles, was wir tun müssen, ist, sie durch die Anzahl der Personen zu teilen. Eine neue Variable, ich werde das die neue Bill Each nennen. Das erste, was wir tun müssen, ist, die Rechnung plus den Gesamtwert der Spitze hinzuzufügen. Dies wird uns die Gesamtrechnung geben, wenn sie bezahlt wird, einschließlich der Trinkgeld, und dann können wir diese durch die Anzahl der Personen teilen, die in der Aufteilung verfügbar ist. Genau wie oben werden wir diese in die Klammern einwickeln , um sicherzustellen, dass die Berechnung in der richtigen Reihenfolge durchgeführt wird. Wir addieren die Werte zusammen und multiplizieren diese dann mit der Anzahl der Personen. Testen wir das hier. Wir kopieren jede neue Rechnung, fügen diese in unser Konsolenprotokoll hinzu und wir können dies jetzt testen. Wenn wir nun den Wert 100 hinzufügen, sehen wir ein Problem in der Konsole. Wir geben den Wert 1000 aus, was eine zusätzliche Null ist, die am Ende hinzugefügt wird. Versuchen wir es noch mal. Wenn wir 50 hinzufügen, tritt das gleiche Problem mit dem Wert von 500 auf. Der Grund, warum dies geschieht, ist im Moment wahrscheinlich nicht allzu klar. Dies liegt daran, dass wir tatsächlich einen Datentyp von String anstelle von Zahlen aus dieser Rechnungseingabe erhalten . Wir können dies durch Konsolenprotokollierung der Art der überprüfen, und dann den Wert unserer Rechnung. Fügen Sie etwas in die Eingabe ein, und dies wird mit dem Typ der Zeichenfolge bestätigt. Allerdings, die Spitze Wert, tun wir dies, neu laden. Dies ist eine Art von Zahl. Bevor wir den Wert der neuen Rechnung jeweils setzen, fügen wir eine Zeichenfolge mit einer Zahl hinzu. Was tatsächlich passiert, wenn wir die Rechnung zum Spitzenwert hinzufügen, anstatt eine Zahlenberechnung durchzuführen, erhalten wir 50 und fügen dann die Null am Ende hinzu, was uns den Wert von 500 gibt, wir in der Konsole. Die Art und Weise, wie wir dies runden können, besteht darin, den Wert der Rechnung in eine Zahl umzuwandeln. Also werde ich den Abschnitt zitieren, in dem wir den Wert erfassen und dann die JavaScript-Zahlenfunktion verwenden, indem wir den Code zurückgeben , der unseren Rechnungswert erfasst. Jetzt mit diesem vorhanden, können wir jetzt ein neues Konsolenprotokoll mit der Art der Rechnung erstellen. Speichern und laden Sie den Browser neu, und wir fügen hier alles hinzu, was jetzt als Zahl angezeigt wird. Unser Wert wird nun als Zahl angezeigt, also lassen Sie uns noch einmal versuchen, den Wert der neuen Rechnung jeder. Überprüfen Sie, dass das alles in Ordnung ist, und wir sehen jetzt den Wert von 50 statt 500. Gut. Jetzt haben wir alle Daten, mit denen wir arbeiten müssen, und der nächste Schritt ist, diese Werte tatsächlich in unsere Benutzeroberfläche auszugeben. Wir werden dies in ähnlicher Weise direkt oben tun, wo wir die einzelnen Elemente ergriffen haben. Aber anstatt den Wert der Elemente zu greifen, werden wir stattdessen den Wert festlegen. Am Ende hier können wir ein document.getElementById hinzufügen. Welche ID möchten wir für dieses bestimmte Element greifen? Scrollen wir nach oben. Da ist unser Platzhalter von null Prozent , den wir jetzt entfernen können, und das hat die ID von Tip Prozent. Zurück nach unten, können wir das hinzufügen. Um dann den Wert unserer Elemente anstatt unseres Platzhalters festzulegen, können wir innerHTML verwenden. Diese innerHTML wird den Wert innerhalb unseres Elements setzen, und wir wollen, dass dies äquivalent zu unserem Tipp Prozent sein. Speichern und neu laden. Dies funktioniert jetzt, und wir können auch am Ende das Prozentsymbol hinzufügen. Wir können dies mit dem Plus-Symbol hinzufügen, und da wir dann einen String-Wert anstelle einer Zahl hinzufügen möchten, wird dies in Anführungszeichen hinzugefügt werden. Wir sollten nun ein Prozentsymbol sehen, wenn wir den Browser neu laden und über unseren Bereichsschieberegler scrollen. Als nächstes haben wir diesen Tipp Wert knapp darunter. Scrollen wir zurück zu unserem Code. Dies ist das Element, das wir nur hier anvisieren wollen, und dies hat die ID des Tip Value. Genau wie hier werden wir auch document.getElementById verwenden, die ID des Tip-Werts übergeben, und wieder werden wir die innerHTML setzen. Wir haben dies bereits knapp oben im Wert des Spitzenwerts berechnet. Versuchen wir es, eine Rechnung von 50. Ich werde die Spitze setzen, und 10 Prozent von 50 sind jetzt gleich fünf. Wir werden dies ein paar Mal verwenden, also werde ich das kopieren, fügen Sie es unten ein. Der dritte wird für den Gesamtwert sein, der eine Berechnung unserer Rechnung ist, die zum Spitzenwert addiert wird. Die ID für diesen Abschnitt war insgesamt mit Tipp, die wir aus unserem HTML direkt oben sehen können, es war dieser Abschnitt gerade hier. Dann können wir hinzufügen, dass der HTML-Inhalt mit innerHTML, senden Sie dies gleich unserer Rechnung, die zu unserem Tipp Wert hinzugefügt wird. Probieren wir das aus, eine Rechnung von 50. Diese beiden Werte zusammen geben uns die Summe von 55. Als nächstes haben wir den geteilten Abschnitt direkt darunter. Das erste, was wir gehen, um zu gehen, ist der Wert der Split, also eine Person, aber jetzt werden wir nur die Anzahl der Personen wie 1, 2, 3, anstatt Menschen oder Person direkt nach der Ausgabe. Fangen wir mit diesem an. Element nach ID abrufen. Die ID, die wir für diese brauchen, wenn wir nach oben zu unserem Split-Abschnitt scrollen, können wir als nächstes sehen, wo ich den gesamten Inhalt platzieren werde. Wenn wir dies entfernen, ist dies Split-Wert. Dies ist der Wert unserer Variablen Split kurz danach. Der nächste, den wir packen werden, ist die Gesamtrechnung pro Person. Die ID für dieses Element in diesem Abschnitt hier wird jeweils Rechnung sein. Auch hier haben wir diesen Wert in der Variablen gespeichert, die jeweils neue Rechnung genannt wird. Der letzte Abschnitt, mit dem wir arbeiten müssen, ist die Spitze jeweils unten unten. Lassen Sie uns wieder in unsere getElementById einfügen. Der Spam, den wir aktualisieren, hat jeweils die ID der Spitze. Ich werde den Wert so einstellen, dass er die Spitze jeder Variablen ist, die Sie oben gespeichert haben. Speichern Sie das und zurück zu unserem Projekt. Sind sie Bill? Wir wissen, dass das alles funktioniert, also gehen wir für 10 Prozent. Da wir nur eine Person haben, ist die Rechnung jeweils 55, und sie zahlen auch den vollen Tipp von fünf. Lassen Sie uns versuchen, das zu zwei Personen zu sein. Der Wert wird hier aktualisiert und dies aktualisiert jetzt unsere Werte direkt unten. Dies lässt nun den Großteil der Funktionalität für unseren Tip Rechner jetzt an Ort und Stelle. Als nächstes werden wir fortfahren, um einige Formatierungen in die Währung und auch die geteilten Werte hinzuzufügen . 8. Formatieren von Währung und Split: Willkommen zum abschließenden Video für dieses Kursprojekt. In diesem Video werden wir einige letzten Schliff zu unserem Tipp Rechner machen, und insbesondere werden wir unsere Währung formatieren und auch mit der geteilten Ausgabe arbeiten. Zunächst einmal werden wir einige Funktionen erstellen, die unsere Währungswerte auf zwei Dezimalstellen runden, zusammen mit einem Währungssymbol vor zu setzen. Daneben, wo wir unsere Spaltung unten haben, werden wir dies ändern, um entweder eine Person oder zwei Personen, drei Personen usw. auszugeben . Auch diese Währungsfunktion kann für die aufgeteilten Werte am unteren Rand verwendet werden. Um dies zu tun, gehen wir zu unserem Skript, und wenn wir einen Blick werfen, wo wir alle diese Werte ausgeben, anstatt einfach eine Variable auszugeben, werden wir dies an eine Funktion übergeben. Lassen Sie uns diese Funktion ganz oben erstellen. Wir beginnen mit der Funktion, die unser Geld formatieren wird. Damit dies funktioniert, benötigen wir auch den tatsächlichen Währungswert, um mit dem wir arbeiten können, und wir werden diesen sehr bald an diese Funktion übergeben. Nun, es gibt ein paar Dinge, die wir mit diesem tatsächlichen Währungswert tun wollen. Das erste, was zu tun ist, ist, dies auf zwei Dezimalstellen zu runden, und dann werden wir ein Währungssymbol vorne hinzufügen. Nehmen wir unseren Wert, und wir können dies einem neuen Wert zuordnen. Der neue Wert wird gleich dem aktuellen Wert sein, und wir können dies auf zwei Dezimalstellen setzen mit der toFixed Methode. Diese neue Funktion muss dann unseren neuen Wert zurückgeben. Bevor wir also voran gehen und diesen neuen Wert ausgeben, können wir auch zu diesem Anfang eine Zeichenfolge hinzufügen, die ein Währungssymbol enthält, ein Leerzeichen hinzufügen wird , und dann können wir dies dem Wert hinzufügen. Da es sich um eine Funktion handelt, können wir dies jetzt überall wiederverwenden, wo wir brauchen, um einen Währungswert auszugeben. Lassen Sie uns das greifen, und wenn wir nach unten scrollen, ist der erste der TipValue. Anstatt unseren Wert auszugeben, der in dieser Variablen enthalten ist, können wir nun diese Funktion aufrufen, die in unserem TipValue übergeben wird. Dieser TipValue wird tatsächlich innerhalb unserer Funktion direkt über als dieser Wert empfangen werden, und dann können wir unsere Änderungen vornehmen und den neuen Wert zurückgeben. Die Summe mit Tipp, können wir auch greifen, diese, und ersetzen Sie diese durch unsere Funktion. Als Nächstes haben wir NewBilleach. Übergeben Sie dies in unsere Funktion, und schließlich den Spitzenwert für jede Person. Lassen Sie uns jetzt speichern und überprüfen, dass dies im Browser funktioniert. Fügen Sie einen Wert hinzu, und jetzt, wenn wir verschiedene Spitzenwerte auswählen und auch teilen, sehen wir, dass diese jetzt neben der Ausgabe des Währungssymbols auf zwei Dezimalstellen gerundet werden . Das nächste, was wir tun werden, ist eine neue Funktion zu erstellen, die die geteilte Ausgabe formatieren wird, so dass diese Funktion entweder eine Person ausgibt, oder es wird zwei Personen ausgeben und so weiter. Gehen Sie zurück zu unserem Skript-Abschnitt, lassen Sie uns eine neue Funktion erstellen, und rufen Sie uns diese FormatSplit. Dies wird auch einen Wert annehmen, der die Anzahl der Personen sein wird , zwischen denen die Rechnung aufgeteilt wird. Lassen Sie uns zuerst überprüfen, ob dieser Wert gleich 1 ist. Wenn dies der Fall ist, wollen wir dann eine Zeichenfolge zurückgeben, die einfach sagt, eine Person. So können wir den Wert plus eine Zeichenfolge zurückgeben, die das Wort Person ist. Diese Codezeile wird nur ausgeführt, wenn der Wert der Teilung gleich 1 ist. In der Tat möchte dies nur eine Zeichenfolge sein. Wenn der Wert zwei oder höher ist, wir dann einen neuen Wert zurück , der der aktuelle Wert ist, und dieses Mal statt Person, wird der Wert Menschen sein. Jetzt geben Sie dies aus, wir werden unsere FormatSplit-Funktion verwenden, in unserem Split übergeben. Gehen Sie zum Browser, lassen Sie uns überprüfen, dass dies funktioniert. Wir können einen Wert hinzufügen, und wir sehen die Ausgabe einer Person. Lassen Sie uns das ändern Nummer zwei, zwei Menschen, drei Menschen, und so weiter. Dies sind jetzt einige nette Verbesserungen für unseren Tipp Rechner, aber es gibt einen Randfall, den wir kümmern müssen, und dies hängt von den besonderen Werten ab, die wir hinzufügen. Wenn wir etwas tun, wie 47 und 15 Prozent Spitze, aufgeteilt zwischen zwei Menschen, es vielleicht nicht sofort offensichtlich, aber es gibt ein kleines Problem hier. Dieses Problem ist die Rechnung jeder, und auch die Spitze deckt nicht die Gesamtsummen nur etwa die Spitze ab. Der Tipp ist jeweils 3,52, was uns den Wert von 7,04 geben wird, und wir wollen dies 7.05 machen. Das gleiche mit der tatsächlichen Rechnung jeder, wenn jede Person in 27.02 setzt, wird dies etwas unter der Gesamtsumme sein. Jetzt können wir dies beheben, indem wir zu unserer Funktion gehen , die wir früher erstellt haben, die FormatMoney ist. In dem Moment, wenn wir die toFixed-Methode aufrufen, ist dies je nach Anzahl entweder nach oben oder unten gerundet. Um dieses Problem zu beheben, möchten wir immer sicherstellen, dass unser Wert aufgerundet und nie abgerundet wird . Es gibt einige komplexe mathematische Berechnungen, die wir tun können, um dies zu erreichen, aber es gibt auch einen viel einfacheren Weg. Ganz oben, wir werden wieder unseren Wert und unsere Veränderungen ergreifen. Wir können eine mathematische Funktion namens ceil verwenden, die immer unsere Zahlen aufrunden wird. Standardmäßig wird Math.Ceil jedoch auf die nächste ganze Zahl aufgerundet. Zum Beispiel 27.02, wird gerundet auf 28 sein. Dies würde uns dann einige Werte zurückgeben, die viel zu hoch sind. Stattdessen wollen wir die zweite Dezimalstelle greifen und stattdessen diese aufrunden. Um dies zu tun, werden wir unseren ursprünglichen Wert mit 100 multiplizieren. Lassen Sie uns einige Konsolenprotokolle machen und sehen, wie dies im Browser aussieht. So werden wir die Konsole protokollieren den ursprünglichen Wert, also den ersten Wert, und dann werden wir das gleiche Konsolenprotokoll tun, aber nachdem dieser Wert geändert wurde. Lassen Sie uns die Entwickler-Tools mit Rechtsklick und Inspect öffnen. Gehen Sie in die Konsole. Wenn wir diese paarweise betrachten, besonders unten unten, wurden 3.525 nun auf 353 gerundet, genauso wie 27.025, das ist aufgerundet. Jetzt ist dies aufgerundet, wir können dies jetzt durch 100 teilen, um uns die ursprünglichen Dezimalstellen zu geben. Nehmen wir diesen Wert, teilen Sie ihn durch 100 und laden Sie dann den Browser neu. Lassen Sie uns unsere Werte wieder an Ort und Stelle hinzufügen, und jetzt werden diese Werte mit zwei Personen multipliziert nicht ausreichen, um die gesamte Rechnung und Tipp abzudecken. Dies ist nur ein kleines Detail, aber etwas, das wirklich wichtig sein könnte, wenn man mit Geld arbeitet. Lassen Sie uns diese Konsolenprotokolle entfernen und unsere Funktion bereinigen. Das ist genug für unser Tipp Taschenrechner Projekt, ich hoffe, Sie haben es genossen, und auch etwas Neues gelernt. Sie können nun zum nächsten Projekt wechseln, eine Pause machen oder einige weitere Anpassungen zu diesem Projekt hinzufügen, oder einige weitere Anpassungen zu diesem Projekt hinzufügen entweder über CSS, um das Erscheinungsbild zu ändern, oder Sie können einige verschiedene JavaScript-Funktionen hinzufügen. Ich hoffe, Sie haben dieses Projekt genossen 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 haben etwas Wissen daraus gewonnen. 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 über alle neuen Klassen informiert werden, sobald sie verfügbar sind. Nochmals vielen Dank. Viel Glück. Hoffentlich sehe ich dich wieder in einer zukünftigen Klasse.