Projet JavaScript : créer une application de suivi des dépenses

1. Intro du projet: Dans ce cours, nous allons créer une application de suivi des dépenses où vous pourrez suivre vos dépenses et vos revenus. Et vous pouvez ajouter vos dépenses, vous pouvez ajouter vos revenus, et ce cours bénéficiera d'un stockage local. Ainsi, pour ajouter une dépense ou un revenu, vous pouvez écrire le nom de la transaction. Maintenant, je vais écrire au client parce que nous avons reçu un paiement de lien, c'est pourquoi j'écris à votre client. Nous avons reçu 500$ de notre client. C'est pourquoi je vais écrire ici 500. Ensuite, je vais cliquer sur cette icône plus. Maintenant, vous pouvez voir ici que nous avons 500$ sur votre solde, puis vous pouvez vérifier ici, dans notre historique, que nous avons un client qui nous a payé 500$. Maintenant, pour ce qui est des dépenses, elles sont nulles, car nous n'avons eu besoin d'aucune dépense provenant de ce solde. Mais si vous cliquez sur ce revenu, vous pouvez voir que nous avons reçu 500$ de revenus. Maintenant, si vous voulez ajouter des dépenses vous avez acheté de la nourriture à partir de ce montant. Laissez-moi écrire pied puis laissez-moi écrire un montant, 20$ pour la nourriture. Si j'écris des dépenses, je dois insérer le symbole moins. Ensuite, si je clique sur cette icône plus, vous pouvez maintenant vérifier que notre solde est maintenant de 480$ Cela signifie que 500 -20 équivalent à 480$. Si vous cliquez sur cette dépense, vous pouvez voir que nous recevons 20$ moins 20$ de dépenses. C'est donc un projet que nous allons développer dans ce cours. Et laissez-moi vous montrer le stockage local de ce projet. si je recharge cette page, vous pouvez voir que nos dépenses sont là, nos revenus sont là, notre solde est là et notre historique est là Cela signifie que rien n'a été actualisé car il est stocké dans le stockage local Et si vous souhaitez supprimer tout type de dépense ou de revenu, il vous suffit de cliquer sur cet élément croisé. Maintenant, nos dépenses, qui étaient de 20$, sont supprimées. Et maintenant, vous pouvez voir que nos revenus sont de 500 dollars et nos revenus de 20 dollars. Pas 20 dollars. Nos dépenses sont de 0$ et nos revenus de 500$. Donc, si vous souhaitez créer une application de suivi des dépenses comme celle-ci et que vous souhaitez implémenter ce stockage local dans cette application, vous pouvez consulter ce cours et commençons à créer cette application. 2. Ajouter du HTML: Nous allons maintenant écrire le HTM de notre projet. Vous pouvez donc voir sur le côté gauche que j'ai créé un projet de suivi des dépenses. Et puis dans ce dossier, nous avons trois fichiers. Le premier est EBD Js , puis indexez le point html, puis le style CSS Donc, tout d'abord, je vais créer un passe-partout de H t pour créer un passe-partout, il suffit de taper un point d'exclamation et de cliquer Notre modèle sera prêt. Nous allons maintenant connecter ce style de CSS et EB point Js. Donc, pour lier ce style de CSS et EBD Js, faites un signe pour écrire le tagnam de Link, puis dans ce lien, nous allons taper le HRF de ce style de Nous avons donc maintenant connecté ce style de CSS à notre code HTML. Nous allons maintenant connecter notre point web js. Pour connecter notre ab point js, je vais entrer dans ce corps, et ici je vais créer un nom de tag connu sous le nom de script Dans ce script, je vais taper SRC means source, et dans cette source, j'écrirai le nom de fichier ABDTjs Nous avons donc maintenant connecté JavaScript et CSS à notre code HTML Nous allons maintenant lier nos icônes, puis nous allons lier notre police. Passons donc à notre navigateur, puis ici, vous pouvez voir que j'ai ouvert un site Web appelé fondosm.com Et vous pouvez voir ici que nous avons sélectionné cette icône en forme de croix. Donc, pour sélectionner cette icône en forme de croix ou pour utiliser cette icône en forme de croix, nous devons utiliser cet ITAC, puis dans la classe de cet Itech, nous allons écrire FASr, puis far de Solis puis far Nous allons donc le copier pour utiliser ce site Crossmr afin de relier ce fondosom à notre table H. Donc, pour lier nos polices dosm, nous devons nous rendre sur ce site Web connu sous le nom de CDN Js. Dans ce CDN Js, vous pouvez simplement rechercher votre police dosom, puis après avoir recherché font dosom vous obtiendrez ce type de page où fondosom sera écrit . Vous pouvez simplement copier cette technologie de copier-lien, puis vous pouvez accéder à votre tableau et en dessous de ce style de CSS, Alors maintenant, notre police dosom est link. Cela signifie que nous pouvons utiliser des icônes de fondosom. Maintenant, ce que je vais faire, c'est aller chercher les téléphones. Je vais aller sur Google Phones et je vais chercher les polices de notre site Web. Je suis donc arrivé sur ce site Web de Google Phones, phones.google.com. Vous pouvez effectuer une recherche et vous arriverez sur ce site Web. Et ici, vous pouvez effectuer une recherche dans la section de recherche par téléphone. Vous pouvez rechercher Roboto Mono car nous utilisons cette police dans ce projet C'est pourquoi vous pouvez rechercher ici Roboto Mono. J'ai donc sélectionné ce Roboto Mono avec 300, puis vous pouvez simplement copier cette URL d'entrée Contrôlez C, puis je le collerai dans notre CSS. Ici, je vais le coller. Ici, j'ai déjà collé ce lien. Maintenant, ce que nous allons faire maintenant, nous allons créer notre code HTML. Tout d'abord, je vais créer un en-tête dans l'en-tête, nous allons écrire un outil de suivi des dépenses et comme ça, nous allons continuer. Permettez-moi de créer un en-tête. Dans cet en-tête, nous allons créer un H deux, puis dans ce H deux, nous allons écrire le suivi des dépenses. Et ici, nous allons créer un conteneur Div et à l'intérieur de ce conteneur, nous allons contenir nos revenus et nos dépenses ainsi que notre solde Tout d'abord, je vais créer un dif avec la classe de container À l'intérieur, permettez-moi de créer un espace ici. Maintenant, sur ce continent, la première chose que je vais écrire est votre équilibre. Pour calculer votre solde, nous devons sélectionner H quatre. Dans ce H quatre, j'inscrirai votre solde et votre solde sera par défaut de 0,0 0$. Pour écrire 0.0 $0, nous allons sélectionner H un, puis à l'intérieur de celui-ci, il y aura un identifiant nommé balance. Nous avons donc créé H one avec l'idée d'équilibre. Nous allons maintenant saisir un solde, qui sera de 0,0 0$. Donc dollar, puis zéro point, double zéro. Il s'agit donc de notre solde par défaut. Maintenant, je vais créer un autre dif et à l'intérieur du div, il contiendra nos revenus et nos dépenses Permettez-moi donc de créer un diff et la classe du D sera ink x ou EXP inc Je vais écrire EXP. Et je vais entrer dans ce dif et ici je vais en créer un autre pour nos revenus Permettez-moi donc de créer un dif dans la classe car ce D supprimera les revenus Alors laissez-moi écrire Ink Remove. Retirez le RLV dans un étui en forme de chameau, donc REV le retire, puis j'écrirai IRE Cela signifie supprimer les revenus, puis j'écrirai caché. Alors pourquoi écrivons-nous ce genre de cours ? Nous écrivons ce type de classes parce que nous voulons ajouter du CSS et du JavaScript à ces classes, c'est exact. Alors maintenant, vous ne comprendrez pas pourquoi nous écrivons, quand nous utiliserons ou quand nous sélectionnerons ces classes. Cette fois, vous comprendrez pourquoi nous écrivons ce genre de classes. Maintenant, vous pouvez simplement écrire ces classes. Donc ici, je vais écrire en cachette. Ensuite, dans ce PDF, je vais créer un H quatre, et ce H quatre contiendra des revenus. Cela signifie qu'à l'intérieur de ce H quatre inscrira le revenu et qu'en dessous de cet âge de quatre ans nous inscrirons le montant de ce revenu. Donc, pour écrire le montant de ce revenu, faites un signe pour écrire P, puis à l'intérieur du P, nous aurons une classe à l'intérieur du P. La classe sera plus, puis le solde sera par défaut de 0,0 0$, dollar zéro point double zéro. Comme vous pouvez le voir, nous avons créé un revenu maintenant nous allons créer une baisse des dépenses. Pour créer des dépenses, nous pouvons simplement le copier et le coller ci-dessous. Contrôle C et contrôle V. Et ici, je vais supprimer cet INC et j' ajouterai EXP puis IRE à ERE, puis le masqué sera pareil Maintenant, je vais convertir ses revenus en dépenses. Et ce cours sera négatif. Et nous allons mettre le moins devant tout ça. Et ici, nous allons mettre un avantage à cela. Maintenant que nous avons créé un outil de suivi des dépenses d' en-tête et un conteneur à l'intérieur de ce conteneur, nous avons créé un solde , puis des revenus et des dépenses. Jetons un coup d'œil à la table. Permettez-moi de l'enregistrer, de cliquer avec le bouton droit de la souris et de l'ouvrir avec le serveur Life. Alors maintenant, vous pouvez voir que nous avons créé un outil de suivi des dépenses, votre solde est là, puis notre solde est là, qui est de 0,0 0$, puis les revenus et les dépenses sont là. Nous allons donc maintenant créer deux entrées. Dans une entrée, nous ajoutons nom de la transaction et dans une autre entrée, nous ajoutons le montant. Permettez-moi donc de créer une entrée pour créer notre entrée Avant de créer une entrée, nous devons créer deux boutons pour cela car dans notre application, nous avons créé un bouton pour la saisie et un bouton pour les dépenses. Permettez-moi de créer deux boutons avant de créer ces entrées. Je vais passer en dessous de ce diff et ici je vais créer un bouton. Pour créer un bouton, j'écrirai bouton, puis dans cette allée de boutons, j'écrirai, je donnerai une certaine classe à ce bouton Le cours sera payant. Je vais copier cette dépense. Je vais le coller ici, puis je vais créer un autre bouton. Je vais donc copier ce bouton et le coller ci-dessous. Et ici, je vais taper le revenu. Et je supprimerai cette dépense, puis j'inscrirai les revenus. Maintenant, nous pouvons vérifier que nous avons deux boutons avec les revenus et les dépenses. Donc, si nous cliquons sur les dépenses, nous obtiendrons les dépenses et si nous cliquons sur les revenus, nous obtiendrons les revenus. Créons des entrées ici, mais avant de créer des entrées, je vais taper le titre. Le titre sera Ajouter une nouvelle transaction, donc c'est trois, puis à l'intérieur de trois, j'écrirai ajouter une nouvelle transaction Je vais donc créer une technologie Fm, puis dans cette technologie Fm, j'ajouterai un identifiant. Le nom de l'identifiant sera un formulaire. Cliquez donc sur Enter, puis nous obtiendrons un formulaire avec le formulaire d'idée. Alors laissez-moi retirer cet axone. Sous ce formulaire, nous allons créer un DV et à l'intérieur de ce D, nous allons créer une étiquette, puis à l'intérieur de l' étiquette, nous allons créer Maintenant, nous allons créer un DV à l'intérieur du DV, nous allons créer une étiquette Ensuite, dans cette étiquette, nous écrirons que cette étiquette est pour le texte. Alors laisse-moi écrire un texte. Et puis ici j'écrirai le nom. Ensuite, je vais créer une entrée. Le type de saisie sera du texte et le nom de l'entrée, puis le nom de l'entrée ne seront rien. Aucun nom n'est utilisé, et puis l'idée du nom sera du texte. Ensuite, nous ajouterons une classe dans cette entrée. Le nom de la classe sera saisi. Alors laissez-moi écrire une entrée. Il y a un nom, puis un espace réservé sera là, donc un espace réservé Et dans cet espace réservé, nous écrivons le nom de la transaction. Nous avons donc créé une entrée pour le nom de la transaction. Nous allons maintenant créer une entrée pour le montant. Je vais donc copier ce D et coller ce dV ici , puis nous changerons le nom Nous allons changer le nom du nom en montant. Et puis le type de montant sera un nombre. Numéro de lampe. Et puis l'identifiant sera le montant. Dans le cours, nous saisirons le montant. Ensuite, l'espace réservé sera le montant. Nous avons donc créé des entrées. Nous allons maintenant créer notre histoire. Pour créer notre histoire, nous allons passer en dessous ce formulaire, puis ici j'écrirai l'histoire. Donc, pour écrire l'histoire, je vais sélectionner H trois et à l'intérieur de ce H trois, j'écrirai l'histoire. Ensuite, l'histoire sera Allis. Pour créer Allis, nous devons créer UL À l'intérieur de cette UL, il y aura de l'IA. Mais l'identifiant de l' UL sera listé. Laissez-moi écrire l'identifiant , puis l'identifiant sera listé. Ensuite, dans cette UL, nous créerons une IA, puis dans cette IA, j'écrirai quelques dépenses, comme foot. Ensuite, je vais créer un spin à l'intérieur de ce spin, je vais copier ce truc. Nous allons donc copier cette icône de police. Pour copier cette police, il me suffit cliquer sur cette police puis de la coller ici. Nous avons donc également copié cette police X Mark. Alors laissez-moi le faire dans le navigateur. Vous pouvez donc voir que nous avons créé un outil de suivi des dépenses avec votre solde, vos revenus et dépenses, et qu'il y a deux boutons avec dépenses et les revenus, puis nous avons créé une nouvelle transaction avec deux entrées, nom et le montant de l'entrée, puis nous avons créé un historique avec Ally of Food, et il y a une icône de police. Nous avons donc écrit le code T pour notre projet. Nous allons maintenant écrire du code CSS pour ce projet dans la prochaine vidéo. 3. Styliser notre application: Dans cette vidéo, nous allons écrire le code CSS de notre application afin de pouvoir la styliser. Je tiens donc à ajouter une dernière chose : nous avons oublié de mettre ce symbole plus dans notre application dans notre dernière vidéo. Alors laissez-moi vous montrer comment le dire. Donc, ici, au-dessus de cette technologie de fermeture de formulaire, vous pouvez voir que j'ai créé un bouton avec la classe BTNS Ensuite, j'ai inséré cet Itech et à l'intérieur de cet iTE, la classe est loin solide et loin cercle plus, puis bien trop Excel. Pour Excel, il faut utiliser la plus grande police de caractères. Alors maintenant, je vais économiser et je vais vous montrer à quoi cela ressemble. Vous pouvez donc voir que nous avons ajouté cette icône plus. Vous pouvez donc également ajouter cette icône plus. Nous allons maintenant ajouter du CSS à notre application. Donc, pour ajouter notre CSS, la première chose que nous allons faire ici est sélectionner le sélecteur universel Ensuite, dans ce sélecteur universel, nous saisirons la taille de la boîte Bader Box, donc la taille de la boîte Bader Box Et maintenant, nous allons passer en dessous de ceci et nous allons sélectionner notre corps entier. Alors laissez-moi sélectionner le corps. Ensuite, à l'intérieur de ce boîtier, nous appliquerons Display Flex afin placer notre contenant au centre. Donc, pour placer notre conteneur au centre, nous utilisons Flexbox. Donc, tout d'abord, je vais écrire Display Flex. Ensuite, j'écrirai la direction de flexion et la direction de flexion sera une colonne. Donc, fléchissez la colonne de direction. Ensuite, j'écrirai Aleem center, linem center, puis je justifierai le centre de contenu Justifiez le centre de contenu. J'ai écrit Bseline ici, alors laissez-moi supprimer Bsline nous avons écrit ici, justifier Nous allons maintenant ajouter une hauteur moyenne à cette hauteur moyenne, 100 VH, donc 100 VH Ensuite, nous ajouterons puis nous ajouterons une couleur de fond. La couleur d'arrière-plan n' est donc pas requise car notre couleur de fond est le blanc. Nous allons maintenant ajouter une famille de polices dans tout ce corps. Pour ajouter une famille de polices, j'écrirai simplement famille de polices. Ensuite, notre famille de polices me permettra de le vérifier. Nous l'avons sélectionné. Notre famille de polices sera donc ce robotomano. Permettez-moi de copier cette famille de polices et je vais la coller ici. Control V. Control V. Permettez-moi de supprimer cette famille de polices. Nous avons donc testé notre famille de polices Roboto mono ici. Maintenant que notre corps est prêt, laissez-moi enregistrer et vous montrer à quoi il ressemble. Allons donc dans ce navigateur et ouvrons-le. Donc oui, vous pouvez voir que notre conteneur est au centre et que tout est au centre. Cela signifie que nous avons tout aligné au centre. Maintenant, ce que nous allons faire, nous allons maintenant ajouter du style dans le conteneur. Donc, à l'intérieur de la suite, nous ajouterons de la couleur de fond et beaucoup de choses. Permettez-moi donc de sélectionner ce conteneur. À l'intérieur de ce conteneur, nous écrirons margin auto, pas margin auto, nous donnerons une certaine marge. La marge sera de 30 pixels, puis automatique. Ensuite, j'écrirai largeur. La largeur de cette application sera donc de 550 pixels. C'est comme une application étroite, c'est pourquoi j'écris 550 pixels. Ensuite, nous allons écrire notre couleur de fond. Notre couleur de fond était donc linéaire et éclatante. Donc, si vous souhaitez ajouter un rayonnement linéaire dans votre projet, donc si vous souhaitez ajouter un rayonnement linéaire, vous devez sélectionner l'image d'arrière-plan , pas la couleur d'arrière-plan. Permettez-moi donc de sélectionner l'image d'arrière-plan. Et à l'intérieur de cette image d' arrière-plan, nous écrirons le radiant linéaire et notre radiant linéaire sera une virgule de -90 degrés, nom de notre couleur sera A un C quatre C'est notre première colonie. Maintenant, nous allons ajouter une couleur de plus. Permettez-moi d'ajouter un C, c2e, puis neuf FB Nous avons donc ajouté une autre couleur également à 90 degrés. Alors laissez-moi le sauvegarder et je vous le montrerai dans le navigateur. Vous pouvez voir que nous avons ajouté notre couleur à cette application de suivi des dépenses, et maintenant nous allons ajouter un rayon de bordure ici et nous allons ajouter une case do. Donc, pour ajouter un rayon de bordure et une boîte Edo, que ferons-nous ? Tout d'abord, je vais ajouter box do ici. Donc, pour ajouter la boîte Edo, j'ai créé une boîte à faire ici. Vous pouvez voir que j'ai créé une boîte Edo avec l'aide de vous pouvez la voir ci-dessous. J'ai créé ce coffret avec l'aide de Figma. Et que puis-je faire ? Je peux simplement activer ce mode développeur. Et dans ce mode développeur, je peux entrer dans cette inspection et dans cette inspection. Je cocherai donc cette case, puis je passerai en mode développeur. Donc, dès que j'active ce mode développeur, je peux voir tout le code et je peux obtenir tout le code CSS. Je peux donc me procurer cette boîte Edo. Alors laissez-moi copier cette boîte. Ou j'ai déjà copié. Donc, ce que je vais faire, c'est entrer dans ce JavaScript parce que j'ai ajouté notre boîte de dialogue ici. Je vais donc copier ceci. Je vais le supprimer d'ici. Ensuite, je vais coller cette case Edo ici, Control V, puis nous avons ajouté notre boîte do à notre site Web. Laissez-moi voir et regarder à quoi ça ressemble. Vous pouvez donc voir que nous avons ajouté une case à faire autour de cette boîte autour de ce conteneur. Nous allons maintenant ajouter ce rayon de bordure, puis nous allons ajouter un peu de rembourrage ici Permettez-moi d'abord d'ajouter le rayon de bordure. Pour ajouter un rayon de bordure, je vais passer en dessous et ici je vais taper le rayon de bordure. rayon de bordure dans notre rayon de bordure sera de deux béliers Ensuite, nous ajouterons un peu de rembourrage gauche, car laissez-moi enregistrer et laissez-moi vous montrer que tout notre texte va vers la gauche Donc, si nous ajoutons du rembourrage à gauche, notre contenu se trouvera un peu sur le côté droit Vous pouvez donc voir ici que notre contenu se trouve sur le côté gauche. Donc, si vous ajoutez du rembourrage à gauche, tout ira bien. Permettez-moi donc d'ajouter ce rembourrage à gauche, PAW DIN G Et il ne restera que cinq béliers. Laissez-moi le sauvegarder. Donc, ici, vous pouvez voir que notre contenu est un peu à droite. Avant, il était complètement à gauche , maintenant il est à droite. Nous allons maintenant personnaliser ces boutons. Donc, pour styliser ces boutons, je vais sélectionner un bouton. Je vais directement sélectionner ce bouton. Et à l'intérieur de ce bouton, je vais taper rembourrage. Si j'ajoute du rembourrage à l'intérieur de ce bouton, notre bouton deviendra un peu plus grand Permettez-moi donc d'ajouter 0,6 n dans ce rembourrage. Laissez-moi le sauvegarder et je vais vous le montrer. Vous pouvez voir notre bouton s'agrandir un peu. Nous allons maintenant y ajouter une couleur d' arrière-plan, couleur d' arrière-plan et la couleur de fond seront le blanc. Ensuite, nous ajouterons une bordure car il y a une bordure dans notre bouton, c'est pourquoi nous devons supprimer la bordure. Pour supprimer la bordure du bouton, nous allons écrire border none. Ensuite, nous ajouterons un rayon de bordure à notre bouton, donc le rayon de bordure, puis le rayon de bordure sera de cinq RAM. Laissez-moi le sauvegarder, je vais le voir. Vous pouvez voir que notre bouton est devenu blanc et un rayon de bordure a été ajouté à notre bouton. Nous allons maintenant ajouter du style à nos entrées. Donc, pour ajouter du style à nos entrées, je vais directement sélectionner l'entrée ici. Et à l'intérieur de cette entrée, j'ajouterai un rembourrage pour agrandir l'entrée Rembourrage : rembourrage PA DANG et le rembourrage sera de 0,4 ram. Ensuite, j'ajouterai une bordure. Laissez-moi me raser et je vais vous montrer ce que je veux dire. Vous pouvez donc voir que cette bordure est présente dans notre saisie. Et si vous cliquez dessus, nous obtiendrons une autre bordure. Nous devons donc également supprimer cette bordure de clic , puis cette bordure également. Permettez-moi donc de supprimer la bordure. Tout d'abord, frontière, il y aura aucune frontière. Un contour signifie une bordure de contour. Donc, pour supprimer la bordure du contour, il suffit de sélectionner le contour et aucun. Donc, si je le sauvegarde et si je vous le montre, vous verrez qu'il n' y a pas de frontière ici. Mais vous pouvez voir que les deux sont fusionnés. Donc, si nous voulons une certaine marge ici, nous en ajouterons. Nous devons y ajouter un BR car nous ajouterons ce nom au-dessus de cette entrée et ce montant au-dessus de ce montant. Donc, pour ajouter ce BR, nous allons aller à notre tableau et ajouter BR ici. Donc, en dessous de cette étiquette, je vais mettre B BR, puis ici, je mettrai un BR. Je vais donc enregistrer ceci et je vais vous le montrer dans le navigateur. Vous pouvez donc voir ici que notre contribution est correcte. Nous allons maintenant ajouter un style à cette icône en forme de plus. Donc, pour ajouter du style à cette icône en forme de plus, nous avons sélectionné ce BtS. Nous avons donc écrit une classe de ts dans cette icône. Permettez-moi donc de sélectionner ce Bt, BTNS et non BTs. Ensuite, je vais l' appeler ts point control. Et je vais simplement supprimer l' arrière-plan de ce bouton. Donc, aucun contexte. Je vais l'enregistrer et je vais vous le montrer dans le navigateur. Vous pouvez voir que tout l'arrière-plan a été supprimé d'ici. Maintenant, je sélectionne cette icône séparément afin de pouvoir ajouter un peu de rembourrage à cette icône ou une marge à cette icône Pour sélectionner cette icône, j'écrirai far des circle, des plus, et j'ajouterai une marge. La marge supérieure 25 pixels, puis la taille du téléphone sera de dix pixels, la taille du téléphone sera de dix pixels, taille du téléphone de dix pixels. Laissez-moi économiser, laissez-moi vous les montrer. Maintenant, vous pouvez voir que nous avons une marge appropriée dans cette icône. Vous pouvez donc voir ici que nous sommes sur le point de terminer notre conception. Il ne reste plus qu'à ajouter cette histoire. Cela signifie que nous devons donner du style à cette histoire. Donc, ce que je vais faire, c'est supprimer ce point d' ici, c'est-à-dire que je vais retirer cette puce d'ici, et je vais retirer le rembourrage de cet aliment Permettez-moi donc de sélectionner cette URL. Et à l'intérieur, tout d'abord, je vais supprimer les puces. Donc, pour supprimer les puces, nous allons écrire les DottyLett not dot is style D type, et ce ne sera Ensuite, nous ajouterons notre rembourrage à zéro. géographiques de rembourrage. Maintenant je vais te montrer. Maintenant, vous pouvez voir que notre histoire est également correctement stylisée. 4. Fonctionnalité de button: Il s'agit donc de notre application actuelle, et dans cette application, nous ajouterons cette fonctionnalité de dépenses et de revenus. Pour ajouter cette fonctionnalité, nous devons donc utiliser JavaScript. Je vais donc entrer dans ce fichier app point Java Script. Et ici, je vais sélectionner ces revenus et ces dépenses. Tout d'abord, je vais sélectionner ceci et je vais sélectionner ceci, puis je vais sélectionner ce bouton , puis je vais sélectionner ce bouton. Donc, pour le sélectionner, je vais utiliser le sélecteur de requête. Laissez-moi créer une variable nommée ink remove Je vais écrire ink, remove. J'écrirai E, puis je donnerai un égal à N, puis je le sélectionnerai à l'aide du sélecteur de requête Donc, le sélecteur de requête Document Dot. Ensuite, je vais le sélectionner dans Supprimer. Passons à ce code HTML, je vais le copier et coller ici, contrôle par point, contrôle V. Maintenant, je vais le copier et le coller ci-dessous, contrôle V. Et au lieu de l'encre, j'écrirai EXP ou EX, j'écrirai simplement Ensuite, j'ajouterai cette classe ici, cette EXP à supprimer. Permettez-moi de le copier puis de le coller ici. Control V. Nous avons donc sélectionné nos revenus et nos dépenses. Nous allons maintenant sélectionner le bouton Revenu et le bouton Dépenses. Encore une fois, nous pouvons le copier et le coller ici, Control V et ControlV Je vais donc écrire Ink button. Bouton IMC, BTN, puis EX BTN. Ici, je vais sélectionner les revenus, puis les dépenses. La dépense E est en capital, vous pouvez la vérifier ici. écrit ce E en majuscule, alors laissez-moi l'écrire tout petit, puis je le garderai et j'écrirai ce E en petits morceaux et aux frais EX PE et SE. Je vais enregistrer et ajouter du JavaScript aux sélecteurs. Donc, tout d'abord, je vais créer un écouteur d'événements pour ce bouton Inc et ce bouton X Expense Cela signifie que chaque fois qu'un utilisateur clique dessus, cet écouteur d'événements s'exécute Ensuite, la fonction située dans l'écouteur pair, peu importe ce que nous ajouterons à cette fonction, s'exécutera chaque fois qu'un utilisateur clique ce bouton inc ou sur le bouton X signifie le bouton des revenus ou le bouton des dépenses Permettez-moi donc d'ajouter cet écouteur pair sur ce BTN d'encre incuton, et je le laisserai ajouter un écouteur pair, et l'écouteur pair cliquera, donc CLI c click et je le laisserai ajouter un écouteur pair, et l'écouteur pair cliquera, donc CLI c click. Ensuite, j'ajouterai une fonction. Le nom de la fonction sera iCS, puis je créerai un autre écouteur pair où j'ajouterai cet écouteur pair sur le bouton Expense Je vais donc supprimer cette encre et ajouter X. Et au lieu de cette encre, je vais ajouter d'autres noms, comme XP. Maintenant, je vais créer une fonction Is, puis une fonction EXP Donc, pour créer une fonction Is, j'écrirai une variable nommée const, puis j'écrirai Is NCs puis je donnerai des égaux à Dans le paramètre de ces fonctions, nous passerons E E signifie paramètre d'événement. Et maintenant, j' utilise la fonction flèche. Vous pouvez utiliser une fonction normale, mais j'utilise la fonction flèche parce que j'y suis plus habitué Et je vais donner ce symbole en forme de flèche , puis je vais donner ces disques frisés À l'intérieur des crochets, ce que nous allons faire. Chaque fois que l'utilisateur clique sur ce bouton, nous ajouterons une classe cachée ou nous supprimerons une catégorie cachée des revenus, et nous ajouterons la classe cachée aux dépenses. Alors ce que je fais, laisse-moi te le montrer. Je vais sélectionner cette encre et je vais sélectionner Supprimer l'encre. Ce REOV, je le sélectionnerai, puis je supprimerai la classe cachée de cette fonction Chaque fois que l'utilisateur clique dessus, c'est-à-dire chaque fois qu' il clique sur le bouton de revenu, je souhaite supprimer la classe connue sous le masquée, car dans cette classe cachée, nous ajouterons une nonne d'affichage Permettez-moi donc d'abord d' ajouter une classe cachée, de sorte que ce soit un D et une classe cachée. Et à l'intérieur de ce masque, nous allons écrire display nun. affichez donc aucun. aucun affichage ne fera, chaque fois qu'un utilisateur cliquera sur ce bouton de revenu, nous supprimerons la classe cachée de ce bouton de revenu. Cela signifie que chaque fois que nous retirons cette classe cachée de ce bouton de revenus, notre nonne d'affichage sera supprimée, puis nous ajouterons cette classe cachée sur ce bouton de dépenses. Alors laisse-moi te montrer. Je sélectionne cette suppression de revenus, puis la liste des classes de points, puis nous voulons supprimer les éléments cachés de ces revenus Nous allons donc ajouter la suppression de points. Si vous souhaitez ajouter, nous ajouterons point t et si vous souhaitez le supprimer, nous ajouterons le point supprimer. Ensuite, j'ajouterai le nom de la classe qui est masquée HID hidden. Et c'est HI. Ensuite, je vais le copier et le coller ici. Et à la place de l' encre, j'écrirai x. Puis j'ajouterai cette classe à celle-ci, puis j'ajouterai la classe ici, A je vais ajouter. Maintenant, je vais le copier, et je vais faire le contraire avec ce bouton de dépenses. Tout d'abord, je vais vous montrer les commandes du bouton Revenu, et je vais vous les montrer dans le navigateur. Maintenant, si vous cliquez sur Expense, rien ne se passera car nous n'avons ajouté aucune dépense de filtrage Java. Mais si vous cliquez sur Revenu, vous pouvez voir que le revenu arrive et chaque fois que nous cliquons sur Dépenses, rien ne se passe. Permettez-moi donc d'ajouter le contraire. Il faut ajouter le contraire aux dépenses. Je vais le copier et le coller sous Control V. Et au lieu d'encres, je vais mettre EXP, donc EXP À l'intérieur, j'ajouterai Ex ici, et j'ajouterai ENC ici. Donc, maintenant, cela supprime l'élément des dépenses ou supprime la baisse des dépenses. Permettez-moi de vous montrer cette division Dans cette dépense, cette division est là, n'est-ce pas ? Ce D avec une étiquette de paragraphe. Donc, chaque fois que nous cliquons dessus, cela le supprime, alors laissez-moi vous le montrer correctement. Ainsi, chaque fois que nous cliquons sur cette dépense, nous supprimons les dépenses masquées. Cela signifie que nous supprimons Display None d'ici. Cela signifie que ces dépenses seront affichées dans notre navigateur et que nous ajouterons des éléments cachés à nos revenus. Ainsi, les revenus seront masqués lorsque nous cliquons sur Dépenses, et lorsque nous cliquons et lorsque nous cliquons sur les revenus, les dépenses seront masquées. Donc je suppose que tu as compris. Alors laissez-moi enregistrer ceci et laissez-moi vous le montrer dans le navigateur. Maintenant, si vous cliquez sur Dépenses, nos revenus seront masqués et lorsque nous cliquons sur Revenu, nos dépenses seront masquées. C'est donc la logique de base qui sous-tend tout cela. Et c'est dans cette vidéo, nous nous retrouverons dans une autre vidéo et dans une autre vidéo, nous ajouterons ce solde ou nous ajouterons ces transactions.