Créez une calculatrice faite main avec HTML, CSS et JavaScript

1. Introduction du cours: bonjour et bienvenue à la création d'une calculatrice à la main Ici sur le partage de compétences dot com. Dans ce cours, nous allons créer une toute nouvelle calculatrice à partir de zéro en utilisant HTML, CSS et JavaScript. Nous allons écrire du HTML moderne, CSS et JavaScript, et votre projet tout au long de ce cours est essentiellement de créer une toute nouvelle calculatrice, comme ce que vous voyez ici. Mais, tu sais, fais le tien un peu différent, peu plus gentil, probablement. Et ajoutez l'interactivité ici pour que vous puissiez cliquer sur l'un de ces nombres et vous faites toutes sortes de mathématiques si vous le souhaitez. Ce cours est parfait pour Front et les développeurs qui apprennent html, CSS et JavaScript et vous voulez un peu plus de mains sur la pratique, créant quelque chose d'un peu plus vraiment la vie que juste une application monde bonjour ou une liste de choses à faire . Si cela vous semble très intéressant, n'hésitez pas à participer à ce cours et nous commencerons tout de suite 2. Créer le projet: bonjour et bienvenue à la toute première leçon sur la création d'une calculatrice à partir de zéro ou à la main . Dans ce cours, nous allons utiliser HTML CSS avec du JavaScript. Maintenant, rien ne va devenir trop compliqué, Mais vous devriez déjà connaître les bases HTML de base. CSS. Et si vous ne savez pas quelle est la partie javascript, c'est bon, je peux vous accompagner à travers cette partie quand nous y arriverons aussi. Maintenant, les premières choses d'abord. J' ai créé un fichier appelé index dot html et j'utilise V s Codas, mon éditeur. Donc, je vais taper html Colon cinq, puis appuyer sur onglet, et cela remplit juste automatiquement un tas de trucs magiques pour moi. C' est ce dont vous avez besoin pour obtenir votre page Web html régulière mise en place de toute façon, donc je vais juste jeter un titre ici appelé Calculatrice à un HTML. Si vous voulez modifier le titre de l'onglet, vous modifiez simplement le texte ici. Maintenant, je vais retourner à Firefox, et je peux aller au fichier ouvert, et je peux sélectionner ce fichier HTML partout où vous enregistrez cela. Donc, si c'est sur votre bureau, vous allez vouloir aller sur votre bureau en ouvrant ce fichier HTML. Je l'appelle toujours index dot html parce que c'est une bonne convention de dénomination pour les sites Web toute façon. Allons-y et ouvrons ça et on devrait voir à peu près rien que l'on puisse voir ici. C' est écrit Calculatrice. C' est tout ce que nous avons ajouté maintenant pour démontrer que cette page fonctionne. Nous ne pouvons pas dire à l'intérieur de notre corps où nous sommes censés être capables d'écrire du texte et d'ajouter du HTML et toutes sortes de choses là-dedans. On peut avoir un H one tag, et ce H one tag est un en-tête un. Donc, c'est un gros texte. Et si je viens d'enregistrer ce fichier et de retourner pour virer Fox et ensuite actualiser cette page, vous pouvez voir qu'il est écrit grand texte ici. Et le texte de taille normale est comme dans un paragraphe avec la balise P. Et je pouvais sentir ça avec du texte de Laura Ipsum là-dedans. Alors je vais le répéter. Retournez sur Firefox et appuyez simplement sur Rafraîchir. Et c'est donc un Texan de taille normale. Il s'agit d'un texte volumineux. Rien à ce sujet n'est fantastique. Il s'agit de la version la plus basique d'un site Web. Vous pouvez éventuellement créer, mais il est vraiment important d'avoir cette base configurée. Donc, ce que nous disons ici est utiliser DOC type HTML. Il s'agit de la balise HTML cinq. Ensuite, nous avons un élément HTML, et le Lang par défaut est l'anglais. Techniquement, tu n'as pas vraiment besoin de ça. V s entraîneurs remplis automatiquement cela pour moi. Nous avons dit que le personnage a dit son utf huit. On peut donc avoir des personnages japonais, coréens , arabes, anglais, toutes sortes de choses ici. Et notre page n'aura pas l'air drôle. Tous les personnages vont se rendre comme ils le feraient régulièrement. Ensuite, nous avons dit, Vieux port, cela va essentiellement rendre notre site web réactif. Donc, si vous deviez charger cette page, disons que votre appareil mobile, cela fonctionnera de la façon dont il est censé fonctionner et vous pouvez écrire des requêtes de médias CSS. Ensuite, nous avons ajouté un titre. Ce titre est le titre de l'onglet serré ici, et c'est une sorte de tout ce qui va dans la tête et dans le corps est l'endroit où nous mettons tout notre contenu réel. Et puis nous mettons tout cela à l'intérieur de nos éléments HTML et fondamentalement ce que nous disons, Voici tout d'ici pour entendre tout ce qui est à l'intérieur est ht pas aller de l'avant. Nous allons mettre tout notre contenu réel à l'intérieur de cette section ici, et nous allons écrire du CSS ici avec le CSS interne physique. Nous allons donc écrire CSS directement à l'intérieur de ce document et à la fin de ce cours va nettoyer cela et nous assurer qu'il va dans son fichier approprié afin que nous suivions les meilleures pratiques. Tout d'abord, on devait trouver ce dossier. On doit la structurer. Nous avions besoin de l'étaler à son apparence maintenant, une fois que vous avez quelque chose comme ça, vous pouvez réellement commencer à créer votre page Web. Mais ce n'est pas avant que nous ayons réellement une partie de cette configuration que nous pouvons créer une bonne page Web . Donc, la dernière chose que nous allons faire est que nous allons écrire du html et ça va avoir l' air totalement grossier . Mais alors nous allons ajouter du CSS et va avoir l'air vraiment, vraiment sympa 3. Stubbing le HTML: d' accord. Les premières choses d'abord. Nous devons arrêter du HTML. Maintenant, cette partie n'est honnêtement pas la plus excitante. Mais html est le squelette derrière chaque site web, chaque application web. C' est la clé pour dire à Javascript et CSS comment affaiblir le style et interagir avec notre page. Maintenant, nous allons créer une calculatrice, et nous allons juste utiliser HTML pour commencer, donc cela va sembler assez brut. Mais ce que nous pouvons faire est de créer un div où tout le contenu de notre calculatrice peut vivre. Et si nous le voulions, nous pourrions aussi donner cette classe de calculatrice. Maintenant, une fois que nous entrons dans certains des CSS, je vais décrire quelles classes et quelles idées sont et des choses comme ça s o A div est juste un élément de diviseur standard. Ça ne fait vraiment rien. C' est juste un élément factice. C' est juste pour créer des trucs à usage général. Mais à l'intérieur d'ici, nous voulons aussi un autre div. Et c'est là que nos résultats vont aller. Donc, c'est là que se trouve le haut de la calculatrice. Où vous mettez un plus deux est égal à trois. C' est là que cela va aller, puis nous allons créer une liste Nordling avec tous nos éléments de liste ici. Alors jetons un coup d'oeil à ce que nous avons actuellement. Quelqu' un va écrire un test là-bas. Ils enregistrent ce fichier et passons à Firefox et frapper, Rafraîchir, et nous pouvons voir ça. Je fais juste ici pour que tu puisses voir ici. Atteint 300%. Ça n'a pas l'air très bien, n'est-ce pas ? Eh bien, nous devons ajouter clairement multiplier, diviser les nombres un à 10 ou zéro à neuf, plutôt et signe égal dans toutes sortes de choses. Alors allons de l'avant et ajoutons ça ici. Et puis dans la vidéo suivante, nous pouvons faire en sorte que le CSS retouche cela comme nous voulons qu'il ressemble. Mais en ce moment, nous devons créer une calculatrice avec quelques boutons. Maintenant, vous n'avez pas besoin d'utiliser une liste ordonnée de l'ONU, qui est ce que j'utilise ici sur la liste ordonnée. Avec un élément de liste à l'intérieur, vous pouvez également utiliser des boutons. Vous pouvez utiliser des liens, vous pouvez utiliser tout ce que vous voulez. Je vais juste utiliser un A nordle ist parce qu'il garde en quelque sorte le HTML vraiment, vraiment simple. Donc je vais juste copier ça quelques fois et je ne sais pas si c'est suffisant, mais nous le découvrirons près de la fin. Donc le 1er 1 va être C pour clair. Ensuite, ajoutons un astérisque. C' est le symbole de multiplication et le symbole de division laisse une décimale là-dedans. C' est faire sept, 89 et donc en gros, comment en planifiant ça, ça va être le top quatre et ensuite nous avons un ensemble de trois chiffres ici. Ensuite, nous aurons un autre ensemble de trois nombres et un autre ensemble de trois nombres, et la façon dont j'organise cela peut ou non être totalement correcte. Nous devrons peut-être changer certaines de ces choses, mais c'est bon. La façon dont nous allons créer cela va être complètement flexible. C' était à un signe plus et puis faisons 45 et 6 Jones à un moins, signe 12 et 3 et ça va paraître vraiment bizarre juste jusqu'à ce que nous ayons ce genre de tout trié, puis un signe égal. Mettons un zéro là aussi et encore. Si nous devons résoudre ce problème, nous pourrons l'ajuster plus tard. Plus tard. C' est tout à fait bien. Donc, notre HTML ressemble à ceci. Et enfin, contentons pas de créer une calculatrice régulière, mais nous assurons également que c'est quelque chose que vous pouvez utiliser dans votre portefeuille. Donc, créons un autre DIV ici avec une classe et je le déplace vers le bas. Appelons ça la signature, et c'est là que vous pouvez mettre votre signature lorsque vous avez terminé votre projet. Et j'appellerai ça une bonne calculatrice par ton nom. Et enfin et non des moindres, allons-y. Rafraîchissez nous et rien de fantaisie, littéralement la page la plus ennuyeuse que nous puissions penser. Mais dans la leçon suivante, nous allons commencer à appliquer du CSS, et cela va sembler incroyable tout de suite. 4. Styliser la page: D' accord, jusqu'à présent, nous avons cette page vraiment moche. Ce n'est pas une façon de vivre ta vie. Ce n'est plus 1995. On peut rendre ça vraiment, vraiment sympa. Et en fait, nous n'avons pas à faire autant de travail. Donc, c'est là que nous entrons dans CSS, et nous allons écrire notre CSS ici juste pour le moment. Et puis on pourra nous transférer dans son propre dossier un peu plus tard. Alors les premières choses d'abord. Je pense que nous devons mettre quelques détails sur notre corps, notre arrière-plan, ce biper où tout ce blanc est. Allons de l'avant et changeons une partie de ça pour que nous puissions changer tout le corps. C' est l'élément du corps entier ici en tapant simplement corps. Et ça correspond ici. C' est donc le nom exact de l'élément. Ensuite, nous avons ces accolades d'ouverture et de fermeture. Et ici, nous pouvons juste dire la couleur de fond, et ensuite nous pouvons lui donner la couleur hexadécimale. On pourrait lui donner un nom pour lui donner un nom comme Aqua, et ça va avoir l'air terrible. Mais écoutez, écoutez, maintenant nous avons de l'aqua, donc vous savez qu'on n'est plus 1995. Nous avons maintenant un site Web 1997. Allons de l'avant et ajoutons une couleur hexadécimale, bien que de 999 Et c'est juste une nuance de gris. Et mon code V pense que j'utilise un modèle Django, mais je ne le suis pas. J' utilise un modèle HTML. Et si je survolais assez longtemps, vous pouvez réellement voir que le code V s est assez agréable pour me donner un sélecteur de couleurs et vous pouvez choisir n'importe quelle couleur que vous aimez. Donc, en aucun cas, vous n'avez à finir par utiliser les mêmes couleurs que j'utilise. Je vais juste utiliser quelque chose de générique. Ah, et vous pouvez le personnaliser comme vous le souhaitez. Allons de l'avant et sauvegardons cela et actualisons nos pages plus. Et d'accord, tu sais, ça n'a pas l'air aussi collant que 1997. On est peut-être en 1999. Faisons un saut quantique ici. Allons de l'avant et ajoutons un int Grady ici. Donc Grady INT en CSS pourrait être un peu délicat. Et ce que j'aime faire est d'utiliser un service appelé Color Zilla et je veux utiliser le générateur Grady int ultime ici et ce que je vais faire est juste de les attraper et de les faire glisser vers le bas. Et puis utilisons une radio et changeons ces couleurs. Alors, quelle devrait être la couleur intérieure maintenant, on peut piquer ici. Nous pouvons utiliser n'importe quelle couleur que nous voulons. J' en ai déjà un en tête . 70 77 c Donc c'est gris. Et encore une fois ma calculatrice va être assez génial. Le vôtre pourrait être super coloré et la couleur extérieure ici. Qu' est-ce que je veux que cette couleur soit ? Noir, peut-être ? Ouais, j'aime ça. Et puis tout ce que nous avons à faire est de cliquer sur copier. Et c'est donc notre petit aperçu. Et encore une fois, je vais juste agrandir ça ici. Et c'est notre petit aperçu ici, et c'est tout le code qu'il génère pour nous. C' est CSS régulier. On n'a pas à s'inquiéter de ce que c'est. Nous savons que cela va fonctionner, donc je clique juste sur copier, retourne à notre code ici, et je vais littéralement le coller ici et je vais réparer une partie de l'invention. Allons de l'avant et sauvegardons ça. Revenons à notre calculatrice et rafraîchissons. Ok, pas mal, pas mal. Nous pouvions voir que le Grady en sorte de se répéter un peu. Nous devons donc ajuster ça si nous voulons que ça s'étire de haut en bas. Maintenant, en CSS, nous avons ce petit hack de vie cool qui n'est pas vraiment un acte de vie. Ce n'est même pas vraiment tout pirater. Tout ce que nous allons dire, c'est le HTML et le corps. L' ensemble de l'élément HTML, ainsi que le corps entier, devrait occuper 100% de la hauteur de votre navigateur. Et donc nous allons sélectionner l'élément HTML et les éléments du corps séparés par une virgule, et nous allons simplement dire hauteur 100%. Et quand je rafraîchis la page ici, nous allons voir que cela se corrige en fait, donc nous ne voyons pas un peu répéter Grady int en bas. Juste comme ça, on ne peut pas vraiment voir son texte, mais c'est bon. On n'a pas vraiment besoin de faire ça maintenant. Ensuite, allons de l'avant et faire en sorte que cette calculatrice de calcul ressemble un peu, vous savez, nous allons bloquer et plus comme Woo. Nous devons donc créer une classe près de appelée Calculator Calculate Whore, et je sélectionne cet élément par son nom de classe en utilisant le sélecteur DOT. Donc point signifie classe et ensuite nous faisons juste correspondre ce nom avec ce nom ici et ensuite affaiblir le style. Allons de l'avant et donnons une toile de fond. Je suppose qu'on pourrait faire une couleur de fond, mais faisons un fond régulier de 353535 et c'est juste un gris plus foncé. Je suppose qu'on pourrait faire une couleur de fond, Donnons ceci un avec quelque chose comme 300 pixels. Et peut-être donnons à cela un peu de rembourrage, tapotant comme 15 pixels. Voyons à quoi ça ressemble jusqu'à présent. Ok, au moins on peut le lire. Donc vous savez que c'est un pas dans la bonne direction. Allons de l'avant et centrons cela aussi. Donc c'est faire position. Absolute haut 50% gauche 50%. Maintenant, cela ne va pas vraiment bien, euh, centre correctement euh, . Ça va prendre ce coin ici, et ça va le placer au centre. Droit ? Les mots, plus légers comme ça. Donc ce n'est pas tout à fait centre, mais nous pouvons le compenser de la moitié de la hauteur avec et la moitié de la hauteur, donc nous pouvons en quelque sorte le coincer au centre avec une déclaration appelée Transform et nous disons traduire l'accès X de moins 50%. 50% des éléments avec et l'accès aux Émirats arabes unis ont également augmenté cela de 50% de la hauteur. N' enregistrez pas cela et actualisez ici et maintenant il est en fait centré, et quand je zoome, il restera toujours centré. C' est maintenant qu'on va quelque part. Last but not least, allons-y et donnons-nous un peu d'arrondi, peut-être une ombre de boîte. Et nous allons lui envoyer tout notre texte pour être alignés tout notre texte pour être centré s Donc nous allons juste faire quelques touches finales sur notre calculatrice dans cette leçon, puis la suivante nous allons réellement faire ressembler la calculatrice à une calculatrice avec des boutons et tout. Donc, aligner le texte, centrer et tout ce qui va faire est de s'assurer que tout notre texte est dans. Le centre ajustera cela plus tard. Nous pourrons écraser ça plus tard. Donnons-nous un rayon de frontière ah de quelque chose comme cinq pixels quelqu'un que nous retournons ici et rafraîchir vous pouvez voir est en fait arrondi ici comme une calculatrice réelle dans la vie réelle. Et allons de l'avant et donnons à ça une ombre de boîte. Donc, nous allons dire que l'ombre de la boîte sur l'accès X ne devrait pas être sur la raison pour laquelle l'accès haut et bas devrait être de six pixels. Il ne devrait pas y avoir de flou. Et la couleur devrait être. Je vais en dire un. Un un un. Est-ce que c'est bon ? Oui. C' est à propos d'où allez-vous ? C' est à propos de la couleur que je veux ici. Donc c'est la première boîte qui a brisé la deuxième ombre de boîte. Je vais ajouter. Je fais ça avec une virgule ici. Le 2ème 1 va être ex access zero. Pourquoi accéder à huit pixels ? Le flou va être de 10 pixels allaient donner à ce RVB une valeur. C' est donc une valeur Alfa rouge vert bleu. Et ça va être 00 nouveaux 000 Donc c'est la couleur noire en RVB. C' est l'absence de couleur, donc il n'a aucune valeur du tout. C' est pour ça qu'on lui donne des zéros. Alors disons qu'il doit être de 0,75%. Payez la ville et voyons à quoi ça ressemble. Et maintenant nous avons juste ce petit Oui, ça ressemble à une bordure en bas. Il est arrondi et il a une ombre, donc il semble en fait qu'il sort un peu de l'écran. La leçon suivante. Allons de l'avant et style, les résultats et les boutons et peut-être votre signature aussi bien si nous avons assez de temps. 5. Styliser les boutons: Bonjour. Bienvenue dans cette leçon. Allons de l'avant et stylisons la section des résultats qui stylisent tous les boutons, essentiellement tout à la fois. Et puis, si nous avons assez de temps dans cette leçon. Si on ne s'affaiblit pas, poussez ça dans la leçon suivante. Mais si nous avons le temps, allons aussi styler la signature. Donc, tout d'abord, faisons la section des résultats et nous devons être en mesure de cibler cette Div. Maintenant, si nous avons ciblé un Div comme nous l'avons ciblé, notre corps va sélectionner chaque plongeon. Nous en avons un ici, et nous en avons un ici et un dans notre signature, donc nous ne voulons pas faire ça. Nous voulons styliser ce modèle particulier. Donc maintenant, je peux donner à cela une classe de juste appeler le résultat et par défaut va avoir zéro dedans maintenant. Cela ne va pas vraiment faire quoi que ce soit jusqu'à ce que nous écrivions un CSS afin que je puisse écrire des résultats et me rappeler que DOT signifie classe, puis ouvrir et fermer des accolades. Et rendons ça vraiment moche. Donnez-nous une couleur de fond rouge. Donnons à ça une couleur de bleu. Ça va être notre couleur de texte. La largeur va être quelque part autour de 90% ish à nouveau. Vous pouvez ajuster cela autant que vous avez besoin. Lorsque vous créez également votre propre calculatrice. Donne-nous une marge. Donc, ce sera le rembourrage autour de l'élément. Donc, le rembourrage ici et nous allons dire sur les huit premiers pixels à droite est zéro pixels en bas, 20 pixels et à gauche, 10 pixels. Et voyons avec quoi on travaille en ce moment. D' accord ? Donc ça ressemble en fait à un bar. Donc, tu sais, pas mal. Allons de l'avant et modifions ce texte. Alignez bien que la ligne textile va être à droite. Peut-être nous donnons une hauteur de, genre, genre, 50 pas 50 % 50 pixels ish. Peut-être nous donner une hauteur de ligne d'environ 50 pixels, juste pour que notre texte reste centré. Oui. D' accord. Il se réunit. Nous avons besoin de ce fonds pour être plus gros, alors rendons le fonds plus grand. Et puis nous allons changer la couleur de fond et des choses comme ça aussi. Donc cette friandise que je vais deviner avec celle-là à, euh, je ne sais pas, 36 pixels quelque part par là. Voyons ce que ça fait. Hé, pas mal. Peut-être 35. Ouais, à peine fait une différence. Notre numéro s'étreint à la frontière droite où ce rouge rencontre le grand. Allons de l'avant et donnons ça une touche, donc il va y avoir un peu d'espacement vers la droite. 10 pixels. On y va. Ça a l'air un peu mieux maintenant. Je pense qu'on a besoin de trois choses de plus dans ton Et si ce nombre devenait vraiment, vraiment long. Si ce nombre est vraiment, vraiment, vraiment, vraiment, vraiment, vraiment, vraiment, vraiment, vraiment, vraiment long, va en quelque sorte juste tomber, nous ne voulons pas ça. Alors donnons-nous un débordement de Hidden et que juste assurez-vous que notre nombre reste toujours, vous savez, vous savez,dans les limites physiques d'une calculatrice du monde réel. Et peut-être, nous allons, ah, changer la couleur de fond. Débarrassez-vous du rouge et faisons comme C E C F A C Quelque part là-bas. À quoi ça va ressembler ? Ouais, ça ressemble à une vieille calculatrice verte et à la couleur du texte. Faisons ça quelque part. Trois B trois b les trois b 32 de quelque chose comme ça. Et encore une fois, cette couleur est juste cette couleur foncée et grisâtre brunâtre. C' est rafraîchissant. Ça va commencer à paraître un peu mieux. , ok Ok, ok, pas mal. Peut-être. Changeons la police et changeons l'ombre de la boîte sont à une ombre de Bach. Donc la famille de polices. Disons que cette famille de téléphones doit être numérique. Vous pouvez changer ce fonds aussi si vous le vouliez. Si vous avez le fonds numérique, il va le charger. Apparemment, je ne le fais pas pour que ça ne le charge pas, alors je vais vraiment me débarrasser de ça. Mais tu peux changer ce téléphone à ce que tu veux. Ariel Times New Roman Something personnalisé ajoutera un front personnalisé un peu plus tard . En bas de la route sur Last Thing était à une boîte ombre ombre de boîte. Et disons que cette ombre de boîte doit être à l'intérieur. On va dire que c'est un insecte. 00 et huit pixels va être le flou et va être RVB un Alfa 000 vert bleu si rouge qui va être noir et un 0.5 est 50% comme une décimale. Il a aussi eu un de plus ici et en set zéro picks, ces deux pixels zéro et puis peut-être nous allons juste pour enregistrer. Nous pouvons jeter un oeil à ce que nous construisons ici. Voyez à quoi ça ressemble. Oh, ouais. Ok, donc on a cette ombre à l'intérieur. C' est juste que c'est très faible, mais ça a l'air plutôt bon. Alors. Nous avons le haut rouge et nous ne voulons pas forcément que ça soit lu. Nous voulons que ce soit une couleur qui va ressembler à nous donner un peu de profondeur. Et nous avons vraiment besoin d'une couleur plus foncée pour ça, comme un un un un un un un un ? Non, ce n'est pas mal. Allons de l'avant et ajoutons quelques chiffres ici. Allons de l'avant et stylisons ça, alors. Ouais, on n'aura pas le temps pour celle-là dans cette vidéo, mais la signature qu'on peut faire dans la prochaine vidéo. Donc, la bonne chose à propos de tout cela est affaiblir le style, tout cela à la fois. Alors allons de l'avant et sélectionnons cet élément ordonné par ses éléments. Nom ul. Donnons-lui un rembourrage de zéro et une marge de zéro. Et voyons ce que ça fait. Ok, ce genre de choses écrase ensemble. C' est bien. C' est ce qu'on veut. Suivant. Nous voulons sélectionner ce même UL, puis tous les éléments de liste en dessous. Donc c'est notre élément parent. C' est ce type ici. Et puis tous les éléments des enfants appelés Al. J' allais attraper celui-là, celui-là et celui-là jusqu'au bout. Alors les premières choses d'abord. Débarrassez-vous de ce style de liste. Nous voulons nous assurer que cela ne ressemble pas vraiment à une liste. On y va, plus de points de balle. Ensuite, donnons à cela une couleur de fond de Disons simplement registre afin que nous sachions ce que nous travaillons avec qui est juste odieux. Mais chaque bouton devrait également avoir un peu de rembourrage. On peut dire que la largeur de chacun va être d'environ 15 %. Nous pouvons ajuster ces sur la route si l'un d'entre eux est incorrect, ailleurs, et nous allons également utiliser cette chose appelée Float maintenant dans Modern nous voit, vous pouvez utiliser la boîte flexible, et vous pouvez également utiliser la grille. Nous allons rester avec flotteur et flotteur est juste un moyen plus facile de traiter avec ces boutons parce que nous voulons qu'ils toutes sortes de câlin côte à côte. Et nous ne voulons pas nécessairement entrer dans les complexités de la flex box ou de la grille parce que ce n'est qu' une calculatrice. On veut juste garder ça simple. Alors actualisons notre page. Et regarderais-tu ça tout de suite ? Cela prend forme comme une calculatrice, et en fait, je pense que j'ai tous ces dans le bon ordre pour si claire division de multiplication. C' est notre période 789 plus 456 moins 123 égale. Et puis zéro finira probablement par faire le zéro prendre place en dessous d'un en dessous de deux et dessous de trois. Et puis le signe égal va aussi descendre. Donc on est presque là avec les boutons. Changeons la couleur pour comme un blanc. C' est donc le symbole hexadécimal pour White. Est le numéro signé F f f f ou vous pouvez simplement taper blanc. Ils devraient tous avoir une marge, et la raison pour laquelle nous le voulons c'est parce que nous ne voulons pas que tout cela soit si côte à côte qu' il ressemble en fait à un gros bouton. Nous voulons qu'elles soient séparées. Donc, si je l'enregistre et actualise, vous verrez que ces boutons se séparent en boutons. Et c'est à cause de notre marge ici. Maintenant, nous devons ajouter un curseur car actuellement, si vous placez simplement votre souris, il ne ressemble pas à un bouton. Ta bouche ne change pas. Mais si nous actualisons avec le curseur, le plus réellement changé. On dirait que vous pouvez cliquer dessus. C' est bon pour l'expérience utilisateur. Donnons-nous, comme une taille amusante de peut-être 20 pixels. Quelque chose comme cette ligne textile va être au centre. Je ne pense pas qu'on définisse cette ligne de texte. Non, on ne le fait pas, c'est déjà prêt. Donnons également un rayon de bordure afin que les boutons ne soient pas super durs et pointus sur les coins. Laissons nous à bord d'un rayon de quatre pixels ne suffiront peut-être pas. Ça fait quatre pixels. Ok, qu'en est-il de cinq pixels ? Soyez comme aller avec cinq pixels. Pour l'instant, nous devons également changer la police, pour laquelle nous n'aurons pas le temps. Dans cette vidéo. On va le faire dans une autre vidéo. Ah, et nous allons juste un tas d'autres choses ici aussi. Qu' est-ce qu'on manque en ce moment ? Donc, la couleur de fond est rouge. Peut-être que nous allons changer la couleur de fond ou quelque chose qui ressemble plus à un bouton. Donc, ce n'est pas si odieux et dans votre visage fort sur. Ajoutons aussi une ombre de boîte de sorte qu'en dessous, comme ce que nous avons ici, il semble que nous ayons une sorte d'ombre ou une sorte d'élévation hors de la calculatrice. Donc, tout d'abord, cette couleur de fond a vraiment besoin d'aller qui ne peut plus être lu. 45 pour cinq pour cinq. Pas mal. Et si on en faisait 40. 44 e. Oui, allons-y avec ce petit briquet. Un peu plus facile de travailler, à mon avis, mais encore une fois, c'est totalement à vous de décider. Enfin, continuons et ajoutons cette boîte une ombre que nous allons ajouter aux ombres ici, donc le 1er 1 va être sur l'axe X. Ne vous déplacez nulle part sur la raison pour laquelle l'accès se déplace vers le bas de cinq pixels et le bleu va être nul. Et puis on va dire que ça devrait être cinq. A 585 Et ça nous donne une belle petite bosse là-bas, donc ça commence à ressembler à une calculatrice. Il est aussi à un secondaire, mais dans votre et dans le bouton de réglage, pas un bouton de garder dire. Je voulais dire, Box Shadow. allons avoir une ombre à l'intérieur de la boîte et nous allons ajouter une seconde ombre avec une virgule là-dedans sur l'axe X, déplaçant zéro sur l'accès Y en déplaçant deux pixels vers le bas. Le flou doit être égal à zéro pixels. Et donnons à cela une couleur un peu plus foncée. Je suppose que ce n'est pas vraiment sombre. C' est pas non ? C' est un gris assez standard et laisse rafraîchir. Ok, ok, je peux vivre avec ça. Je pense que c'est bon pour cette leçon particulière de la prochaine leçon. Allons, euh bien, j'ai dit, nous allons le faire. Eso Let's style ça un peu. On pourrait en fait revenir à ça une deuxième fois, et ensuite on fera un peu plus avec les boutons 6. Votre : dans la dernière vidéo, J'ai dit, Nous allons travailler sur la signature. Je n'aurais probablement pas dû faire cette promesse, mais on va s'en tenir de toute façon parce que c'est ce que j'ai dit. Nous allons le faire dans notre signature. Allons de l'avant et copions simplement ce cours. Le nom de la classe, signature et la cible affaiblir que parce que c'est une classe, nous pouvons utiliser le point de signature et nous pouvons donner à cette sorte de couleur. Alors peut-être blanc. Nous pourrions ajuster cela un peu plus tard aussi. Ah, la famille de polices pourrait être quelque chose de totalement différent. Peut-être. Commentons cela pour le moment. Et ce n'est qu'un commentaire CSS ici. La taille de la police. Voyons voir, n' utilisez pas de pixels. Utilisons les royaumes. Donc 0.75 Mm dit oui, pourrait vraiment me dire ce que c'est. Ce serait génial si c'était le cas. Pour une forêt évolutive, la taille de la police est un facteur d'échelle appliqué à l' unité E. M. M.du front. Et fondamentalement, il s'agit d'une unité e M relative. Donc, l'un est votre taille de police normale et 0,75 est environ 3/4 de votre taille de police normale. Peu importe ce qui va être à nouveau. On peut changer ça en bas de la route. Si nous décidons que les chambres ne sont pas comme nous le voulons. Disons que le texte d'une ligne va se trouver à droite. Et juste pour qu'on sache où on travaille, une frontière maritime, un pixel rouge solide parce qu'on utilise beaucoup de flotteurs ici. Ce n'est peut-être pas juste un div qui écrit ici. Cela peut prendre un peu d'espace supplémentaire, et bien sûr, vous pouvez réellement voir que c'est la signature entière. On ne veut pas ça du tout. Donc, ce que nous devons faire ici, c'est la position relative, et cela va nous permettre de définir un index SET. Et Zed Index est comme, vous savez, quand vous peignez sur une toile et que vous peignez une couche au-dessus de la couche au-dessus de la couche, c'est ce que c'est que les index disant que nous pourrions le mettre devant d'autres couches étaient derrière autres couches et heures. Cet indice, dans ce cas, va être moins un. Nous voulons le mettre derrière d'autres couches, et maintenant il semble déjà qu'il le fait, mais nous voulons juste nous en assurer. Maintenant, abandonnons cette bordure rouge. Et pour le moment, je pense que ça va aller. En fait, nous devons déplacer ça un peu, et c'est un peu serré là-haut. Donc je m'attends à ce que ce soit un petit problème. Donc je parlais juste de ce coin ici et comment le Texas touche essentiellement un des boutons du haut. Donc, parce que nous utilisons déjà la position relative, nous pouvons dire Déplacer cela du haut. Je veux dire, je suppose, et quelque chose comme quatre pixels peut s'affaiblir. Ajustez cela plus tard, et déplacons-le de la droite du mur de droite de cinq pixels. Et donc ça va juste faire tomber ça dans la gauche juste un petit peu. Hey, ce n'est pas mal, mais nous devrons peut-être y revenir un peu plus tard dans la prochaine dernière. Allons de l'avant et ajoutons une coutume. forints ou les boutons ont l'air un peu plus agréable, et peut-être que nous appliquerons cela pour ce même fonds à notre signature ici avant de continuer travailler sur le style des boutons. Parce que maintenant, si nous cliquons littéralement, rien ne se passe. Il ne bouge pas, ne regarde pas en bas, ne fait rien 7. Police personnalisée: D' accord, Doke. Allons chercher un plaisir personnalisé, donc nous allons aller trop loin. Il est dot google dot com parce qu'ils peuvent nous donner accès à presque tous les fonds que je connais gratuitement. Ou si on le voulait, on pourrait en payer un. Je ne vais pas en payer un. Je vais juste en utiliser un libre maintenant. Avez-vous un en tête déjà appelé partage ? Non, c'est le partage de mots personnalisé, et ça va ressembler à ça. Ajoutons juste un tas de chiffres ici. Ça ressemble à ce qu'on veut ? Je pense que oui. Tu sais, sinon, on peut toujours changer ça aussi. C' est la bonne chose à propos du développement Web, c'est que si nous n'aimons pas ça, nous pouvons échanger ça contre n'importe quel autre fonds. Donc je vais aimer ce style et cliquer dans le lit ici, et il y a deux façons de faire ça. Nous pouvons ajouter une feuille de style en utilisant le lien, ou nous pouvons utiliser la commande at import, et nous allons utiliser la commande at Import ici. Doit copier ceci. Allons au sommet de notre style ici et collons. Maintenant, ça ne va rien faire tout de suite. On doit ajouter une famille de polices de partage, puis malédiction de bizarre, qui revient à cursive, mais d'accord, donc je vais copier ça. Et où est-ce que je voulais changer ça ? Je voulais changer sur tous mes boutons, et je voulais changer ça dans la signature. Donc je vais sauvegarder cette page, retourner à notre calculatrice et rafraîchir. D' accord. J' aime ça. Je peux vivre avec ça. Tu peux vivre avec ça ? Je peux vivre avec ça. Sinon, si vous n'aimez pas ça, vous pouvez toujours utiliser un fonds différent. 8. Mouvements de boutons: OK, on a ces boutons. Ils le feront. Ils ressemblent à des boutons. Nous savons que ce sont en fait des éléments de liste. Donc, on a un peu piégé l'utilisateur là-bas. C' est bon, mais quand on clique dessus, rien ne se passe. Donc nous devons ajouter une sorte de style ici qui est arrivé que fondamentalement, quand nous cliquons sur ça, il semble que ça bouge vers le bas. Donc, tous nos boutons, nos alliés et nous sélectionnons la liste des articles commandés par l'ONU, puis la liste des articles. Donc, nous allons aussi travailler tout de suite. Créons un U L L L j'allais sélectionner toutes les listes sur ordonnées, puis tous les éléments alliés en dessous. On va dire quand c'est actif, et ça veut dire que quand tu cliques et que tu le maintiens, qu'est-ce que ça va pour dio ? On va nous donner une position de parent. Je vais dire Bump it down by 5 pixels. Nous allons aussi changer cette ombre de boîte aussi. Et puis boîte ombre comment nous nous débarrassons de ça de la dernière vidéo. Cette ombre de boîte. J' ai juste commenté, et on s'en occupera dans une seconde. Je veux juste jeter un coup d'oeil ici. Ok, ça bouge, d' accord. Si nous avons juste cette ombre de boîte, l'ombre de la boîte se déplace vers le haut ou fondamentalement nous nous en débarrassons pour la plupart. Maintenant, plus je regarde ça, plus je n'aime pas cette ombre haut sur ces eso. Allons-y et éditons ça, parce que ça va me rendre fou plus je le regarde, plus ça ne semble pas tout à fait correct. Donc nous l'avons fait. Oui, on a son bouton ici. C' est notre allié Box Shadow X zéro. Pourquoi ? Déplacement vers le bas de cinq pixels. Zéro flou A 58585 OK, peut-être ne pas utiliser exactement le même que nous utilisions ici. Essayons de changer ça. Essayons de faire zéro pixels sur l'axe X qui est à gauche. Et maintenant, nous allons peut-être faire deux pixels vers le bas. C' est en haut et en bas. Voyons pourquoi Access et un flou de cinq pixels avec un RVB une alfa rouge vert bleu de Yeah, c'est celui que nous voulons juste là. Et voyons comment ça se passe. Hey, ça a l'air bien mieux. D' accord ? Nous avons toujours tout ce qui se passe, ce qui est le problème actuel, mais nous avons corrigé cette bizarre que nous avions à l'origine. Je suis tellement plus heureux avec ça en ce moment. Revenons à notre allié. Et quand vous appuyez sur un de ces boutons, qu'est-ce que l'ombre va à dio ? On va lui donner un insecte pour que les ombres soient à l'intérieur. Essayons X x zéro. Pourquoi accéder à un pixel au flou de pixel et RVB un rouge vert bleu Alfa sur ce va être noir ainsi que votre 0.4 à nouveau. Si tu regardes ce nouveau genre, Hey, Caleb, c'est cool. Mais, tu sais, je veux juste te dire que c'est une calculatrice grise et ennuyeuse. N' hésitez pas à l'épineter sur une image de fond plutôt qu'un radieux. Vous pouvez nous changer pour ressembler à du bois ou du plastique ou quoi que ce soit comme ça. Et toi ? C' est ce que je veux ? Oui, c' est ce que je veux parce que ça a l'air plutôt aplati. Maintenant, on a Oh, ok. Nous devons changer cela parce que nous avons un trop de boutons ici. Alors faisons de cette extension zéro ici et ici. Et faisons ce signe égal s'étirer vers le bas. Comment ciblons-nous ce signe égal ? Ce signe égal va être délicat quand je le pense. C' est la deuxième dernière. On va utiliser un 10e enfant. Sélecteurs, c'est un peu plus avancé CSS. Fondamentalement, ce que nous allons dire est zéro, 23456789 10 11 12 Jusqu'à celui-ci. Et nous allons sélectionner ce spécifique en utilisant juste CSS. Et nous pouvons le faire avec UL Ally et enfant Nombre d'enfant 16. Et donnons à ceci une bordure deux pics un blanc solide. Et nous allons juste nous assurer que nous ciblons le bon ici. Et pourtant, nous parlons du bon. Donc nous allons juste ignorer cela parce que cela va juste bouger où nous voulons parce que tout le reste est flottant. Nous voulons nous assurer que les éléments flottants sont avec ceux avec lesquels nous travaillons. Eso c'est celui qu'on veut. Donc c'était une bonne supposition. Alors faisons ça deux fois plus de hauteur. D' habitude, ça l'est. Donc si tu te demandes, Hey, quelle est la hauteur. Retournons ici. Cliquez sur celui-ci. Inspecter l'élément. Et si je clique sur l'un de ceux-ci ou que je passe le curseur sur eux, vous pouvez le voir dans mon modèle d'objet de document. C' est là-haut, la représentation visuelle de ça. Chacun d'entre eux est 65 sur 43. Et si on traîne ce petit type de mise en page là-bas, on peut vraiment voir. Mais à l'intérieur, 45 pixels par 22 pixels. Les hommes ont 10 dans le top 10. En bas, c'est presque 23 pixels pour un total de 42. Maintenant, ce n'est peut-être pas tout à fait exact parce que nous faisons des trucs supplémentaires. Donc je veux dire, honnêtement, je vais juste deviner, euh, voyons 37 pixels. On va changer sa taille et voir ce qui se passe. Je l'ai rendu assez grand. Et si on regarde ça, juste ce signe égal, c'est celui qu'on regarde ici. Juste le signe égal que la hauteur est Non. 37 plus 10 en haut et en bas. Donc je vais juste regarder celle-là. Je vais dire 75 pixels et nous allons de l'avant et nous débarrasser de la frontière parce que ça va nous gâcher aussi et penser que je peux vivre avec ça. Je vais vivre avec ça. Je vais faire en sorte que ça marche, et on doit en quelque sorte déplacer celui-là. Maintenant, c'est déjà flottant. C' est donc intéressant parce que nous devons sélectionner ce bouton en particulier et le faire reculer et ensuite l'étirer vers la droite. Allons de l'avant et attrapons cet élément. Alors, Ul Ally. Et lequel est-ce ? Je pense que c'était le dernier élément. Pluie ? Oui. Celui-ci est facile à saisir avec CSS, nous pouvons simplement dire dernier enfant, et c'est à marge haut de moins 45 pixels. Encore une fois, je suis juste en train de nous regarder et une largeur de 70% et je pense que nous devons réellement déplacer marge un peu plus haut parce que ceux-ci ne s'alignent pas et qu'avec cela un peu trop eso ce que nous pouvons faire au lieu d'écrire, enregistrement, rafraîchissement. On peut changer ça ici. Donc ce que j'ai fait était juste. Cliquez sur inspecter l'élément et j'ai sélectionné celui que je veux modifier. Donc je suis sur le zéro et ici. C' est là. Moins 48 est celui qu'on voulait, et je change juste cette valeur ici. Et la largeur. Rendons ça plus petit. Moins 65 ne sont pas moins 65 seulement 65%. Donc la hauteur Pas de mauvais. Le sommet émergent est moins 48 pixels, et la largeur était, Je crois que j'ai dit 65%. Alors, allons de l'avant et rafraîchissons ceci et ça reste comme il est censé le faire. Parfait. Ça a l'air plutôt bien. Et puis tu sais quoi ? Regardons ce signe égal. Faisons ce signe égal. Sois au milieu, là. Nous voulons faire une hauteur de ligne, pas le dernier enfant exécuter une hauteur de ligne de 75 pixels. Voyons ce que ça fait, et c'est juste notre signe égal. C' est celui que nous donnons de la hauteur supplémentaire, aussi. Oui, ça a l'air plutôt bien, plutôt bien. Je suis content de ça. Donc, pour le moment, je pense que nous pouvons laisser ceci là où il est, et nous pouvons commencer à travailler avec une partie du JavaScript. Maintenant, il va y avoir toutes sortes de cas bizarres avec JavaScript parce que c'est des mathématiques humaines , où vous savez que vous ne pouvez pas diviser un nombre par zéro. Que se passe-t-il quand on fait ça ? On va s'occuper de toutes sortes de choses là-dedans. Donc, la prochaine leçon nous allons sauter dans le monde JavaScript. 9. Actions de bouton: Ok, on fait tellement de progrès ici. Actuellement, cependant, quand vous cliquez sur l'un de ces boutons, je veux dire, il semble que cela fait quelque chose, mais ce n'est pas le cas en fait. Donc, lorsque nous cliquons sur le numéro cinq, le numéro cinq devrait apparaître ici Lorsque vous cliquez sur Diviser, il devrait enregistrer cinq divisé par. Alors allons de l'avant et faisons en sorte que cela fonctionne réellement. Les premières choses d'abord. Nous devons nous débarrasser de ces nombres aléatoires. Sur quel numéro commence habituellement la calculatrice ? Soit rien, soit zéro. Oui, commençons par zéro Now. Nous pouvons le faire sur plusieurs vidéos ici, et la première chose que nous voulons faire est que nous voulons sélectionner tous ces éléments, puis ajouter un écouteur d'événement . Donc, chaque fois que vous cliquez sur neuf ou un ou effacer, il va faire quelque chose. Donc, nous écrivons ceci dans notre JavaScript tout en bas de sa page. Nous écrivons la balise d'ouverture et de fermeture du script, puis nous pouvons prendre une liste de tous nos alliés. Donc, nous disons constante parce que cette liste ne va pas changer les alliés de ce juste portail pour Ally est égal au sélecteur de requête point de document. Euh, et nous allons avoir tous les éléments alliés de l'UL. Maintenant, si tu te demandes un jour, comment pouvons-nous savoir ce que je fais ? Parce que j'ai l'impression de coder dans le noir. Ce que vous pouvez faire est juste. Cliquez sur, inspecter sur votre page, Accédez à votre console et vous pouvez écrire ceci. J' ai juste copié et collé ça là-dedans. Et quand je tape des alliés et frappe entrée, vous obtenez cette chose appelée une note une liste et j'ai 17 éléments dans votre et vous pouvez le voir quand je passe au-dessus de chacun. Il me dit en fait lequel est lequel, ce qui est assez cool. Donc essentiellement, c'est un tableau ou une liste de tous les l que j'ai sur cette page. Maintenant que j'ai que je peux faire une boucle à travers chacun et ajouter un écouteur d'événement. Donc, je vais faire une boucle à travers chacun avec des points alliés pour chacun. Et c'est javascript moderne aussi, quand nous allons utiliser une fonction aérodynamique de graisse ici. Donc, au lieu d'écrire une fonction comme nous le ferions habituellement avec notre ancienne façon d'écrire javascript , nous ne allons pas le faire. On va juste dire de ne pas utiliser fonctionnel juste passé par quelque chose que ce soit la note. Et ce noeud, chacun d'entre eux est appelé un noeud. Donc passez par cette note et ensuite avec ce nœud, nous pouvons dire aucun point ajouter l'écouteur d'événement. Et que se passe-t-il quand on fait quelque chose ? Donc nous allons dire le plus bas et ensuite celui-ci, nous allons réellement donner une bonne fonction et ne l'appelons pas e parce que ce n'est pas intuitif. Si vous êtes un peu nouveau en JavaScript, nous allons passer dans un événement dans cette fonction particulière. Et d'abord, nous allons dire point d'événement, empêcher la valeur par défaut, et ensuite nous allons obtenir la valeur de tout ce qui est à l'intérieur de cet allié. Donc, c'est une valeur constante est égale à, et puis quelle que soit cette note particulière, alors saisissons celle-ci ici. C' est l'astérisque. Et si nous faisons défiler vers le bas jusqu'au texte intérieur intérieur, intérieur, nous pouvons obtenir cette valeur juste là. Nous le faisons aussi avec n'importe lequel des autres , parce qu'ils sont tous exactement identiques. Ils ont juste un numéro ou une lettre différent là-dedans. Donc celui-là est non, ne faisons pas ça. Faisons le numéro neuf donc c'est le numéro six de notre liste. Cependant, c'est le numéro neuf ici, et si nous regardons vers le bas, nous regardons vers le bas. Le texte intérieur est neuf. C' est ce qu'on veut. Donc, nous avons un point de valeur de noeud texte interne, puis juste au cas où il y aurait des espaces autour d'elle. Donc peut-être que vous avez écrit votre HTML comme cette garniture va juste se débarrasser de cet espace supplémentaire pour vous, et alors nous pouvons consoles journaliser cette valeur maintenant. Cela ne va toujours pas vraiment faire quelque chose d'utile ou de précieux. Rafraîchissons notre page. Et quand je clique sur sept, il est dit sept et vous pouvez vraiment voir que chaque fois que je clique sur un bouton, il apparaît ici maintenant. Une chose à noter ici est lorsque vous utilisez l'événement dot prevent default, il va essayer d'empêcher tout de faire ce qu'il fait normalement. Maintenant, si vous utilisez des liens au lieu d'un élément de liste, vous en aurez probablement besoin, ce qui signifie que vos animations ne fonctionneront pas. Plus je clique dessus, rien ne se passe. Mon bouton ne bouge plus. Donc si je supprime ceci, sauvegardez ce fichier, revenez ici. Rafraîchissez maintenant, il est écrit cinq. Maintenant, il est écrit huit. Et maintenant, les boutons sont en train de se déplacer vers le bas aussi. Alors soyez conscient de cela. Si vous utilisez ces articles comme je le suis, vous n'avez rien à craindre. Vous pouvez ignorer la dernière minute de ce dont je parlais. Ensuite, nous voulons vraiment obtenir le résultat ici. C' est trop grand. Nous voulons obtenir ce résultat, et nous voulons y ajouter ce chiffre. Alors allons de l'avant et saisissons ce résultat aussi. Donc corns résultent, et j'utilise un signe de dollar ici juste à titre d'exemple. Vous n'avez pas à le faire, mais à titre d'exemple, le signe du dollar signifie généralement que vous attrapez quelque chose du modèle d'objet de document, ce qui signifie que nous devrions en utiliser un ici et ici aussi. Le résultat va être le sélecteur de requête de point de document, et puis nous voulons juste saisir ce résultat. Et je pense qu'on l'appelait résultats de classe. bons résultats de classe. Oui. Et ce que nous pouvons faire, c'est simplement écraser ce texte de résultat. C' est maintenant que nous pouvons dire que le texte interne du point de résultat est égal à la valeur. Sortons de ce journal de la console et actualisons votre page, et cela dira sept, cinq, puis neuf, puis zéro, et puis ainsi de suite et ainsi de suite et ainsi de suite. On peut continuer à faire ça tout ce qu'on veut. Non, je pense que c'est assez pour cette vidéo en particulier dans la prochaine. Allons de l'avant et ajoutons effectivement une logique où nous pouvons dire huit, divisé par neuf ou zéro plus quatre au lieu d'avoir juste un caractère à la fois apparaître. 10. Calculateur opérationnel: d' accord. Là où nous avions arrêté était Chaque fois que nous appuyons sur un bouton, il supprime la valeur qui y était et montre la nouvelle valeur là-haut, qui est une sorte de ce que nous voulons. Mais on est sur un pendentif. Donc, si je frappe un et puis au numéro 12 devrait dessiner pas un, puis deux, nous voulons également comprendre comment utiliser le signe égal et toutes ces autres choses et assurez-vous que si quelqu'un frappe la mer, qu'il efface juste la réponse. Donc, nous allons ajouter tout cela dans cette vidéo particulière. Maintenant, dans la dernière vidéo, nous avons dit que le point inter tax résultat sera la valeur. Débarrassez-vous de ça parce que ça va juste changer le nombre encore et encore et encore . Il va en fait remplacer les orteils à chaque fois. On ne veut pas ça. Ce que nous voulons à la place est de saisir le texte de résultat. Donc quoi qu'il y ait ici, on doit l'attraper maintenant. Nous ne savons pas s'il y aura des espaces ou non, alors nous allons devoir le tailler aussi. Donc, il est de const Le texte de résultat est égal au résultat de la coupe de point interne de texte et tout qui va faire est de saisir ce résultat ici ce sélecteur de requête. Il va saisir ceci et va saisir la valeur là-dedans. Donc, si c'était l'espace cinq, ça apparaîtrait toujours comme le numéro cinq pour nous, c'est ce que nous voulons. Commençons maintenant par ajouter une logique simple chaque fois que nous avons quelque chose qui peut arriver à travers de nombreux chemins. Si je disais que tu pouvais aller à gauche ou à droite, tu pourrais faire trois actions dans ta vie. Si vous conduisiez sur une route ou marcher sur un chemin calculateurs pas différent. Les événements pourraient être clairs. Vous pourriez avoir une sorte d'application mathématique réelle ici. Vous pourriez dire tout ce que je mets là-dedans, converti en réponses réelles ou une solution. Ou peut-être que vous ajoutez juste un nombre au texto de résultat ici. Donc vous êtes en attente de ce numéro. Commençons par la forme la plus simple. Je commence par clair, clair chaque fois que nous appuyons sur le bouton clair. Tout ce qui est censé faire, c'est rendre l'écran vide. Donc maintenant, nous pouvons dire si le texte de résultat est égal à voir et je reçois ce voir d'ici, qui est aussi juste ici. Si c'est égal de voir ce qu'on va faire ? Nous allons changer ce texte interne de point obtenu pour que je suis effacé parce que c'est une calculatrice odieuse, Apparemment, et puis nous allons retourner True. Et tout ce que le retour fait est parce que c'est une fonction. Chaque fois que la fonction s'exécute, code va aller de haut en bas. Et quand il atteint ce retour, mot clé va dire, Hey, s'il y a quelque chose en dessous comme ça, n'exécutez aucun de ces trucs. C' est dire que vous appuyez sur le mot clé retour cesser de courir tout en dessous. C' est juste sortir sur le fonctionnel ensemble. C' est ce qu'on veut. Donc, cela va être un exemple très étrange. Je viens de me rafraîchir, donc si je frappe huit, on voit que rien ne se passe parce qu'on s'est débarrassé de cette partie où il dit que je pense qu'un bouton met le numéro ici. Mais si on clique sur clair, rien ne se passera. Et en fait, je ne vais pas y aller si vite. J' ai fait une erreur de logique. Texte du résultat d'été. C' est ce que je cherche ce que nous voulons, en fait, c'est la valeur du bouton. C' est le bouton qui appuyait, donc c'est censé être une valeur sur. Faisons en sorte qu'on le compare toujours. Donc, si vous écrivez un Casey inférieur ou un Casey supérieur, cela fonctionnera toujours pour vous. Point de valeur en minuscules Assurez-vous qu'il s'agit d'une minuscule, donc il va prendre la lettre majuscule C en faisant une minuscule. Et si elle est égale à une minuscule, alors cela changera le résultat dans son texte. On y va. Voici un meilleur exemple. Donc, chaque fois que je me rafraîchis et clair dit que je suis effacé maintenant c'est odieux. On veut juste l' effacer, effacer cette valeur . Juste comme ça. Maintenant, c'est le bouton clair. Mais si on en fait huit divisé par cinq, rien n'apparaît ici. Donc, nous devons nous assurer que ça arrive. Donc, ce que nous pouvons faire est que nous pouvons saisir ce résultat et juste un rappel que nous pouvons saisir ce résultat existant et nous pouvons y ajouter quelque chose. Nous pouvons modifier la valeur. Donc ce que nous disons ici, c'est un stylo, la valeur. Sauf si c'est une lettre C. Alors je vais aller de haut en bas. Si c'est une lettre C qui va retourner vrai, ça ne va rien faire. Si c'est autre chose, alors il va prendre ce résultat et va y ajouter la valeur. Huit divisé par cinq va être divisé par cinq dans nos domaines de résultats. Allons de l'avant et sauvegardons cela et démontrons ce huit divisé par cinq. Maintenant, vous pouvez voir que nous avons un zéro de départ là-dedans, donc c'était un peu un problème. Mais vous pouvez voir que nos chiffres apparaissent côte à côte maintenant. Et c'est une bonne nouvelle. C' est ce que nous voulons. On veut quelque chose comme ça ici. Cela signifie qu'on peut commencer à faire des maths. Donc si on a réglé ça et qu'on en a fait sept fois sept et qu'on finit par frapper des égaux qu'est-ce qui va se passer ? Ok, eh bien, maintenant nous avons un autre cas de bord. Nous avons un autre chemin à parcourir quand chaque coup est égal. Egals ne devrait pas apparaître là-dedans. Il devrait faire les calculs pour vous. Allons de l'avant et ajoutons ça là-dedans. Donc maintenant, nous pouvons dire si cette même valeur est égale à un signe égal. Nous pouvons maintenant dire que le texte interne du point de résultat est égal à une solution de certains, d'un certain type de solution. On n'a pas encore ce que c'est. Allons de l'avant et créons cette solution, cependant. Donc c'est de laisser la solution parce que finalement nous pourrions peut-être changer. Donc nous avons utilisé Const jusqu'à présent. Counts signifie que vous ne pouvez pas modifier cette valeur dans la variable. Laissez signifie que vous pouvez. Donc c'est changer ça. Et cette solution va être maléfique. Quel que soit le point de texte interne du point de résultat, aucune garniture de point intertextuel html ne sera, donc il va saisir ce résultat. Quoi qu'il en soit actuellement dans la section des résultats ici, il va saisir ce texte intérieur. Ça va le couper. Maintenant, la chose est que peut réellement voir que nous avons écrit celui-ci est déjà. Nous tapons simplement le texte de résultat. C' est la puissance des variables. On n'a pas à taper la même chose deux ou trois fois. Nous pouvons le taper une fois et l'utiliser à nouveau. Enfin, nous devons retourner vrai et la raison pour ça est parce que si nous ne le faisons pas, nous aurons le signe égal qu'il va faire sept fois. Sept. Ça va se montrer. Montrez-nous 49 sur, puis va ajouter ce signe égal. On ne veut pas ça. Nous voulons qu'il ne montre jamais le signe égal. Fais juste les calculs. Donc maintenant, si on fait sept fois sept bien, on a un 07 là-dedans, mais c'est bon, on pourra s'en occuper plus tard. Est égal à 49 est égal à maintenant. Nous sommes très proches, mais nous avons un problème. Chaque fois que nous recommençons au lieu de zéro, il est dit 07 Et chaque fois que nous multiplions, nous avons signe inégal à la fin, dit Attachez ceux, Et ce sera suffisant pour cette leçon particulière. Allons-y et débarrassons-nous de ce zéro. Donc, nous pouvons dire si le texte de résultat est égal à zéro. Changez le point intertexte des résultats à rien. Maintenant, nous ne allons pas dire revenir ici parce que nous voulons simplement le remplacer et laisser tout le reste se produire. Sauvons ça et rafraîchissons, et maintenant, parce que ça va commencer par zéro, je vais frapper sept. Il va vous passer par ici, disons, Oh, vous avez atteint 70 le nombre qui est actuellement dedans est zéro. Alors effacez-le et puis il va essayer de faire ces ALS condition. Ils ne seront pas une correspondance, et ensuite ça va ajouter le nombre que je voulais être ajouté ici. Donc quand j'ai frappé sept, ça ne dit plus 07, ce qui est vraiment, vraiment sympa. C' est donc un problème résolu. La prochaine, c'est que si je faisais sept fois huit, on avait ce poste de signe égal. Cependant, cela peut avoir déjà résolu lui-même parce que nous nettoyions notre code. Et parce que nous faisons des calculs appropriés maintenant, ça va commencer à fonctionner comme nous le voulons. Teoh. Alors, dans la leçon suivante, allons de l'avant et ajoutons un peu plus de logique ici, car que se passe-t-il si j'efface ça ? Et j'ai fait 10 divisé par zéro ? Qu' est-ce que tu crois qu'il va arriver ? Nous allons avoir besoin de gérer ce scénario 11. La calculatrice terminée: Ok, en partant de la dernière leçon. Je t'ai laissé sur un cliffhanger, et j'ai dit : Que se passe-t-il quand tu fais 10 divisé par zéro. Dans la vraie vie, vous ne pouvez pas faire 10 divisé par zéro. Qu' est-ce qui se passe, vous obtenez l'infini. C' est en fait en JavaScript. C' est un type de données, mais aussi ce n'est pas mal. Le problème, c'est si je tape cinq ou huit ou quelque chose comme ça, ça continue à dire l'infini, on ne veut pas ça. Et si on efface ça et frappe les égaux ? Nous sommes aussi indéfinis. Nous ne le voulons pas non plus, parce que notre logique ne le cherche pas. Ce n'est pas à la recherche du mot indéfini ou infini. Donc, ce que nous devons faire est de vérifier si le résultat est nul. Si ce n'est pas défini ou si c'est l'infini, suffit de le réinitialiser pour qu'il soit vide. Donc, nous pouvons le dire très facilement en donnant un ou conditionnel ici ou ainsi. Le résultat. Taxes égales à zéro, ou c'est les deux tuyaux. Le texte de résultat est égal à indéfini, ou c'est les deux tuyaux ou le texte de résultat est égal à l'infini et qui avait une majuscule I. Il va prendre tout ce résultat dans son texte est, et il va juste le réinitialiser à rien. C' est ce qu'on veut. Allons-y et donnons un coup de feu maintenant. Et si je frappe juste égal, rien ne se passe si je frappe, Clear me donne indéfini. Et Hey, regarde ça. Ça disparaît maintenant. Je peux aussi faire 10. Divisé par zéro est égal à l'infini. Et si je clique, je ne sais pas cinq. Eh bien, ça montre encore Infinity. Cela signifie probablement que j'ai fait un type de quelque part l'infini cloué. Connaissez votre moi. Je sais que quand je fais des fautes de frappe, je les fais tout le temps. Essayons encore ça. 10 divisé par zéro est égal à l'infini, puis appuyez sur cinq. On y va. Maintenant, nous avons une calculatrice de travail. Nous pouvons également utiliser des points décimaux. Nous n'avons pas encore exploré cela, donc nous pourrions faire 12,5 plus 15,5 est égal à 28 Donc les points décimaux fonctionnent automatiquement pour nous aussi. D' accord. Et c'est ainsi que vous créez une calculatrice pour que nous puissions maintenant gérer toutes sortes de situations que nous pouvons gérer. Effacer, multiplier, diviser les nombres décimaux plus égaux et soustraire. On fait toutes ces choses à l'intérieur. Ou est-ce de 19 à 45 ? Donc quelque part autour de 25 lignes de code ish, nous avons fait une calculatrice en JavaScript, et la dernière chose que nous devons vraiment faire est de les déplacer dans leurs propres fichiers parce que maintenant vous savez qu'il n'y a rien de mal à ce que nous faisons. Mais comme une meilleure pratique, nous devrions déplacer le JavaScript CSS NZ dans leurs propres fichiers. Alors, dans la prochaine vidéo, allons-y et faisons-le. 12. Nettoyage de code: Ok, Dokey. On a un tas de code ici. Nous avons HTML CSS et JavaScript, et la façon dont nous l'écrivons n'est pas fausse. Mais nous pouvons le faire d'une meilleure façon. Donc tout notre CSS, ce que je vais faire est de prendre que de la ligne 8 tout le long de la ligne 88 je vais couper ça juste ici. Et débarrassons-nous de ces trucs qui se trouvent pour qu'on puisse voir ça. Et nous devons créer un nouvel élément ici appelé Link. Et la relation va être une feuille de style. Et nous allons lier cela en utilisant H ref à un fichier appelé style dot CSS. Et ça rime un fichier appelé Style. C' était involontaire. Mais restez avec ça parce que je l'aime. Maintenant, nous devons créer un fichier appelé style dot CSS. Les premières choses d'abord. Ça trompe beaucoup de gens. Donc, cela n'existe pas sur mon ordinateur en ce moment, donc si je retourne ici, rafraîchir, vous pouvez réellement voir que tout le CSS est parti. Ok, donc si je viens d'ouvrir dans mon navigateur, je viens de l'actualiser là-bas et vous pouvez voir que mes styles ne sont plus appliqués. C' est bon. Et si vous allez voir votre consul ici et que vous voyez, euh, parfois, il y a des choses en fonction du navigateur, bien sûr. Mais parfois, vous verrez comme un 404 Il dira que le style que CSS n'existe pas si c'est le cas, mais il existe. Les chances sont votre style que CSS n'est tout simplement pas dans le même dossier que votre index dot html. Maintenant, dans mon cas, rien ne s'affiche. Et si je passe au réseau et que je touche rafraichir, absolument rien ne se passe. n'y a rien ici, quelle que soit la charge des orteils. Et cela en soi est en fait un problème. C' est dire qu'il n'y a pas de style qu'elle essaie de charger du tout. Donc, ce que je vais faire ici est juste créer un nouveau fichier et coller ce que j'avais là, et je vais enregistrer cela comme style sur point CSS et j'ai ces deux fichiers côte à côte. Donc, dans le même dossier, j'ai index dot html. J' ai le style point CSS. Maintenant, si je retourne ici et actualise votre page devrait être stylée comme vous attendiez à être stylé, Mais aussi, vous devriez voir des choses ici avec dans votre onglet réseau et vous pouvez réellement voir que vous attendiez connu que vous étiez l ou fonction de filtre mais trouvé pro Gee, I d. C'est en fait OK. C' est parce que nous soutenons Microsoft Radiance pour I E 69 dont nous pourrions réellement nous débarrasser parce que assez connu dans le monde pour soutenir Internet Explorer 69 plus. Donc, c'est essentiellement notre CSS et un fichier externe. Maintenant, nous devons aller dans notre index dot html et saisir ce script toutes ces choses. Passons de la ligne 37 à la ligne 62 et coupons. Et celui-ci peut être des sources de script égales à, et nous appelons ce point de script Js et mettons ceux-ci sur la même ligne. Maintenant, quand je rafraîchirai ça, rien ne va se passer. C' est parce que nous avons pris tout notre javascript, et quand nous actualisons notre page ici, nous pouvons réellement voir. Firefox dit. Le chargement a échoué pour le script avec la source de, puis le point de script Js. Donc, si vous voyez quelque chose comme ça avec votre jazz ou votre CSS, cela signifie qu'il ne peut tout simplement pas trouver le bon chemin. Et donc nous voulons juste nous assurer que Script Js est dans le même dossier que notre comme notre point d'index html. Donc, il est de créer un nouveau fichier. Payons le code étoile ici et nous pouvons enregistrer cela comme point de script Js. Et quand nous retournerons ici, Firefox cessera de se plaindre parce qu'il se charge parfaitement. Et j'étais calculatrice continue le travail des orteils. Et avec tout cela, nous avons maintenant fait une calculatrice avec HTML en moins de 40 lignes de code 39 lignes de code. Excluant ceci et ceci comme ça 37 lignes de code HTML. Nous avons une calculatrice en moins de nous débarrasser de ce filet et ça et ça et c'était comme cinq espaces là-dedans et dans comme, 22 ish lignes de code réelles. Nous avons une calculatrice JavaScript fonctionnelle et dans environ 80 lignes de CSS, nous avons une calculatrice vraiment, vraiment agréable. Donc, la fin de la journée, ce n'est en fait pas beaucoup de code, et nous avons fait quelque chose de vraiment, vraiment sympa 13. Résumé: mon très cher développeur frontal. Tout d'abord, merci d'avoir suivi ce cours sur le partage des compétences. Vous avez un projet et chaque projet de partage de compétences. Chaque cours de partage de compétences a une petite section de projet dans laquelle vous pouvez réellement créer un projet approprié. Vous pouvez partager des captures d'écran, ou vous pouvez mettre tout ce code dans un code pen dot io et vous pouvez partager ce lien d'intégration. Quoi qu'il en soit, assurez-vous d'ajouter votre projet de partage de compétences. Ah, mais je ne veux pas que tu utilises le code source que j'ai. Ne faites pas une calculatrice ennuyeuse comme ça. Essayez d'utiliser quelque chose d'un peu plus intéressant. Donc, au lieu de comme un fond radial gris, peut-être le mettre sur un bureau au lieu d'une calculatrice à l'allure grise. Peut-être qu'il ressemble plus à du plastique ou utilise une image de fond qui ressemble à du plastique répétitif ou quelque chose. Vous pouvez changer la façon dont vos boutons agissent et comment ils ont l'air d'une houle dernière mais pas des moindres, Quoi que vous fassiez pour modifier votre calculatrice, assurez-vous de signer votre nom dessus car ce sera votre travail. Une fois que vous avez votre projet final, n'oubliez pas de le partager dans votre section de partage de compétences sur, et je peux jeter un coup d'oeil et vous donner des commentaires et toutes sortes de choses. Et enfin, si vous aimez mon style d'enseignement, n'oubliez pas que vous pouvez toujours me suivre sur le partage de compétences. Consultez certains de mes autres cours. Si vous voulez en savoir plus sur HTML ou CSS ou JavaScript ou tout ce que vous avez vu dans ce cours particulier, vous pouvez également accéder à mon profil. J' ai une masterclass HTML ou, euh, il est appelé le développeur HTML ultime ont une masterclass CSS appelée la masterclass CSS et JavaScript pour les débutants et JavaScript, des cours novices aux cours ninja. Donc, si jamais vous vous posez des questions sur JavaScript moderne, si certaines de ces choses n'avaient pas de sens et que vous voulez en apprendre davantage, j'ai vos arrières. Si vous ne savez pas à propos de disons Grady INT radial ou boîte d'ombres, c'était une bonne, parce que c'est ah, déclaration CSS vraiment bizarre pour travailler avec. Si vous êtes intéressé à apprendre des choses comme ça, vous pouvez consulter les cours de masterclass CSS. Mais j'ai plusieurs autres cours sur d'autres sujets aussi, tels que Python. Mais bien sûr, et comme toujours, il n'y a pas de pression pour aller apprendre tout ça tout de suite. Html. CSS et JavaScript Ils sont là depuis plus de 20 ans, et ils ne vont pas disparaître bientôt. N' oubliez pas de créer votre projet de partage de compétences. Allez-y, jetez ça dans votre projet de partage de compétences pour que je puisse y jeter un coup d'oeil. Ah, et aussi vous pouvez le partager avec la communauté et regarder les projets des autres et obtenir de inspiration pour voir ce que vous aimez et ce que vous n'aimez pas. Merci encore d'avoir suivi ce cours, et je te verrai dans un autre.