JavaScript-Projekt: Eine Spesen-Tracker-App erstellen

1. Intro des Projekts: In diesem Kurs werden wir eine App zur Kostenerfassung entwickeln , mit der Sie Ihre Ausgaben und Einnahmen verfolgen können Und Sie können Ihre Ausgaben hinzufügen, Sie können Ihre Einnahmen hinzufügen, und dieser Kurs wird einen lokalen Speicher haben. Um also Ausgaben oder Einnahmen hinzuzufügen, können Sie den Namen der Transaktion eingeben. Jetzt schreibe ich an den Kunden , weil wir eine Zahlung von Pfandrecht erhalten haben . Deshalb schreibe ich Ihrem Kunden. Wir haben 500$ von unserem Kunden bekommen. Deshalb schreibe ich hier 500. Dann klicke ich auf dieses Plus-Symbol. Jetzt können Sie hier sehen, dass wir 500$ auf Ihrem Konto haben, und dann können Sie hier in unserer Historie nachschauen, ob wir einen Kunden hatten, der uns 500$ gezahlt Jetzt sind die Ausgaben gleich Null, weil wir von diesem Saldo keine Ausgaben benötigten Wenn Sie jedoch auf diese Einnahmen klicken, können Sie sehen, dass wir 500$ an Einnahmen erzielt haben Wenn Sie nun irgendwelche Ausgaben hinzufügen möchten haben Sie Lebensmittel aus diesem Betrag gekauft Lass mich Fuß schreiben und dann lass mich einen Betrag schreiben, 20$ für Essen Wenn ich irgendwelche Ausgaben schreibe, muss ich dieses Minuszeichen einfügen Wenn ich dann auf dieses Plus-Symbol klicke, können Sie jetzt überprüfen, ob unser Guthaben jetzt 480$ beträgt Das heißt, 500 -20 sind 480$. Wenn Sie auf diese Ausgabe klicken, können Sie sehen, dass wir 20$ abzüglich 20$ an unseren Ausgaben erhalten abzüglich 20$ an unseren Das ist also ein Projekt, das wir in diesem Kurs erstellen werden Und lassen Sie mich Ihnen den lokalen Speicher in diesem Projekt zeigen. Wenn ich zum Beispiel diese Seite neu lade, können Sie sehen, dass unsere Ausgaben da sind, unsere Einnahmen da sind, dass unser Saldo da ist und dass unsere Geschichte da ist Das bedeutet, dass nichts aktualisiert wurde , da dies im lokalen Speicher gespeichert ist Und wenn Sie irgendwelche Ausgaben oder Einnahmen entfernen möchten, können Sie einfach auf dieses Kreuzelement klicken Jetzt sind also unsere Ausgaben gestrichen, die 20$ betrugen. Und jetzt können Sie sehen, dass unser Einkommen 500 und unser Einkommen 20 USD beträgt. Nicht 20$ Unsere Ausgaben betragen 0$ und unsere Einnahmen 500$. Wenn Sie also eine Expense Tracker-App wie diese erstellen und diesen lokalen Speicher in dieser App implementieren möchten , können Sie sich diesen Kurs ansehen und mit der Erstellung dieser App beginnen 2. HTML hinzufügen: Jetzt werden wir das HTM unseres Projekts schreiben. Hier können Sie auf der linken Seite sehen, ich ein Expense-Tracer-Projekt erstellt habe Und dann haben wir in diesem Ordner drei Dateien. Zuerst ist EBD Js und dann Index Dot HTML und dann Style-CSS. Also zuerst erstelle ich ein Textbaustein von H t, um ein Textbaustein zu erstellen. Wir müssen einfach ein Ausrufezeichen eingeben und auf Enter klicken Unser Boilerplate wird fertig sein. Jetzt werden wir diesen CSS-Stil mit EB Dot Js verbinden. Um diesen CSS-Stil mit EBD-Js zu verknüpfen, winken Sie, um den Tagnamen von Link zu schreiben, und geben dann in diesen Link die HRF dieses CSS-Stils Jetzt haben wir diesen CSS-Stil mit unserem HTML-Code verbunden. Jetzt werden wir unseren Webpunkt js verbinden. Um unser Ab-Dot-JS zu verbinden, gehe ich in diesen Körper hinein und erstelle hier einen Tagnamen, der als Script bekannt ist In diesem Skript gebe ich SRC ein, was Quelle bedeutet, und in diese Quelle schreibe ich den Dateinamen abdTJS Jetzt haben wir also JavaScript und CSS mit unserem Htmle verbunden JavaScript und CSS Jetzt werden wir unsere Icons verknüpfen und dann werden wir unsere Schrift verknüpfen Gehen wir also zu unserem Browser und dann können Sie hier sehen, dass ich eine Website namens fondosm.com geöffnet habe namens fondosm.com Und hier können Sie sehen, dass wir dieses Kreuzsymbol ausgewählt haben. Um also dieses Kreuzsymbol auszuwählen oder dieses Kreuzsymbol zu verwenden, müssen wir dieses ITAC verwenden, und dann schreiben wir innerhalb der Klasse dieses Itech FasR und dann Far de Solis und dann Far Also kopieren wir das, um dieses Crossmr-Web zu verwenden, um dieses Fondosom mit unserer H-Tabelle zu verknüpfen Um also unsere Schrift Dosm zu verlinken, müssen wir auf diese Website gehen, die als CDN Js bekannt ist In diesem CDN Js können Sie einfach nach Ihrer Schriftart Dosom suchen und nachdem Sie nach Font Dosom gesucht erhalten Sie diese Art von Seite Fondosom geschrieben wird. Sie können einfach diese Copy-Link-Technologie kopieren und dann können Sie zu Ihrer Tabelle kommen und unter diesem CSS-Stil Unsere Schrift Dosom ist jetzt also Link. Das heißt, wir können Fondosom-Symbole verwenden. Also was ich jetzt tun werde, ich hole die Telefone. Ich gehe zu Google Phones und hole mir die Schriftarten für unsere Website Also bin ich auf diese Website von Google Phones gekommen , phones.google.com. Sie können das suchen und Sie werden auf diese Website gelangen. Und hier können Sie im Bereich Telefonsuche suchen. Sie können nach Roboto Mono suchen , da wir diese Schriftart in diesem Projekt verwenden Deshalb kannst du hier nach Roboto Mono suchen. Also habe ich diesen Roboto Mono mit 300 ausgewählt, und dann kannst du diese Eingabe-URL einfach kopieren Steuere C, und dann füge ich es in unser CSS ein. Hier füge ich es ein. Hier habe ich diesen Link schon eingefügt. Was wir jetzt tun werden, wir werden unser HTML erstellen. Zuallererst erstelle ich einen Header innerhalb des Headers, wir werden den Spesen-Tracker schreiben und auf diese Weise werden wir weitermachen. Lassen Sie mich den Header erstellen. In diesem Header erstellen wir einen H zwei und dann schreiben wir in diesen H Two den Spesen-Tracker. Und hier erstellen wir einen Container-Div und in diesem Container-Diff werden wir unsere Einnahmen und Ausgaben sowie unseren Saldo enthalten . Zuallererst erstelle ich ein Dif mit der Klasse Container Lassen Sie mich darin etwas Platz schaffen. Innerhalb dieses Kontinents schreibe ich als Erstes deine Bilanz. Um deine Bilanz zu schreiben, müssen wir H vier auswählen. In diese H4 schreibe ich deinen Saldo und dein Saldo ist standardmäßig 0,0 0$. Um 0,0 0$ zu schreiben, wählen wir H 1 aus und innerhalb dieser H-Zone befindet sich dann eine ID mit dem Namen Saldo. Also haben wir H One mit der Idee des Gleichgewichts geschaffen. Jetzt geben wir einen Saldo ein , der 0,0 0$ sein wird. Also Dollar und dann Nullpunkt doppelt Null. Das ist also standardmäßig unser Saldo. Also werde ich jetzt ein weiteres Dif erstellen und in dem Div werden unsere Einnahmen und unsere Ausgaben enthalten sein Lassen Sie mich also einen Diff erstellen und die Klasse des D wird ink x oder EXP inc sein ink x oder EXP Ich werde EXP einschreiben. Und ich werde in dieses Div gehen und hier werde ich ein weiteres Dif für unser Einkommen erstellen Lassen Sie mich also in der Klasse ein Dif für dieses D erstellen , das Einkommen abzieht Lassen Sie mich also Tinte entfernen schreiben. Entferne RLV in Camel Case, also REV entferne ich, und dann schreibe ich IRE Das heißt Einnahmen entfernen, und dann schreibe ich versteckt Warum schreiben wir also solche Kurse? Wir schreiben diese Art von Klassen, weil wir CSS und JavaScript zu diesen Klassen hinzufügen wollen , das stimmt. Jetzt wirst du nicht verstehen, warum wir schreiben, wann wir diese Klassen verwenden oder wann wir sie auswählen werden , aber dann wirst du verstehen, warum wir diese Art von Klassen schreiben. Jetzt kannst du diese Klassen einfach schreiben. Also hier schreibe ich versteckt. Und dann werde ich in diesem DF eine H Vier erstellen, und diese H vier wird Einnahmen enthalten. Bedeutet, dass innerhalb von H vier das Einkommen und unter diesem Alter von vier die Höhe dieses Einkommens angegeben wird. Um also die Höhe dieses Einkommens zu schreiben, winken Sie mit P und dann innerhalb des P haben wir eine Klasse innerhalb des P. Die Klasse wird Plus sein, und dann ist der Saldo standardmäßig 0,0 0$, Dollar Nullpunkt doppelt Null. Wie Sie dort sehen können, haben wir eine Einnahmen-ID erstellt jetzt werden wir eine Ausgabensenkung erstellen. Um Ausgaben zu erstellen, können wir diese einfach kopieren und unten einfügen. Control C und Control V. Und hier entferne ich dieses INC und füge EXP und dann IRE zu ERE hinzu, und dann ist Hidden dasselbe Jetzt wandle ich seine Einnahmen in Ausgaben um. Und diese Klasse wird minus sein. Und wir setzen ein Minus davor. Und hier setzen wir ein Plus davor. Jetzt haben wir also einen Ausgaben-Tracker für Überschriften und einen Container in diesem Container erstellt. Wir haben einen Saldo und dann Einnahmen und Ausgaben erstellt. Schauen wir uns die Tabelle an. Lassen Sie mich es speichern und mit der rechten Maustaste klicken und mit dem Life-Server öffnen. Jetzt können Sie hier sehen, dass wir den Ausgaben-Tracker eingerichtet haben , Ihr Guthaben ist da, dann ist unser Saldo da, das sind 0,0 0$, und dann sind Einnahmen und Ausgaben da. Jetzt werden wir also zwei Eingaben erstellen. In einer Eingabe fügen wir Transaktionsnamen hinzu und in einer anderen Eingabe fügen wir den Betrag hinzu. Lassen Sie mich also eine Eingabe erstellen, um unsere Eingabe zu erstellen, bevor wir die Eingabe erstellen. Dafür müssen wir zwei Schaltflächen erstellen, da wir in unserer App eine Schaltfläche für die Eingabe und eine Schaltfläche für Ausgaben erstellt haben . Lassen Sie mich zwei Schaltflächen erstellen, bevor ich diese Eingaben erstelle. Ich werde unter diesen Unterschied gehen und hier werde ich eine Schaltfläche erstellen. Um eine Schaltfläche zu erstellen, schreibe ich Schaltfläche und dann schreibe ich in diesen Schaltflächenbereich, ich werde dieser Schaltfläche etwas Klasse geben Der Unterricht wird kostenpflichtig sein. Ich kopiere diese Ausgabe. Ich füge es hier ein und erstelle dann eine weitere Schaltfläche. Also kopiere ich diese Schaltfläche und füge diese Schaltfläche unten ein. Und hier gebe ich Einkommen ein. Und ich entferne diese Ausgaben und schreibe dann Einnahmen. Jetzt können wir überprüfen, ob wir zwei Schaltflächen mit Einnahmen und Ausgaben haben . Wenn wir also auf Ausgaben klicken, erhalten wir die Ausgaben und wenn wir auf Einnahmen klicken, erhalten wir die Einnahmen. Lassen Sie uns hier Eingaben erstellen, aber bevor ich Eingaben erstelle, gebe ich die Überschrift ein. Die Überschrift lautet Neue Transaktion hinzufügen, also sind es drei und dann innerhalb von drei schreibe ich Neue Transaktion hinzufügen Also erstelle ich eine FM-Technologie und füge dann innerhalb dieser FM-Technologie eine ID hinzu Der ID-Name wird Form sein. Also klicken Sie auf Enter, dann erhalten wir ein Formular mit dem Ideenformular. Dann lass mich dieses Axon entfernen. Unter diesem Formular erstellen wir eine DV und innerhalb dieses D erstellen wir ein Etikett und dann innerhalb des Labels werden wir es Jetzt werden wir eine DV innerhalb der DV erstellen , wir werden ein Label erstellen Dann schreiben wir in dieses Label, dass dieses Label für Text ist. Also lass mich Text schreiben. Und dann schreibe ich hier den Namen. Und dann werde ich Input erstellen. Der Typ der Eingabe wird Text sein und der Name der Eingabe und dann der Name der Eingabe wird nichts sein. Es wird kein Name verwendet, und ab und zu wird die Idee des Namens Text sein. Und dann fügen wir dieser Eingabe eine Klasse hinzu. Die Klasse wird der Eingabename sein. Lassen Sie mich also Eingaben schreiben. Es gibt einen Namen und dann wird der Platzhalter da sein, also Platzhalter Und in diesen Platzhalter schreiben wir den Namen Also haben wir eine Eingabe für den Namen der Transaktion erstellt. Jetzt erstellen wir eine Eingabe für den Betrag. Also kopiere ich dieses D und füge dieses dV hier ein und dann ändern wir den Namen Wir werden den Namen von Name zu Betrag ändern. Und dann wird die Art des Betrags Zahl sein. Leichte Zahl. Und dann wird ID der Betrag sein. In der Klasse geben wir den Betrag ein. Und dann wird der Platzhalter Betrag sein. Also haben wir Eingaben erstellt. Jetzt werden wir unsere Geschichte schreiben. Um unsere Geschichte zu schreiben, werden wir unter dieses Formular gehen und dann werde ich hier Geschichte schreiben. Um Geschichte zu schreiben, wähle ich H drei aus und innerhalb dieser H drei schreibe ich Geschichte. Und dann wird die Geschichte Allis sein. Um Allis zu erschaffen, müssen wir UL gründen. In dieser UL wird es KI geben. Aber die ID der UL wird aufgelistet sein. Lass mich die ID schreiben und dann wird die ID aufgelistet. Und dann werden wir innerhalb dieser UL eine KI für künstliche Intelligenz erstellen und dann innerhalb dieser KI werde ich einige Ausgaben wie einen Fußabschlag schreiben. Und dann erstelle ich einen Spin in diesem Spin, ich werde dieses Ding kopieren. Also kopieren wir dieses Schriftsymbol. Um diese Schrift zu kopieren, klicke ich einfach auf diese Schrift und füge sie dann hier ein. Also haben wir auch diese X Mark-Schrift kopiert. Also lass mich das im Browser machen. Sie können also sehen, dass wir einen Ausgaben-Tracker mit Ihrem Saldo aus Einnahmen und Ausgaben erstellt haben , und es gibt zwei Schaltflächen mit Ausgaben und Einnahmen. Dann haben wir neue Transaktion hinzufügen mit zwei Eingaben erstellt, Eingabe von Name und Eingabebetrag, und dann haben wir eine Historie mit Ally of Food erstellt, und es gibt ein Schriftsymbol. Also haben wir den T-Code für unser Projekt geschrieben. Jetzt werden wir im nächsten Video CSS-Code für dieses Projekt schreiben . 3. Unsere App stylen: In diesem Video werden wir den CSS-Code für unsere App schreiben , damit wir unsere App gestalten können. Deshalb möchte ich noch etwas sagen, dass wir in unserem letzten Video vergessen haben , dieses Plus-Symbol in unsere App aufzunehmen. Lassen Sie mich Ihnen zeigen, wie man es ausdrückt. Also hier, hier über dieser Technologie zum Schließen von Formularen, können Sie sehen, dass ich eine Schaltfläche mit der Klasse BTNS erstellt habe Dann habe ich diesen Itech eingefügt und in diesem iTE ist die Klasse weit solide und weit über Circle Plus und dann viel zu Excel. Excel bedeutet die größte Schrift. Also jetzt werde ich speichern und dir zeigen, wie es aussieht. Sie können also sehen, dass wir dieses Plus-Symbol hinzugefügt haben. Sie können also auch dieses Plus-Symbol hinzufügen. Jetzt werden wir CSS zu unserer App hinzufügen. Um also unser CSS hinzuzufügen, wir hier als Erstes wählen wir hier als Erstes den Universal-Selektor Und dann geben wir in diesem Universalselektor Box Sizing Bader Box ein, also Box Sizing Bader Box Und jetzt gehen wir weiter und wählen unseren gesamten Körper Lassen Sie mich also den Körper auswählen. Und dann werden wir in diesem Körper Display-Flex anwenden, damit wir unseren Container in die Mitte bringen können. Um unseren Container in die Mitte zu bringen, verwenden wir Flexbox Also schreibe ich zunächst Display Flex. Und dann schreibe ich die Flex-Richtung und die Flex-Richtung wird die Spalte sein. Also Spalte mit Flex-Richtung. Und dann schreibe ich Aleem Center, Linem Center und dann Justify Content Rechtfertigen Sie das Inhaltszentrum. Ich habe Bseline hier geschrieben, also lassen Sie mich Bseline, die wir hier geschrieben haben, entfernen . Rechtfertigen Jetzt fügen wir zu dieser mittleren Höhe eine mittlere Höhe hinzu, 100 VH, also 100 VH. Und dann fügen wir hinzu, dann fügen wir eine Hintergrundfarbe hinzu. Eine Hintergrundfarbe ist also nicht erforderlich , da unsere Hintergrundfarbe weiß ist. Jetzt werden wir diesem gesamten Körper eine Schriftfamilie hinzufügen. Um eine Schriftfamilie hinzuzufügen, schreibe ich einfach Schriftfamilie. Und dann lässt mich unsere Schriftfamilie das überprüfen. Wir haben das ausgewählt. Unsere Schriftfamilie wird also Robotomano sein. Lass mich diese Schriftfamilie kopieren und ich füge sie hier ein. Control V. Control V. Lassen Sie mich diese Schriftfamilie entfernen. Deshalb haben wir hier unsere Roboto Mono-Schriftfamilie getestet. Also, jetzt ist unser Körper bereit Lass mich das retten und dir zeigen, wie er aussieht Gehen wir also zu diesem Browser und öffnen ihn. Also ja, du kannst sehen, dass unser Container in der Mitte ist und alles in der Mitte ist. Das heißt, wir haben alles in der Mitte ausgerichtet. Nun, was wir tun werden, jetzt werden wir dem Container Styling hinzufügen. In der Fortsetzung werden wir also eine Hintergrundfarbe und viele andere Dinge hinzufügen Lassen Sie mich diesen Container auswählen. In diesen Container schreiben wir Margin Auto, nicht Margin Auto, wir geben etwas Margin an. Der Rand wird 30 Pixel und dann automatisch sein. Und dann schreibe ich Breite. Die Breite dieser App wird also 550 Pixel betragen. Es ist wie eine schmale App, deshalb schreibe ich 550 Pixel. Und dann schreiben wir unsere Hintergrundfarbe. Unsere Hintergrundfarbe war also linear strahlend. Wenn Sie also Ihrem Projekt lineare Strahlung hinzufügen möchten, wenn Sie also lineare Strahlung hinzufügen möchten, müssen Sie das Hintergrundbild und nicht die Hintergrundfarbe auswählen . Lassen Sie mich also das Hintergrundbild des Hintergrundbilds auswählen. Und in dieses Hintergrundbild schreiben wir lineares Radiant und unser lineares Radiant wird ein -90-Grad-Komma sein Unser Farbname wird A eins C four FD sein Dies ist unser erstes Kolonym. Jetzt fügen wir eine weitere Farbe hinzu. Lassen Sie mich ein C, c2e und dann neun FB hinzufügen c2e und dann neun Also haben wir eine weitere Farbe hinzugefügt, ebenfalls mit 90 Grad. Also lass es mich speichern und ich zeige es dir im Browser. Sie können sehen, dass wir dieser Spesen-Tracker-App unsere Farbe hinzugefügt haben dieser Spesen-Tracker-App unsere Farbe Jetzt werden wir hier einen gewissen Grenzradius hinzufügen und wir werden Box Do hinzufügen. Was werden wir also tun, um den Grenzradius und das Feld Edo hinzuzufügen? Zuallererst füge ich hier Box Do hinzu. Um Box Edo hinzuzufügen, habe ich hier eine Box Do erstellt. Sie können sehen, dass ich eine Box erstellt habe , mit deren Hilfe Sie das unten sehen können. Ich habe diese Box mit Hilfe von Figma erstellt . Und was kann ich tun? Ich kann diesen Entwicklermodus einfach einschalten. Und in diesem Entwicklermodus kann ich in diesen Inspektionsmodus und in diesen Inspektionsmodus eintauchen. Also wähle ich dieses Feld aus und dann komme ich in diesen Entwicklermodus. Sobald ich diesen Entwicklermodus aktiviere, kann ich den gesamten Code sehen und den gesamten CSS-Code abrufen. Also hier kann ich mir diese Box holen Edo. Also lass mich diese Box kopieren. Oder ich habe es schon kopiert. Also ich werde in diesem JavaScript kommen , weil ich unser Box-Do hier hinzugefügt habe. Also werde ich das kopieren. Ich werde das von hier entfernen. Und dann füge ich das Feld Edo hier ein, Control V, und dann haben wir unser Feld do zu unserer Website hinzugefügt. Lass mich sehen und schauen, wie es aussieht. Sie können also sehen, dass wir eine Box um diese Box herum um diesen Container herum hinzugefügt haben . Jetzt fügen wir diesen Randradius hinzu und dann fügen wir hier etwas Polsterung hinzu Lassen Sie mich zuerst den Grenzradius hinzufügen. Um den Grenzradius hinzuzufügen, gehe ich weiter darunter und gebe hier den Grenzradius ein. Der Grenzradius in unserem Grenzradius wird zwei RAM sein Dann fügen wir etwas Abstand hinzu damit ich es speichern und Ihnen zeigen kann, weil unser gesamter Text nach links geht Wenn wir also einen Abstand nach links hinzufügen, dann wird unser Inhalt etwas weiter von unserer rechten Seite entfernt sein Sie können hier also sehen , dass sich unser Inhalt auf der linken Seite befindet Wenn Sie also nach links Polsterung hinzufügen, ist das in Ordnung. Lassen Sie mich diese Polsterung links hinzufügen, PAW DIN G-Polsterung Und die linke Polsterung beträgt fünf RAM . Lass es mich speichern. Hier können Sie also sehen , dass sich unser Inhalt etwas rechts befindet. Vorher war es ganz links jetzt ist es auf der rechten Seite. Jetzt werden wir diese Buttons stylen. Um diese Schaltflächen zu gestalten, wähle ich die Schaltfläche aus. Ich wähle direkt diese Schaltfläche aus. Und innerhalb dieser Schaltfläche gebe ich Polsterung ein. Wenn ich innerhalb dieser Schaltfläche eine Polsterung hinzufüge, wird unsere Schaltfläche etwas größer Lassen Sie mich dieser Polsterung also 0,6 n hinzufügen. Lass es mich speichern und ich zeige es dir. Sie können sehen, dass unser Button etwas größer wird. Jetzt fügen wir eine Hintergrundfarbe hinzu, Hintergrundfarbe und die Hintergrundfarbe werden weiß sein. Und dann fügen wir einen Rahmen hinzu , weil in unserer Schaltfläche ein Rand vorhanden ist Deshalb müssen wir den Rand entfernen. Um den Rand von der Schaltfläche zu entfernen, schreiben wir Border None. Und dann fügen wir unserer Schaltfläche einen gewissen Randradius hinzu, also der Grenzradius, und dann beträgt der Grenzradius fünf RAM. Lass es mich speichern, ich werde es mir ansehen. Sie können sehen, dass unsere Schaltfläche weiß geworden ist und dass unserer Schaltfläche ein gewisser Randradius hinzugefügt wurde. Jetzt fügen wir unseren Eingaben ein Styling hinzu. Um unseren Eingaben einen Stil zu verleihen, wähle ich hier direkt die Eingabe aus. Und in dieser Eingabe werde ich eine Polsterung hinzufügen, um die Eingabe zu vergrößern Polsterung PA DANG-Polsterung und die Polsterung wird 0,4 RAM betragen. Und dann füge ich einen Rand hinzu. Lass mich rasieren und ich zeige dir was ich. So kannst du sehen, dass in unserer Eingabe ein Rand vorhanden ist Und wenn du darauf klickst, erhalten wir einen weiteren Rand. Also müssen wir auch diesen Klickrand entfernen und dann auch diesen Rand. Also lass mich den Rand entfernen. Zuallererst Grenze, die Grenze wird keine sein. Ein Umriss bedeutet Umrissgrenze. Um also den Gliederungsrahmen zu entfernen, müssen wir einfach Kontur und keinen auswählen. Also wenn ich das speichere und es dir zeige, kannst du sehen, dass es hier keinen Rand gibt. Aber Sie können sehen, dass diese beiden verschmolzen sind. Wenn wir hier also etwas Spielraum haben wollen, fügen wir etwas Spielraum hinzu. Wir müssen dort einen BR hinzufügen, weil wir diesen Namen über dieser Eingabe und diesen Betrag über diesem Betrag hinzufügen diesen Namen über dieser Eingabe und diesen werden. Um diesen BR hinzuzufügen, gehen wir zu unserer Tabelle und fügen hier BR hinzu. Also gebe ich unter diesem Label B BR ein, und dann hier füge ich ein BR ein. Also speichere ich das und zeige es dir im Browser. Hier können Sie also sehen , dass unsere Eingabe in Ordnung ist. Jetzt werden wir diesem Plus-Symbol einen Stil hinzufügen. Um diesem Plus-Symbol einen Stil zu verleihen, haben wir diese BTs ausgewählt. Also haben wir eine Klasse von ts in dieses Symbol geschrieben. Lassen Sie mich also dieses Bt auswählen, BTNS nicht Bts. Und dann werde ich das TS-Punkt-Steuerelement stylen. Und ich werde einfach den Hintergrund von dieser Schaltfläche entfernen. Also Hintergrund, keiner. Ich speichere das und zeige es dir im Browser. Sie können sehen, dass der gesamte Hintergrund von hier entfernt wurde. Jetzt wähle ich dieses Symbol separat aus, damit ich diesem Symbol etwas Polsterung oder diesem Symbol einen Rand hinzufügen kann etwas Polsterung oder diesem Symbol einen Rand hinzufügen oder diesem Symbol einen Rand hinzufügen Um dieses Symbol auszuwählen, schreibe ich Far des Circle, Des Plus und füge einen oberen Rand hinzu und der obere Rand beträgt 25 Pixel, dann beträgt die Telefongröße zehn Pixel, die Telefongröße zehn Pixel, Telefongröße zehn Pixel Lassen Sie mich speichern, lassen Sie mich es Ihnen zeigen, jetzt können Sie sehen, dass dieses Symbol einen angemessenen Rand hat. Sie können hier also sehen, dass wir kurz davor sind, unser Design fertig zu stellen. Das Einzige, was noch übrig ist, ist, dass wir diese Geschichte hinzufügen müssen. Das heißt, wir müssen diese Geschichte gestalten. Also, ich entferne diesen Punkt von hier, das heißt, ich entferne den Aufzählungspunkt von hier und ich entferne die Polsterung, die das Essen hat Also lass mich diese UL auswählen. Und darin entferne ich zunächst die Aufzählungspunkte. Um also die Aufzählungspunkte zu entfernen, schreiben wir „les dottyLett not dot“ vom Typ D, und das wird Und dann addieren wir unsere Polsterung auf Null. Auffüllen von Geocontrollern. Jetzt zeige ich es dir Jetzt können Sie sehen, dass auch unsere Geschichte richtig gestaltet ist. 4. Button-Funktionalität: Das ist also unsere aktuelle App, und in dieser App werden wir diese Funktionen für Ausgaben und Einnahmen hinzufügen. Um diese Funktionalität hinzuzufügen, müssen wir also JavaScript verwenden. Also komme ich zu dieser Datei-App Dot Java Script. Und hier wähle ich diese Einnahmen und Ausgaben aus. Zuerst wähle ich das aus und ich wähle das aus, und dann wähle ich diese Schaltfläche und dann wähle ich diese Schaltfläche aus. Um dies auszuwählen, verwende ich den Abfrageselektor. Lassen Sie mich eine Variable mit dem Namen ink remove erstellen Ich schreibe ink, remove Ich habe E geschrieben, und dann gebe ich gleich N, dann wähle ich es mit Hilfe des Abfrageselektors Also Dokument mit Punkt und Abfrageselektor. Und dann wähle ich das unter Entfernen aus. Lassen Sie mich zu diesem HTML-Code übergehen, kopieren und hier einfügen, Steuerung mit Punkt, V. Jetzt kopiere ich das und füge das unten ein, Control V. Und statt Tinte schreibe ich EXP oder EX, ich schreibe einfach Und dann werde ich diese Klasse hier hinzufügen, diese EXP entfernen. Lass mich das kopieren und dann hier einfügen. Kontrolle V. Also haben wir unsere Einnahmen und Ausgaben ausgewählt. Jetzt wählen wir die Schaltfläche „Einnahmen “ und die Schaltfläche „Ausgaben“. Also nochmal, wir können das kopieren und wir können es hier einfügen, Control V und ControlV Also werde ich Ink Button schreiben. IMC-Taste, BTN und dann EX BTN. Und hier wähle ich Einnahmen und dann hier Ausgaben Ausgabe E ist Kapital, Sie können es hier überprüfen. Habe dieses E in Großbuchstaben geschrieben, also lass es mich klein schreiben und dann werde ich das speichern und ich schreibe dieses E in Kleinstreu und EX PE und SE als Aufwand Ich speichere und füge JavaScript zu den Selektoren hinzu. Also erstelle ich zunächst einen Event-Listener für diese Inc-Schaltfläche und die X-Expense-Schaltfläche. Das heißt, wann immer ein Benutzer darauf klickt, wird dieser Event-Listener ausgeführt Und dann die Funktion innerhalb des Even-Listeners, was auch immer wir in dieser Funktion hinzufügen werden, diese Funktion wird immer dann ausgeführt, wenn ein Benutzer auf diese INC-Schaltfläche klickt oder die X-Taste bedeutet, dass diese INC-Schaltfläche klickt oder die X-Taste sie Einnahmen oder Ausgaben Lassen Sie mich diesen Even-Listener auf dieser Incuton-Tinte BTN hinzufügen, und ich lasse diesen Zugriffs-Listener hinzufügen, und der Even-Listener wird klicken, also CLI und ich lasse diesen Zugriffs-Listener hinzufügen, und der Even-Listener wird klicken, also CLI c klickt. Und dann werde ich eine Funktion hinzufügen. Der Name der Funktion wird ICs sein, und dann erstelle ich einen weiteren Even-Listener, dem ich diesen Even-Listener auf der Expense-Taste hinzufüge Also entferne ich dieses INC und füge X hinzu. Und statt dieser Inks füge ich andere Namen wie XP hinzu. Jetzt erstelle ich eine Is-Funktion und dann eine EXP-Funktion Um also eine Is-Funktion zu erstellen, schreibe ich den Variablennamen const und dann Is NCs und gebe dann Equals In diesen Funktionsparametern übergeben wir E bedeutet Und jetzt verwende ich hier die Pfeilfunktion. Sie können die normale Funktion verwenden, aber ich verwende die Pfeilfunktion, weil ich es eher gewohnt bin Und ich gebe dieses Pfeilsymbol und dann gebe ich diese lockigen Aufzeichnungen In den geschweiften Klammern, was wir tun werden. Immer wenn der Benutzer auf diese Schaltfläche klickt, fügen wir eine versteckte Klasse oder wir entfernen eine versteckte Klasse aus den Einnahmen und fügen die versteckte Klasse unter Ausgaben Also, was ich mache, lass es mich dir zeigen. Ich wähle diese Tinte und dann Tinte entfernen. Dieses REOV, dann wähle ich das und dann entferne ich die versteckte Klasse aus dieser Funktion Immer wenn der Benutzer auf die Schaltfläche „Einnahmen“ klickt, möchte ich die Klasse, die als versteckt bezeichnet wird, entfernen , weil wir in dieser versteckten Klasse eine Display-Nonne hinzufügen Lassen Sie mich also zunächst die versteckte Klasse hinzufügen, sodass sie ein D und versteckt ist. Und in dieses versteckte Feld schreiben wir Display Nun. Also zeige keine an. was diese Anzeige ohne Anzeige bewirkt, ist, dass wir jedes Mal, wenn ein Benutzer auf diese Einkommensschaltfläche klickt, die versteckte Klasse aus dieser Einkommensschaltfläche entfernen . Das heißt, jedes Mal, wenn wir diese versteckte Klasse von dieser Einkommensschaltfläche entfernen , wird unsere angezeigte Nonne entfernt, und dann fügen wir diese versteckte Klasse zu dieser Ausgabenschaltfläche hinzu. Also lass es mich dir zeigen. Ich wähle „Einnahmen entfernen“ und dann „Punktklassenliste“, und dann wollen wir „ Verborgenes“ aus diesem Einkommen entfernen, also fügen wir Punkt entfernen hinzu. Wenn Sie etwas hinzufügen möchten, fügen wir Punkt T hinzu, und wenn Sie etwas entfernen möchten, fügen wir den Punkt Entfernen hinzu. Dann füge ich den Namen der Klasse hinzu , die versteckt ist HID Hidden. Und es ist HI. Dann kopiere ich das und füge es hier ein. Und statt Tinte schreibe ich x. Und dann füge ich diese Klasse hinzu, und dann füge ich die Klasse hier hinzu, A füge ich hinzu. Jetzt kopiere ich das und mache das Gegenteil mit dieser Ausgabenschaltfläche. Zuallererst zeige ich es Ihnen mit den Steuerelementen der Einkommensschaltfläche, und ich zeige es Ihnen im Browser. Wenn Sie nun hier auf Ausgaben klicken, passiert nichts, da wir keine Java-Screening-Kosten hinzugefügt haben . Wenn Sie jedoch auf Einnahmen klicken, können Sie sehen, dass Einnahmen kommen, und wann immer wir auf Ausgaben klicken, passiert nichts. Lassen Sie mich also das Gegenteil davon hinzufügen. Wir müssen das Gegenteil davon zu den Kosten hinzufügen. Ich kopiere das und füge es unter Control V ein. Und statt Tinte gebe ich EXP ein, also EXP Darin füge ich Ex hinzu und ich füge hier ENC hinzu Also, was das macht, ist, das Kostenelement zu entfernen, oder es beseitigt den Kostenrückgang. Lassen Sie mich Ihnen zeigen, dass das Div in dieser Ausgabe, dieses Div da ist, richtig. Dieses D mit einem Absatz-Tag. Also wann immer wir darauf klicken, wird es entfernt, also lass es mich dir richtig zeigen. Jedes Mal, wenn wir auf diese Ausgabe klicken, entfernen wir die versteckten Ausgaben. Das heißt, wir entfernen „Keine anzeigen“ von hier. Das bedeutet, dass diese Ausgaben in unserem Browser angezeigt werden und wir versteckte Ausgaben zu unseren Einnahmen hinzufügen. Einnahmen werden also ausgeblendet, wenn wir auf Ausgaben klicken und wenn wir auf Einnahmen klicken, werden Ausgaben ausgeblendet. Ich schätze, Sie haben diesen Punkt verstanden. Also lass mich das speichern und lass es mich dir im Browser zeigen. Wenn Sie nun auf Ausgaben klicken, werden unsere Einnahmen ausgeblendet, und wenn wir auf Einnahmen klicken, werden unsere Ausgaben ausgeblendet. Das ist also die grundlegende Logik dahinter. Und das ist in diesem Video, wir werden uns in einem anderen Video treffen und in einem anderen Video werden wir diesen Saldo hinzufügen oder wir werden diese Transaktionen hinzufügen.