Javascript Fun : créez un calculateur de pourboires !

1. Bienvenue dans le cours !: Bienvenue dans ce cours. Si vous êtes un débutant en développement web et que vous voulez simplement sauter et construire des projets amusants, vous êtes au bon endroit. L' idée derrière cette série est de vous montrer ce que vous pouvez faire avec HTML, CSS et JavaScript standard. Nous n'utiliserons aucun framework, aucun standard, aucune bibliothèque ou aucun modèle. Au lieu de cela, nous allons tout construire complètement à partir de zéro, étape par étape, pour vous montrer comment ces technologies libres fonctionnent toutes ensemble. Le projet de cette classe va être une application de calculatrice de conseils. L' utilisateur peut entrer n'importe quelle valeur ou la facture totale dans le champ de saisie supérieur. Nous pouvons ensuite sélectionner un pourcentage ou la pointe, qu'ils veulent ajouter, puis cela recalcule automatiquement toutes les valeurs. Vous verrez la valeur totale de la pointe qui est en cours de calcul, puis cela est également ajouté à la facture totale aussi. S' ils le souhaitent et qu'ils veulent diviser la facture entre plusieurs personnes, nous aurons ce curseur de plage ici aussi. Ensuite, nous pouvons partager la facture entre plusieurs personnes. Cela recalculera ensuite la facture totale par personne, ainsi que la valeur du pourboire par personne. Ce projet sera entièrement construit à partir de zéro. Nous allons créer l'interface utilisateur en utilisant HTML. Nous allons passer à l'ajout de style avec CSS. En plus de regarder comment ajouter ces gamme entièrement personnalisée [inaudible] trop. Nous allons examiner la police, les préfixes du navigateur, puis passer à rendre notre application entièrement interactive en utilisant JavaScript. Vous en apprendrez plus sur les fonctions, les mathématiques, les événements, toutes les valeurs de devise [inaudibles], la lecture et la mise à jour du DOM, et bien plus encore. Ce projet a été conçu pour les débutants, et il est idéal pour quelqu'un avec juste un peu de connaissances HTML, CSS et JavaScript. Je suis excité de t'enseigner ce cours, et je te verrai dans la première leçon. 2. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de reprendre un autre cours. Prenez le temps de lire chaque leçon, revoir le code que vous écrivez et de réfléchir à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets, ce qui vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul une fois que vous avez terminé le cours, revenir et apporter des modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare et je suis le seul à y jeter un coup d'œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. Créer l'interface utilisateur: Cette section porte sur la création de notre calculatrice de conseils. Ce sera la version finale que nous allons construire dans cette section. L' utilisateur peut entrer une facture dans le champ de saisie en haut. Ensuite, juste en dessous, nous pouvons ajouter le pourcentage de pourboire, que nous voulons ajouter à ce bill. Par exemple, passons à 20 pour cent et toutes les autres valeurs sont mises à jour dynamiquement. Juste en dessous, nous avons la valeur du pourboire et cela est également ajouté à la facture totale pour nous donner le total à payer. Ci-dessous, nous avons également une section distincte qui va permettre à l'utilisateur de diviser la facture entre plusieurs personnes. Pour le moment, nous n'avons cela que comme une seule personne, donc toutes les valeurs sont les mêmes. Si nous voulons que ce soit divisé entre deux personnes, les valeurs sont réduites de moitié et nous voyons exactement combien chaque utilisateur doit payer. Cette première vidéo va se concentrer sur la création de l'interface utilisateur en utilisant HTML. Dans les prochaines vidéos, nous allons ajouter du style et de la mise en page avec CSS, puis nous allons passer aux rouages et calculs, et aussi rendre l'interface utilisateur dynamique en utilisant JavaScript. Commençons par créer un nouveau dossier. Je vais ajouter le mien sur le bureau et appeler ça la calculatrice de pourboires. Vous pouvez également organiser cela à l'intérieur d'un dossier de projet si vous préférez, mais je vais juste commencer par faire glisser sur ce dossier de projet dans Visual Studio Code. La première chose dont nous avons besoin est une page Index qui contiendra le HTML. À l'intérieur du projet, créez un nouveau fichier. Je vais appeler ceci le index.html, et nous pouvons également fermer la barre latérale pour plus d'espace. Visual Studio Code est livré avec un plugin appelé Emmet, qui nous permettra d'ajouter des raccourcis pour créer notre structure HTML. Par exemple, nous pouvons ajouter la colonne HTML 5, appuyer sur « Entrée », et cela nous donnera un point de départ pour notre projet. Il inclut simplement toutes les métadonnées que nous ajouterons couramment, telles que la balise meta viewport et aussi le jeu de caractères que nous utilisons. Le titre en haut, je vais appeler le mien Quick Tip, et ensuite nous pouvons travailler en créant notre contenu à l'intérieur de la section du corps. Nous pouvons envelopper tous ces Tip Calculator à l'intérieur des balises principales, suivi d'un titre de niveau 1 qui sera le titre de notre projet. Enregistrez ce fichier, et maintenant si nous faisons un clic droit, copiez le chemin, collez-le dans le navigateur, c'est maintenant le lien vers notre projet. Vous pouvez également aller dans le dossier du projet et double-cliquer sur le « Index.html », qui ouvrira également cela dans le navigateur par défaut. Ce que nous allons faire ensuite, c'est parcourir toutes les sections disponibles de haut en bas. Nous allons créer cette section blanche en haut qui va être pour les entrées de l'utilisateur telles que la facture et le montant de la pointe, nous allons ajouter certains divs que vous allez envelopper tous ces éléments, puis nous allons ajouter notre deuxième section vers le bas. En dessous du titre de niveau 1, nous pouvons ajouter notre première section, à l'intérieur, nous allons ajouter notre premier div, qui est pour notre première section qui comprend l'étiquette de la facture et aussi l'entrée de numéro. Inclus ceci. Maintenant, nous avons notre div. Il y aura une étiquette appelée Bill, notre entrée. Maintenant, puisque cela va être une entrée de nombre, nous pouvons lui donner un type de nombre. Nous pouvons également ajouter l'attribut d'espace réservé, qui sera le texte de votre facture. Ce sera la valeur qui est affichée à l'intérieur des entrées si aucun nombre n'a été ajouté, suivie d'un identifiant unique qui sera votre facture. Cela nous permettra de cibler cette entrée avec JavaScript afin que nous puissions saisir la valeur que l'utilisateur a saisie. Nous pouvons également lier ceci à notre étiquette en ajoutant le même nom pour attribut. Cela signifie que si nous sauvegardons cela et passons dans le navigateur, chaque fois que nous cliquons sur l'étiquette, cela activera également notre entrée de numéro. En descendant, nous avons également un curseur de plage qui est juste ici. Cela va avoir une section qui va envelopper à la fois les entrées et aussi l'étiquette et aussi le pourcentage. Ajoutons ceci maintenant en tant que div, et ensuite nous pouvons ajouter un nouveau div imbriqué à l'intérieur. Ce sera pour la rangée supérieure de l'étiquette et le pourcentage. L' étiquette aura les éléments d'étiquette et la valeur de l'astuce de sélection. Juste après cela, nous allons créer un élément span et lui donner un ID afin que nous puissions cibler cela à partir de notre JavaScript. On peut appeler ça le TipPercent. Plus tard, nous remplirons le contenu de ceci en utilisant JavaScript. Pour l'instant, nous allons simplement ajouter ceci comme zéro pour cent afin que nous puissions voir à quoi cela ressemble dans notre interface utilisateur. Juste après la div environnante, nous pouvons alors créer notre entrée, et ce sera un type de plage. Cela nous donnera ce curseur de gamme que nous verrons dans la version finale, bien qu'il puisse sembler un peu différent pour le moment. Nous pouvons définir la valeur initiale, nous voulons que cela commence à zéro pour cent suivi d'un ID de TipInput. Encore une fois, nous pouvons l'utiliser pour l'étiquette. Cela sera également utilisé avec JavaScript plus tard pour saisir la valeur de la pointe. Sauvegardons ceci et voyons à quoi cela ressemble dans le navigateur. La structure est là, nous avons l'étiquette, nous avons le pourcentage, et aussi le curseur de plage. Cela semble évidemment beaucoup différent de notre version finie, mais nous allons corriger cela avec CSS très bientôt. En descendant si nous revenons à la version finie, nous avons ensuite besoin d'une section de pointe. Ça va être assez simple. Nous avons l'étiquette et aussi la valeur sur le côté droit. Nous aurons une règle horizontale, puis une section qui sera pour le total. Commençons par créer cette section de conseils juste en dessous de notre dernière div. Créez une nouvelle div pour cette section, une plage avec la valeur de tip, suivie d'une plage vide avec l'ID qui sera égal à TipValue. Cela nous permettra de saisir plus tard ces éléments par l'ID, puis de placer une valeur à l'intérieur. Après cela, une règle horizontale pour créer notre ligne, puis la section finale vers le bas en bas. Ajoutez notre div en tant que wrapper, la span avec le texte du total. Ensuite, comme ci-dessus, nous allons ajouter une plage vide qui va être mis à jour avec JavaScript. La valeur va être le total qui comprend un pourboire. Nous appellerons ça TotalWithtip. C' est maintenant tous les éléments en place pour notre première section, si nous rechargeons le navigateur, ils sont tous maintenant en place. La prochaine chose à faire, c'est de passer au dernier article qui consiste à diviser le bill. Juste en dessous de notre balise de fermeture pour cette section, créons une nouvelle section. Le premier tour dans div va être pour l'entrée split. Cette section juste ici. Tout comme nous l'avons fait avec la valeur de la pointe en haut, nous allons créer un div qui contiendra l'étiquette et aussi le nombre de personnes. Nous suivrons ensuite avec un curseur de plage. Le div pour le texte, cela aura l'étiquette avec le texte de split. À côté de cela, nous allons ajouter une plage en ligne avec l'ID de SplitValue. Ceci sera mis à jour avec la valeur d'une personne. Au fur et à mesure que cela augmentera, ce sera deux personnes, trois personnes, et ainsi de suite. Juste en dessous de cette section div, nous pouvons alors créer l'entrée. Tout comme ci-dessus, nous aurons le type de gamme. Nous pouvons également restreindre les valeurs à l'intérieur de cette entrée de plage. Pour commencer, nous voulons créer la valeur minimale d'un. C' est parce qu'il y aura toujours au moins une personne dont le bill sera divisé entre. Nous pouvons définir une valeur maximale. Cela peut être n'importe quelle valeur que vous préférez. Je vais aller pour 10 et définir la valeur par défaut initiale pour être un. Cela nécessite également un ID unique. Je vais appeler ça le SplitInput que nous pouvons aussi correspondre avec l'étiquette. Vérifions si tout cela fonctionne, actualisez le navigateur, et nous avons une nouvelle entrée de plage. Vous pouvez également ajouter une valeur par défaut ici si vous préférez. Donc, une personne et nous verrons cela dans le navigateur. Ensuite, nous avons deux sections plus simples en bas qui est un div simple avec l'étiquette et aussi les valeurs sur la droite. Le premier div, cela va avoir une plage avec la valeur de facture chacun, également suivie d'une plage vide avec l'ID de BillEach. La dernière section en bas est la pointe de chacun et aussi la valeur. Créez une nouvelle div, la plage avec le texte de pointe chacun, suivie d'une plage vide avec l'ID qui sera égal à TiPeach. Enregistrez notre fichier index.html et c'est maintenant tout le contenu HTML dont nous avons besoin. Rechargez le navigateur et tout est maintenant en place. Évidemment, notre calculatrice de conseils ne ressemble pas à la version finale pour le moment, mais nous allons commencer à corriger cela dans la prochaine vidéo où nous allons appliquer du CSS. 4. Styliser avec CSS: Passant à notre HTML, nous allons maintenant rendre notre projet plus agréable, et nous allons le faire en appliquant du CSS. La première chose que nous devons faire si nous ouvrons sur cette barre latérale est de créer un nouveau fichier, nos styles. Je vais appeler le mien le styles.css, et puis nous pouvons lier cela dans le index.html. Nous faisons cela à propos du haut à l'intérieur de la section de tête en utilisant l'élément de lien nécessaire. C' est une relation avec une feuille de style, donc c'est bien, et le href est l'emplacement de ce fichier. Ce fichier est contenu à côté de cette page d'index afin que nous puissions simplement le référencer avec le nom de styles.css. Revenons à notre feuille de style, nous pouvons commencer par l'élément HTML, qui est la racine de notre projet. Je vais commencer par déclarer la taille de la police à une valeur de 10 pixels. Maintenant, cette valeur est complètement facultative, tout comme tous ces CSS que nous allons ajouter. Vous pouvez le faire vôtre, vous pouvez changer les valeurs pour le faire ressembler et sentir exactement comme nous le voulions. Maintenant, la raison pour laquelle j'ai sélectionné à 10 pixels pour la taille du projet racine est parce que c' un bon nombre arrondi et que nous pouvons utiliser les valeurs rem. L' échelle est de haut en bas très facilement. Par exemple, si nous créons une valeur de remplissage comme un rem, ce sera une valeur de 10 pixels. Si nous voulons que ce soit 16 pixels, ce sera 1,6 rems, donc la valeur arrondie rend les choses agréables et faciles lors de la mise à l'échelle vers le haut et vers le bas. Ensuite, nous allons définir la valeur de la couleur. Ce sera la couleur de notre texte. La couleur que je vais sélectionner est 4e4d4d. Vérifions cela et testons si cela fonctionne. Enregistrez le fichier, rechargez le navigateur, je vais voir les styles ont maintenant pris effet. Nous allons ouvrir la vue fractionnée à l'intérieur de Visual Studio Code, sorte que vous pouvez voir à la fois la page d'index et aussi les styles à côté. L' élément suivant que je vais styler est le conteneur principal. Si vous vous souvenez de la dernière vidéo, nous avons entouré toute la calculatrice de pointe dans cette section principale. Ça va être notre emballage principal. Nous pouvons définir la largeur maximale de la calculatrice de pointe à 50 rem. N' oubliez pas que nous avons défini la taille de la police racine à 10 pixels, 50 fois 10 feront de cela l'équivalent de 500 pixels. Nous pouvons également centrer cela en utilisant la marge zéro auto. Cela appliquera une marge zéro sur le haut et bas et divisera le reste de l'espace sur la gauche et la droite également. Enregistrer et actualiser, et cela a maintenant placé une quantité égale d'espace blanc sur la gauche comme sur la droite. Mais juste pour donner à cela un peu d'espacement depuis le haut de la page, nous pouvons changer cette valeur pour être deux rems pour nous donner une marge de 20 pixels. Ensuite, nous pouvons définir la couleur de fond. Nous pouvons définir cela comme une couleur de fond solide régulière, ou je vais mettre le mien pour profiter des gradients linéaires. Ce dégradé linéaire nous permettra de passer d' une couleur à une autre en ligne droite. Faisons de l'espace, appliquons le dégradé linéaire, puis nous pouvons ajouter deux valeurs que vous voulez faire la transition entre. La première valeur que je vais ajouter est une valeur de 3dc0c0, séparée par une virgule notre deuxième valeur est 5bceae. Si nous sauvegardons cela, nous devrions voir que la section principale a maintenant une transition d'une nuance à l'autre. Par défaut, ces couleurs passeront verticalement de haut en bas. Nous pouvons également changer l'angle comme première valeur. Je veux changer le mien pour être à 30 degrés. Rafraîchir, cela change maintenant notre dégradé de vertical pour parcourir la page à un angle de 30 degrés. Après notre arrière-plan, nous pouvons également ajouter des valeurs de remplissage, et à l'intérieur ici je vais ajouter quatre valeurs différentes. Donc trois rem, 1.6 rem, six, et enfin, 1.6 rems. Ces quatre valeurs de rembourrage apparaîtront en haut, à droite, en bas et à gauche. Sauvegardons et actualisons le navigateur, laissant cela avec un peu d'espace autour des bords. Ensuite, le rayon de la frontière, et je vais ajouter ceci comme une valeur de quatre rems. Cela va être assez grand, et cela s'appliquera aux quatre côtés de notre calculatrice de pourboires. Pour donner à cette calculatrice de conseils l'impression d'un peu de profondeur, nous pouvons également ajouter une box-shadow. Je vais ajouter une box-shadow au bas de notre section principale environnante. Cette box-shadow va prendre en quatre valeurs différentes. Le premier est la position x, nous avons la position y, nous avons la valeur du flou, puis aussi la couleur à appliquer. Si nous allons sur le site de Mozilla, cela a un générateur de box-shadow, donc nous pouvons mieux voir ce qui se passe. Pour le moment, nous avons juste un élément simple avec une bordure. Si nous ajoutons une box-shadow, nous pouvons alors jouer avec les valeurs x et y. L' axe des x est la valeur de gauche à droite ou à travers la page. Seule la valeur y est de haut en bas. Actuellement, la valeur x est de cinq pixels, donc cela signifie que cela est poussé à partir de cinq pixels. Nous pouvons également définir ceci comme négatif cinq, et cela placera ces cinq pixels vers la gauche. Sur l'axe y qui est de haut en bas, c'est une valeur de 5 négatif, nous avons changé ceci pour être positif, cela apparaîtra ensuite vers le bas. Nous pouvons également changer les couleurs, nous pouvons changer les valeurs de flou et rendre cela vraiment grand. Mais pour notre exemple, nous allons juste rendre cela assez subtil, donc nous allons rester avec quelques petites valeurs. La première valeur qui est sur l'axe des x, je vais définir ceci comme zéro afin qu'il ne pousse pas sur le côté gauche ou droit. La deuxième valeur est de deux pixels, donc cela apparaîtra en bas de notre élément. A côté de lui, nous avons la valeur du flou. Encore une fois, cela va être assez petit, puis aussi une couleur assez légère et subtile de gris clair. Retour à notre projet, actualisez le navigateur et nous voyons une très petite box-shadow en bas de notre section principale. Cela prend soin du style pour notre section principale, et maintenant nous travaillons sur les éléments individuels à l'intérieur. En commençant tout en haut, nous avons la pointe rapide, qui est entourée dans le titre de niveau 1. Ciblons le h1. Nous pouvons définir le text-align pour être au centre. Nous voulons aussi que ce soit un peu plus grand afin que nous puissions définir cette taille de police la valeur de trois rem. Les en-têtes de niveau 1 ont une marge par défaut qui est appliquée par le navigateur, donc je vais supprimer cela en définissant ceci sur une valeur de zéro. Juste au-dessus de ce titre de niveau 1, nous verrons qu'il y a beaucoup plus d'espace en haut que en bas. C' est parce que la div environnante principale a cette valeur de remplissage de trois rem sur le dessus. Nous pouvons également équilibrer cela à l'intérieur de notre titre de niveau un en ajoutant un peu de rembourrage sur le fond aussi de trois rems. Si nous regardons la version finale, nous verrons que chacune de nos sections a également cette couleur de fond blanc. Nous pouvons également cibler cela à l'intérieur de notre CSS, alors saisissons l'élément de section, et nous pouvons commencer par la couleur de fond du blanc. La taille de la police, nous pouvons définir cela à 18 pixels, qui est l'équivalent de 1.8 rems. Sauvegarder et recharger. n'y a actuellement pas d'espace entre nos deux sections, donc nous pouvons corriger cela avec une certaine marge en bas. Allons-y pour 1,6 rems. Dans le rembourrage, ce qui nous donnera l'espacement à l'intérieur de notre section blanche, lorsque nous travaillons avec la marge de remplissage si nous avions seulement deux valeurs, la première valeur sera le haut et le bas, que je vais définir comme zéro, et la deuxième valeur sera la gauche et aussi la droite. Si c'est cohérent, nous ajouterons également ceci comme 1.6 rems pour nous donner un peu d'espacement à gauche et à droite de chacune de ces sections. Un rayon de bordereau d'un rem, puis aussi une box-shadow à la section 2. Pour que cela soit cohérent, nous pouvons correspondre à nos valeurs antérieures. Donc zéro, deux pixels, deux pixels flouent, et aussi la couleur du gris clair. La seule différence que nous avons vu dans cette section est que nous voulons que cela apparaisse comme s'il était encart à l'intérieur de la section principale. Nous pouvons ajouter à la valeur de l'encart à notre box-shadow, et cela remplacera la box-shadow à l'intérieur plutôt qu'à l'extérieur de l'élément. Si nous revenons au site Web de Mozilla, nous pouvons le voir plus clairement. Nous pouvons cliquer sur « Inset », et aussi réduire le flou, et nous voyons que ce flou est maintenant à l'intérieur de l'élément plutôt qu'à l'extérieur comme nous l'avions auparavant. En allant à l'intérieur d'un niveau plus profond de toutes les sections, nous voyons que chacune de nos parties de notre calculatrice de pointe est entourée d'un div. Nous pouvons maintenant cibler cela dans le CSS. Nous voulons cibler tous les divs qui sont un enfant direct de section. Nous avons la section et puis un niveau dans, et nous avons cette div, alors nous avons cette div. Tout le style s'appliquera à ces premiers divs imbriqués à l'intérieur. Par exemple, celui-ci que nous voyons ici est un niveau plus loin dans. Donc, cela ne s'appliquera pas à la section. Si nous voulions que le style s'applique à tous nos divs à l'intérieur de la section, nous ferions le CSS comme ceci, mais nous voulons seulement sélectionner les enfants directs. Tout ce que nous allons faire ici est d'ajouter des valeurs de remplissage de 1,6 rems en haut et en bas, et zéro à gauche et à droite. Cela va nous donner l'espacement autour de chacune de ces sections. Ensuite, ajoutons un peu de style à notre section sur les factures en haut de notre première section. Pour ce faire, nous pouvons ajouter une classe à ce wrapper de facture, et ensuite nous pouvons cibler cela dans le CSS. Comme il s'agit d'une classe, nous utilisons le point , donc .bill, et nous allons utiliser la flexbox CSS. Nous le faisons en définissant d'abord le wrapper pour avoir le type d'affichage de flex, enregistrer et actualiser. Nous ne voyons pas encore de différence, mais nous pouvons également utiliser cet écran de flex pour appliquer le style à ces enfants imbriqués à l'intérieur. Imbriqué à l'intérieur aura l'étiquette et aussi l'entrée avec le type et le nombre. Commençons par l'étiquette. Donc, Bill et l'étiquette. Cela ciblera l'étiquette à l'intérieur de notre section facture. Puisque nous utilisons la flexbox, nous pouvons définir une valeur flexible de 1, puis juste en dessous, nous pouvons cibler l'entrée de facture, et lui donner une valeur flexible de trois. Sauvegarder et recharger. Cela signifie maintenant que l'entrée prendra trois fois plus d'espace disponible que notre étiquette. Ensuite, ajoutons un style à ces entrées avec le type de nombre. Rappelez-vous, à l'intérieur de notre HTML, nous avons différentes entrées différentes. Nous avons celui-ci ici, nous avons notre gamme, et aussi la gamme vers le bas aussi. Comment pouvons-nous être plus précis avec le type d'entrée auquel vous souhaitez appliquer le style ? Eh bien, nous pouvons le faire à l'intérieur de ces crochets en sélectionnant le type. Seul le type que nous voulons cibler est le nombre. Cela signifie que le style que nous ajoutons à l'intérieur ces accolades ne s'appliquera qu'à nos entrées numériques, plutôt qu'à notre gamme juste en dessous. Tout d'abord, définissons la couleur d'arrière-plan. La valeur que je vais utiliser est f4f4f5. La taille de la police pour le rendre un peu plus grand, 1,6 rems, ce qui équivaut à 16 pixels. La bordure, nous pouvons définir l'épaisseur à un pixel, la ligne à être solide, et donnons à cela une couleur gris clair. Nous pouvons également arrondir les coins en appliquant un rayon de bordure de 0,5 rems, un peu de rembourrage, et encore une fois, je veux ajouter quatre valeurs différentes, donc 0,8 rems en haut, zéro à droite, 0,8 aussi sur en bas, et 0.8 rem sur la gauche. Rechargez le navigateur, et cela nous donnera un espacement égal en haut, gauche et en bas, et zéro sur le côté droit. Maintenant, notre contribution est un peu plus grande, nous verrons maintenant un problème avec le projet de loi. Si vous regardez la version finale, cela va également être aligné dans la ligne centrale de notre entrée. Eh bien, puisque nous avons défini la section pour avoir le type d'affichage de flex, nous pouvons facilement corriger cela en ajoutant une propriété flex appelée align-self, définissez ceci pour être le centre. Cela correspond maintenant à la ligne centrale de notre entrée. Ensuite, nous allons ajouter une ombre de boîte comme sur la version finie. Pour correspondre à notre section environnante, nous allons également définir ceci pour être encart. En utilisant également les mêmes valeurs que précédemment. L' ombre de la boîte va être encart. Les valeurs x et y seront de zéro et de deux pixels, un flou de deux pixels, suivi de la couleur du gris clair. Ensuite, si nous regardons notre version finale, nous voyons que chacune de nos sections, telles que la pointe et la valeur, est basée sur chaque côté de notre calculatrice. Cela vaut également pour la section totale, la pointe, et aussi la valeur, ainsi que ces valeurs vers le bas aussi. La façon dont nous pouvons créer l'espacement est également en tirant parti de la flexbox. La flexbox a une propriété appelée justify-content, où nous pouvons définir l'espace pour être entre ces deux éléments. Pour ce faire, nous devons cibler plusieurs sections de notre HTML, afin que nous puissions ajouter une classe à chacune d'entre elles. Le premier sera l'étiquette de la pointe de sélection et la valeur. Jetons un coup d'oeil pour cela dans notre HTML. C' est la section juste ici. Ajoutons une classe. Allons pour l'espace entre les deux. Copiez ceci et nous pouvons le réutiliser à plusieurs endroits. Nous devons également ajouter cela à la section de pointe, ainsi que la section totale où nous avons deux valeurs sur la même ligne. L' emballage de la pointe, l'emballage de notre section totale, la division, ainsi que les sections BillEach et TiPeach en bas. Maintenant, dans le CSS, nous pouvons cibler cet espace entre, définir le type d'affichage pour être flex. Maintenant, si nous sélectionnons justify-content, nous pouvons appliquer tous ces espaces pour être entre. Sauvegarder et recharger. Maintenant, au lieu d'avoir le texte et les valeurs les uns à côté des autres, ceux-ci ont maintenant notre espace entre les deux. Juste pour compléter le CSS de cette vidéo, nous allons rendre notre section totale un peu plus audacieuse. Nous pouvons le faire en ajoutant une classe à notre section totale. Juste après l'espace-entre, nous pouvons ajouter une deuxième classe, envelopper cela dans le CSS. Définissons d'abord la taille de la police à deux rems, et définissons également le poids de la police être plus audacieux. Rechargez, nous avons maintenant ce texte plus grand et plus audacieux. Cela nous laisse maintenant avec le CSS principal fait pour ce projet. Cependant, dans la prochaine vidéo, nous allons continuer et ajouter quelques belles touches de finition. Par exemple, nous allons inclure une police différente. Nous allons également faire notre propre curseur de plage personnalisé, plutôt que d'utiliser la valeur par défaut du navigateur, que nous voyons actuellement ici. 5. Polices, curseurs personnalisés et préfixes de navigateur: Continuons avec notre style pour ce projet, en passant à la création d'un curseur de plage personnalisé. Pour le moment, si nous regardons le projet à l'étape, ce à quoi nous sommes actuellement. Cela fait usage de la plage par défaut du navigateur, et il ne semble pas trop bon ou ne correspond pas à notre projet actuel. Parlons donc de la façon dont nous pouvons créer notre propre curseur personnalisé. abord, nous devons définir l'apparence de nos curseurs de plage actuels sur aucun, pour supprimer tout le style par défaut. Ensuite, nous pouvons aller de l'avant et créer le nôtre avec un CSS personnalisé. Cependant, le support du navigateur n'est pas parfait pour certaines des techniques que nous allons utiliser. Nous pouvons contourner cela en utilisant des préfixes fournisseur. L' ajout d'un préfixe fournisseur à une propriété CSS est un moyen d'utiliser certaines propriétés expérimentales CSS, ainsi que des propriétés qui ne sont pas encore entièrement prises en charge dans certains navigateurs. Si nous faisons défiler vers le bas, nous voyons les principaux préfixes que nous pouvons utiliser. Le premier est webkit, qui s'applique à tous ces navigateurs, tels que Chrome et Safari. Nous avons ensuite le préfixe moz, qui s'applique aux navigateurs Firefox. Nous pouvons également cibler les anciennes versions d'Opera et aussi Internet Explorer. Mais pour ce projet particulier, je vais me concentrer sur ces deux premiers. Tout ce que nous devons faire est de trouver une certaine propriété CSS, telle que la transition, puis ajouter l'inférence de préfixe moz ou webkit. utilisant ces, nous allons apprendre à dire au navigateur que nous sommes heureux de les utiliser, et de les essayer avant qu'ils ne soient complètement implémentés dans le navigateur. Donc, pour ce faire, nous devons cibler nos deux entrées avec le type de plage. Donc, tout d'abord, nous avons celui-là juste. Ajoutons une classe de plage. Je vais aussi faire la même chose pour notre deuxième curseur de plage, qui est juste en dessous. Cela signifie que notre style s'appliquera à nos deux entrées de gamme. Alors commençons juste en dessous de notre total. Nous pouvons sélectionner notre gamme. La première chose que nous devons faire est de supprimer le curseur de plage par défaut. Nous pouvons le faire en définissant l'apparence sur aucun. La propriété d'apparence n'est pas encore entièrement prise en charge dans les navigateurs webkit. Donc, nous devons également ajouter le préfixe webkit en face de cela. Si nous sauvegardons maintenant cela et allons à notre projet, rechargez. Nous voyons que cela a supprimé la barre de progression par derrière. Nous allons également passer à coiffer ce curseur de formulaire très bientôt. Pour l'instant, nous allons juste nous concentrer sur le curseur réel. Donc, tout d'abord, nous pouvons définir la largeur à 100 pour cent. Donc, c'est toute la largeur de notre conteneur. La hauteur de huit pixels, et nous pouvons également définir la couleur de fond de notre curseur. Je veux faire ce gris clair, qui est la valeur d'un eee. Nous pouvons commencer à voir que notre curseur prend maintenant forme. Ajoutons maintenant une marge tout en haut pour nous donner un peu d'espacement par rapport au texte, ainsi qu'un rayon de bordure. Donc, tout d'abord, la marge sur le dessus de 1.2 rem, et aussi un rayon de bordure de 0.3 rem. La prochaine chose que nous pouvons cibler quand cela est actif ou cliqué sur est la couleur de bordure qui va autour de l'extérieur. Nous pouvons sélectionner ceci avec la couleur de contour, et changer la valeur par défaut pour être n'importe quelle couleur que nous aimons. Je vais aller pour une valeur de marche que nous avons utilisée dans le gradient linéaire. Donc 5bceae. Rafraîchir. Maintenant, si nous cliquons sur l'un de ces curseurs, nous voyons maintenant cette couleur verte. L' étape suivante consiste à cibler ce petit cercle, que l'on appelle le film de glissement. Nous pouvons à nouveau le faire dans le CSS. Alors, nous allons cibler notre section de gamme. Ensuite, si nous utilisons les deux points comme ça, c'est un pseudo-élément. Un pseudo-élément nous permettra de cibler une partie particulière d'un élément. Ainsi, par exemple, si nous ciblons un paragraphe de texte, nous aurions des pseudo-éléments disponibles pour sélectionner la première lettre ou même la première ligne. Mais puisque nous travaillons avec notre gamme, nous allons cibler le film slider. Plus précisément, nous allons cibler les versions du webkit. Donc, ce serait pour les navigateurs Chrome et Safari. La seule valeur dont nous avons besoin est un film de glissement. Nous allons également cibler le navigateur Firefox dans un instant. Donc, comme nous l'avons fait avec la gamme, nous allons mettre l'apparence à zéro. Nous devons ensuite définir la largeur et la hauteur de notre petit curseur de film. Alors allons-y pour la largeur, 2.2 rem. La hauteur, qui va aussi être la même. Si nous définissons le rayon de la frontière à 50 pour cent, cela en fera le cercle complet. Jetons un coup d'oeil à ça. Nous ne le voyons pas encore, car nous devons également attribuer une couleur d'arrière-plan. Je veux presque définir ceci pour être une couleur que nous avons utilisée auparavant dans le dégradé. Nous voyons maintenant notre curseur de film. Une autre chose que nous allons faire est de changer le curseur pour être un pointeur. On y va. Suivant. Voyons à quoi il ressemble à l'intérieur d'un navigateur différent. Je vais aller pour Firefox. Mais bien sûr, vous n'avez pas besoin de suivre cette étape, si vous ne voulez pas. Donc, à l'intérieur de la calculatrice de pointe, ouvrons le index.html. Nous voyons qu'à l'heure actuelle nous avons juste le style par défaut pour l'arrière-plan. On ne voit pas encore le style du film. Alors corrigons cela en créant une section pour le film de la gamme moz. Actuellement, nous ciblons uniquement la version webkit. Donc, copions ceci et collez-le ci-dessous. Puis à l'intérieur ici, plutôt que d'avoir la version webkit, que j'avais l'habitude d'être le plus préfixe, et plutôt que le film de curseur, c'est ce qu'on appelle le film de gamme. Enregistrez ceci et rechargez le navigateur Firefox. Je vois que le film a été changé. Donc quelques choses à noter ici. On voit qu'il y a une bordure autour du film, à l'intérieur de ce navigateur. Pour que la frontière soit nulle. Cela supprimera ensuite cela. Nous n'avons pas non plus besoin d'inclure l'apparence webkit de none pour ce navigateur. Une chose que nous pouvons améliorer lorsque nous cliquons et le rendons actif, est cette ligne pointillée autour de l'extérieur. La façon de le faire à l'intérieur de Firefox est de cibler le curseur de plage. Encore une fois, vous voyez les deux points pour les pseudo-éléments, et les éléments que nous voulons cibler seront moz. Utilisez le préfixe moz pour le navigateur Firefox. Ensuite, le nom des éléments appelle dans ceci est le focus externe. Nous pouvons définir la bordure sur une valeur de 0, actualiser, et cela a maintenant été supprimé. Donc, ces préfixes de navigateur sont quelque chose à faire attention lorsque vous travaillez avec plusieurs navigateurs, et aussi tout ce qui n'est pas encore entièrement supporté. C' est donc notre curseur de gamme de clients maintenant terminé. Juste une chose à noter rapidement, lorsque nous faisons défiler jusqu'à la section plage, ici, nous ciblons l'apparence uniquement pour les navigateurs webkit. Vous vous demandez peut-être pourquoi nous n'avons pas ciblé les versions de Mozilla aussi. Eh bien, c'est parce que, pour cette propriété d'apparence particulière, les navigateurs Firefox respecteront également les versions webkit aussi. Ceci est pour des raisons de compatibilité. Le dernier morceau de style que je vais appliquer, fermons ce navigateur Firefox, est d'appliquer des polices Google. Alors faisons une recherche pour Google Fonts et dirigez-vous vers fonts.google.com. Je vais utiliser une police appelée roboto. Alors faisons une recherche pour ça. C' est celui dont nous avions besoin ici. Pour inclure cela dans notre projet, nous pouvons sélectionner le poids de la police, et aussi si nous voulons une version italique aussi. Je vais opter pour la version légère 300, le medium, et aussi une version audacieuse aussi. Pour les inclure, nous devons cliquer sur le lien d'intégration. Copiez le lien dans le style. Cela va dans notre index.html. Je vais coller ceci à l'intérieur de la section de la tête juste au-dessus nos feuilles de style personnalisées. Enregistrez ce fichier. La prochaine chose à faire est de définir également la famille de polices à l'intérieur de notre feuille de style. Copiez donc la propriété font-family. Ouvrez notre styles.css, et nous pouvons l'appliquer à l'ensemble de notre projet, à l'intérieur des éléments HTML racine. Actualisez le navigateur. Notre police a maintenant pris effet. Nous pouvons également définir les poids de police par défaut. Je veux y aller pour 300. Maintenant, notre style ressemble beaucoup plus à la version finale. Juste pour finir ce projet de style. C' est assez difficile à dire à partir de notre entrée juste ici parce que les polices ne sont pas trop dissemblables, mais par défaut, une entrée n'héritera pas de la famille de polices. Pour ce faire, nous devons faire défiler vers le bas jusqu'à notre entrée, le type de nombre. On peut même définir la famille de polices comme un stand. Ou on peut définir ça pour être, hériter. Rechargez le navigateur, et cela prendra désormais effet. C' est donc maintenant la fin de la section de style de notre calculatrice de conseils. Ensuite, nous allons passer à faire cette fonction en utilisant JavaScript. 6. Événements et entrée de l'utilisateur: Passons à l'ajout de JavaScript à notre projet, où nous allons vraiment donner vie à notre projet. Pour ce faire, nous allons créer une section de script tout en bas. Donc, si nous faisons défiler jusqu'à la fin de notre index.html, juste au-dessus de la balise body de fermeture, nous pouvons insérer notre JavaScript à l'intérieur des éléments de script. Cela aura une balise d'ouverture et de fermeture, et tout notre code ira entre cette section. Alors réfléchissons à ce que nous voulons faire ici. Nous avons la section des factures en haut et l'utilisateur va ajouter une valeur ici. Donc, une fois que cela est fait, nous voulons exécuter du code pour mettre à jour toutes les valeurs. Pour ce faire, nous pouvons créer une fonction qui sera responsable de tous ces changements. Nous le faisons avec le mot-clé fonction suivi d'un nom que vous voulez lui donner à cette fonction. Nous pourrions également insérer des augmentations entre ces parenthèses si nous le voulions. Je vais jeter un oeil sur la façon de le faire plus tard dans ce projet. Nous savons maintenant que nous devons comprendre que tout ce que nous ajoutons entre ces accolades sera exécuté chaque fois que nous appelons cette fonction de mise à jour. Alors, comment appelons-nous réellement cette fonction de mise à jour ? Il y a plusieurs façons de le faire. À titre d'exemple, nous pouvons le faire lorsqu'un élément a été cliqué. Faites défiler jusqu'à notre section sur les factures. Si nous localisons notre entrée comme attribut, nous pouvons écouter un événement. Un événement est quand quelque chose se produit, comme un élément est cliqué ou une entrée est mise à jour. Cela nous permettra alors d'appeler notre fonction. titre d'exemple, nous allons écouter un clic, de sorte que nous pouvons utiliser sur clic. A l'intérieur des citations, nous ajoutons le code que nous voulons exécuter. Dans notre cas, nous voulons appeler la fonction de mise à jour suivie par les crochets, juste comme ceci. Si nous sauvegardons cela et rechargeons le navigateur, lorsque nous cliquons sur cette entrée, nous ne voyons rien se passer pour l'instant. C' est parce que nous n'avons pas de code entre ces accolades. Nous pouvons vérifier que cela fonctionne en faisant un journal de la console, qui va sortir un message à la console que vous dites, fonction appelée, enregistrez notre fichier. Si nous rechargeons le navigateur, nous pouvons maintenant nous diriger vers les outils de développement. Nous le faisons avec un clic droit et inspectons. Cliquez sur l'onglet de la console. Puisque nous écoutons un événement click, nous voulons maintenant cliquer sur cette entrée, juste ici. La sortie d'écoute détecte les appels de fonction. Donc, notre fonction est maintenant appelée correctement. Gardiennons également cela ouvert pour plus tard et réduisons le navigateur vers le bas. Cependant, appeler cette fonction quand on clique dessus n'est pas un bon cas d'utilisation. Nous voulons réellement exécuter cette fonction chaque fois l'utilisateur saisit quelque chose à l'intérieur de ce champ d'entrée. Nous pouvons faire défiler jusqu'à notre entrée et changer le type pour être sur les entrées. Changeons ça. Plutôt que sur le clic, nous avons besoin d'entrées. Rechargez le navigateur. Maintenant, chaque fois que nous tapons un nombre à l'intérieur de ce champ, nous voyons que notre fonction a maintenant été appelée trois fois. Cependant, pour cette fonction, nous voulons la rendre un peu plus utile plutôt que de simplement enregistrer quelques textes sur la console. Au lieu de cela, nous voulons saisir la valeur de notre bill, le pourcentage de notre curseur, ainsi que le nombre de personnes entre lesquelles le bill est divisé. Pour ce faire, nous pouvons accéder aux valeurs qui ont été entrées dans l'un de ces champs. Tout d'abord, nous sélectionnons les documents complets, qui est la page Web. Nous pouvons ensuite affiner cela pour sélectionner un seul élément. Une des façons que nous pouvons saisir ceci est de sélectionner ceci par l'ID de l'élément. Donc, le premier que nous voulons saisir, c'est la valeur de ce bill. Si nous faisons défiler jusqu'à la facture, cela a la valeur de votre facture. Pour que nous puissions utiliser ça. On dit des documents. Ensuite, nous pouvons saisir un élément par l'ID et ajouter la valeur de votre facture. Nous avons maintenant accès à ces éléments particuliers. Nous pouvons maintenant résoudre cela à l'intérieur d'une variable. Nous pouvons créer une variable avec le mot-clé let, puis donner le même nom, comme bill. Cela va maintenant stocker la valeur de tout sur le côté droit, pour cette valeur appelée facture. Si nous voulons vérifier que cela fonctionne, nous pouvons également faire un nouveau journal de console en passant la valeur de la facture. Cela sera appelé chaque fois que nous ajoutons quelque chose à notre entrée. Si nous regardons la console, nous voyons la valeur des entrées réelles, éléments avec le type de nombre. Cependant, ce que nous voulons pour notre calculatrice de conseils est de saisir réellement le contenu que l'utilisateur a saisi. Nous pouvons le faire avec .value. Essayons à nouveau en rechargeant, entrez une valeur. Maintenant, la valeur réelle saisie par l'utilisateur sera stockée dans cette variable de facturation. Alors maintenant, nous savons comment faire ça. Nous pouvons également saisir le pourcentage de pointe et aussi la scission. Nous allons donc copier et coller cela dans plus de temps. Le second est le TipPercent. Nous devons aussi prendre une pièce d'identité. Alors jetons un coup d'oeil pour ça. La première entrée de plage a l'ID de TipInput. Alors copiez ceci. Il est dans. Le troisième sera pour la scission. Ceci a un ID d'entrée fractionnée. Juste avant de passer à autre chose, enregistrons ces trois valeurs et vérifions qu'elles fonctionnent. Le suivant est le TipPercent et aussi le scission. Rechargez le navigateur, allons-y pour la valeur de 67. Donc, nous voyons la valeur de 67. Ensuite, nous avons la valeur de la pointe qui est actuellement zéro, puis la division qui est un pour cent. Juste comme une astuce rapide pour quand la console se connecte à plusieurs valeurs, nous pouvons également les envelopper dans les accolades pour les transformer en un objet et ceux-ci seront beaucoup plus faciles à lire. Ajoutez une valeur. Cela affichera alors le nom de la propriété avec la valeur pour le rendre beaucoup plus lisible dans la console. Cela signifie maintenant que nous capturons toutes les entrées des utilisateurs et que nous pouvons travailler avec ces valeurs très bientôt. Cependant, vous remarquerez, si nous travaillons avec les entrées de plage, qu'aucune des valeurs n'est mise à jour dans la console. C' est parce que nous appelons cette fonction de mise à jour seulement chaque fois que l'utilisateur saisit quelque chose dans ce projet de loi. Cependant, pour notre cas d'utilisation, il serait beaucoup plus pratique si cette fonction était mise à jour lorsque l'utilisateur a cliqué sur l'une de ces entrées. Donc, pour ce faire, supprimons le gestionnaire d'événement on input. Au lieu de cela, nous pouvons placer cela sur le wrapper principal. Cette section principale enveloppe toutes nos entrées. Donc maintenant, si nous sauvegardons cela, actualisons le navigateur, et maintenant chaque fois qu'une de nos entrées a été mise à jour, cela appellera maintenant notre fonction. Nous voyons le pourcentage de pourboire augmenté et aussi la répartition est maintenant entre trois personnes. Cela signifie que notre fonction de mise à jour est maintenant appelée pour les trois entrées. Mais nous pouvons également améliorer cela en supprimant notre JavaScript et en séparant également cela du HTML. La façon dont nous pouvons le faire si nous définissons un ID, allons-y pour un conteneur. Nous pouvons maintenant garder cela en HTML pur et avoir seulement notre JavaScript dans la section script ci-dessous. Donc, d'abord, créons une référence à ce wrapper principal. Nous faisons cela comme ci-dessus avec document.getElementById. Le nom d'ID que nous venons de placer est conteneur et nous pouvons le stocker dans une variable appelée conteneur. Maintenant, nous avons notre conteneur. Nous voulons réintroduire notre gestionnaire d'événements on input. Nous pouvons le faire avec AddeVentListener. Cela va prendre deux valeurs. La première valeur est le type d'événement que nous voulons écouter. Tout comme avant, nous pouvons utiliser des choses telles que le clic ou les entrées, puis le séparer par une virgule, le nom de la fonction que nous voulons appeler. Dans notre cas, il s'agit d'une mise à jour. Sauvegardons ce fichier et vérifions que cela fonctionne bien. Lorsque nous cliquons sur la facture, celle-ci est mise à jour. Si nous augmentons la pointe, cela est également mis à jour aussi. Enfin, la valeur fractionnée. Cela laisse maintenant à notre fonction l'accès à toutes les informations dont nous avons besoin. Ensuite, nous allons utiliser toutes ces valeurs pour créer nos calculs de pointe, puis les afficher dans l'interface utilisateur. 7. Calcul du % d'affichage des valeurs: Nous avons maintenant une jolie fonction de mise à jour simple qui saisit toutes nos entrées utilisateur. Ensuite, nous pouvons maintenant utiliser ces valeurs pour calculer nos sorties de pointe. Nous allons les utiliser pour effectuer des calculs, puis mettre à jour l'interface utilisateur. Par exemple, nous devons afficher la valeur de notre tip sur la droite. Nous devons produire le total. Nous devons également nous assurer que lorsque nous augmentons cette valeur de pointe, que le pourcentage s'affiche aussi, et aussi le même pour cette valeur de fractionnement. Commençons. Je veux supprimer ce journal de console de la dernière vidéo, puis nous pouvons utiliser ces valeurs pour effectuer nos calculs. Le premier que je vais attraper est pour la valeur de la pointe. Comment va-t-on s'y prendre ? Eh bien, par exemple, si l'utilisateur entre une facture telle que 100 et une valeur de pourboire de 20 pour cent, nous voulons nous assurer que la valeur du pourboire en argent est 20. Nous avons donc une valeur de 100, et la façon dont nous pouvons le faire est de multiplier cette valeur par le pourcentage du pourboire tel que 20. Vous pouvez voir retourné sur la ligne ci-dessous, nous avons une valeur de 2 000. C' est parce que nous devons diviser la valeur de la pointe par 100. Cela nous donne maintenant la valeur correcte juste ici. Si c'était 15 pour cent, cela nous donnera la valeur de 15. Nous pouvons maintenant utiliser cela dans notre fonction de mise à jour, et nous pouvons stocker cela à l'intérieur d'une variable. Nous pouvons appeler cela une valeur de pointe, et nous allons définir cela égal à travers le même calcul que nous venons d'effectuer. Donc l'équivalent 100 est la valeur de la facture. Nous dirons que la facture est multipliée par notre pourcentage de pourboire divisé par 100, pour nous assurer que le pourcentage de pourboire est divisé d'abord par 100, puis multiplié par la facture. Nous pouvons les envelopper à l'intérieur des crochets pour nous assurer que le calcul est effectué correctement. Faisons un journal de console et nous pouvons vérifier que tout fonctionne bien. Le pourcentage de pourboire. Actualisez le navigateur. Allons faire le même calcul. Donc, 100, nous pouvons sélectionner la valeur de la pointe. Vous pouvez voir si nous déplacons tout cela vers le haut, les valeurs mises à jour sont maintenant affichées. Maintenant, nous avons la valeur totale de la pointe. Nous pouvons facilement déterminer à quel point le pourboire est par personne. Créons une nouvelle variable juste en dessous, appelons ceci le Tip Each. Cela va être assez simple. Tout ce que nous allons faire est de prendre la valeur du pourboire, que nous avons juste au-dessus, puis de la diviser par le nombre de personnes. Ceci est disponible dans la variable ci-dessus appelée Split. La prochaine chose que nous pouvons faire au bas de la page, c'est de déterminer le montant total de la facture par personne. Encore une fois, ce sera un calcul assez simple. Nous avons actuellement le bill total, que nous saisissons dans cette variable, et tout ce que nous avons à faire, c'est de le diviser par le nombre de personnes. Une nouvelle variable, je vais appeler ça le nouveau Bill Each. La première chose que nous devons faire, c'est d'ajouter la facture plus la valeur totale du pourboire. Cela va nous donner la facture totale quand elle sera payée, qui inclut le pourboire, et ensuite nous pouvons diviser cela par le nombre de personnes disponibles dans la division. Tout comme ci-dessus, nous allons les envelopper à l'intérieur des crochets pour nous assurer que le calcul est effectué dans le bon ordre. Nous allons ajouter les valeurs ensemble, puis le multiplier par le nombre de personnes. Essayons celui-là. Nous allons copier chaque nouvelle facture, ajouter ceci dans notre journal de console et nous pouvons maintenant tester ceci. Maintenant, si nous ajoutons la valeur de 100, nous voyons un problème à l'intérieur de la console. Nous sortons la valeur de 1000, ce qui est un zéro supplémentaire ajouté à la fin. Essayons un de plus. Si nous ajoutons 50, le même problème se produit avec la valeur de 500. La raison pour laquelle cela se produit, est probablement pas trop claire pour le moment. C' est parce que nous recevons en fait un type de données de chaîne plutôt que de nombre à partir de cette entrée de facture. Nous pouvons vérifier cela en consignant le type de, puis la valeur de notre facture. Ajoutez quoi que ce soit dans l'entrée, et cela est confirmé par le type de chaîne. Cependant, cependant, la valeur de la pointe, nous le faisons, recharger. Il s'agit d'un type de nombre. Avant quand nous mettons la valeur de nouveau projet de loi chacun, nous ajoutons une chaîne avec un nombre. Ce qui se passe réellement lorsque nous ajoutons la facture à la valeur de pointe, plutôt que d'effectuer un calcul de nombre, nous recevons 50, puis en ajoutant le zéro à la fin, nous donnant la valeur de 500, que nous avons vu dans la console. La façon dont nous pouvons contourner cela, c'est de convertir la valeur de la facture en un nombre. Donc, je vais citer la section où nous allons saisir la valeur et ensuite faire usage de la fonction JavaScript Number, passant dans le code, qui saisit notre valeur de facture. Maintenant, avec cela en place, nous pouvons maintenant faire un nouveau journal de console avec le type de facture. Enregistrez et rechargez le navigateur, et nous ajoutons tout ce qui est maintenant affiché sous forme de nombre. Notre valeur est maintenant affichée sous forme de nombre, alors essayons une fois de plus la valeur de chaque nouvelle facture. Vérifiez que tout fonctionne bien, et nous voyons maintenant la valeur de 50 au lieu de 500. Bien. Donc, maintenant, nous avons toutes les données avec lesquelles nous devons travailler, et l'étape suivante est de réellement sortir ces valeurs dans notre interface utilisateur. Nous allons le faire d'une manière similaire juste au-dessus, où nous avons attrapé les éléments particuliers. Mais plutôt que d'attraper la valeur des éléments, nous allons définir la valeur à la place. En bas d'ici, nous pouvons ajouter un document.getElementById. Quel ID voulons-nous saisir pour cet élément particulier ? Défilons vers le haut. Il y a notre détenteur de zéro pour cent, que nous pouvons maintenant supprimer, et ceci a l'ID du pourcentage de pourboire. Retour vers le bas, nous pouvons ajouter ceci dans. Ensuite, pour définir la valeur de nos éléments plutôt que notre espace réservé, nous pouvons utiliser innerHTML. Ce innerHTML définira la valeur à l'intérieur de notre élément, et nous voulons que cela soit équivalent à notre pourcentage de pointe. Sauvegarder et recharger. Cela fonctionne maintenant, et nous pouvons également ajouter à la fin le symbole de pourcentage. Nous pouvons ajouter cela en utilisant le symbole plus, puis comme nous voulons ajouter une valeur de chaîne plutôt qu'un nombre, cela va être ajouté entre guillemets. Nous devrions maintenant voir un symbole de pourcentage si nous rechargeons le navigateur et faisons défiler notre curseur de plage. Ensuite, nous avons cette valeur de conseil juste en dessous. Revenons à notre code. C' est l'élément que nous voulons cibler juste ici et cela a l'ID de la valeur de la pointe. Tout comme ici, nous allons également utiliser document.getElementById, passer l'ID de la valeur de tip, et encore une fois, nous allons définir le innerHTML. Nous avons déjà calculé cela juste au-dessus dans la valeur de la valeur de la pointe. Essayons celui-là, une facture de 50. Je vais mettre le pourboire, et 10 pour cent de 50 est maintenant égal à cinq. Nous allons l'utiliser quelques fois de plus, donc je vais copier ceci, coller ceci juste en dessous. La troisième porte sur la valeur totale, c' est-à-dire le calcul de notre facture ajoutée à la valeur du pourboire. L' ID de cette section était total avec tip, que nous pouvons voir à partir de notre HTML juste au-dessus, c'était cette section juste ici. Ensuite, nous pouvons ajouter que le contenu HTML avec innerHTML, envoyer cela égal à notre facture en cours d'ajout à notre valeur de pointe. Essayons ça, une facture de 50. Ces deux valeurs combinées nous donnent le total de 55. Ensuite, nous avons la section divisée juste en dessous. La première chose que nous allons faire est la valeur de la scission, donc une personne, mais maintenant nous allons juste définir le nombre de personnes telles que 1, 2, 3, plutôt que de sortir des gens ou une personne juste après. Commençons par celle-là. Obtenir l'élément par ID. L' ID dont nous avons besoin pour celui-ci, si nous faisons défiler jusqu'à notre section divisée, nous pouvons voir ensuite où je vais placer tout le contenu. Si nous supprimons cela, il s'agit d'une valeur fractionnée. C' est la valeur de notre variable de split juste après cela. Le prochain que nous allons prendre, c'est la facture totale par personne. L' ID de cet élément dans cette section sera facturé chacun. Encore une fois, nous avons également cette valeur stockée dans la variable appelée new bill chacun. La dernière section avec laquelle nous devons travailler est la pointe vers le bas chacun en bas. Collons à nouveau dans notre getElementByID. Le spam que nous mettons à jour a l'ID de tip chacun. Je vais définir la valeur pour être la pointe de chaque variable, que vous avez stockée ci-dessus. Sauvegardez ceci et revenez à notre projet. Sont-ils Bill ? On sait que tout ça marche, alors allons-y 10 pour cent. Comme nous n'avons qu'une seule personne, la facture est de 55, et ils paient aussi le pourboire complet de cinq. Essayons d'ouvrir ça pour être deux personnes. La valeur est mise à jour ici et ceci met à jour nos valeurs juste en dessous. Cela laisse maintenant la plupart des fonctionnalités de notre calculatrice de pourboires maintenant en place. Ensuite, nous allons passer à ajouter un peu de formatage dans la devise et aussi les valeurs fractionnées. 8. Formatage de la devise et fractionnement: Bienvenue dans la vidéo finale de ce projet de cours. Dans cette vidéo, nous allons apporter quelques touches finales à notre calculateur de pourboires, et en particulier nous allons formater notre devise et travailler également avec la sortie fractionnée. Tout d'abord, nous allons créer des fonctions qui vont arrondir nos valeurs monétaires à deux décimales, plus de mettre un symbole monétaire devant aussi. Parallèlement à cela, où nous avons notre scission en bas, nous allons changer cela pour produire soit une personne, soit deux personnes, trois personnes, et ainsi de suite. Aussi cette fonction de devise peut être utilisée pour les valeurs fractionnées en bas aussi. Pour ce faire, nous allons descendre à notre script, et si nous regardons où nous sortons toutes ces valeurs, au lieu de simplement sortir une variable, nous allons passer ceci à une fonction. Créons cette fonction tout en haut. Nous allons commencer par la fonction qui va formater notre argent. Pour que cela fonctionne, nous avons également besoin de la valeur monétaire réelle pour travailler avec, et nous allons passer cela à cette fonction très bientôt. Maintenant, il y a quelques choses que nous voulons faire avec cette valeur monétaire réelle. La première chose à faire est d'arrondir ceci à deux décimales, puis nous allons ajouter un symbole de devise devant. Prenons notre valeur, et nous pouvons réaffecter cela à une nouvelle valeur. La nouvelle valeur sera égale à la valeur actuelle, et nous pouvons définir ceci à deux décimales en utilisant la méthode toFixed. Cette nouvelle fonction doit alors retourner notre nouvelle valeur. Donc, avant d'aller de l'avant et de sortir cette nouvelle valeur, nous pouvons également ajouter à ce début une chaîne qui va contenir un symbole monétaire, ajouter un espace, et ensuite nous pouvons ajouter ceci à la valeur. Comme il s'agit d'une fonction, nous pouvons maintenant réutiliser cela partout où nous avons besoin de produire une valeur monétaire. Prenons ceci, et si nous faisons défiler vers le bas, le premier est le TipValue. Au lieu de sortir notre valeur incluse dans cette variable, nous pouvons maintenant appeler cette fonction passant dans notre TipValue. Ce TipValue sera effectivement reçu à l'intérieur de notre fonction juste au-dessus comme cette valeur, puis nous pouvons faire nos changements et retourner la nouvelle valeur. Le total avec pointe, nous pouvons également saisir cela, et remplacer cela par notre fonction. Ensuite, nous avons NewBilleach. Passez ceci dans notre fonction, et enfin la valeur de pointe pour chaque personne. Sauvegardons maintenant cela et vérifions que cela fonctionne dans le navigateur. Ajoutez une valeur, et maintenant si nous sélectionnons différentes valeurs de pointe et aussi divisons, nous voyons qu'elles sont maintenant arrondies à deux décimales en même temps que la sortie du symbole monétaire. La prochaine chose que nous allons faire est de créer une nouvelle fonction qui va formater la sortie fractionnée, donc cette fonction produira soit une personne, soit elle sortira deux personnes et ainsi de suite. Retournez à notre section de script, créons une nouvelle fonction, et appelons ceci FormatSplit. Cela va également prendre une valeur qui sera le nombre de personnes entre lesquelles le bill est divisé. Vérifions d'abord si cette valeur est égale à 1. Si c'est le cas, nous voulons alors retourner une chaîne qui dit simplement, une personne. Donc, nous pouvons retourner la valeur plus une chaîne qui est le mot personne. Cette ligne de code ne s'exécutera que si la valeur du fractionnement est égale à 1. En fait, cela veut juste être une chaîne. Si la valeur est deux ou plus, nous allons alors renvoyer une nouvelle valeur, qui est la valeur actuelle, et cette fois plutôt que personne, la valeur sera people. Maintenant, sortez ceci, nous allons utiliser notre fonction FormatSplit, en passant notre split. Off au navigateur, vérifions que cela fonctionne. Nous pouvons ajouter une valeur, et nous voyons la sortie d'une personne. Changons que ça soit le numéro deux, deux personnes, trois personnes, et ainsi de suite. Ceci est maintenant quelques belles améliorations pour notre calculatrice de pointe, mais il y a un cas de bord que nous devons prendre en charge, et cela dépend des valeurs particulières que nous ajoutons. Si nous faisons quelque chose comme 47 et 15 pourcent pourboire, divisé entre deux personnes, il peut ne pas être immédiatement évident, mais il y a un petit problème ici. Ce problème est le projet de loi chacun, et aussi le pourboire chacun ne couvre pas les totaux juste à peu près le sommet. La pointe chacun est 3.52, ce qui nous donnera la valeur de 7.04, et nous voulons faire cette 7.05. La même chose avec la facture réelle chaque si chaque personne met en 27.02, ce sera légèrement inférieur au total. Maintenant, la façon dont nous pouvons corriger cela est en allant à notre fonction que nous avons créée plus tôt, qui est FormatMoney. Au moment où nous appelons la méthode toFixed, cela est en fait arrondi en haut ou en bas en fonction du nombre. Pour résoudre ce problème, nous voulons toujours nous assurer que notre valeur est arrondie, et jamais arrondie vers le bas. Il y a quelques calculs mathématiques complexes que nous pouvons faire pour que cela se produise, mais il y a aussi un moyen beaucoup plus simple aussi. Au sommet, nous allons à nouveau saisir notre valeur et nos changements. Nous pouvons utiliser une fonction mathématique appelée ceil, qui va toujours arrondir nos chiffres. Cependant, par défaut Math.ceil arrondit au nombre entier le plus proche. Par exemple 27.02, arrondit à 28. Cela nous reviendrait alors quelques valeurs qui sont beaucoup trop élevées. Au lieu de cela, nous voulons saisir la deuxième décimale et arrondir cela à la place. Pour ce faire, nous allons multiplier notre valeur d'origine par 100. Faisons quelques journaux de la console et voyons à quoi cela ressemble dans le navigateur. C' est ainsi que nous allons consigner la valeur d'origine, donc la première valeur, puis nous ferons le même journal de la console, mais après que cette valeur a été modifiée. Ouvrons les outils de développement avec un clic droit et Inspecter. Allez dans la console. Si l'on regarde ces deux paires, en particulier en bas, 3.525 a été arrondi à 353, la même façon que 27.025, cela a été arrondi vers le haut. Maintenant cela a été arrondi, nous pouvons maintenant diviser cela par 100 pour nous donner les décimales d'origine. Prenons cette valeur, divisons-la par 100, puis rechargez le navigateur. Ajoutons nos valeurs en place, et maintenant ces valeurs multipliées par deux personnes ne seront pas suffisantes pour couvrir la facture totale et le pourboire. Ce n'est qu'un petit détail, mais quelque chose qui pourrait être vraiment important quand on travaille avec de l'argent. Supprimons ces journaux de console, et nettoyons notre fonction. C' est suffisant pour notre projet de calculatrice de conseils, j'espère que vous l'avez apprécié, et aussi appris quelque chose de nouveau. Vous pouvez maintenant passer au projet suivant, faire une pause ou ajouter d'autres personnalisations à ce projet soit via CSS pour changer l'apparence, ou vous pouvez ajouter des fonctionnalités JavaScript différentes. J' espère que vous avez apprécié ce projet et je vous verrai dans le prochain. 9. Suivez-moi sur Skillshare !: Une énorme félicitations de ma part pour avoir atteint la fin de ce cours. J' espère que vous l'avez vraiment apprécié et que vous en avez acquis quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et aussi de me suivre pour toute mise à jour, et aussi d'être informé de tout nouveau cours à mesure qu'ils deviennent disponibles. Merci encore une fois. Bonne chance. J' espère que je te reverrai dans un futur cours.