Javascript Fun : construire une application de suivi en cours !

1. Bienvenue dans le cours !: Hé, bienvenue dans ce cours. Si vous êtes un débutant en développement web, allez, alors il suffit de sauter et de construire des projets amusants. Tu es venu 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. Quand il s'agit d'utiliser n'importe quel framework, n'importe quelle table, n'importe quelle bibliothèque, ou n'importe quel modèle, à la place, nous allons tout construire complètement à partir de zéro, étape par étape pour vous montrer comment ces technologies gratuites toutes travailler ensemble. Le projet de cette classe est une application [inaudible] en cours d'exécution, où l'utilisateur peut enregistrer le nombre de miles qu'il a parcourus chaque jour. Nous avons un champ d'entrée en haut, où nous pouvons enregistrer le nombre de miles et ceux-ci seront enregistrés comme valeurs des sept derniers jours. Si vous ajoutez une seconde, celle-ci sera ensuite ajoutée sur la droite et elle stocke les sept dernières valeurs que nous entrons. Toutes ces valeurs sont ensuite stockées juste en dessous. On peut voir le nombre total de kilomètres. Ce total est ensuite divisé par le nombre d'entrées, pour nous donner une moyenne aussi, le long de ce qui est sur l'entrée la plus élevée que l'utilisateur a saisie pour cette semaine aussi. En plus de cela juste en dessous, nous allons également ajouter un cercle de progression, où nous pouvons ajouter une cible hebdomadaire, puis ce cercle de progression sera mis à jour pour chaque valeur ajoutée par l'utilisateur. Cela nous donnera une belle rétroaction visuelle de la façon dont la semaine va aussi. Ce projet est entièrement créé à partir de zéro. Nous allons utiliser HTML pour l'interface utilisateur, nous allons ajouter la police personnalisée, nous allons ajouter le style, nous allons tout apprendre sur les fondamentaux JavaScript tels que les fonctions, création de variables et de constantes, nous allons travailler avec des tableaux, nous allons créer des calculs, nous allons travailler avec le DOM, nous allons travailler avec les événements, les instructions conditionnelles, et tous les principes fondamentaux dont vous aurez besoin en JavaScript. Votre cercle de progression sera également entièrement personnalisé. Nous allons utiliser JavaScript, et aussi CSS pour garder cette mise à jour. Merci d'avoir vérifié 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 cocher une autre conférence. Prenez le temps de comprendre chaque leçon. revue le code que vous écrivez et réfléchissez à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et 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 non seulement je vais y jeter un œil, mais il inspirera également les autres étudiants. Plus d'informations sur le projet de classe se trouvent dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. C'est dans cet esprit que j'ai hâte de voir ce que vous créez et que vous téléchargerez ici sur Skillshare. 3. Créer l'interface utilisateur: Voici un aperçu de ce que nous allons construire dans cette série de vidéos à venir. Nous allons construire une application de piste en cours d'exécution où l'utilisateur peut se connecter chaque jour, nombre de miles qu'il a parcourus. Par exemple, nous pourrions ajouter une valeur pour aujourd'hui telle que 1.9, et ceci est ensuite ajouté à la fin de ce tableau. Chaque jour, nous pouvons ajouter une valeur, et nous enregistrerons les valeurs des sept derniers jours. Chaque fois que j'ajoute de la valeur, nous allons remplacer l'un de ces espaces réservés, ajoutons le nouveau à l'intérieur d'ici, et tout cela a été poussé hors du bord ici, donc nous avons eu les sept derniers jours. faisant défiler vers le bas, nous avons une zone où nous pouvons vérifier toutes nos statistiques. Donc juste le total, qui se déroulera dans cette semaine particulière, la distance moyenne, et aussi la valeur la plus élevée enregistrée pour cette semaine particulière. Tout en bas, nous pouvons également ajouter une cible à l'intérieur du code où nous pouvons dire combien de miles nous voulons courir pour cette semaine particulière. Ceci est ensuite mis à jour chaque fois que j'ajoute une nouvelle valeur, puis nous voyons ce beau cercle de progression vers le bas. Ajoutons la nouvelle valeur, et cela est ensuite ajouté à notre total et également mettre à jour le cercle de progression. Nous allons commencer dans cette vidéo en créant l'interface utilisateur avec HTML, et pour ce faire, nous pouvons également utiliser cette image en haut, qui est en SVG. Vous pouvez bien sûr trouver le vôtre, mais si vous voulez utiliser le même, j'utilise dans le cours, dirigez-vous vers ce lien sur GitHub, qui est chrisdixon161/fun-javascript-projects.com. Dans ce référentiel, vous trouverez tout le code fini pour chacun de ces projets. Si vous vous dirigez vers le Tracker de course, vous verrez également un runner.svg. Pour l'utiliser à l'intérieur de notre projet, nous devons cliquer sur l'icône de code, et c'est le code dont nous avons besoin juste ici. Nous allons maintenant commencer par créer notre projet et nous y reviendrons très bientôt. Allons sur le bureau. Je vais créer un nouveau dossier. Je vais nommer ça le tracker de course. Ouvrez le code Visual Studio et ensuite nous pouvons glisser sur nos projets. La première chose dont nous avons besoin est de créer une page index.html, ce sera pour notre interface utilisateur. Créons un nouveau fichier à l'intérieur de notre dossier, c'est le index.html. Si vous utilisez le code Visual Studio, vous pouvez utiliser le raccourci, qui est html:5, et appuyer sur Entrée. Cela nous donnera ensuite nos points de départ pour notre page HTML. Je peux également ouvrir cela dans le navigateur en cliquant sur l'onglet, copier le chemin, puis coller cela à l'intérieur du navigateur. Comme toujours, vous pouvez double-cliquer sur le fichier index.html, qui est également contenu dans notre dossier de projet. En travaillant à partir du haut, nous allons inclure ce SVG dès le début. Pour ce faire, je vais créer une section div, qui va avoir la classe de logo. À l'intérieur de cette section, nous pouvons maintenant utiliser notre SVG. Je vais copier le code de GitHub, coller ceci dans. En descendant ; la prochaine chose dont nous avons besoin pour notre projet est la section d'entrée. Nous allons créer ceci avec une étiquette, puis une entrée de nombre, puis un bouton pour soumettre ce formulaire. Juste en dessous de notre section logo, ou le div wrapper, créez notre formulaire. Nous n'avons pas non plus besoin de l'action, nous allons commencer par un label. Cette étiquette va être pour une entrée avec l'ID d'entrée, puis le texte va être le nombre de miles aujourd'hui. Vous pouvez également changer cela pour être des kilomètres, ou toute autre valeur que vous voulez utiliser, c'est complètement bien aussi et cela n'affectera pas cette application. Une balise de rupture, mettez-la sur une nouvelle ligne. Ensuite, notre entrée, qui va avoir le type de nombre, l'identifiant d'entrée qui va correspondre à notre étiquette, puis un attribut d'étape de 0,1, ce qui signifie que nos valeurs à l'intérieur des entrées de nombre augmenteront de la valeur de 0,1. Après cela, une nouvelle balise de pause, sorte que nous pouvons ensuite ajouter notre bouton de soumission. Le bouton a besoin du type de soumission qui lui permettra de soumettre notre formulaire. Pour le moment, nous n'avons pas de JavaScript en place pour profiter des nombres que l'utilisateur saisit, mais pour l'instant nous pouvons ajouter ces tirets comme valeurs d'espace réservé. Nous allons le faire en créant un wrapper pour la section, créant une liste non ordonnée, et chacune de ces valeurs sera un élément de liste. Sous notre forme, une règle horizontale juste pour diviser la section. Les éléments de section sur la classe, donc nous pouvons utiliser cela à l'intérieur du CSS va être l'EntrieWrapper. Le titre des sept derniers jours. Comme nous venons de le mentionner, et des listes non ordonnées pour stocker toutes ces valeurs, qui peuvent également avoir un identifiant, donc nous pouvons cibler cela à l'intérieur de JavaScript. Pour l'instant, notre valeur d'espace réservé va simplement être un tiret. Puisque nous travaillons avec les sept jours précédents, je vais dupliquer ça pour les articles de la liste de la septième année, et regardons ça. Ensuite, nous avons une section de données qui sera toutes les statistiques de notre application. Nous allons créer une section et trois divs séparés, et chacun de ces divs va avoir un titre et aussi une valeur. Nous pouvons également écrire ceci dans une nouvelle section de notre HTML. Une section peut avoir une classe de données, puis notre premier div pour notre section totale. Mais chacun de ces titres sur la gauche, je vais envelopper cela dans un élément p, puis une travée sur la droite. Le premier p est pour le texte de total, puis un deux-points. La première plage, vous pouvez même vivre est vide, ou mis dans une valeur d'espace réservé, cela aura également besoin d'un identifiant, donc nous allons mettre à jour ceci en JavaScript. Après cette div, nous pouvons alors nous concentrer sur notre section de distance moyenne. Nouveau div, les éléments p, et le texte pour celui-ci est la distance moyenne. La portée pour celui-ci va également avoir un identifiant unique, qui va être la moyenne. Encore une fois, vous pouvez également ajouter un numéro d'espace réservé, mais cela est complètement facultatif. La troisième section concerne la valeur hebdomadaire élevée. Nos éléments p, nous sommes allés cette semaine haut. Notre étendue avec l'id, qui va être élevé, puis une valeur par défaut. Jetons un coup d'oeil à ça. La plupart de l'interface utilisateur est maintenant en place, mais nous avons juste besoin de jeter un oeil en bas et ensuite ajouter notre cercle de progression. Tout ce cercle de progression va dépendre du JavaScript et aussi du CSS, nous ajouterons dans les prochaines vidéos, mais pour l'instant nous pouvons créer une étiquette et aussi une section div, donc nous pouvons l'utiliser plus tard dans le cours. La dernière section vers le bas tout en bas, vous pouvez ajouter une classe de progression. Ensuite, notre niveau 3 se dirige vers le haut qui est la cible hebdomadaire. Cette section cible hebdomadaire aura également deux valeurs distinctes. Nous aurons le nombre total de miles pour cette semaine, puis une barre oblique suivie de la cible. Pour ce faire, je vais ajouter deux éléments de span séparés. Le premier, cela va avoir un id de progression total, une valeur d'espace réservé de zéro après la plage, ajouter une barre oblique avant. Ensuite, un deuxième élément span, ajoutons une valeur par défaut de 25, et aussi un id qui va être égal à target. Après ces deux travées, nous devons également ajouter le texte des miles à la toute fin après notre dernière période. Ajoutons ceci sur leur propre ligne pour qu'il soit plus lisible, voilà. Assurez-vous également que tout cela est contenu à l'intérieur du titre de niveau 3, enregistrez et rechargez le navigateur. Nous avons un titre, et la dernière chose à faire en dessous du titre de niveau 3 est d'ajouter un nouveau div, qui va être pour notre cercle de progrès. Nous pouvons ajouter cela juste avec une classe de wrapper cercle de progression. Comme nous l'avons mentionné précédemment, nous n'avons pas besoin de faire autre chose avec cette section, cela va simplement être un div réservé, nous allons traiter cela plus tard en utilisant CSS et aussi JavaScript. Pour l'instant, nous allons appeler cette vidéo faite, notre interface utilisateur est maintenant en place, et dans la prochaine vidéo, nous allons la rendre beaucoup plus agréable en utilisant CSS. 4. Polices et style: Rendons maintenant cette application un peu plus jolie en utilisant CSS et aussi en ajoutant une police Google. La première chose si nous ouvrons la barre latérale et allons dans notre projet, créons le styles.css, puis lions cela dans la tête de notre index.html. J' ai déjà choisi une police de Google Fonts, mais vous pouvez choisir n'importe quelle police différente que vous préférez. C' est celui que je vais utiliser, qui est sur la page d'accueil, mais vous pouvez choisir ou rechercher une valeur différente en haut. Pour inclure cela, tout comme le projet précédent, allons cliquer dessus et puis nous pouvons sélectionner l'un des poids de police. Je vais aller pour la version 300, la 500 et une version 700 audacieuse. Intégrez, puis copions ce lien que vous pouvez placer dans notre page d'index, juste au-dessus de notre feuille de style, puis notre famille de polices est placée dans notre styles.css. Nous pouvons ajouter cela dans la racine sous l'élément HTML. Collez ceci dans et nous pouvons également sélectionner une taille de police racine. Je vais aller pour 10 pixels. Vous pouvez également définir une couleur d'arrière-plan. Ce sera pour la section derrière notre contenu. Si nous étirons le navigateur sur la version finale, c'est la couleur que nous voyons en dehors de la section du corps. Le volume que je vais utiliser est 2d3740. Vérifions que cela fonctionne et notre feuille de style a lié correctement. Rechargez cela et nous voyons la couleur de fond, nous voyons une police différente et aussi la taille de la police a pris effet. La raison pour laquelle nous voyons tout ce fond plutôt que juste à l'extérieur, c' est parce que nous n'avons pas encore défini de couleur pour notre section corporelle. Faisons ça maintenant. Tout d'abord, un rembourrage qui va vous donner un peu d'espacement autour de nos bords de 1rem, qui est de 10 pixels, puis un fond pour la section. Le volume que je vais utiliser est 1c262f. La police est un peu difficile à lire avec ce fond sombre, donc nous pouvons également changer la couleur de la police. Nous pouvons à nouveau utiliser une valeur hexadécimale, tout comme nous avons utilisé ci-dessus, ou nous pouvons également utiliser une couleur RGB, il suffit de sélectionner l'une de nos valeurs. Une couleur RVB est un moyen de combiner des valeurs rouges, vertes et bleues pour créer une couleur particulière. Je vais prendre une valeur rouge de 230, 225 pour le vert et 225 pour le bleu. Cela va nous donner cette couleur blanc clair, qui prendra effet pour toute notre section du corps. Pour en savoir plus sur ces valeurs de couleur particulières, nous pouvons effectuer une recherche pour le sélecteur de couleurs HTML. Il y a plusieurs sélecteurs de couleurs que vous pouvez voir en ligne, ou ce par défaut qui vient avec le moteur de recherche. Nous pouvons voir pour n'importe quelle nuance que nous sélectionnons, avoir une valeur rouge, verte et bleue, ainsi que la valeur hexadécimale équivalente que nous avons examinée juste au-dessus, ainsi que quelques valeurs différentes ici aussi. Ce n'est que quelques façons différentes que vous pouvez utiliser pour sélectionner des valeurs de couleur. Suivant retour dans la section du corps, la largeur de 90 pour cent juste pour restreindre la largeur globale du projet, et aussi centrer cela avec marge zéro auto. Rappelez-vous, si nous n'avions pas cette valeur automatique, cela sera repoussé. Vérifions ça. Cela sera poussé sur la gauche du projet. Mais maintenant, avec la valeur auto à gauche et à droite, cela s'est maintenant divisé également des deux côtés. Après le corps, laisse aller pour la section logo, qui est tout en haut. Nous pouvons le détecter avec le centre text-align. La couleur de remplissage actuelle de notre image en haut ne se distingue pas trop bien sur cet arrière-plan plus sombre. Tout comme nous le voyons dans la version finale, nous pouvons également changer cela aussi. Nous pouvons également cibler cela dans le CSS, ou nous pouvons le faire dans notre index.html. La façon de le faire à l'intérieur de notre élément SVG, est de jeter un oeil à la section chemin. Chacune de ces sections a un attribut de remplissage que nous pouvons modifier. Je veux changer cela pour être une valeur de gris, rafraîchir, et maintenant la section de tête est grise, et nous pouvons également faire la même chose pour la section du corps. De retour à notre feuille de style, nous allons maintenant passer à la section du formulaire, qui va être l'emballage de notre étiquette, les entrées du formulaire et aussi le bouton de soumission. Tout ce que nous avons à faire pour ce wrapper est de mettre la ligne de texte au centre. Nous devons rendre l'étiquette un peu plus grande, alors ciblons ça. La taille de la police, je veux aller pour 1.8rems, ce qui est l'équivalent de 18 pixels vers le bas à l'entrée numérique. Cibler d'abord toutes les entrées de formulaire, puis à l'intérieur des crochets, nous pouvons sélectionner notre type particulier de nombre. Aucun type de nombre n'est particulièrement important pour ce projet puisque nous n'avons pas de multiples entrées, mais de cette façon nous sommes couverts quatre un projet devait croître à un stade ultérieur. Par défaut, l'entrée de formulaire n'héritera pas du reste de la famille de polices. Nous pouvons voir que c'est une police complètement différente du reste du projet. Famille de polices, nous pouvons définir ceci pour être hérité. Héritons maintenant le style de police du reste du projet. L' arrière-plan, pour garder les choses cohérentes. Prenons également la même couleur RVB, que nous avons utilisée pour le texte plus clair. La largeur de 80 pour cent. Un certain espacement sur le haut et le bas, 1rem, puis une valeur de zéro sur la gauche et la droite. Pour agrandir aussi l'entrée de formulaire réelle, nous pouvons ajouter un peu de rembourrage à l'intérieur. 0.8rems en haut et en bas, puis zéro à gauche et à droite. Supprimez la bordure par défaut avec la bordure none, une taille de police pour le rendre un peu plus grand lorsque vous utilisez des entrées ou une valeur. Allons pour nos 1.2rems et aussi définir le text-align pour être centré. En descendant, la prochaine chose que nous avons est ce bouton de soumission de formulaire. Pour faire cela comme la version finie, nous allons ajouter une couleur d'arrière-plan. Nous allons ajouter un rayon de bordure de 50 pour cent pour que cela soit entièrement arrondi, ainsi que la largeur et la hauteur. Ciblons notre élément inférieur. Encore une fois, nous devons également hériter de la famille de polices. La taille de la police un peu plus grande et aussi le poids de la police vont être plus audacieux aussi. Pour en faire un fond arrondi, nous allons également définir une largeur et aussi une hauteur égale. Je vais aller pour huit pixels et aussi une valeur correspondante pour la hauteur aussi. Voyons comment cela ressemble à l'intérieur du navigateur. C' est la largeur et la hauteur égales, mais nous devons également arrondir les coins avec le rayon de bordure, et aussi supprimer toutes les bordures par défaut. Commençons par la bordure aucune, puis le rayon border-radius, qui a une valeur de 50 pour cent. Pour donner à cela la couleur bleue que nous voyons dans la version finale, nous devons définir la couleur de fond. Je veux aller pour une valeur hexadécimale qui est égale à 0ad9ff, suivie de quelques valeurs de marge. Tout en haut, 0.5rems en haut, zéro à droite, 1rem en bas, puis zéro à gauche. En descendant à nos valeurs de sept derniers jours, ceci est à l'intérieur d'une autre liste. Supprimez le remplissage par défaut avec la valeur de zéro, et nous devons également supprimer les puces d'élément de liste, puis nous pouvons définir cela pour parcourir la page en définissant le type d'affichage sur flex. Supprimez les puces avec le style de liste pour être nul nous laissant avec les tirets que nous avons pour chaque élément de liste. regardant la version finale, nous avons également un espacement égal entre chacun de ces éléments, et nous pouvons le faire en définissant justifier le contenu pour avoir de l'espace entre. Sur la liste est un pas dans la bonne direction pour coiffer la section. La prochaine chose que nous devons faire est de cibler chacun de nos éléments de liste. En commençant par les bordures, chacun de ces éléments se distingue plus. Allons pour une valeur d'un pixel, une ligne solide, puis un remplissage à l'intérieur de ces éléments de liste pour ajouter un peu d'espacement. Un rem en haut et en bas et 1,5 à gauche et à droite. Dans cette section, nous allons cibler le titre de niveau 3, augmenter la taille de la police et ajouter un remplissage pour lui donner un peu d'espacement comme sur la version finale. Pour ce faire souvent dans le index.html, nous avons une section avec la classe d'entrées wrapper. Ciblons ça. Certains peuvent travailler avec notre titre de niveau 3 et ajouter un peu d'espacement à nos sections. C' est une classe, donc nous avons besoin de points. Tout d'abord, nous pouvons ajouter du remplissage pour donner à cela un espacement en haut et en bas de 1rem, zéro à gauche et à droite, puis aussi définir la taille de police par défaut à 1.6rems. Ensuite, la rubrique de niveau 3 qui est pour le titre des sept derniers jours. Nous pouvons supprimer toute marge par défaut fournie par le navigateur, et vous pouvez voir que cela supprime la marge par défaut tout en haut de notre rubrique. Nous pouvons pousser cela au centre, avec text-align. C' est également assez audacieux, alors modifions le poids de la police pour être plus léger. Ci-dessous, nous avons toutes les informations restantes pour notre application. Nous avons le total, les distances et aussi la hauteur hebdomadaire. Tout cela est enveloppé dans une section avec la classe de données. En descendant, nous allons cibler ça. Tout d'abord, nous pouvons définir la taille de police par défaut pour être un peu plus grande, donc 1.4rems. Chacune de nos sections est entourée d'un div deux, donc nous pouvons cibler.data, puis div. Commençons par la couleur de fond pour chacune de nos sections. La valeur que je vais utiliser sera 141c22. Le type d'affichage sera égal à flex. Nous pouvons utiliser la flexbox pour centrer notre étiquette et aussi la valeur sur la même ligne, ajoutant également un peu d'espace entre les deux. Nous les plaçons d'abord sur leur propre ligne avec un centre d'élément de ligne, et maintenant c'est à l'espacement entre les deux, nous pouvons utiliser le contenu de justification. Cela pousse maintenant toutes nos valeurs vers la droite. La prochaine chose à faire est d'ajouter un peu de rembourrage. Ceux-ci ne sont pas contre les bords gauche et droit et aussi une certaine marge à l'extérieur de notre div, donc les trois sections ont un peu d'espace entre les deux. Tout d'abord, la marge en haut et en bas, je vais utiliser 0.5rems, zéro à gauche et à droite, puis un peu de rembourrage à l'intérieur de nos divs. Nous avons déjà un peu d'espacement en haut et en bas donc ajoutons juste un peu d'espacement à gauche et à droite. Zéro, puis 1rem. C' est maintenant la majorité du style pour notre application. Nous avons juste besoin de cibler la section en bas plus tard lorsque nous ajoutons le cercle de progression. Mais pour l'instant, passons à la vidéo suivante et ajoutons du JavaScript à notre projet, afin que nous puissions mettre à jour nos entrées. 5. Ajouter de nouvelles entrées: Le style de notre projet est à peu près maintenant en place, il y a juste un peu à revenir plus tard. Lorsque nous ajoutons cette section tout en bas. Eh bien, pour l'instant, nous allons passer à ajouter dans notre fichier de script pour introduire du JavaScript. En particulier, dans cette vidéo, nous allons capturer l'entrée de l'utilisateur, puis mettre à jour nos sept derniers jours. La première chose que nous devons faire à l'intérieur de notre projet est de créer un nouveau fichier, qui va être ce script.js. La première chose à faire est de relier cela tout en bas, juste au-dessus de notre section de fermeture et de corps. Nous pouvons lier cela avec les éléments de script. C' est aussi dans le projet [inaudible] à côté de notre index. Nous pouvons simplement référencer cela avec script.js. Prenons un instant pour réfléchir exactement à ce que nous voulons faire ici. Nous avons une entrée de formulaire juste ici où l'utilisateur ajoutera la valeur. Nous voulons être à l'écoute des soumissions de formulaires. Une fois que cela se produit, nous ne voulons pas exécuter une fonction. Commençons par ceci de dans ce script.js. La première chose à faire est de saisir une référence à notre formulaire. Pour cette section de formulaire, nous devons maintenant écouter l'événement submit. L' événement submit sera appelé chaque fois que l'utilisateur clique Entrée à l'intérieur de cette entrée ou clique sur notre bouton Soumettre. Dans le script, créons une référence à ce formulaire. Forme const. Toute référence de formulaire va toujours rester la même. Cela peut être utilisé comme une constante dans une cible, le document complet. Ensuite, nous pouvons utiliser le sélecteur de requête. sélecteur de requête est un moyen de capturer des éléments HTML, et nous pouvons capturer n'importe lequel des éléments de notre HTML. La façon dont nous le faisons est exactement la même que nos feuilles de style. Si nous ciblons des éléments, nous référençons les éléments par leur nom. Si c'est une classe, nous utilisons le point suivi du nom de la classe. S' il s'agissait d'un ID, nous utilisions le préfixe de hachage. Depuis notre forme, est tout simplement un élément de formulaire. On peut cibler ça. Ensuite, nous voulons ajouter un écouteur d'événement. Les événements dans lesquels vous voulez écouter sont l'événement submit. Ensuite, nous voulons exécuter une fonction. Nous ajoutons le nom de notre fonction comme la deuxième valeur séparée par une virgule. Le nom de la fonction va être un handle submit. Nous n'avons pas encore créé cette fonction de soumission de handle. Juste au-dessus de notre écouteur d'événement, nous pouvons créer ceci maintenant. Handlesubmit va prendre dans les informations d'événement qui sont transmises à la fonction chaque fois que le formulaire a été soumis. La première chose que nous voulons faire est de récupérer ces informations d'événement, puis appeler prevent default. Empêcher les valeurs par défaut empêchera le comportement par défaut de la soumission du formulaire qui consiste à recharger le navigateur. Pour ce cas d'utilisation, nous ne voulons pas actualiser le navigateur car toutes nos informations seront perdues. Au lieu de cela, ce que nous voulons faire est de capturer les entrées de l'utilisateur à partir de ce champ ici. Encore une fois, utilisons QuerySelector. Cela va saisir notre entrée de formulaire. Nous pourrions soit saisir cela en utilisant le nom d'entrée ou aussi acheter l'ID d'entrée. Donc document.QuerySelector. Tout comme avec CSS, nous ciblons ceci avec le hachage, puis le nom de l'ID. Nous pouvons ensuite saisir la valeur et également stocker cela à l'intérieur d'une variable ou d'une constante. Si vous vous souvenez dès le début lorsque nous avons créé la calculatrice Tip, l' un des problèmes que nous avons eu lorsque nous avons saisi les informations soumises par l'utilisateur était la valeur est venue sous la forme de chaîne. Puisque nous travaillons avec des nombres, nous voulons convertir cela en un type de nombre. Cela pourrait être ceci, je vais convertir cette valeur de chaîne en nombre, contournant cela dans la fonction de nombre JavaScript. Avant de passer à autre chose, faisons un journal de console avec la valeur d' entrée et vérifions que tout fonctionne bien. Cliquez avec le bouton droit de la souris Inspecter et nous pouvons aller dans la console. Cliquez sur l'onglet de la console. Ajoutons quelques nombres aléatoires à l'intérieur ici. Donc 1.2, 6.4, ce qui signifie que nous écoutons maintenant avec succès un événement submit et capturons également l'entrée de l'utilisateur. Il y a aussi quelques façons que nous pouvons améliorer à ce sujet si nous passons à notre entrée et tapons la valeur de zéro, nous voyons toujours que la valeur de zéro est toujours enregistrée. Cela peut causer un problème si l'utilisateur a été touché par accident avant d'entrer sa valeur. Aussi chaque fois qu'une valeur est ajoutée, nous voulons également effacer ce formulaire afin qu'il soit disponible pour la prochaine entrée. De retour à notre fonction, nous pouvons utiliser une déclaration if pour vérifier si aucune entrée n'a été faite. Utilisez le point d'exclamation. Cela signifie que si aucune entrée n'est présente ou si la valeur est fausse. Ensuite, nous pouvons utiliser le mot-clé return pour sortir de notre fonction car aucune valeur n'a été saisie. La prochaine chose à faire est d'effacer l'entrée du formulaire chaque fois qu'une valeur a été soumise. Tout d'abord, prenons toutes les formes. Donc document.QuerySelector. On peut prendre notre formulaire. Ensuite, nous pouvons appeler la méthode de réinitialisation, qui va effacer toutes nos entrées de formulaire. Entrez la valeur. Maintenant, lorsque nous entrons une valeur et appuyez sur Entrée, je vais former l'entrée est effacée. Avec cela pris en charge, la prochaine chose que nous voulons faire est de stocker toutes les valeurs utilisateur à l'intérieur d'un tableau. Je vais initialiser notre tableau appelé entrées et définir ceci égal à un tableau vide. Notez ici, nous utilisons le mot-clé let plutôt que const parce que nous voulons mettre à jour les valeurs des entrées. Si cela a été dit pour être const, nous ne serons pas en mesure d'obtenir ce tableau en poussant de nouvelles valeurs. Maintenant, la façon d'ajouter une nouvelle valeur à l'intérieur de notre tableau vide est de cibler d'abord cela par le nom de variable des entrées. Ensuite, un tableau a une méthode push qui nous permet de pousser une nouvelle valeur à la fin de notre tableau. La valeur que vous voulez pousser est notre entrée, qui a été capturée à partir de notre entrée utilisateur. Essayons cela avec un journal de console. Nous pouvons maintenant sortir la valeur des entrées qui est notre tableau. Recharger. Insérez quelques valeurs à l'intérieur ici, voyons ce qui se passe. Cela va maintenant mettre à jour notre tableau avec les entrées utilisateur. Avec tout cela fonctionne maintenant, supprimons notre journal de console et nous pourrions continuer à ajouter plus de code à cette méthode handleSubmit. Mais pour garder cela plus propre, je vais créer une nouvelle fonction qui va mettre à jour notre interface utilisateur. Chacun de ces éléments de tableau va être poussé à la fin de notre liste non ordonnée. Créons une nouvelle fonction à propos du tout haut, et je vais appeler ceci addNewEntry. Je vais également appeler cette fonction chaque fois que l'utilisateur entre une nouvelle entrée, aussi, en analysant la valeur de l'entrée. Cette valeur d'entrée sera alors reçue à l'intérieur de notre fonction, et je vais appeler cette NewEntry, mais la valeur sera exactement la même. Tout d'abord, faisons un journal de console avec la valeur de la NewEntry juste pour vérifier nous recevons cela correctement dans notre fonction. Ajoutez une valeur. D' accord. Bien. Maintenant, notre fonction a accès à chacune de ces entrées utilisateur. Une des grandes choses à propos de l'utilisation de JavaScript est que nous pouvons également l'utiliser pour créer de nouveaux éléments dans notre DOM. Si nous allons à notre index.html, jusqu'à présent nous avons créé tous ces éléments à l'intérieur de notre page HTML. Mais nous pouvons également utiliser JavaScript pour les créer aussi. La façon dont nous allons utiliser cela dans cette fonction est que nous allons cibler cette liste non ordonnée, puis pour chaque nouveau numéro que l'utilisateur ajoute, nous allons ensuite créer un nouvel élément de liste. La façon de le faire est d'utiliser Document.CreateElement. Lors de la création d'un nouvel élément HTML, nous pouvons utiliser le même nom d'élément que la balise d'ouverture. Nous pouvons créer une liste non ordonnée, un élément de liste, un titre de niveau 3 ou même une section. Nous allons utiliser un élément de liste, donc nous pouvons pousser cela à la fin de notre liste. Commençons cela à l'intérieur d'une constante appelée ListItem, puis, ensuite, nous avons également besoin d'une valeur pour aller entre nos éléments. Pour le moment, cela va juste créer un élément de liste, qui est juste comme ça. Mais nous devons également créer du contenu textuel à l'intérieur. Nous le faisons en JavaScript avec Document.CreateTextNode. Nous pouvons analyser n'importe quoi, comme une chaîne de texte. Mais dans notre cas, nous voulons analyser dans la nouvelle entrée, puis stocker aussi cela dans une constante, et nous allons appeler ceci la valeur de liste. Cela nous laisse maintenant avec les éléments réels et le contenu. Mais ce sont deux nœuds distincts. Nous devons réellement ajouter notre valeur de liste à notre élément de liste. La façon dont nous pouvons le faire est d'attraper notre ListItem, puis nous utilisons AppendChild. Cela va ajouter un nœud NewChild. Sous le nœud NewChild, celui que nous voulons ajouter est la ListValue. Ici, ce que nous faisons essentiellement est de créer un élément de liste avec cette première ligne. Ensuite, avec la deuxième ligne, nous créons une valeur à partir de notre nouvelle entrée. Si l'utilisateur entre 2.7, il sera stocké dans ListValue. Nous ajoutons ensuite dans cette ListValue dans notre ListItem. Cela va saisir notre valeur et placer cela à l'intérieur de nos éléments. Cela nous laisse maintenant avec un élément de liste entièrement construit. Cet élément de liste doit maintenant pousser vers notre liste non ordonnée. La façon dont nous pouvons le faire est de cibler d'abord notre liste non ordonnée, trouver l'ID des entrées. En dehors de notre fonction, je vais créer une constante, qui est appelée notre EntrieWrapper. Cela sera égal à document.QuerySelector, avec l'ID des entrées. C' est notre liste non ordonnée, et maintenant nous devons pousser le ListItem, que nous avons ici. La façon dont nous pouvons le faire est très similaire à cette ligne juste ici. Nous allons prendre notre liste non ordonnée. Encore une fois, en utilisant AppendChild, en ajoutant sur notre ListItem complet. Cela va maintenant prendre notre élément de liste ajouter ceci jusqu'à la toute fin de notre liste non ordonnée créant une nouvelle valeur à la fin. Allez dans le navigateur et rechargez, et ajoutez quelques valeurs, 1.4, et celles-ci sont toutes maintenant ajoutées à la fin de notre liste. Tout ça est bon. Cela signifie maintenant que nos entrées dans notre travail sont poussées vers notre tableau, et nous sommes également en train de créer un nouvel élément de liste et de mettre à jour le DOM. Juste une petite chose que nous devons faire avant de terminer cette vidéo. Ces trois nouvelles valeurs que nous venons d'ajouter seront ajoutées aux sept entrées existantes. Nous voulons seulement garder un registre des sept derniers jours. Chaque fois que nous ajoutons une valeur à la fin du tableau, nous voulons également supprimer la première valeur aussi. La façon dont nous faisons cela en JavaScript est peu près le contraire de ce que nous venons de faire ici. Ici, nous saisissions la liste non ordonnée et ajoutons un élément newChild. Au lieu de cela, nous voulons faire le contraire, qui est d'enlever un enfant. Faisons cela au début de notre fonction AddNewEntry. Prenez l'EntrieWrapper, qui est notre liste non ordonnée, puis nous pouvons appeler RemoveChild. Si nous appelons simplement removeChild, JavaScript ne saura pas exactement quel élément enfant nous voulons supprimer. Par élément enfant, nous entendons chacun de ces éléments de liste. Mais, heureusement, JavaScript nous fournit un moyen facile et simple de cibler les tout premiers éléments enfants. Il s'agit d'une propriété appelée FirstChildElement. Si je passe à notre script, nous pouvons cibler l'EntrieWrapper, qui est toute notre liste non ordonnée, puis sélectionner le FirsTelementChild. Sauvegardons maintenant ce fichier et revenons dans le navigateur et vérifions si cela fonctionne. Ajoutons quelques valeurs, 4, 5, 6, 7. Maintenant, pour chaque élément que nous ajoutons, nous voyons que nous avons encore sept jours au total. Ajoutons le numéro 8, et nous voyons que la valeur d'un a maintenant été supprimée du début de notre liste. Essayons un de plus. La valeur de neuf. Cela supprime la valeur de deux. Tout cela peut sembler assez complexe si c'est quelque chose que vous n'avez pas fait auparavant, mais tout ce que nous faisons est d'ajouter un nouvel élément de liste à la fin ici, puis de supprimer le tout premier. C' est maintenant une partie vraiment importante de notre application de camion en marche maintenant terminée. Ensuite, nous allons descendre à notre section de départ où nous allons ajouter le total ainsi que la distance moyenne. 6. Calculer le total et la moyenne: Mettons-nous à travailler maintenant sur certaines de ces statistiques en bas. Cette vidéo, nous allons nous concentrer sur le calcul du total et aussi la distance moyenne. Maintenant, pour ce faire, nous allons utiliser une méthode de tableau JavaScript appelée reduce. Jetons un coup d'oeil sur la façon dont nous pouvons l'utiliser. Si vous n'avez pas utilisé la méthode réduite auparavant, cela peut sembler assez complexe, mais ce n'est vraiment pas trop difficile à utiliser. Le concept principal derrière une méthode reduce, c' est qu'il prendra tous les éléments, toutes les valeurs qui sont à l'intérieur d'un tableau, dans notre cas, il va être toutes nos distances, et ensuite nous allons le réduire en un valeur unique. Dans notre cas, nous allons réduire toutes nos valeurs en les additionnant toutes ensemble. Cela va nous donner le total dont nous avons besoin ici, et ensuite nous pouvons également utiliser cela dans la distance moyenne en divisant ce total par le nombre d'entrées. Revenons au réducteur, nous allons créer une fonction comme ça. L' exemple que nous voyons ici est à peu près exactement comment nous devons l'utiliser. Nous allons additionner toutes les valeurs dans le tableau. Nous le faisons en appelant une méthode qui ajoute la valeur actuelle au total précédent. Pour le premier élément à l'intérieur du tableau qui est un, il appellera alors cette méthode, mais cette première fois, nous n'avons que la valeur actuelle, nous n'avons pas le total, donc le réducteur sera égal à un. Pour la deuxième valeur qui est deux, la valeur actuelle de deux sera ajoutée au total de un, ce qui donnera une valeur de trois. En continuant, la valeur de trois sera ensuite ajoutée au total actuel, ce qui en fera six. La valeur de quatre complète ensuite le réducteur, ce qui donne une valeur totale de 10. Revenons à notre script.js, nous allons commencer par créer une fonction qui va avoir le même comportement. Je vais faire le mien juste au-dessus de nos poignées. La fonction que je vais appeler le réducteur prend dans nos deux valeurs qui est le total, puis la valeur actuelle. Je vais juste appeler ça un total plutôt qu'un accumulateur car il semble plus clair. Tout ce que cette fonction va faire est de retourner la nouvelle valeur, qui est l'équivalent du total qui a été ajouté à la valeur actuelle. Juste comme une note de côté ici, nous ajoutons la valeur actuelle au total, mais vous pouvez faire d'autres choses telles que l'enlever aussi. Toute l'idée est exactement la même. Le réducteur est destiné à réduire nos valeurs de tableau en une seule valeur. La prochaine chose à faire est que nous allons créer une nouvelle fonction juste en dessous, et je vais appeler cela CalTotal. Cette fonction va saisir toutes nos entrées, utiliser une méthode de réduction, puis mettre à jour notre valeur juste ici. Pour ce faire, il doit également prendre toutes nos entrées actuelles, qui se trouve à l'intérieur de notre tableau. Nous pouvons ensuite saisir notre tableau d'entrées, qui est seulement des valeurs stockées à l'intérieur ici. Nous pouvons alors appeler la méthode réduite, que nous venons de regarder sur le site Web de Mozilla, puis nous pouvons passer dans notre fonction de réducteur. Cela nous donnera alors notre valeur totale unique, et nous pouvons également stocker cela à l'intérieur d'une constante. Maintenant, j'ai cette valeur, nous allons mettre à jour le DOM. Les deux valeurs que nous voulons mettre à jour si nous regardons notre projet est la section totale juste ici, et nous avons également un total qui est mis à jour pour nos objectifs hebdomadaires. Prenons les documents, nous pouvons saisir un élément par l'id. Le premier que nous voulons attraper est pour le total juste ici, faites défiler vers le bas jusqu'à la section de données, et nous avons un intervalle avec l'id de total. Nous pouvons ensuite définir le contenu InnerText pour être égal à notre valeur totale. Dupliquons cette ligne, et nous pouvons également l'utiliser pour mettre à jour les cibles hebdomadaires. Maintenant en bas de notre page d'index, c'est ce ProgresStotal qui a actuellement la valeur de zéro, nous pourrions supprimer l'espace réservé, mettre à jour notre identifiant. Nous avons maintenant notre fonction qui calcule le total. En fait, il devrait juste être CalcTotal. Maintenant, chaque fois que nous manipulons le Submit en bas, nous voulons maintenant appeler cette fonction. Lorsque nous appelons ceci, nous pouvons également passer dans les entrées. Les entrées étaient la valeur de notre tableau en haut ici, ou nous pouvons laisser cela vide pour ce cas particulier, car il s'agit d'une variable globale. Lorsque nous déclarons une variable en dehors de l'une de ces fonctions, cela signifie que cela est maintenant dans la portée globale, qui signifie que nous pouvons accéder à la valeur des entrées n'importe où à l'intérieur de notre programme. Si notre variable était déclarée à l'intérieur d'une fonction particulière, nous ne pouvions y accéder qu'à l'intérieur de cette fonction. Donc, puisque c'est global, nous pouvons accéder à cet intérieur de cette fonction et aussi à celle-ci juste ici aussi. Avec cela en place, maintenant sauvegardons ceci et encore dans le navigateur. Ajoutons de nouvelles valeurs. Un et deux, ces deux additionnés nous donnent le total de trois, et aussi vers le bas dans notre cible aussi. Ajoutons un de plus, et nos totaux sont maintenant mis à jour. Avec ce travail, passons maintenant à la distance moyenne. La distance moyenne va être assez simple parce que nous avons déjà notre fonction de réducteur en place. Tout ce que nous avons à faire, c'est de créer une nouvelle fonction pour s'en occuper. Je vais appeler ça CalcAverage. La façon dont nous pouvons calculer la moyenne est d'abord de saisir toutes les valeurs totales que vous avez ajoutées ensemble. Nous savons comment le faire à partir de notre fonction juste au-dessus. Ensuite, nous pouvons le diviser par le nombre d'entrées que nous avons actuellement en nous donnant la moyenne. Commençons cela à l'intérieur d'une constante appelée moyenne. Ceci égal à notre tableau d'entrées, nous pouvons à nouveau, appeler notre méthode de réduction, en passant dans notre fonction de réducteur. Cela nous donnera alors le total, et la prochaine chose que nous devons faire est de diviser cela par le nombre d'entrées. Nous pouvons le faire en saisissant notre tableau d'entrées, puis en appelant .length. L' étape suivante consiste à mettre à jour le DOM avec document.getElementById. L' ID que vous voulez saisir dans le index.html, est cet identifiant moyen juste ici. Tout comme ci-dessus, nous allons également définir InnerText pour être égal à notre variable moyenne d'en haut. La dernière étape consiste à appeler cette fonction, CalcAverage. Cela n'a pas besoin de quelque chose qui lui soit passé car il ne profite que du tableau d'entrées, que nous avons en haut. Enregistrez ce fichier et désactivez le navigateur. Maintenant, si nous y ajoutons deux valeurs différentes, nous voyons le total de quatre. Le total de 4 divisé par 2 nous donne une moyenne de 2. Essayons un de plus, vas-y 10. Notre moyenne est maintenant mise à jour. Juste une touche finale que nous pouvons faire à ce projet pour ces deux valeurs est d'arrondir celles-ci à une décimale. Pour le moment, nous obtenons un nombre arrondi de 14, mais si nous faisons quelque chose comme 2.7, mais je veux garder cela cohérent et m'assurer que toutes les valeurs sont à une décimale. Tout comme plus tôt, la façon de le faire est d'utiliser toFixed. Je vais définir ceci à une décimale afin de passer la valeur d'un. Ce sera pour notre total, et nous pouvons faire la même chose pour notre moyenne aussi. Nous aurions besoin d'envelopper cela à l'intérieur de nos parenthèses, puis appelez àFixed sur le total. Si nous n'avons pas enveloppé cela entre parenthèses, toFixed serait appelé sur les entries.length plutôt que la somme totale. Essayons ça. Un et cinq nous donnant un total de six, ce qui a une valeur de 6.0 maintenant. La moyenne, ajoutons quelques valeurs supplémentaires. Nous pouvons maintenant dire que notre total et notre moyenne sont arrondis à une décimale. Nous pouvons également faire la même chose pour nos entrées ici. Nous pouvons le faire ci-dessus où nous avons créé nos nouvelles entrées, et aussi ici où nous ajoutons la nouvelle entrée comme note de texte. Tout comme avant, nous pouvons également appeler toFixed passant dans la valeur d'un et maintenant si nous ajoutons quelques entrées, nous voyons ces arrondies à une décimale. C' est maintenant notre total et la moyenne maintenant pris en charge, et dans la prochaine vidéo, nous allons jeter un oeil à l'objectif hebdomadaire, ainsi qu'au sommet hebdomadaire. 7. Temps fort de la semaine et objectifs: Nous avons maintenant les valeurs totales et aussi la distance moyenne. Nous voulons maintenant passer au calcul de la valeur la plus élevée de cette semaine, et aussi mettre à jour notre objectif vers le bas aussi. Donc, pour ce faire, revenons à notre script.js et nous pouvons créer une fonction pour calculer cela. Le nom de cette fonction sera WeeklyHigh, et tout ce que nous devons faire est de calculer la valeur la plus élevée qui a été ajoutée dans notre tableau d'entrées. Stockez ceci dans une constante appelée haute. La façon dont nous pouvons le faire est en utilisant un dysfonctionnement JavaScript fournit qui est appelé Math. A l'intérieur, nous pouvons passer dans différentes valeurs telles que quatre, 12, et six. Maintenant, si nous faisons un journal de console pour la valeur de haute, nous devrions voir que la valeur de 12 est sortie. Appelons cela à l'intérieur de notre fonction handleSubmit, et nous pouvons vérifier que cela fonctionne dans la console. Nous pouvons ajouter n'importe quelle valeur à l'intérieur ici. Appuyez sur Entrée, et nous voyons la valeur de 12. Mais au lieu de cela, nous voulons saisir la valeur la plus élevée de notre tableau d'entrées. Trouvons Oui, nous pouvons passer dans notre tableau d'entrées et vérifier que cela fonctionne. Donc cinq, six, et un. Cela nous donne maintenant un problème à l'intérieur de la console. Donc, la raison pour laquelle cela se produit est parce que Math.Max va s'attendre à une série de nombres. Cependant, nous passons un tableau d'entrées. Donc, nous faisons efficacement quelque chose comme ça. Au lieu de cela, ce que nous voulons est d'extraire les valeurs réelles de l'intérieur de notre tableau, donc cela ressemble plus à ceci. La façon dont nous pouvons le faire est d'utiliser l'opérateur de propagation JavaScript, qui est les trois points. Cela va ensuite extraire toutes les valeurs à l'intérieur de notre tableau d'entrées et cela devrait maintenant fonctionner à l'intérieur de la console. Maintenant aura la valeur élevée, nous pouvons maintenant mettre à jour le DOM. Donc document.getElementById, l'ID que nous voulons, si nous allons à la page d'index, est la valeur de haute. Définissons le texte intérieur, qui va être égal à notre variable. C' est fini, donc la valeur de un, cinq, nous voyons le haut hebdomadaire est une valeur de cinq. Sept, ceci est en cours de mise à jour. Si nous ajoutons les valeurs inférieures qui sont trois, cela a toujours la valeur élevée de sept. Ensuite, nous pouvons également rendre notre cible hebdomadaire plus dynamique, en contrôlant cela à partir de nos scripts. Nous n'avons pas besoin de le faire par une fonction, nous pouvons simplement le faire dès que notre script se charge. Donc, créons une variable en haut ou une constante. Je vais appeler ça notre objectif. Définissez cette valeur sur n'importe quelle valeur telle que 25. Nous pouvons ensuite utiliser un sélecteur de requête ou getElementByID pour mettre à jour notre cible. L' ID cible, puis nous devons définir le dans un texte pour être égal à notre objectif. Nous pouvons également supprimer la valeur d'espace réservé de 25 et également vérifier que cela fonctionne dans le navigateur. Nous n'avons rien pour obtenir cet objectif à partir de l'interface utilisateur. Je viens de coder ceci en tant que valeur à l'intérieur du script. Mais bien sûr, si vous voulez un petit défi, vous pouvez aller de l'avant et ajouter ceci au projet afin que nous puissions être mis à jour par l'utilisateur. La plupart des fonctionnalités sont maintenant en place. La dernière partie que nous allons faire, si nous regardons la version finale, est de créer ce cercle de progression vers le bas. 8. Cercle de progrès: Bienvenue et à cette dernière vidéo de ce projet. Cette vidéo se concentre sur notre ProgressCircle, que nous allons créer, comme dans la version finale, juste ici. Chaque fois que l'utilisateur entre une valeur dans le champ numérique, comme celui-ci, la cible hebdomadaire sera alors mise à jour et celle-ci sera convertie en pourcentage afin que nous puissions mettre à jour le ProgressCircle. Maintenant, je suis conscient qu'il y a de nombreuses façons de le faire. Nous pouvons utiliser des choses telles que le Canvas, et il y a beaucoup d'options plus complexes que nous pouvons utiliser. Cependant, j'ai essayé de garder cela aussi simple que possible pour ce projet. La façon dont nous allons le faire est en utilisant une fonction CSS appelée le gradient conique. La façon dont cela fonctionne est de créer un dégradé de couleur qui est transitionnel autour du point central. Ici, nous pouvons voir que nous avons la première section, qui est rouge, et ceci est de 0-6 degrés, la section orange continue ensuite de 6-18 degrés, puis nous avons la section jaune jusqu'à 45 degrés et cette chose continue ronde. Si nous faisons défiler vers le bas, nous pouvons voir la différence entre le gradient conique et le gradient radial. Le type conique est plus adapté à nos besoins puisque nous allons utiliser cette rotation pour créer notre ProgresSelement. Le gradient radial, d'autre part, fournit la transition vers l'extérieur du centre, créant ces anneaux qui ne sont pas vraiment utiles pour notre cercle. Reprenons dans le index.html. Au début, nous avons ajouté un wrapper pour cette section, puis créé une section à faire. À l'intérieur, je vais créer deux nouveaux divs. Ce premier va être le div réel pour notre cercle. Donc, je vais donner à ceci un ID de ProgressCircle. Ensuite, à l'intérieur, je vais ajouter un deuxième div. Cela aura l'ID de ProgressCenter. La raison de cette section sera plus claire très bientôt. Tout d'abord, nous allons cibler toute cette section qui est en bas, en commençant par notre texte. Ceci est contenu à l'intérieur de la section de progression. Sauvegardons ceci et allez dans notre styles.css. Tout en bas, nous pouvons commencer par cibler la section de progression. Nous pouvons aligner le texte au centre et ajouter un peu de rembourrage sur le bas. Ensuite, le texte est contenu dans le titre de niveau 3. Ciblons la progression h3, taille de la police de 1,6 rems, et aussi ce poids de la police, nous allons définir ceci pour être plus léger. Ensuite, nous pouvons commencer à travailler sur notre ProgressCircle. Nous avons donc l'enveloppe externe, qui est ProgressCircleWrapper. Nous allons saisir ceci, définir la flexbox, puis justifier que le contenu soit au centre. Retour à notre feuille de style. Ajoutez ceci dans. Ils peuvent utiliser l'ensemble de la flexbox, sorte que nous pouvons ensuite justifier notre contenu au centre. Cela va placer le cercle une fois que nous le créerons au milieu de notre section. Ensuite, nous avons le ProgressCircle lui-même, qui va avoir le gradient conique. Retour à notre feuille de style. C' était une pièce d'identité. Pour que cela soit égal, nous pouvons définir la largeur. Je veux aller pour 250 pixels et aussi une hauteur correspondante. L' exemple que nous avions vu auparavant sur le site de Mozilla utilisait une section carrée, tout comme nous le voyons ici. Mais au lieu de cela, je vais transformer cela en un cercle en ajoutant un rayon de frontière. Une valeur de 50 pour cent fera cette circulaire. Maintenant, nous pouvons utiliser notre gradient conique en définissant ceci comme une propriété d'arrière-plan. Nous avons vu beaucoup de valeurs différentes entrées sur l'exemple avant. Mais tout ce dont nous avons besoin, c'est de deux valeurs différentes. Nous avons juste besoin des valeurs vertes, qui est le nombre total de miles parcourus par l'utilisateur , puis la section grise pour le reste du cercle. Ceux-ci vont juste être des valeurs d'espace réservé pour l'instant, et nous allons les mettre à jour avec JavaScript très bientôt. La couleur verte est 70db70. Ajouter une première valeur de 50 pour cent, signifie que cela va aller de zéro à 50 pour cent. La deuxième valeur va être une valeur hexadécimale de 2d3740. Pour la deuxième valeur, si nous définissons cette valeur à 50 %, si nous n'ajoutons pas une seconde valeur telle que 70, cela va jusqu'à 100 %. Maintenant, sauvegardons ceci et passons à notre projet. Recharger. Cela place maintenant notre gradient conique dans la pleine taille de notre cercle. Mais si nous regardons la version finale, nous avons le cercle central juste ici, donné comme l'apparence d'un anneau. C' est la section que vous avez ajoutée au milieu de ProgressCenter. Prenons ça. Tout ce que nous allons faire est de l'utiliser efficacement comme un masque couvrant le centre du cercle. Cela va être similaire à juste au-dessus, mais nous allons le rendre un peu plus petit en définissant la largeur à 220. La même chose pour la hauteur. Cela aura également besoin d'un rayon de bordure, donc c'est un cercle. Pour donner à cela une apparence d'un anneau, nous devons rendre la couleur de fond la même que le reste de l'application. La valeur actuelle était 1c262f. Sur notre projet et voyons à quoi cela ressemble. Nous avons maintenant le centre du cercle en place, mais nous devons juste nous assurer que cela est centré. Nous pouvons le faire à l'intérieur de notre ProgressCircleWrapper. Réglons cela avec le type d'affichage de flex. Rappelez-vous que c'est pour le wrapper. Nous pouvons alors justifier le contenu à travers la page dans le centre et également définir l'alignement vertical en utilisant align-items. Bien. Cela ressemble maintenant exactement à ce que nous voulons. Maintenant, passons à notre script.js et nous pouvons créer une fonction qui va mettre à jour ceci. Appelons ça CalcGoal. La première chose que nous devons faire à l'intérieur de cette fonction est d'accéder à notre valeur totale. C' est la valeur juste ici. Une fois que nous avons ceci, nous pouvons alors diviser cela par notre objectif. La façon dont nous pouvons saisir cela, tout comme ci-dessus, nous allons saisir la valeur totale. Copions ça. Collez ceci, et cela utilise notre fonction de réducteur pour saisir tous les éléments à l'intérieur de notre tableau et les ajouter tous ensemble. La prochaine étape que nous devons franchir est de calculer un pourcentage entre zéro et 100. Nous allons ensuite utiliser ces valeurs à l'intérieur de notre CSS pour mettre à jour nos deux couleurs. Pour convertir cela en pourcentage, nous allons d' abord saisir la valeur totale, puis pour obtenir cela en pourcentage, nous devons diviser ceci par notre objectif divisé par 100. Nous pouvons alors stocker cela à l'intérieur d'une constante. Appelons ceci CompletedPercent. Nous pouvons également faire un console.log avant d'aller plus loin et vérifier que tout fonctionne bien. Ajoutons ceci dans notre journal. Nous pouvons également appeler cette fonction à partir de handle submit. Sauvons ça. Ouvrez les outils de développement avec un clic droit et inspectez dans la console. Ajoutons une valeur de 10. Ceci divisé par notre objectif va nous donner une valeur de 40 pour cent. Si nous faisons 2,5, 10 plus 2,5 est égal à la moitié de notre objectif, résultant en 50 pour cent. Maintenant j'ai cette valeur, nous pouvons maintenant l'utiliser pour mettre à jour le style de notre ProgressCircle. Prenons ceci par l'ID de dans le script. Retour à CalcGoal. Nous pouvons supprimer le console.log, puis appeler Document.QuerySelector. Le sélecteur était un ID, donc nous passons la valeur de hachage dans ProgressCircle. Évidemment à l'intérieur d'un appel constant ProgressCircle. Maintenant, plutôt que d'avoir le radiant conique codé en dur ici, nous pouvons maintenant commenter ceci et ensuite ajouter ceci à l'intérieur de JavaScript. La façon de le faire est d'accéder à nos éléments ProgressCircle. Nous pouvons définir n'importe quelle propriété de style telle que notre arrière-plan. Nous pouvons une fois de plus définir cela à notre gradient conique. Copions la section, tout comme elle est à l'intérieur du style, collez-la comme une chaîne à l'intérieur des guillemets. Ce ne sont toujours que des valeurs codées en dur. Essayons ça. Toutes les valeurs que nous ajoutons à l'intérieur d'ici entraîneront toujours une division 50-50. Ce qui signifie que notre prochaine étape est de rendre ces deux valeurs plus dynamiques. La façon dont nous pouvons le faire, si nous supprimons les citations, peut les remplacer par les backticks. Ces backticks vont nous permettre de créer une chaîne de modèle, ce qui est un moyen d'insérer des variables dans notre texte normal. Nous pouvons supprimer nos 50 pour cent. La façon dont nous insérons une variable est d'utiliser le symbole dollar, puis les accolades. La première valeur sera l'équivalent de notre variable pourcentage achevé. Ajoutons ceci dans. Nous avons également besoin du symbole de pourcentage, puis nous devons mettre à jour notre deuxième valeur. Encore une fois, ce sera notre Pourcentage complet jusqu'à 100 pour cent. Puisqu' il s'agit de notre première valeur, cela passera de zéro à notre CompletedPercent. Disons que c'est 50 pour cent, ça passera de zéro à 50. La deuxième valeur passera alors de 50 à la fin de notre cercle, soit 100 pour cent. Juste avant de mettre à jour notre ProgressCircle, nous pouvons ajouter une déclaration conditionnelle juste au-dessus. Nous pouvons ajouter une instruction if pour vérifier si le pourcentage terminé est supérieur à 100. Si c'est le cas, alors on va juste remettre ça à 100. Donc notre ProgressCircle va toujours de 0 à 100. Nous pouvons vérifier si le pourcentage terminé est supérieur à 100. Si c'est le cas, nous le remettrons à 100 %. Essayons ça. 12.5, ce qui est exactement la moitié, notre ProgressCircle est maintenant 50-50. Insérez une nouvelle valeur. Allons le faire arrondir à 100 pour cent. 22.5, nous avons juste besoin d'ajouter une valeur de 2.5. Cela complète maintenant notre cercle. Si nous essayons d'ajouter une nouvelle valeur, nous voyons que le ProgressCircle ne va pas plus loin. Puisque nous avons reçu 100 % de notre objectif pour cette semaine, c'est maintenant toutes les fonctionnalités de notre tracker de course à pied. Juste pour terminer cela, nous allons ajouter une requête multimédia juste pour restreindre la largeur maximale de certains de ces éléments. Retour à nos styles. Ajoutons une requête multimédia qui va cibler nos écrans, côté de la largeur d'écran minimale de 800 pixels. Jusqu' à présent, les périphériques de 800 pixels et plus limitent la largeur du corps à 60 %. Nous pouvons également restreindre la largeur de ce nombre d'entrée aussi. Toujours dans la requête média, l'entrée avec le type de nombre, tout ce que nous devons faire à nouveau est de définir la largeur et cette fois de 40 pour cent. Enfin, nous pouvons également réduire la taille de ce svg sur les plus grands écrans. Ciblons le svg, en définissant la largeur maximale à 50 pour cent. [ inaudible] verra toujours qu'il y a beaucoup d'espacement au-dessus du haut et du bas de ce svg. La façon de réparer cela, si nous allons à notre index.html, est d'aller à notre balise d'ouverture svg. A l'intérieur de ce type, nous pouvons voir que nous avons encore la largeur et la hauteur réglées. Nous pouvons les enlever, ce qui permet de contrôler le dimensionnement avec notre feuille de style. Enregistrez ceci et maintenant svg prend moins d'espace. Félicitations pour avoir atteint la fin de 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 gagnez quelques connaissances. Si vous avez apprécié ce cours, assurez-vous de consulter le reste de mes cours ici sur Skillshare, et suivez-moi pour toute mise à jour et aussi être informé de tout nouveau cours au fur et à mesure qu'ils deviennent disponibles. Merci encore une fois, bonne chance, et j'espère que je vous reverrai dans un futur cours.