Erstellen eines handgefertigten Rechners mit HTML, CSS und JavaScript

1. Einführung in den Kurs: Hallo und willkommen bei der Erstellung eines Taschenrechners von Hand Hier auf Skill share dot com. In diesem Kurs werden wir einen brandneuen Rechner von Grund auf mit HTML, CSS und JavaScript erstellen . Wir werden modernes HTML, CSS und JavaScript schreiben, und Ihr Projekt während dieses Kurses besteht darin, im Grunde einen brandneuen Rechner zu erstellen, genau wie das, was Sie hier sehen. Aber, wissen Sie, lassen Sie Ihre etwas anders aussehen, ein bisschen schöner, wahrscheinlich. Und fügen Sie die Interaktivität hier hinzu, so dass Sie auf eine dieser Zahlen klicken können und Sie alle Arten von Mathematik machen , wenn Sie möchten. Dieser Kurs ist perfekt für Front und Entwickler, die HTML, CSS und JavaScript lernen und Sie ein wenig mehr Hände auf die Praxis wollen, etwas mehr wirklich Leben als nur eine Hallo Welt Anwendung oder eine to do Liste zu schaffen . Wenn das für Sie sehr interessant aussieht , können Sie an diesem Kurs teilnehmen und wir beginnen sofort 2. Das Projekt anlegen: Hallo und willkommen zu der allerersten Lektion über die Erstellung eines Taschenrechners von Grund auf oder von Hand . In diesem Kurs werden wir HTML CSS zusammen mit etwas JavaScript verwenden. Nun, nichts wird zu kompliziert werden, aber Sie sollten bereits grundlegende HTML-Grundlagen kennen. CSS. Und wenn Sie nicht wissen, was das Javascript-Teil ist, das ist okay, ich kann Sie durch diesen Teil führen, wenn wir auch dort sind. Erste Dinge zuerst. Ich habe eine Datei namens index dot html erstellt und ich verwende V s Codas, meinen Editor. Also werde ich html Doppelpunkt fünf eingeben und dann Tab drücken, und das füllt einfach automatisch ein paar magische Sachen für mich. Dies ist, was Sie brauchen, um Ihre reguläre HTML-Webseite sowieso einrichten zu lassen, Also werde ich nur einen Titel in hier namens Calculator bei einem HTML werfen. Wenn Sie den Tab-Titel ändern möchten, ändern Sie einfach den Text hier. Jetzt werde ich zu Firefox umblättern, und ich kann bis zur Datei öffnen Datei gehen, und ich kann diese HTML-Datei auswählen, wo immer Sie das speichern. Also, wenn es auf Ihrem Schreibtisch oben ist, werden Sie gehen, um zu Ihrem Desktop gehen wollen, um diese HTML-Datei öffnen. Ich nenne es immer Index dot html, weil das ohnehin eine gute Namenskonvention für Websites ist. Also lasst uns das öffnen und wir sollten so ziemlich nichts sehen, was wir hier oben sehen können. Da steht „Rechner“. Das ist alles, was wir jetzt hinzugefügt haben, um zu demonstrieren, dass diese Seite funktioniert. Wir können nicht in unserem Körper sagen, wo wir in der Lage sein sollen, Text zu schreiben und HTML und allerlei Sachen hinzuzufügen . Wir können ein H ein Tag haben, und dieses H ein Tag ist ein Header eins. Es ist also ein großer Text. Und wenn ich einfach diese Datei speichern und umklappe, um Fox zu feuern und dann diese Seite zu aktualisieren, können Sie sehen, dass hier großer Text steht. Und normaler Text ist wie in einem Absatz mit dem P-Tag. Und ich spürte das mit Laura Ipsum Text da drin. Also werde ich das nochmal sagen. Flip on über Firefox und lassen Sie uns einfach Refresh drücken. Und so ist das ein normaler Texaner. Dies ist ein großer Text. Nichts daran ist fantastisch. Dies ist die grundlegendste Version einer Website. Sie könnten möglicherweise erstellen, aber es ist wirklich wichtig, diese Basis eingerichtet zu haben. Also, was wir hier sagen, ist DOC-Typ HTML zu verwenden. Dies ist das fünfte HTML-Tag. Dann haben wir ein HTML-Element, und der Standard Lang ist Englisch. Technisch gesehen brauchst du das eigentlich nicht. V s Trainer füllten das automatisch für mich. Wir sagten, der Charakter sagte seine utf acht. Wir können also japanische Zeichen, koreanische Zeichen, arabische Zeichen, englische Zeichen, allerlei Sachen hier drin haben. Und unsere Seite wird nicht lustig aussehen. Alle Charaktere werden gerendert, wie sie es regelmäßig tun würden. Dann sagten wir, Vieux port, dies wird im Grunde unsere Website ansprechbar machen. Wenn Sie also diese Seite laden würden, sagen wir, Ihr mobiles Gerät, wird dies tatsächlich so funktionieren, wie es funktionieren soll und Sie können CSS-Medienabfragen schreiben. Dann haben wir einen Titel hinzugefügt. Dieser Titel ist der enge Tab-Titel hier oben, und das ist irgendwie alles, was in den Kopf geht und in den Körper ist, wo wir all unsere tatsächlichen Inhalte. Und dann setzen wir all das in unsere HTML-Elemente und im Grunde, was wir sagen, Hier ist alles von hier zu hören, all das Zeug auf der Innenseite ist ht keine Bewegung vorwärts. Wir werden all unsere tatsächlichen Inhalte in diesem Abschnitt hier einfügen, und wir werden einige CSS direkt hier mit dem physischen internen CSS schreiben. Also werden wir CSS direkt in dieses Dokument schreiben und am Ende dieses Kurses wird dies bereinigen und sicherstellen, dass es in seine richtige Datei geht, so dass wir Best Practices folgen . Also zuerst, wir mussten diese Datei irgendwie herausfinden. Wir müssen es strukturieren. Wir mussten es so herausstellen, wie es jetzt aussieht, sobald Sie so etwas haben, können Sie tatsächlich anfangen, Ihre Webseite zu erstellen. Aber es ist erst, wenn wir tatsächlich etwas von dieser Einrichtung haben, können wir eine richtige Webseite erstellen . Also das nächste letzte, was wir tun werden, ist, dass wir etwas HTML schreiben und es wird total eklig aussehen. Aber dann werden wir einige CSS hinzufügen und wird wirklich, wirklich schönaussehen wirklich schön 3. Den HTML ausrichten: Alles in Ordnung. Die ersten Dinge zuerst. Wir müssen etwas HTML aufhalten. Nun, dieser Teil ist ehrlich gesagt nicht der aufregendste. Aber html ist das Skelett hinter jeder einzelnen Website, jeder Web-App. Es ist der Schlüssel, um Javascript und CSS zu sagen, wie Stil schwächen und mit unserer Seite interagieren. Jetzt werden wir einen Rechner erstellen, und wir werden zunächst HTML verwenden, also wird das ziemlich eklig aussehen. Aber was wir tun können, ist ein div zu erstellen, in dem alle unsere Rechner Inhalte leben können. Und wenn wir wollten, könnten wir auch diese Klasse von Taschenrechner geben. Jetzt, sobald wir in einige der CSS kommen, werde ich beschreiben, welche Klassen und welche Ideen sind und Dinge wie das s o A div ist nur ein Standardteilerelement. Es tut wirklich gar nichts. Es ist nur ein Dummy-Element. Es ist nur für die Schaffung von Allzweck-Zeug. Aber im Inneren von hier wollen wir auch ein anderes div. Und das ist, wo unsere Ergebnisse gehen. Hier ist also die Oberseite des Rechners. Wo Sie ein plus zwei setzen, ist gleich drei. Das ist, wo das gehen wird, dann werden wir zu erstellen und eine Nordling-Liste mit all unseren Listenelementen hier drin. Und so lassen Sie uns einfach einen Blick auf das werfen, was wir derzeit haben. Jemand wird dort einen Test ausschreiben. Sie speichern diese Datei und lassen Sie uns zu Firefox gehen und drücken, Aktualisieren, und wir können dies sehen. Ich mache nur hier drin, damit du hier oben sehen kannst. Erfüllte 300%. Sieht nicht sehr gut aus, oder? Nun, wir müssen klare Multiplikation hinzufügen, Zahlen eins durch 10 oder Null durch neun teilen, eher und Gleichheitszeichen in allen möglichen Sachen. Also gehen wir weiter und fügen Sie das hier hinzu. Und dann im nächsten Video, können wir das CSS tatsächlich so anfassen, wie wir es wollen. Aber im Moment müssen wir einen Taschenrechner mit einigen Schaltflächen erstellen. Nun, Sie müssen keine UN-geordnete Liste verwenden, was ich hier auf der bestellten Liste verwende. Mit einem Listenelement darin können Sie auch Schaltflächen verwenden. Sie können Links verwenden, Sie können alles verwenden, was Sie wollen. Ich werde nur ein A nordle ist verwenden, weil es den HTML irgendwie wirklich, wirklich einfach hält . Also werde ich das ein paar Mal kopieren und nicht sicher, ob das genug ist, aber wir werden es am Ende herausfinden. Also wird die 1. 1 C für klar sein. Dann fügen wir ein Sternchen hinzu. Das ist das Multiplikationssymbol und Dividen-Symbol lässt eine Dezimalstelle dort heraus. Es ist tun sieben, 89 und so im Grunde, wie es bei der Planung ist, wird dies die Top Vier sein und dann haben wir eine Reihe von drei Zahlen hier drin. Dann haben wir noch einen Satz von drei Zahlen und einen weiteren Satz von drei Zahlen, und die Art und Weise, wie ich dies organisieren kann oder nicht völlig korrekt sein. Vielleicht müssen wir einige von ihnen ändern, aber das ist okay. Die Art und Weise, wie wir das schaffen werden, wird völlig flexibel sein. Es war auf einem Pluszeichen da drin und dann lass uns 45 und sechs Jones mit einem Minus machen, Zeichen 12 und drei und das wird wirklich bizarr aussehen, nur bis wir diese Art von allen aussortiert haben, dann ein Gleichheitszeichen. Lassen Sie uns auch und wieder eine Null setzen. Wenn wir das ansprechen müssen, können wir das später anpassen. Später. Das ist völlig in Ordnung. So sieht unser HTML in etwa so aus. Und schließlich, lassen Sie uns nicht nur einen normalen Rechner erstellen, sondern auch sicherstellen, dass dies etwas ist, das Sie in Ihrem Portfolio verwenden können. Also lassen Sie uns ein anderes DIV hier mit einer Klasse erstellen und ich verschiebe das nach unten. Nennen wir es Signatur, und hier können Sie Ihre Unterschrift setzen, wenn Sie Ihr Projekt fertig sind. Und ich nenne das einfach einen netten Taschenrechner mit deinem Namen. Und zu guter Letzt, lasst uns weitermachen. Aktualisieren Sie uns und nichts Phantasie, buchstäblich die langweiligste Seite, die wir uns vorstellen können. Aber in der nächsten Lektion werden wir anfangen, einige CSS anzuwenden, und das wird sofort unglaublich aussehen. 4. Die Seite gestalten: Okay, Bisher haben wir diese wirklich hässliche Seite. Das ist keine Möglichkeit, dein Leben zu leben. Das ist nicht mehr 1995. Wir können das wirklich, wirklich schön aussehen lassen. Und wir müssen eigentlich nicht so viel Arbeit machen. Das ist, wo wir in CSS kommen, und wir werden unser CSS hier schreiben, nur für den Moment an. Und dann können wir uns etwas später in seine eigene Akte schieben. Erste Dinge zuerst. Ich denke, wir müssen einige Details über unseren Körper, unseren Hintergrund, unseren Hintergrund, diesen ganzen Pager, wo all das Weiß ist, setzen. Lasst uns etwas ändern, damit wir den ganzen Körper verändern können. Das ist das gesamte Körperelement hier, indem Sie einfach Körper eingeben. Und das passt hier. Es ist also der genaue Elementname. Dann haben wir diese öffnenden und schließenden geschweiften Klammern. Und hier können wir einfach sagen, Hintergrundfarbe, und dann können wir es Hex-Farbe geben. Wir könnten ihm einen Namen geben, damit wir ihm einen Namen wie Aqua geben können, und das wird schrecklich aussehen. Aber hey, sieh mal, jetzt haben wir Aqua, also weißt du, dass wir nicht mehr 1995 sind. Wir haben jetzt eine Website von 1997. Lassen Sie uns voran und fügen Sie eine Hex-Farbe hinzu, obwohl von 999 Und das ist nur ein Grauton. Und mein V-Code denkt, dass ich eine Django-Vorlage verwende, aber ich bin es nicht. Ich verwende eine HTML-Vorlage. Und wenn ich über so lange genug schwebe, können Sie tatsächlich sehen, dass V s Code schön genug ist, um mir einen Farbwähler zu geben und Sie können jede Farbe wählen, die Sie mögen. Also keineswegs müssen Sie am Ende die gleichen Farben verwenden, die ich verwende. Ich werde nur etwas Generiges benutzen. Ah, und du kannst es so anpassen, wie du willst. Lassen Sie uns voran und speichern Sie das und aktualisieren Sie unsere Seite mehr. Und OK, weißt du, es sieht nicht so klebrig aus wie 1997. Vielleicht sind wir im Jahr 1999. Machen wir hier einen Quantensprung. Lassen Sie uns voran und fügen Sie hier einen Grady int hinzu. Grady INs in CSS könnten also irgendwie knifflig sein. Und was ich gerne mache, ist einen Service namens Color Zilla und ich möchte den ultimativen Grady int Generator hier verwenden und was ich tun werde, ist, diese einfach zu greifen und sie nach unten zu ziehen. Und dann benutzen wir ein Radio und lassen Sie uns diese Farben ändern. Also, was sollte die Innenfarbe jetzt sein, können wir hier herumstochen. Wir können jede Farbe verwenden, die wir wollen. Ich habe aber schon einen im Kopf . 70 77 c Es ist also grau. Und wieder wird mein Taschenrechner ziemlich großartig sein. Ihre könnte super bunt sein und die äußere Farbe hier. Was soll diese Farbe haben? Schwarz, vielleicht? Ja, das gefällt mir. Und dann müssen wir nur auf Copy klicken. Und so ist das unsere kleine Vorschau. Und nochmal, ich werde das hier einfach größer machen. Und das ist unsere kleine Vorschau hier, und das ist der ganze Code, den es für uns generiert. Dies ist reguläres CSS. Wir müssen uns keine Sorgen machen, was das ist. Wir wissen, dass dies funktionieren wird, also klicke ich einfach auf Kopieren, gehe zurück zu unserem Code hier, und ich werde es buchstäblich einfach hier einfügen und ich werde einige der Erfindung reparieren. Lass uns voran gehen und das speichern. Gehen wir zurück zu unserem Taschenrechner und aktualisieren. Okay, nicht schlecht, nicht schlecht. Wir konnten tatsächlich sehen, dass die Grady in eine Art Wiederholung sich ein wenig. Also müssen wir das irgendwie anpassen, wenn wir wollen, dass sich das von oben nach unten erstreckt . Nun, in CSS, haben wir diesen coolen kleinen Leben Hack, der nicht wirklich ein Lebensakt ist. Es ist nicht einmal wirklich alles zu hacken. Alles, was wir sagen werden, ist der HTML und der Körper. Das gesamte HTML-Element, zusammen mit dem gesamten Körper, sollte 100% Ihrer Browserhöhe einnehmen. Und so werden wir das HTML-Element und die Körperelemente durch ein Komma getrennt auswählen, und wir werden einfach Höhe 100% sagen. Und wenn ich die Seite hier aktualisiere, werden wir sehen, dass diese Art von Korrekturen selbst, also sehen wir nicht ein wenig wiederholen Grady int unten dort. Nur so können wir ihren Text nicht wirklich sehen, aber das ist okay. Das müssen wir jetzt nicht wirklich tun. Als nächstes gehen wir weiter und lassen Sie diesen Kalkulationsrechner ein wenig aussehen, wissen Sie, lasst uns blockieren und mehr wie Woo. Also müssen wir eine Klasse in der Nähe namens Calculator Calculate Whore erstellen, und ich wähle dieses Element nach seinem Klassennamen mit dem DOT-Selektor aus. So dot bedeutet Klasse und dann passen wir einfach diesen Namen mit diesem Namen hier in und dann schwächen Stil es. Lass uns voran gehen und diesem Hintergrund einen Hintergrund geben. , Ich schätze,wir könnten eine Hintergrundfarbe machen, aber lass uns einen regulären Hintergrund von 353535 machen und das ist nur ein dunkleres Grau. Lassen Sie uns dies mit etwas wie 300 Pixel geben. Und vielleicht lassen Sie uns das auch etwas Polsterung geben, klopfen von etwa 15 Pixeln. Mal sehen, wie das bisher aussieht. Okay, wenigstens können wir es lesen. Du weißt also, dass das ein Schritt in die richtige Richtung ist. Lasst uns weitermachen und das auch zentrieren. Also ist es Position zu tun. Absolute oben 50% links 50%. Nun, das wird nicht wirklich richtig, äh, äh, zentrieren. Das wird diese Ecke hier oben nehmen, und es wird sie direkt in die Mitte stellen. Richtig? Worte, leichtesten einfach so. Das ist also nicht ganz zentriert, aber wir können es um die Hälfte der mit und der Hälfte der Höhe kompensieren, so dass wir es irgendwie mit einer Deklaration namens Transform in die Mitte stoßen können und wir sagen, den X-Zugriff um minus 50% zu übersetzen. 50% der Elemente mit und den VAE Zugang stießen auch, dass um 50% der Höhe. Speichern Sie das nicht und aktualisieren Sie es hier und jetzt ist es tatsächlich zentriert, und wenn ich selbst zoomen, wird es immer zentriert bleiben. Jetzt kommen wir irgendwohin. guter Letzt gehen wir weiter und geben uns ein bisschen Rundung, vielleicht einen Kastenschatten. Und lassen Sie uns ihr all unseren Text schicken, um zu sein Lassen Sie uns den ganzen Text so ausrichten, dass er zentriert wird. Also werden wir nur einige letzte Schliff auf unseren Rechner in dieser Lektion machen, und dann die nächste werden wir tatsächlich machen, um den Rechner wie ein Taschenrechner aussehen mit Knöpfen und alles. Also Text ausrichten, zentrieren und alles, was tun wird, ist sicherzustellen, dass unser ganzer Text in ist. Die Mitte wird das später anpassen. können wir später überschreiben. Lassen Sie uns einen Grenzradius von so etwas wie fünf Pixel jemand, den wir hier zurück gehen und aktualisieren Sie sehen können, ist tatsächlich hier wie ein tatsächlicher Taschenrechner im wirklichen Leben aufgerundet. Und lasst uns weitermachen und diesem einen Kastenschatten geben. Also werden wir sagen, dass der Box-Shadow auf dem X-Zugriff nichts darauf sein sollte, warum Access oben und unten sechs Pixel sein sollte. Es sollte keine Unschärfe geben. Und die Farbe sollte sein. Ich werde einen sagen. Eine Eins ein Eins. Sieht das in Ordnung aus? Ja. Hier geht es darum, wo gehst du hin? Es geht um die Farbe, die ich hier oben will. Das ist also die erste Schachtel, die den zweiten Kastenschatten zerbrochen hat. Ich füge hinzu. Ich mache das hier mit einem Komma. Die 2. 1 wird ex Zugang Null sein. Warum auf acht Pixel zugreifen? Die Unschärfe wird 10 Pixel sein, die diesem einen RGB einen Wert geben würden. Das ist also ein rot-grüner blauer Alfa Wert. Und das wird 00 neue 000 Also das ist die Farbe Schwarz in RGB. Es ist die Abwesenheit von Farbe, so dass es überhaupt keinen Wert hat. Deshalb geben wir es Nullen an. Dann sagen wir, es muss 0,75% sein. Bezahle Stadt und lass uns sehen, wie das aussieht. Und jetzt haben wir nur dieses kleine Ja, es sieht aus wie eine Grenze am unteren Rand. Es ist abgerundet und es hat einen Schatten, so sieht es tatsächlich irgendwie aus, als würde es vom Bildschirm nur ein wenig. Die nächste Lektion. Lassen Sie uns voran gehen und Stil, die Ergebnisse und die Tasten und vielleicht auch Ihre Unterschrift, wenn wir genug Zeit haben. 5. Die Knöpfe stylen: Hallo. Willkommen zurück in dieser Lektion. Lassen Sie uns voran und stylen Sie den Ergebnisabschnitt, der alle Schaltflächen stylen, im Grunde alle auf einmal. Und dann lasst uns, wenn wir genug Zeit in dieser Lektion haben. Wenn wir nicht schwächen, schieben Sie das in die nächste Lektion. Aber wenn wir Zeit haben, lassen Sie uns auch die Signatur stylen. Also zuerst, lassen Sie uns den Ergebnisabschnitt machen und wir müssen in der Lage sein, dieses Div anzusprechen. Wenn wir nun ein Div angegriffen haben, wie wir es angestrebt haben, wird unser Körper jeden einzelnen Dip auswählen. Wir haben einen hier, und wir haben eins hier und eins in unserer Unterschrift, also wollen wir das nicht tun. Wir wollen genau dieses besondere Stil. Also, jetzt kann ich dies eine Klasse geben, die es nur Ergebnis nennen und standardmäßig Null dort jetzt haben wird . Dies wird eigentlich nichts tun, bis wir etwas CSS schreiben, damit ich Punktergebnisse schreiben kann und mich daran erinnern kann, dass DOT Klasse bedeutet und dann geschweifte Klammern öffnet und schließt. Und lass uns das wirklich hässlich machen. Lassen Sie uns eine Hintergrundfarbe von Rot geben. Lassen Sie uns diesem eine Farbe von Blau geben. Das wird unsere Textfarbe sein. Die Breite wird irgendwo um 90% ish wieder sein. Sie können dies so viel anpassen, wie Sie benötigen. Wenn Sie auch Ihren eigenen Rechner erstellen. Geben Sie uns eine Marge. Dies wird also die Polsterung um das Element sein. Also die Polsterung hier und wir werden sagen, auf den oberen acht Pixel auf der rechten Seite ist Null Pixel unten, 20 Pixel und auf der linken Seite, 10 Pixel. Und mal sehen, womit wir gerade arbeiten. Okay? Es sieht also aus wie eine Bar. Also, weißt du, nicht schlecht. Lasst uns weitermachen und diesen Text ändern. Richten Sie aus, obwohl Textillinie nach rechts sein wird. Vielleicht geben wir uns eine Höhe von und 50undnicht 50% 50 Pixel ish. Vielleicht geben Sie uns auch eine Zeilenhöhe von etwa 50 Pixeln, nur damit unser Text zentriert bleibt. Ja. Okay. Es kommt zusammen. wir brauchen den Fonds, um größer zu sein Aberwir brauchen den Fonds, um größer zu sein, also machen wir den Fonds größer. Und dann ändern wir auch die Hintergrundfarbe und solche Dinge. Also, das mag ich nur raten, mit dem hier, äh, ich weiß nicht, 36 Pixel irgendwo da herum. Mal sehen, was das tut. Hey, nicht schlecht. Vielleicht 35. Ja, kaum einen Unterschied gemacht. Unsere Nummer umarmt die äußerste rechte Grenze, wo diese rote Art auf die Großen trifft. Gehen wir weiter und geben dem ein Klopfen, also wird es einige Abstände auf der rechten Seite geben. 10 Pixel. Da gehen wir. Das sieht jetzt etwas besser aus. Ich denke, wir brauchen drei weitere Dinge in Ihrem Was, wenn diese Nummer wirklich, wirklich lang wird . Wenn diese Zahl wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wirklich, wird irgendwie nur herausfallen, das wollen wir nicht. Also lassen Sie uns einen Überlauf von Hidden geben und stellen Sie sicher, dass unsere Nummer immer, wissen Sie, innerhalb der physischen Grenzen eines realen Weltrechners bleibt. Und vielleicht, lasst uns, ah, ändern Sie die Hintergrundfarbe. Lassen Sie uns rot loswerden und machen wir wie C E C F A C Irgendwo drauf. Wie wird das aussehen? Ja, das sieht aus wie klebriger alter grüner Taschenrechner und die Textfarbe. Lass uns das irgendwo machen. Drei B drei b die drei b 32 aus so etwas. Und wieder, Farbe ist nur diese dunkle, gräuliche bräunliche Farbe. Das ist erfrischend. Das wird anfangen, ein wenig besser aussehen. Okay, okay, nicht schlecht. Vielleicht. Lassen Sie uns die Schriftart ändern und ändern Sie die Box Schatten sind bei einem Bach-Schatten. Also die Schriftfamilie. Nehmen wir an, diese Telefonfamilie muss digital sein. Sie können diesen Fonds auch ändern, wenn Sie möchten. Wenn Sie den Fonds digital haben, wird er ihn laden. Anscheinend tue ich es nicht, damit es nicht geladen wird, also werde ich das wirklich loswerden. Aber du kannst das Telefon ändern, was immer du willst. Ariel Times New Roman Etwas Custom wird tatsächlich eine benutzerdefinierte Front ein wenig später hinzufügen . Die Straße runter auf Last Thing war an einer Box schattigen Kastenschatten. Und sagen wir, dieser Kastenschatten muss auf der Innenseite sein. Wir werden sagen, es ist ein Insekt. 00 und acht Pixel wird die Unschärfe sein und wird RGB sein, ein so rot grün blau Alfa 000, das wird schwarz und ein 0,5 ist 50% als Dezimalzahl. Es hatte auch noch einen mehr hier und in Set Null-Picks, diese zwei Pixel Null und dann vielleicht lasst uns einfach registrieren. Wir können einen Blick darauf werfen, was wir hier bauen. Sehen Sie, wie das aussieht. Oh, ja. Okay, also haben wir den im Schatten. Es ist nur sehr schwach, aber es sieht ziemlich gut aus. Dann. Wir haben die rote Spitze und wir wollen nicht unbedingt, dass das gelesen wird. Wir wollen, dass das eine Farbe ist, die aussehen wird, als würden wir ihr etwas Tiefe geben. Und wir brauchen wirklich nur eine dunklere Farbe dafür, wie eine Eins und Eins? Nein, das ist nicht schlecht. Gehen wir weiter und fügen Sie hier ein paar Zahlen hinzu. Dann gehen wir weiter und stylen das auf . Ja, wir werden keine Zeit für diesen hier in diesem Video haben, aber die Unterschrift, die wir im nächsten Video machen können. Das Schöne an all diesen ist der schwächere Stil, all das auf einmal. Also lassen Sie uns voran und wählen Sie dieses ein geordnetes Element durch seine Elemente. Name ul. Geben wir ihm eine Polsterung von Null und eine Marge von Null. Und mal sehen, was das tut. Okay, diese Art von zerquetscht Dinge zusammen. Das ist gut. Das wollen wir. Als Nächstes. Wir möchten die gleiche UL und dann alle Listenelemente darunter auswählen. Das ist also unser übergeordnetes Element. Das ist dieser Kerl hier. Und dann alle Children Elemente namens Al. Ich wollte den einen und den einen und den ganzen Weg runter schnappen. Also zuerst. Lassen Sie uns diesen Listenstil loswerden. Wir wollen sicherstellen, dass das nicht wirklich wie eine Liste aussieht. Da gehen wir, keine Aufzählungspunkte mehr. Als nächstes geben wir diesem eine Hintergrundfarbe von Sagen wir einfach registrieren, damit wir wissen, was wir mit arbeiten Das ist nur widerlich. Aber jeder Knopf sollte auch ein wenig Polsterung haben. Wir können sagen, die Breite jedes einzelnen wird irgendwo um 15% betragen. Wir können diese auf der Straße anpassen, wenn einer von ihnen falsch sind, übrigens, und wir werden auch dieses Ding namens Float jetzt in Modern sehen uns verwenden, können Sie Flex-Box verwenden, und Sie können auch Gitter verwenden. Wir werden mit Float bleiben und Float ist nur eine einfachere Möglichkeit, mit diesen Knöpfen umzugehen , weil wir wollen, dass sie alle Arten von Umarmung Seite an Seite. Und wir wollen nicht unbedingt auf die Komplexität der Flex-Box oder Grid eingehen, weil es nur ein Taschenrechner ist. Wir wollen das einfach halten. Also lasst uns unsere Seite aktualisieren. Und würden Sie sich das sofort ansehen? Dies nimmt Form als Taschenrechner an, und eigentlich denke ich, ich habe all diese in der richtigen Reihenfolge, um so klare Multiplikationsdividierung zu bekommen. Das ist unsere Periode 789 plus 456 minus 123 gleich. Und dann wird Null wahrscheinlich am Ende machen, dass die Null Platz unter eins unter zwei und unter drei einnimmt . Und dann wird auch das Gleichheitszeichen hinuntergehen. Also sind wir fast mit den Knöpfen da. Lassen Sie uns die Farbe wie ein Weiß ändern. Das ist also das Hex-Symbol für Weiß. Ist Zahl signiert F f f oder Sie könnten einfach weiß eingeben. Diese sollten alle einen Spielraum haben, und der Grund, warum wir das wollen, ist, weil wir nicht wollen, dass diese alle so nebeneinander sind, dass es tatsächlich wie ein großer Knopf aussieht. Wir wollen, dass diese getrennt sind. Wenn ich das also speichere und aktualisiere, werden Sie sehen, dass sich diese Schaltflächen tatsächlich in Schaltflächen trennen. Und das ist wegen unserer Marge hier. Jetzt müssen wir einen Cursor hinzufügen, weil momentan, wenn Sie nur mit der Maus über, sieht es nicht wie eine Schaltfläche aus. Dein Mund ändert sich nicht. Aber wenn wir mit dem Cursor aktualisieren, die meisten tatsächlich geändert. Es sieht so aus, als könntest du darauf klicken. Das ist gut für die Benutzererfahrung. Geben wir uns, wie eine lustige Größe von vielleicht 20 Pixeln. So etwas wie diese Textillinie wird im Mittelpunkt stehen. Ich glaube nicht, dass wir diese Textzeile setzen. Nein, wir wissen nicht, dass das schon eingestellt ist. Lassen Sie uns auch einen Randradius geben, so dass die Tasten nicht super hart und spitz an den Ecken sind. Geben wir uns an Bord eines Radius von Ich denke, vier Pixel könnten vielleicht nicht genug sein. Das sind vier Pixel. Okay, was ist mit fünf Pixeln? Sei wie gehen mit fünf Pixeln. Moment müssen wir auch die Schriftart ändern, für die wir keine Zeit haben werden. In diesem Video. Das machen wir in einem anderen Video. Ah, und wir werden auch noch ein paar andere Sachen hier drin sein. Was fehlt uns gerade? Die Hintergrundfarbe ist also rot. Vielleicht ändern wir die Hintergrundfarbe oder etwas, das eher wie eine Schaltfläche aussieht. Es ist also nicht so widerlich und in deinem Gesicht laut. Lassen Sie uns auch einen Kastenschatten hinzufügen, so dass unten, genau wie das, was wir hier unten haben, es tatsächlich aussieht, als hätten wir eine Art Schatten oder eine Art Höhe vom Rechner. Zunächst einmal muss diese Hintergrundfarbe wirklich gehen, die nicht mehr gelesen werden kann. 45 für fünf für fünf. Nicht schlecht. Was, wenn wir 40. 44 e. Ja, gehen wir mit dem ein wenig Feuerzeug. Ein bisschen einfacher zu arbeiten, meiner Meinung nach, aber das liegt ganz an Ihnen. Schließlich gehen wir weiter und fügen Sie diesem Feld einen Schatten hinzu, den wir hier zu Schatten hinzufügen werden, so dass die 1. 1 auf der X-Achse sein wird. Bewegen Sie sich nirgendwo auf dem warum der Zugriff fünf Pixel nach unten verschoben wird und das Blau wird Null sein . Und dann werden wir sagen, dass das eine Fünf sein sollte. A 585 Und das gibt uns diese schöne kleine Beule da unten, also fängt das tatsächlich an, wie ein Taschenrechner zu aussehen. Es ist auch an einer sekundären, aber in Ihrem und in der Set-Taste, nicht ein Keep Sprich-Taste. Ich wollte sagen, Box Shadow. Lassen Sie uns einen inneren Box-Schatten haben und wir werden einen zweiten Schatten mit einem Komma auf der X-Achse hinzufügen , Null auf dem Y-Zugang zwei Pixel nach unten bewegt wird. Die Unschärfe sollte Null Pixel sein. Und lassen Sie uns diesem eine etwas dunklere Farbe geben. Ich schätze, das ist nicht wirklich dunkel. Ist nicht nein? Das ist ein ziemlich Standardgrau und führt zu aktualisieren. Okay, okay, damit kann ich leben. Ich denke, das ist gut für diese spezielle Lektion in der nächsten Lektion. Lasst uns, ähm, ich sagte, wir werden das tun. Eso Lassen Sie uns das etwas stylen. Wir könnten tatsächlich ein zweites Mal darauf zurückkommen, und dann machen wir ein wenig mehr mit den Knöpfen 6. Deine Signatur: im letzten Video, Ich sagte,, Wir werden an der Unterschrift arbeiten. Ich hätte das Versprechen wahrscheinlich nicht machen sollen, aber wir werden trotzdem dabei bleiben, weil ich das gesagt habe. Wir werden das in unserer Unterschrift tun. Lasst uns weitermachen und einfach diese Klasse kopieren. Der Klassenname, Signatur und schwächen Ziel, dass, weil es eine Klasse ist, können wir den Punkt so Punktsignatur verwenden und wir können dies eine Art von Farbe geben. Also vielleicht weiß. Wir könnten das auch ein wenig später anpassen. Ah, die Schriftfamilie könnte etwas ganz anderes sein. - Vielleicht. Lassen Sie uns das vorerst aussagen. Und das ist nur ein CSS-Kommentar hier. Die Schriftgröße. Mal sehen, verwenden Sie keine Pixel. Lasst uns Realms benutzen. Also 0.75 relative Mm sagt ja, könnte mir tatsächlich sagen, was das ist. Das wäre großartig, wenn es das tut. Bei skalierbaren Gesamtstrukturen ist die Schriftgröße ein Skalierungsfaktor, der auf die E. M. Einheit der Vorderseite angewendet wird M. . Und im Grunde ist dies eine relative e M Einheiten. Also eins ist Ihre normale Schriftgröße und 0,75 ist etwa 3/4 Ihrer regulären Schriftgröße. Was immer das auch wieder sein wird. können wir auf der Straße ändern. Wenn wir uns entscheiden, dass die Zimmer vielleicht nicht so sind, wie wir gehen wollen. Nehmen wir an, der Text, den eine Zeile auf der rechten Seite sein wird. Und nur damit wir wissen, wo wir arbeiten, eine Meeresgrenze, ein Pixel einfarbig rot, weil wir hier eine Menge Schwimmer benutzen. Dies könnte nicht wirklich nur ein div sein, das hier schreibt. Dies könnte etwas zusätzlichen Speicherplatz in Anspruch nehmen, und sicher genug, Sie können tatsächlich sehen, dass dies die gesamte Signatur ist. Das wollen wir überhaupt nicht. Was wir hier tun müssen, ist Position relativ, und dies wird uns erlauben, einen SET-Index zu setzen. Und Zed Index ist wie, wissen Sie, wenn Sie auf einer Leinwand malen und Ebene auf der Oberseite der Ebene auf der Ebene malen, das ist das, was das ist, da Indizes sagen, wir könnten es vor andere Ebenen setzen hinter andere Schichten und Stunden. Dieser Index, in diesem Fall wird minus eins sein. Wir wollen es hinter andere Schichten legen, und jetzt sieht es schon so aus, als würde es das tun, aber wir wollen nur sicherstellen. Jetzt lassen Sie uns die rote Grenze ablegen. Und vorerst denke ich, dass das in Ordnung sein wird. Wir müssen das eigentlich ein bisschen überlegen, und es ist ein bisschen eng da oben. Also erwarte ich, dass das ein bisschen ein Problem sein könnte. Also habe ich gerade über diese Ecke hier gesprochen und wie der Texas im Grunde einen der oberen Knöpfe berührte . Da wir also bereits Position relativ verwenden, können wir sagen, Bewegen Sie das von oben. Ich meine, ich schätze, und so etwas wie vier Pixel können schwächen. Passen Sie das später an, und verschieben Sie es von rechts von der rechten Wand um fünf Pixel. Und so wird das nur ein winziges bisschen nach links stoßen. Hey, das ist nicht schlecht, aber wir müssen vielleicht etwas später im nächsten letzten Moment darauf zurückkommen. Lassen Sie uns voran gehen und fügen Sie eine benutzerdefinierte hinzu. Forints oder Buttons sehen tatsächlich ein wenig schöner aus, und vielleicht werden wir das für denselben Fonds auf unsere Unterschrift hier anwenden, bevor wir weiter am Styling der Knöpfe arbeiten. Denn im Moment, wenn wir es buchstäblich anklicken, passiert nichts. Es bewegt sich nicht nach oben, schaut nicht nach unten, tut nichts 7. Benutzerdefinierte Schrift: Ok, Doke. Lass uns nach einem benutzerdefinierten Spaß suchen, also gehen wir zu weit. Es ist dot google dot com, weil sie uns Zugang zu so ziemlich jedem Fonds geben, den ich kenne kostenlos. Oder wenn wir wollten, könnten wir für einen bezahlen. Ich werde nicht für einen bezahlen. Ich werde jetzt nur einen kostenlosen benutzen. Haben Sie bereits einen Aktie genannt? Nein, das ist der benutzerdefinierte Wortlaut, und es wird so aussehen. Fügen wir hier einfach eine Reihe von Zahlen hinzu. Sieht das so aus, wie wir wollen? Ich glaube, so. Weißt du, wenn nicht, können wir das auch immer ändern . Das ist das Schöne an der Web-Entwicklung ist, wenn wir das nicht mögen, können wir das gegen jeden anderen Fonds austauschen. Also werde ich diesen Stil mögen und hier oben ins Bett klicken, und es gibt zwei Möglichkeiten, das zu tun. Wir können ein Stylesheet mit Link hinzufügen, oder wir können die bei Import Befehl verwenden, und wir werden die bei Import Befehl hier verwenden. Muss das kopieren. Lassen Sie uns an die Spitze unseres Stils hier gehen und einfügen. Nun, das wird nichts direkt vom Fledermaus tun. Wir fügen tatsächlich eine Schriftfamilie von Aktien hinzu, und dann Fluch seltsam, das fällt zurück auf kursive, aber okay, also werde ich das kopieren. Und wo wollte ich das ändern? Ich wollte alle meine Tasten ändern, und ich wollte das in der Signatur ändern. Also werde ich diese Seite speichern, zurück zu unserem Taschenrechner und erfrischend. Ok. Ich mag es. kann ich leben. Kannst du damit leben? kann ich leben. Wenn nicht, wenn Sie das nicht mögen, können Sie immer einen anderen Fonds verwenden. 8. Button: Okay, wir haben diese Knöpfe. Das werden sie. Sie sehen aus wie Knöpfe. Wir wissen, dass es tatsächlich Listenelemente sind. Also haben wir den Benutzer irgendwie ein bisschen dort ausgetrickst. Das ist in Ordnung, aber wenn wir darauf klicken, passiert nichts. Also müssen wir hier eine Art Styling hinzufügen, das passiert ist, dass im Grunde, wenn wir darauf klicken, es sieht so aus, als würde es sich nach unten bewegen. Also alle unsere Schaltflächen, unsere Verbündeten und wir wählen die UN-geordnete Liste und dann die Listenelemente aus. Also lassen Sie uns auch gleich davon arbeiten. Lassen Sie uns eine U L L erstellen, die ich alle auf geordnete Listen und dann alle verbündeten Elemente darunter auswählen wollte. Wir werden sagen, wenn es aktiv ist, und das bedeutet, wenn Sie es anklicken und halten, was wird es zu dio? Wir geben uns eine Position des Verwandten. Ich werde sagen, dass es um fünf Pixel runter geht. Wir werden auch diesen Kastenschatten ändern. Und dann Box-Schatten, wie wir das aus dem letzten Video loswerden. Dieser Kastenschatten. Ich habe gerade auskommentiert, und wir werden uns in einer Sekunde damit beschäftigen. Ich will hier nur einen Blick werfen. Okay, es bewegt sich, richtig. Wenn wir eigentlich nur diesen Kastenschatten, bewegt sich der Kastenschatten nach oben oder im Grunde werden wir ihn größtenteils loswerden . Je mehr ich mich das anschaue, desto mehr mag ich den Top-Shadow auf diesen Eso nicht. Lass uns das einfach bearbeiten, denn das wird mich verrückt machen, je mehr ich es ansehe, desto mehr scheint es nicht ganz richtig zu sein. Also haben wir es. Ja, wir haben ihren Knopf hier. Das ist unser Verbündeter Box Shadow X Null. Warum? Fünf Pixel nach unten bewegen. Null Unschärfe A 58585 OK, vielleicht lassen Sie uns nicht genau die gleiche verwenden, die wir hier oben verwendet haben. Versuchen wir, das zu ändern. Versuchen wir, Null Pixel auf der linken X-Achse zu machen. Und jetzt machen wir vielleicht zwei Pixel nach unten. Das ist oben und unten. Mal sehen, warum Access und ein Fünf-Pixel-Unschärfe mit einem RGB ein rot grün blau alfa von Yeah, das ist das, was wir wollen, genau da. Und mal sehen, wie sich das herausstellt. Hey, das sieht viel besser aus. Ok? Wir haben immer noch die ganze Sache nach unten, was das aktuelle Problem ist, aber wir haben diese Verrücktheit behoben, die wir ursprünglich hatten. Ich bin jetzt so viel glücklicher damit. Also, jetzt gehen wir zurück zu unserem Verbündeten. Und wenn du einen dieser Knöpfe drückst und festhältst, was wird der Schatten zu dio? Wir werden diesem ein Insekt geben, damit die Schatten im Inneren liegen. Versuchen wir X x Null. Warum Zugriff auf ein Pixel zu Pixel Unschärfe und RGB ein rot grün blau Alfa auf diesem wird schwarz sowie Ihre 0.4 wieder. Wenn du dir das neue ansiehst, wie, Hey, Caleb, das ist cool. Aberwissen Sie, wissen Sie, ich möchte Sie nur wissen lassen, dass das ein wirklich grauer, langweiliger Taschenrechner ist . Fühlen Sie sich frei, dies auf einem Hintergrundbild statt einem strahlenden. Sie können uns ändern, um mehr wie Holz oder Plastik oder so aussehen zu lassen. Und Sie? Ist es das, was ich will? Ja, das ist es, was ich will, denn das sieht ziemlich abgeflacht aus. Jetzt haben wir Oh, okay. Wir müssen das ändern, weil wir hier eine zu viele Tasten haben. Also lasst uns diese Nullstrecke nach hier und hier machen. Und lassen Sie uns dieses Gleichheitszeichen nach unten strecken. Wie wollen wir dieses Gleichheitszeichen anvisieren? Dieses Gleichheitszeichen wird schwierig sein, wenn ich es denke. Das ist der zweitletzte. Wir werden ein 10. Kind benutzen. Selektoren, das ist ein wenig fortgeschrittener CSS. Im Grunde, was wir sagen werden, ist Null eins, 23456789 10 11 12 den ganzen Weg runter zu diesem hier. Und wir werden dieses spezifische mit nur CSS auswählen. Und wir können das mit UL Ally und Kind Nummer des Kindes 16 tun. Und geben wir diesem eine Grenze zwei Picks ein festes Weiß. Und stellen wir sicher, dass wir das Richtige hier anvisieren. Und doch reden wir über das Richtige. Also werden wir das einfach ignorieren, denn das wird sich irgendwie bewegen, wo immer wir wollen, weil alles andere schwebt. Wir wollen sicherstellen, dass die schwebenden Elemente mit denen sind, mit denen wir arbeiten. Eso, das ist der, den wir wollen. Das war also eine gute Vermutung. Also lasst uns das doppelt so hoch machen. Normalerweise ist es das. Also, wenn du dich fragst, Hey, was ist die Höhe? Lasst uns hierher zurückgehen. Klicken Sie auf diesen. Element inspizieren. Und wenn ich auf eines dieser klicke oder den Mauszeiger über sie klicke, können Sie das in meinem Dokumentobjektmodell sehen. Es ist hier oben, die visuelle Darstellung davon. Jeder von ihnen ist 65 mal 43. Und wenn wir diesen kleinen Layout-Typ dorthin ziehen, können wir es sehen. Aber auf der Innenseite, 45 Pixel mal 22 Pixel. Männer haben 10 oben 10. Am unteren Rand sind dies fast 23 Pixel für insgesamt 42. Nun, das ist vielleicht nicht ganz genau, weil wir ein paar zusätzliche Sachen machen. Also ich meine, ich werde ehrlich gesagt nur raten, äh, lass uns 37 Pixel sehen. Wir werden seine Höhe ändern und sehen, was passiert. Ich habe es ziemlich groß gemacht. Und wenn wir uns das ansehen, nur das Gleichheitszeichen, das ist das, das wir hier betrachten. Nur das Gleichheitszeichen, dass Höhe Nein ist. 37 plus 10 oben und unten. Also werde ich das hier einfach augapfeln. Ich sage 75 Pixel und lass uns die Grenze loswerden, denn das wird uns auch irgendwie vermasseln und denken, dass ich damit leben kann. Ich werde damit leben. Ich werde das zum Laufen bringen, und dann müssen wir das irgendwie hierher bringen. Nun, das schwebt schon. Das ist also interessant, denn wir müssen diesen Knopf besonders auswählen und ihn wieder nach oben stoßen und dann nach rechts ausstrecken. Gehen wir weiter und schnappen wir uns das Element. So Ul Ally. Und welches ist das? Ich glaube, es war das letzte Element. Regen? Ja. Dieser ist leicht mit CSS zu greifen, wir können nur sagen, letztes Kind, und das ist zu Rand oben von etwa minus 45 Pixel. Wieder, ich betrachte uns nur und eine Breite von etwa 70% und denke, wir müssen diese Marge tatsächlich ein wenig nach oben bewegen , weil diese sich nicht aufstellen und dass mit diesem etwas zu viel eso was wir tun können, anstatt zu schreiben, Speichern, Aktualisieren. Wir können das hier drinnen ändern. Also, was ich getan habe, war richtig. Klicken Sie auf Element prüfen, und ich habe das Element ausgewählt, das ich bearbeiten möchte. Also bin ich auf der Null und hier drin. Da ist es. Minus 48 ist das, was wir wollten, und ich ändere nur diesen Wert hier. Und die Breite. Lasst uns das kleiner machen. Minus 65 sind nicht minus 65 nur 65%. Also die Höhe Kein falscher. Die aufstrebende Spitze ist minus 48 Pixel, und die Breite war, Ich glaube, ich sagte 65%. Also lasst uns fortfahren und das auffrischen und es bleibt so, wie es sein soll. Perfekt. Das sieht ziemlich gut aus. Und dann weißt du was? Lasst uns dieses Gleichheitszeichen ausbessern. Machen wir das Gleichheitszeichen. Sei mitten in der Mitte. Wir wollen eine Zeilenhöhe tun, nicht das letzte Kind läuft eine Zeilenhöhe von 75 Pixeln. Mal sehen, was das tut, und das ist nur unser Gleichheitszeichen. Das ist die, die wir auch extra Höhe geben . Ja, sieht ziemlich gut aus, ziemlich gut. Ich bin damit zufrieden. Also vorerst denke ich, dass wir das hier lassen können, wo es ist, und wir können anfangen, mit etwas JavaScript zu arbeiten. Jetzt wird es alle möglichen seltsamen Randfälle mit JavaScript geben, weil das menschliche Mathematik ist, wo Sie wissen,dass Mathematik ist, wo Sie wissen, Sie eine Zahl nicht durch Null teilen können. Was passiert, wenn wir das tun? Wir werden uns mit allen möglichen Sachen da drin beschäftigen. Also die nächste Lektion lasst uns in die JavaScript-Welt springen. 9. Button: Okay, wir machen hier so viel Fortschritte. Derzeit aber, aber, wenn Sie auf eine dieser Schaltflächen klicken, meine ich, es sieht so aus, als würde es etwas tun, aber es tut tatsächlich nicht. Wenn wir also auf die Zahl fünf klicken, sollte die Nummer fünf hier oben angezeigt werden Wenn Sie auf Teilen klicken, sollte es fünf geteilt durch speichern. Also lassen Sie uns weitermachen und das wirklich funktionieren. Erste Dinge zuerst. Wir müssen diese Zufallszahlen loswerden. welcher Nummer beginnt der Rechner in der Regel? Entweder nichts oder Null. Ja, fangen wir mit Null an. Wir könnten dies über mehrere Videos hier tun, und das erste, was wir tun möchten, ist, dass wir alle diese auswählen und dann einen Ereignis-Listener hinzufügen möchten. Also, wenn Sie auf neun oder eins klicken oder deaktivieren, wird es etwas tun. Also schreiben wir dies in unserem JavaScript ganz unten auf ihrer Seite. Wir schreiben Skript-Öffnen und Schließen Tag, und dann können wir eine Liste aller unserer Verbündeten greifen. Also sagen wir Konstante, weil diese Liste nicht Verbündete dieses nur Portal ändern wird, für Ally ist gleich dem Dokumentpunkt-Abfrage-Selektor. Uh, und wir werden alle UL-Verbündeten bekommen. Wenn Sie sich jemals fragen, woher wissen wir, was ich tue? Wenn Sie sich jemals fragen, Weil es irgendwie so aussieht, als ob ich im Dunkeln codiere. Was Sie tun können, ist richtig. Klicken Sie auf, überprüfen Sie auf Ihrer Seite, Gehen Sie zu Ihrer Konsole und Sie können dies schreiben. Ich habe das gerade kopiert und eingefügt. Und wenn ich Verbündete tippe und Enter drücke, bekommst du dieses Ding als Notiz eine Liste, und ich habe 17 Gegenstände in deinem und du kannst das sehen, wenn ich über jeden einzelnen schwebe. Es sagt mir tatsächlich, welcher ist, was ziemlich cool ist. Im Wesentlichen ist dies ein Array oder eine Liste von jedem l ich, das ich auf dieser Seite habe. Jetzt, da ich das habe, kann ich jeden durchlaufen und einen Ereignis-Listener hinzufügen. Also werde ich durch jede Schleife mit Verbündeten Punkt für jeden. Und das ist auch modernes Javascript, wenn wir hier eine fette Aero-Funktion verwenden werden. Anstatt also eine Funktion zu schreiben, wie wir es normalerweise mit unserer alten Art ,Javascript zu schreiben , , werden wir das nicht tun. Wir werden nur sagen, verwenden Sie nicht funktionale nur durchlaufen, was auch immer die Notiz ist. Und dieser Knoten, jeder von ihnen wird als Knoten bezeichnet. Also passieren Sie diese Notiz und dann mit diesem Knoten können wir sagen, dass kein Punkt hinzufügen Ereignis-Listener. Und was passiert, wenn du etwas tust? Also werden wir sagen, die meisten unten und dann diese, wir werden tatsächlich eine richtige Funktion geben und wir nennen es nicht e, weil das nicht intuitiv ist . Wenn Sie irgendwie neu in JavaScript sind, werden wir ein Ereignis in diese bestimmte Funktion übergeben. Und zuerst sagen wir Ereignispunkt, verhindern Standard, verhindern Standard, und im nächsten werden wir den Wert dessen erhalten, was in diesem Verbündeten ist. Also ist es ein konstanter Wert gleich ist, und dann was auch immer diese besondere Note ist, also lasst uns diese hier greifen. Das ist das Sternchen. Und wenn wir nach unten zu innerem, innerem Intertext scrollen, können wir diesen Wert direkt dort bekommen. Wir machen das auch mit einem der anderen , denn diese sind alle gleich. Sie haben nur eine andere Nummer oder einen anderen Buchstaben da drin. Also dieser hier ist Nein, lass uns das nicht tun. Lass uns die Nummer neun machen, also ist es das Sechs-Element in unserer Liste. Aber es ist die Nummer neun hier oben, und wenn wir nach unten schauen, schauen wir nach unten. Der innere Text ist neun. Das ist es, was wir wollen. Also haben wir einen Knotenwert Punkt inneren Text und dann nur für den Fall, dass es Leerzeichen um ihn herum gibt. Also vielleicht haben Sie Ihren HTML so geschrieben, dass dieser Trim nur diesen zusätzlichen Platz für Sie loswerden wird , und dann können wir diesen Wert jetzt konsolen Dot protokollieren. Dies wird immer noch nicht wirklich etwas Nützliches oder Wertvolles tun. Lassen Sie uns unsere Seite aktualisieren. Und wenn ich sieben klicke, steht es sieben und Sie können tatsächlich sehen, dass jedes Mal, wenn ich auf eine Schaltfläche klicke, es erscheint hier unten jetzt. Eine Sache, die Sie hier beachten müssen, ist, wenn Sie Event dot default verwenden, wird es versuchen, alles daran zu hindern, was es normalerweise tut. Wenn Sie Verknüpfungen anstelle eines Listenelements verwenden,benötigen Sie das wahrscheinlich, was bedeutet, dassIhre Animationen nicht funktionieren. Wenn Sie Verknüpfungen anstelle eines Listenelements verwenden, benötigen Sie das wahrscheinlich, was bedeutet, dass Je mehr ich darauf klicke, passiert nichts. Mein Knopf bewegt sich nicht mehr nach unten. Also, wenn ich das lösche, speichere die Datei, geh zurück hierher. Aktualisieren Sie jetzt, es heißt fünf. Jetzt steht acht. Und jetzt bewegen sich die Tasten auch nach unten. Also seien Sie sich dessen bewusst. Wenn Sie diese Elemente wie ich verwenden, müssen Sie sich keine Sorgen machen. Du kannst die letzte Minute von dem ignorieren, wovon ich gesprochen habe. Als nächstes wollen wir tatsächlich das Ergebnis hier oben bekommen. Das ist zu groß. Wir wollen dieses Ergebnis bekommen, und wir wollen diese Zahl dort hineinsetzen. Also lasst uns weitermachen und dieses Ergebnis auch schnappen. Also Hühneraugen resultieren, und ich benutze ein Dollarzeichen hier nur als Beispiel. Sie müssen nicht, aber als Beispiel bedeutet das Dollarzeichen normalerweise, dass Sie etwas aus dem Dokumentobjektmodell greifen, was bedeutet, dass wir eines auch hier und hier verwenden sollten. Das Ergebnis wird Dokumentpunkt-Abfrage-Selektor sein, und dann wollen wir nur dieses Ergebnis greifen. Und ich denke, wir nannten es Klassenergebnisse. Richtige Klassenergebnisse. Ja, ja. Und was wir tun können, ist, diesen Ergebnistext einfach zu überschreiben. Es ist jetzt können wir sagen Ergebnis Punkt inneren Text gleich Wert ist. Lassen Sie uns aus diesem Konsolenprotokoll und aktualisieren Sie Ihre Seite, und das wird sagen, sieben und dann fünf und dann neun und dann Null, und dann so weiter und so weiter und so weiter und so weiter. Wir können das so machen, wie wir wollen. Nein, ich denke, das reicht für dieses Video im nächsten. Lassen Sie uns voran und fügen Sie tatsächlich eine Logik hinzu, in der wir acht sagen können, geteilt durch neun oder Null plus vier, anstatt nur ein Zeichen gleichzeitig auftauchen zu lassen. 10. Operativer Rechner: Alles klar. Wo wir aufgehört haben, jedes Mal, wenn wir eine Taste drücken entfernt es den Wert dort drin war und zeigt den neuen Wert dort oben, was wir wollen. Aber wir haben tatsächlich einen Anhänger. Also, wenn ich traf eins und dann auf die Nummer 12 sollte nicht ein und dann zwei ziehen, wir wollen auch herausfinden, wie man das Gleichheitszeichen und all diese anderen Dinge verwendet und sicherstellen , dass, wenn jemand auf das Meer trifft, dass es nur die Antwort löscht. Also werden wir all das in diesem speziellen Video hinzufügen. Nun, im letzten Video, sagten wir, das Ergebnis Punkt inter tax wird der Wert sein. Lassen Sie uns das loswerden, denn das wird nur die Zahl immer und immer wieder ändern . Es wird es jedes Mal überschreiben. Das wollen wir nicht. Was wir stattdessen wollen, ist, den Ergebnistext zu greifen. Also, was auch immer hier drin ist, wir müssen das jetzt packen. Wir wissen nicht, ob es Leerzeichen geben wird oder nicht, also müssen wir das auch beschneiden. Es ist also zu const Result-Text gleich dem Ergebnis des inneren Punkt-Trims und alles , was tun wird, ist dieses Ergebnis hier diesen Abfrage-Selektor zu greifen. Es wird das greifen und den Wert dort zu greifen. Also, wenn es Raum fünf wäre, würde das immer noch als Nummer fünf für uns erscheinen, das ist es, was wir wollen. Lassen Sie uns nun beginnen, indem Sie eine einfache Logik hinzufügen, wenn wir etwas haben, das durch zahlreiche Pfade passieren kann . Wenn ich sagte, du könntest nach links oder rechts gehen, dann könntest du drei Aktionen in deinem Leben ergreifen. Wenn Sie eine Straße hinunter fahren oder einen Pfad zu Fuß Rechner nicht anders. Die Ereignisse könnten klar sein. Sie könnten eine Art von tatsächlicher mathematischer Anwendung hier drin haben. Du könntest sagen, was ich da hineinlegte, in tatsächliche Antworten oder eine Lösung umgewandelt. Oder vielleicht fügen Sie einfach eine Zahl zum Ergebnis hinzu. Du bist also eine ausstehende Nummer. Beginnen wir mit der einfachsten Form. Ich beginne mit klar, klar, wenn wir den Clear Button drücken. Alles, was tun sollte, ist, den Bildschirm leer zu machen. Also, jetzt können wir sagen, ob der Ergebnistext gleich zu sehen ist und ich bekomme, dass von hier aus sehen, was auch hier ist. Wenn es gleich ist zu sehen, was werden wir zu dio? Wir werden diesen resultierenden Punkt inneren Text ändern, um mich gelöscht zu werden, weil es ein widerlicher Rechner ist , Anscheinend, und dann werden wir True zurückgeben. Und alles, was die Rückkehr tut, ist, weil dies eine Funktion ist. Wann immer die Funktion ausgeführt wird, wird der Code von oben nach unten gehen. Und wenn es diese Rückkehr trifft, wird das Schlüsselwort sagen: Hey, Hey, wenn es etwas darunter ist, führe nichts von diesem Zeug aus. Es sagt, dass Sie das Rückgabe-Schlüsselwort getroffen haben, beenden Sie alles unten. Es ist nur Ausgang über das Funktionale zusammen. Das ist es, was wir wollen. Das wird also ein sehr seltsames Beispiel sein. Ich habe gerade Refresh getroffen, also wenn ich acht treffe, sehen wir nichts passiert, weil wir den Teil losgeworden sind, wo es sagt, ich denke, dass ein Knopf die Zahl hier reinbringt. Aber wenn wir auf „Löschen“ klicken, wird nichts passieren. Und eigentlich lasse ich uns nicht so schnell durchgehen. Ich habe einen logischen Fehler gemacht. Sommer-Ergebnistext. Das ist, was ich suche, was wir wollen, ist eigentlich der Wert des Buttons. Dies ist die Taste, die gedrückt wurde, also sollte es Wert auf sein. Stellen wir sicher, dass wir es immer vergleichen. Also, wenn du einen unteren Casey oder einen oberen Casey schreibst, wird das immer noch für dich funktionieren. Wert Punkt in Kleinbuchstaben Lassen Sie uns sicherstellen, dass dies ein Kleinbuchstabe ist, also wird es den Großbuchstaben C nehmen, der einen Kleinbuchstaben macht. Und wenn es gleich einem Kleinbuchstaben ist, dann wird es das Ergebnis in ihrem Text ändern. Los geht's. Hier ist ein besseres Beispiel. Also, wenn ich erfrische und klar sagt, dass ich jetzt geklärt bin, ist das widerlich. Wir wollen es nur löschen, diesen Wert löschen Verdammt aktualisieren Bam, bam! Genau so. Das ist der klare Knopf. Aber wenn wir acht durch fünf geteilt machen, taucht hier nichts auf. Also müssen wir sicherstellen, dass das auftaucht. Also, was wir tun können, ist, dass wir dieses Ergebnis und nur eine Erinnerung, dass dies genau hier können wir das bestehende Ergebnis greifen und wir können etwas dazu bringen. Wir können den Wert erhöhen. Also, was wir hier sagen, ist ein Stift, der Wert. Es sei denn, es ist ein Buchstabe C also gehe ich von oben nach unten. Wenn es ein Buchstabe C ist, wird wahr zurückgeben, wird es nichts tun. Wenn es etwas anderes ist, dann wird es dieses Ergebnis nehmen und wird den Wert hinzufügen. Acht geteilt durch fünf wird eine geteilt durch fünf in unseren Ergebnisbereichen. Lassen Sie uns das speichern und demonstrieren Sie diese Acht geteilt durch fünf. Jetzt können Sie sehen, dass wir eine Start-Null da drin haben, also war das ein bisschen ein Problem. Aber Sie können sehen, dass unsere Zahlen jetzt alle nebeneinander erscheinen. Und das sind gute Neuigkeiten. Das ist es, was wir wollen. Wir wollen so etwas hier drin. Das bedeutet, dass wir tatsächlich anfangen können, etwas Mathematik zu machen. Also, wenn wir das geklärt haben und wir siebenmal sieben gemacht haben und letztendlich gleich schlagen, was passiert dann? Okay, nun, jetzt haben wir noch einen Edge-Fall. Wir haben einen anderen Weg zu gehen, wenn jeder Treffer gleich ist. Equals sollte dort nicht auftauchen. Es sollte eigentlich die Mathematik für Sie tun. Gehen wir weiter und fügen das da drin hinzu. So können wir jetzt sagen, ob der gleiche Wert gleich einem Gleichheitszeichen ist. Wir können jetzt sagen, dass der innere Text des Ergebnisses gleich einer Lösung einiger, einiger Art von Lösung ist . Wir wissen noch nicht, was das ist. Lassen Sie uns jedoch voran gehen und diese Lösung erstellen . Also ist es, Lösung zu lassen, weil wir irgendwann vielleicht ändern. Also haben wir Const bisher benutzt. Zählt bedeutet, dass Sie diesen Wert in der Variablen nicht ändern können. Lassen Sie das heißt, Sie können. Also, das ist es ändern. Und diese Lösung wird böse sein. Was auch immer das Ergebnis Punkt inneren Text Punkt kein html inter text dot trim wird sein, so dass es wird, um dieses Ergebnis zu greifen. Was auch immer gerade im Ergebnisabschnitt hier oben ist, es wird diesen inneren Text greifen. Es wird es trimmen. Jetzt ist die Sache ist, dass wir tatsächlich sehen können, dass wir das hier schon geschrieben haben. Wir geben nur Ergebnistext ein. Das ist die Macht der Variablen. Wir müssen das nicht zwei- oder dreimal eingeben. Wir können es einmal eingeben und wieder verwenden. Schließlich müssen wir wahr zurückkehren, und der Grund dafür ist, dass, wenn wir es nicht tun, wir das Gleichheitszeichen haben, das es sieben Mal tun wird. Sieben. Es wird sich zeigen. Zeigen Sie uns 49 auf, dann wird das Gleichheitszeichen anhängen. Das wollen wir nicht. Wir wollen, dass es nie das Gleichheitszeichen zeigt. Mache einfach die Mathematik. Also, wenn wir jetzt sieben mal sieben machen, haben wir eine 07 da drin, aber das ist okay, dass wir später damit umgehen können. Ist gleich 49 ist gleich jetzt. Wir sind super nah dran, aber wir haben ein Problem. Wann immer wir neu anfangen statt Null, heißt es 07 Und wenn wir uns vermehren, haben wir ungleiches Zeichen am Ende, sagt Tackle diese, Und das wird genug für diese spezielle Lektion sein. Also lasst uns voran gehen und diese Null loswerden. So können wir sagen, ob der Ergebnistext gleich Null ist. Ändern Sie den Ergebnispunktintertext in nichts. Jetzt werden wir nicht sagen, hier zurückzukehren, weil wir es einfach nur überschreiben und alles andere passieren lassen wollen . Lassen Sie uns das speichern und aktualisieren, und jetzt, weil es mit Null beginnt, werde ich sieben schlagen. Es geht zu dir hier durch, sagen wir, Oh, du hast 70 getroffen, die Zahl, die momentan drin ist, ist Null. Also löschen Sie es und dann wird es versuchen, diese Bedingung ALS zu tun. Sie werden keine Übereinstimmung sein, und dann wird es hinzufügen, was Nummer, die ich wollte, hier hinten angehängt werden. Also, wenn ich sieben traf, sagt es nicht mehr 07, was wirklich, wirklich nett ist . Das ist also ein Problem gelöst. Der nächste ist, wenn ich siebenmal acht mache, hätten wir diesen Gleichstellungszeichenjob. jedoch Dies kann sichjedochbereits gelöst haben, weil wir unseren Code aufgeräumt haben. Und weil wir jetzt die richtige Mathematik machen, wird das so funktionieren, wie wir es wollen. Teoh. Also, in der nächsten Lektion, lassen Sie uns weiter gehen und etwas mehr Logik hinzufügen, denn was passiert, wenn ich das kläre? Und ich habe 10 geteilt durch Null? Was denkst du, wird auftauchen? Wir müssen mit diesem Szenario umgehen 11. Der fertige Rechner: Alles klar, von der letzten Lektion weglassen. Ich habe Sie irgendwie auf einem Cliffhanger gelassen, und ich sagte, Was passiert, wenn Sie tun 10 Geteilt durch Null. Im wirklichen Leben können Sie nicht 10 geteilt durch Null tun. Was passiert, du bekommst Unendlichkeit. Das ist eigentlich in JavaScript. Das ist ein Datentyp, aber auch das ist nicht falsch. Nun ist das Problem, wenn ich fünf oder acht oder so etwas tippe, sagt es unendlich, wir wollen das nicht. Was ist, wenn wir das klären und gleich treffen? Wir werden auch undefiniert. Das wollen wir auch nicht, weil unsere Logik nicht danach sucht. Es ist nicht auf der Suche nach dem Wort undefiniert oder unendlich. Also, was wir tun müssen, ist zu überprüfen, ob das Ergebnis Steuern Null. Wenn es nicht definiert ist oder wenn es unendlich ist, setzen Sie es einfach zurück auf leer. So können wir das sehr leicht sagen, indem wir hier so oder so ein oder bedingtes geben. Das Ergebnis. Steuern gleich Null, oder das sind die beiden Pipes. Der Ergebnistext ist gleich undefined, oder das sind die beiden Pipes oder der Ergebnistext ist gleich unendlich und das hatte ein Großbuchstabe I. Es wird nehmen, was auch immer das Ergebnis in ihrem Text ist, und es wird es einfach auf nichts zurücksetzen. Das ist es, was wir wollen. Gehen wir weiter und geben dem jetzt eine Chance. Und wenn ich gerade gleich trage, passiert nichts, wenn ich trage, Clear gibt mir undefiniert. Was ist mit Hey, sieh dir das an. Es verschwindet jetzt. Ich kann auch 10 machen. Dividiert durch Null ist gleich unendlich. Und wenn ich anklicke, weiß ich nicht fünf. Nun, das taucht immer noch Infinity auf. Das bedeutet wahrscheinlich, dass ich eine Art von irgendwo Unendlichkeit genagelt habe. Du kennst dein Selbst. Ich weiß, wenn ich Tippfehler mache, mache ich sie die ganze Zeit. Versuchen wir es nochmal. 10 geteilt durch Null ist gleich unendlich und dann traf fünf. Da gehen wir hin. Jetzt haben wir einen funktionierenden Taschenrechner. Wir können auch Dezimalstellen verwenden. Wir haben das noch nicht erforscht, also könnten wir 12,5 plus 15,5 gleich 28 machen, also funktionieren Dezimalstellen automatisch auch für uns. In Ordnung. Und so erstellen Sie einen Taschenrechner, damit wir jetzt alle möglichen Situationen bewältigen können, die wir bewältigen können . Löschen, Multiplizieren, Dividieren Dezimalzahlen plus gleich und Subtraktion. Wir machen all das Zeug drinnen. Oder ist das 19 bis 45? Irgendwo um 25 Zeilen Code haben wir einen Rechner in JavaScript erstellt, und das letzte, was wir wirklich tun müssen, ist, diese in ihre eigenen Dateien zu verschieben, weil Sie jetzt wissen, dass es tatsächlich nichts falsch ist mit dem, was wir tun. Aber als Best Practice sollten wir das CSS NZ JavaScript in ihre eigenen Dateien verschieben. Also im nächsten Video, gehen wir weiter und tun das. 12. Code: Ok, Dokey. Wir haben einen Haufen Code hier drin. Wir haben HTML CSS und JavaScript, die Art und Weise, wie wir es schreiben, ist nicht falsch. Aber wir können das auf eine bessere Art und Weise tun. Also all unser CSS, was ich tun werde, ist, dass von Zeile acht den ganzen Weg entlang der Linie 88 ich das hier drüben schneiden werde . Und lasst uns das Zeug loswerden, das wieder drin ist, damit wir das sehen können. Und wir müssen hier ein neues Element namens Link erstellen. Und die Beziehung wird ein Stylesheet sein. Und wir werden dies mit H ref zu einer Datei namens Style dot CSS verknüpfen. Und das reimte sich eine Datei namens Style. Das war unbeabsichtigt. Aber bleib bei ihm, weil ich es mag. Jetzt müssen wir eine Datei namens Style dot CSS erstellen. Die ersten Dinge zuerst. Das trickst eine Menge Leute. Also, das gibt es nicht auf meinem Computer jetzt, Also, wenn ich zurück hierher gehe, aktualisieren, können Sie tatsächlich sehen, dass alle CSS verschwunden ist. Okay, wenn ich also nur in meinem Browser öffne, habe ich es gerade dort aktualisiert und du kannst sehen, dass meine Stile nicht mehr angewendet werden. Das ist in Ordnung. Und wenn du hier in deinen Konsul gehst und siehst, ähm, manchmal geht es, je nach Browser, natürlich. Aber manchmal werden Sie wie ein 404 sehen Es wird sagen, dass CSS nicht existiert, wenn das der Fall ist, aber es existiert. Wahrscheinlich ist Ihr Stil, dass CSS sich nicht im selben Ordner befindet wie Ihr Indexpunkt html. Nun, in meinem Fall, taucht nichts auf. Und wenn ich zum Netzwerk gehe und einfach auf Refresh klicke, passiert absolut nichts. Da ist nichts drin, was auch immer die Zehenlast ist. Und das an sich ist eigentlich ein Problem. Es sagt, dass es keinen Stil gibt, den sie überhaupt zu laden versucht. Also, was ich hier tun werde, ist einfach eine neue Datei zu erstellen und das einzufügen, was ich dort hatte, und ich werde das als Stil auf Punkt CSS speichern und ich habe diese beiden Dateien nebeneinander. Also im gleichen Ordner habe ich Index dot html. Ich habe Stil-Punkt-CSS. Nun, wenn ich hierher gehe und deine Seite aktualisiere, sollte so gestaltet werden, wie du erwartet hast, dass du gestylt wirst, aber auch solltest du einige Sachen hier mit innerhalb deines Netzwerk-Tabs sehen und du kannst tatsächlich sehen das erwartete bekannt, dass Sie l oder Filterfunktion waren, aber gefunden pro Gee, ich d. Das ist eigentlich OK. Das liegt daran, dass wir Microsoft Radiance für I E 69 unterstützen, was wir tatsächlich loswerden könnten , weil in der Welt so ziemlich bekannt ist, Internet Explorer 69 mehr zu unterstützen. Das ist also im Grunde unser CSS und eine externe Datei. Jetzt müssen wir in unseren Index dot html gehen und dieses Skript all das Zeug packen. Gehen wir von Linie 37 runter auf 62 und schneiden wir ab. Und dieser kann Skriptquellen gleich sein, und wir nennen dieses Skript dot Js und lassen Sie uns diese auf die gleiche Zeile setzen. Jetzt, wenn ich das aktualisiere, wird nichts passieren. Es liegt daran, dass wir all unser Javascript herausgenommen haben, und wenn wir unsere Seite hier aktualisieren, können wir tatsächlich sehen. Firefox sagt. Laden fehlgeschlagen für Skript mit Quelle von und dann Skript-Punkt Js. Wenn Sie also jemals so etwas mit Ihrem Jazz oder Ihrem CSS sehen, bedeutet das, dass es einfach nicht den richtigen Weg finden kann. Und so wollen wir nur sicherstellen, dass Script Js im selben Ordner wie unser Indexpunkt HTML ist. Es ist also eine neue Datei zu erstellen. Lassen Sie uns Sterncode hier bezahlen und wir können dies als Skript dot Js speichern. Und wenn wir zurück hierher gehen, wird Firefox aufhören, sich zu beschweren, weil es perfekt geladen wird. Und ich war Taschenrechner setzt Zehe Arbeit. Und mit all dem haben wir jetzt einen Rechner mit HTML in weniger als 40 Zeilen Code 39 Zeilen Code erstellt. Ausschließen dieses und das so 37 Zeilen HTML-Code. Wir haben einen Rechner in weniger als lassen Sie uns dieses Netz und das und das loswerden, und das war wie fünf Leerzeichen dort und in wie, 22 ish tatsächliche Codezeilen. Wir haben einen funktionalen JavaScript-Rechner und in etwa 80 Zeilen CSS haben wir einen wirklich, wirklich schön aussehenden Rechner. Also am Ende des Tages, das ist eigentlich nicht sehr viel Code, und wir haben etwas wirklich, wirklich schöngemacht wirklich schön 13. Zusammenfassung: mein liebster Front-End-Entwickler. Zunächst einmal, vielen Dank, dass Sie diesen Kurs auf Skill-Anteil genommen haben. Sie haben ein Projekt und jedes Projekt zur Skillfreigabe. Jeder Skill-Share-Kurs hat einen kleinen Projektabschnitt, in dem Sie tatsächlich ein richtiges Projekt erstellen können . Sie können Screenshots teilen, oder Sie können all diesen Code in einen Codestift dot io einfügen und Sie können diesen eingebetteten Link teilen. So oder so, stellen Sie einfach sicher, dass Sie Ihr Skill-Share-Projekt hinzufügen. Ah, aber ich will nicht, dass du nur den Quellcode verwendest, den ich habe. Machen Sie keinen langweiligen großen Taschenrechner wie diesen. Versuchen Sie, etwas zu verwenden, das ein wenig interessanter ist. Statt wie ein grauer radialer Hintergrund, legen Sie ihn vielleicht auf einen Schreibtisch anstelle eines grau aussehenden Taschenrechners. Vielleicht sieht es eher aus wie Kunststoff oder verwendet ein Hintergrundbild, das wie Wiederholung von Plastik oder so aussieht . Sie können die Art und Weise ändern, dass Ihre Tasten handeln und wie sie aussehen eine Schwung letzte aber nicht zuletzt, Was auch immer Sie tun, um Ihren Rechner zu ändern, stellen Sie sicher, dass Sie Ihren Namen darauf signieren, weil das Ihre Arbeit sein wird. Sobald Sie Ihr endgültiges Projekt haben, vergessen Sie nicht, es in Ihrem Abschnitt zu teilen, und ich kann einen Blick darauf werfen und ich kann Ihnen Feedback und allerlei Sachen geben. Und zu guter Letzt, wenn Sie meinen Unterrichtsstil mögen, vergessen Sie nicht, dass Sie mir immer auf Fertigkeiten folgen können. Schauen Sie sich einige meiner anderen Kurse an. Wenn Sie mehr über HTML oder CSS oder JavaScript oder irgendetwas, was Sie in diesem Kurs gesehen haben , erfahren möchten, können Sie auch zu meinem Profil gehen. Ich habe eine HTML-Masterclass oder, uh, es heißt der ultimative HTML-Entwickler haben eine CSS-Masterclass genannt die CSS-Masterclass und JavaScript für Anfänger und JavaScript, von Anfänger bis Ninja-Kurse. Wenn Sie sich also jemals über modernes JavaScript wundern, wenn etwas davon keinen Sinn ergibt und Sie darüber erfahren möchten, habe ich Ihren Rücken. Wenn Sie nicht wissen, sagen wir radiale Grady INTS oder Box Schatten Box Box, das war eine gute, denn das ist ah, wirklich seltsame CSS-Deklaration, mit der man arbeiten kann. Wenn Sie irgendwie daran interessiert sind, etwas über solche Dinge zu lernen, können Sie sich die CSS Masterclass Kurse ansehen. Aber ich habe auch einige andere Kurse zu anderen Themen, wie Python. Aber natürlich, und wie immer, gibt es keinen Druck, das ganze Zeug sofort zu lernen. Html. CSS und JavaScript Sie gibt es schon seit weit über 20 Jahren, und sie werden nicht bald verschwinden. Vergessen Sie also nicht, Ihr Skill Share-Projekt zu erstellen. Los, wirf das in dein Fähigkeitsteilprojekt, damit ich es mir ansehen kann. Ah, und Sie können es auch mit der Community teilen und sich die Projekte anderer Leute ansehen und inspirieren lassen, um zu sehen, was Sie mögen und was Sie nicht mögen. Nochmals vielen Dank, dass Sie diesen Kurs besucht haben, und wir sehen uns in einem anderen.