Projet Javascript : créer une application de conteur de blagues

1. Introduction: tous les participants de cette classe, nous allons créer une application de génération de code aléatoire en utilisant JavaScript. Voici à quoi ressemblera notre application de génération de code aléatoire . Si vous cliquez sur le bouton de code suivant, un code aléatoire sera généré, et l'autorité de ce code sera également générée C'est le code et c'est l'autorité de ce code. Si vous cliquez à nouveau sur ce bouton de code suivant, un nouveau code sera généré avec l'autorym afin que vous puissiez cliquer sur ce bouton de code autant de fois que vous le souhaitez pour générer des codes aléatoires. Pour générer ce type de code, nous allons utiliser cette API DumJSNS Nous en parlerons en classe. Donc, si vous voulez savoir comment créer ce type d'application de génération de code aléatoire, rejoignez la classe et commençons à créer ce projet 2. créer une structure en utilisant HTML: Dans cette vidéo, nous allons donc écrire son code tamoul pour notre projet Donc, pour écrire le code, je vais utiliser cet éditeur de code Visual Studio et dans cet éditeur de code Visual Studio, n'oubliez pas de créer un dossier Et dans ce dossier, vous devez créer trois fichiers (app point, fichier HTML JS et fichier CSS) et entrer dans ce fichier HTML, et dans ce fichier HTML, nous pouvons écrire du code HTML Donc, pour commencer à écrire notre code HTML, nous devons créer un boilerplate HTML Donc, pour créer le modèle HTML, vous pouvez simplement taper Eclamon Mark et cliquer sur Enter et votre modèle vous pouvez simplement taper Eclamon Mark et cliquer sur Enter et HTML Nous allons maintenant lier notre fichier HTML au fichier CSS avec ce fichier JavaScript. Donc, pour lier ce fichier HTML au fichier CSS, vous pouvez simplement taper Link tech. Il suffit donc de taper Link et de cliquer sur ce lien Colonne CSS et votre fichier CSS sera lié à votre HTLFi et vérifiez simplement que le nom de votre fichier CSS correspond à ce Mon nom de fichier CSS est Stylo CSS et à l'intérieur de ce HM, il est écrit Stylod CSS Cela signifie que le nom de mon fichier CSS correspond à ce nom de fichier HRF Et pour lier ce fichier JavaScript à notre code HTML, vous devez entrer dans cette technologie corporelle et dans ce corps de texte, vous devez créer une technologie de script, écrire un script et vous obtiendrez cette colonne de script ARC, il suffit de cliquer dessus. Dans ce SRC, vous devez taper votre fichier JavaScript. Notre fichier JavaScript est AB dot js. Je vais taper Abdo Js. Et maintenant, nous avons réussi à lier nos fichiers CSS et JavaScript. Maintenant, nous pouvons écrire notre code HTML. Donc, ce que nous allons écrire dans ce code HTML pour vérifier cela, je vais ouvrir mon projet et dans ce projet, vous pouvez voir nous avons écrit un générateur de code aléatoire, et celui-ci est écrit en utilisant la technologie H one. Je vais créer une technologie H one, puis je vais créer un bouton sur lequel le code suivant sera écrit. Cela signifie que je vais créer un bouton de code suivant et cliquer simplement sur ce bouton pour vérifier si nous manquons quelque chose. Pour afficher ce code, nous allons créer une technologie H one et pour afficher le nom de l'auteur, nous allons créer une technologie de paragraphe et nous allons créer un bouton de code suivant. Nous n'avons donc qu'à faire trois choses. Nous devons créer une technologie H, une technologie de paragraphe et une technologie de bouton. Vous pouvez donc simplement taper H one pour créer 1h1t et dans cette prise H one, j'écrirai un générateur de code aléatoire Je vais simplement le recharger , le copier et le coller ici, générateur de code aléatoire, et maintenant je vais créer une prise de paragraphe pour le nom de l'auteur Maintenant que nous n'avons plus d'auteur, nous allons obtenir l'autorisation de l'APA, dont nous parlerons dans les autres vidéos Créez ce paragraphe vide t. Pendant que nous créons ce paragraphe vide te, nous créons cette prise de paragraphe vide pour afficher notre autoryme. Pour le moment, nous n'avons aucun thonyme C'est pourquoi je l'ai laissé vide. Ensuite, vous devez créer un bouton donc pour créer un bouton, il suffit d'écrire un bouton, U double T, et un bouton. Et à l'intérieur de ce bouton, qu'est-ce que nous écrivons ? À l'intérieur de ce bouton, nous allons écrire le code suivant. Copiez-le et collez-le ici, Control V, puis enregistrez-le. Et cliquez sur le bouton droit puis sur Ouvrir avec le serveur en direct, et notre projet sera visible dans notre bref navigateur. Comme vous pouvez le constater, vous pouvez maintenant voir une technologie H, une technologie et une technologie à bouton Ce teg de paragraphe est masqué car nous n'avons écrit aucun contenu dans ce paragraphe tech c'est pourquoi il est masqué C'est tout pour notre code HTML. Nous allons maintenant écrire le code CSS de notre projet. Rendez-vous dans la prochaine vidéo. 3. Ajouter du style: Dans cette vidéo, nous allons écrire du code CSS pour notre projet. Pour écrire du code CSS, je vais ouvrir mon assistant de code VS, puis ouvrir ce fichier de style CSS, et dans ce fichier de style CSS, je vais taper mon code CSS de style. Alors, que pourrions-nous écrire ? Pour vérifier cela, je vais simplement ouvrir mon projet. Et dans ce projet, comme vous pouvez le voir, agiter une couleur d'arrière-plan, puis agiter une famille de polices dans ce texte signifie une famille de polices différente dans ce texte. Et puis un peu de style dans ce bouton. Pour cette famille de polices, je vais utiliser ces polices Google Vous pouvez donc simplement visiter ce site Web de Google Phone et rechercher Avorito, puis après avoir recherché Avoito, vous obtiendrez ce type d'interface Et à partir de là, il vous suffit cliquer sur cette entrée, puis de copier ce lien, c'est-à-dire de copier cette URL d'entrée, puis de la coller ici. Au début du fichier CSS, je vais maintenant commencer à écrire mon code CSS. Tout d'abord, ce que je veux faire, c'est placer ce contenu au centre de mes préoccupations. Pour mettre ce contenu au centre, je vais simplement sélectionner cette technologie corporelle, pour sélectionner cette technologie corporelle, je peux taper body. Et créez ces crochets bouclés et maintenant mon body tag est sélectionné Ce que je veux faire, c'est mettre ce contenu au centre. Pour mettre ce contenu au centre, je vais utiliser Flexbox. Pour utiliser Flexbox, vous devez utiliser la propriété display flex, tapez simplement display puis tapez flex, puis la direction de flexion sera la colonne de direction de flexion de la colonne Pour placer ce contenu au centre horizontalement, je vais utiliser justify content, justify content center, et pour placer ce contenu au centre verticalement, j'utiliserai aligner les éléments au centre. Alignez les éléments et centrez. Ce centre d'alignement des éléments placera donc notre contenu verticalement au centre. Donc, comme nous allons centrer nos éléments verticalement, nous devons définir une hauteur. La hauteur sera donc de 100 vues. Notre contenu sera désormais aligné verticalement au centre de ces cent vues. Alors, combien font 100 vues ? 100 il veut dire cette page complète, c'est-à-dire 100 vues de haut en bas. Si vous tapez 50 vg, la demi-page de ce navigateur sera 50 vg et 100 g correspond à la page complète Et maintenant, notre contenu est au centre de nos préoccupations. Maintenant, ce que je veux faire maintenant, je veux changer la couleur de fond. Pour modifier la couleur d'arrière-plan, vous pouvez simplement utiliser la couleur d'arrière-plan du nom de la propriété. Tapez donc la couleur d'arrière-plan, et la couleur d'arrière-plan aura 333. Maintenant, enregistrez Evolve dans notre navigateur. Alors maintenant, notre couleur de fond est en train d'être modifiée. Maintenant, ce que je veux changer, c'est changer cette famille de polices , puis la couleur de police. Pour modifier la famille de polices, je vais simplement taper famille de polices. Et quelle sera notre famille de polices Notre famille de polices. Je vais juste ouvrir mes téléphones Google et je vais vérifier Notre famille de polices sera donc Avoroserif Il suffit donc de le copier et de le coller ici. Je vais donc simplement supprimer cette famille de polices et la coller ici. Et je vais changer la couleur de ce texte. Pour modifier la couleur du texte, vous pouvez simplement taper la couleur et cette propriété de couleur changera la couleur du texte. Et la couleur du texte doit être blanche, donc je vais taper du blanc. Ou je peux simplement taper FFF, donc FFF. Il s'agit du code hexadécimal de couleur blanche. Alors, enregistrez-le et jetez-y un œil dans votre navigateur, ouvrez-le. Maintenant, comme vous pouvez le voir, notre famille de polices est en train d'être modifiée, puis la couleur du texte est blanche. Et maintenant, nous allons concevoir cette technologie de boutons. Pour concevoir cette technologie de bouton, je vais sélectionner technologie de bouton pour sélectionner technologie de bouton, je vais taper bouton. Et quelles sont les modifications que je souhaite apporter à l'intérieur de cette touche ? Je veux développer cette technologie de boutons. Pour agrandir cette balise de bouton, je vais utiliser le rembourrage, puis la taille de police de ce bouton sera de 16 bigel Ensuite, je vais ajouter une bordure à ce bouton. Comme vous pouvez le voir, il y a une bordure dans ce bouton pour ajouter une bordure, je vais utiliser la propriété de la bordure et ajouter une couleur d'arrière-plan qui sera transparente. Faisons-le. Pour rendre ce bouton un peu gros, je vais utiliser la propriété de rembourrage Le rembourrage sera de dix pixels en haut et en bas, soit dix pixels en haut et en bas, puis 20 pixels de gauche à droite Donc dix pixels en haut et en bas et 20 pixels à gauche et à droite. Enregistrez le navigateur évolutif, donc maintenant notre bouton est gros. Je souhaite maintenant augmenter la taille de police de ce texte. Pour augmenter la taille de police de ce texte, je peux simplement taper la taille de police, et la taille de police sera de 16 pixels, donc 16 px. Et maintenant, je veux changer Je veux simplement ajouter une bordure dans ce bouton pour ajouter une bordure Je vais utiliser cette propriété de bordure et la bordure sera solide de deux pixels et la couleur des bordures. La couleur de la bordure sera donc blanche, je vais donc taper un FFF. Il s'agit donc du code X de la couleur blanche. Sauvegardons donc Eve dans notre navigateur. Alors maintenant, on ne voit rien. Nous devons rendre la couleur de ce bouton transparente. Nous sommes les seuls à pouvoir voir la frontière. Donc, pour rendre la couleur des boutons transparente, vous pouvez simplement taper la couleur arrière-plan et la couleur d'arrière-plan sera transparente. Donc couleur de fond, puis transparent. Cela rendra donc notre bouton transparent. Alors maintenant, comme vous pouvez le voir, nous avons un bouton avec une bordure de deux pixels. Maintenant, vérifions-le. Il contient donc également une bordure de deux pixels, et cela contient également une bordure de deux pixels. Changeons maintenant la couleur du texte de cette police. Modifiez la couleur du texte de la citation suivante. Pour changer la couleur du texte, vous pouvez simplement taper la couleur, et la couleur sera blanche. Colorez puis ajoutez FFF. Disons que nous cherchons notre rameur. Maintenant, notre bouton est blanc. Maintenant, notre page ressemble exactement à cette page. Oui, mais il y a une petite différence. Sur cette page, il y a une marge de 40 weixels entre ce bouton et ce h1t Sélectionnons cette technologie H one et ajoutons de la marge. Donc marge, marge inférieure, 40 pixels. Maintenant, cela ajoutera une marge inférieure entre la technologie H one et la technologie des boutons signifie qu'il y aura un écart de 40 pixels entre cette technologie H one et la technologie Button. Alors rechargeons-le. C'est notre vraie application, et c'est l'application que nous sommes en train de créer. Donc, comme vous pouvez le voir, maintenant, les deux choses se ressemblent. Et maintenant, je veux transformer ce curseur en pointeur en survolant ce bouton Pour ce faire, nous obtenons une propriété, le nom de la propriété est cursor, il suffit donc de taper cursor puis de taper pointeur. Maintenant, notre curseur se transformera symbole de main pendant que nous passerons la souris sur ce bouton Comme vous pouvez le voir, notre curseur est maintenant cette flèche et chaque fois que je survole ce bouton, mon curseur se transforme en ce symbole de main Et maintenant, nous allons ajouter un effet de survol à ce bouton, ce type d'effet ho pour ajouter cet effet de survol, nous pouvons simplement taper le survol de colonne du bouton Je vais donc passer en dessous de cette balise de bouton , puis je vais taper bouton. Et pour ajouter le survol sur ce bouton, je peux simplement utiliser cette colonne, puis taper hover je peux simplement utiliser cette colonne, puis taper hover Ce survol ajoutera donc un effet de survol à notre bouton. Alors, quel type d'effet voulons-nous ? Nous voulons changer la couleur de fond en blanc à partir de ce transparent. Maintenant, la couleur de fond de nos boutons est transparente. Je souhaite changer cette couleur d'arrière-plan en blanc chaque fois que nous survolerons ce bouton Supprimez donc ce transparent et tapez du blanc ou tapez du code hexadécimal blanc, qui est FFF, et enregistrez-le lorsque je regarde dans notre navigateur Donc, comme vous pouvez le voir, maintenant notre bouton, pendant que nous le survolons, est en train de se convertir en blanc. Non, ce n'est pas notre application sur laquelle nous travaillons. C'est l'application sur laquelle nous travaillons. Il y a donc un problème. La couleur de notre police doit également être remplacée par un fichier noir que nous survolerons Donc, pour changer la couleur de police, vous pouvez simplement taper la couleur, puis la couleur VV a 000, qui est un code de couleur noire Enregistrez donc ceci et le volume dans notre navigateur. Alors maintenant, cela fonctionne correctement. Nous avons donc ajouté cette heure avec succès. Et je suppose que notre travail sur le CSS est terminé. Cette page et cette page presque la même apparence. Il n'y a aucune différence. C'est tout pour notre vidéo CSS. Ajoutons maintenant du JavaScript dans ce projet. 4. Recherche de données à partir d'api: Dans cette vidéo, nous allons écrire du JavaScript pour ce projet. Pourquoi nous allons écrire du JavaScript, nous écrivons du JavaScript parce que si je clique sur le bouton de code suivant, rien n'apparaît, cela signifie qu'aucun code aléatoire n'est généré ici ou qu'aucun code aléatoire n'a été affiché ici. Donc, pour afficher des codes aléatoires lorsque nous cliquons sur ce bouton Next Code, nous allons utiliser JavaScript signifie que nous allons écrire du JavaScript. Maintenant, comment obtiendrons-nous les codes aléatoires que nous allons afficher ici ? Pour obtenir les codes aléatoires que nous allons afficher ici, nous pouvons utiliser l'API. Ouvrez simplement votre navigateur, recherchez API des codes Wu Jason et cliquez sur ce premier lien. Et faites défiler un peu vers le bas et vous pourrez voir cette section, obtenir un code aléatoire et copier ce truc. Je vais copier ce truc et ouvrir votre code VS signifie ouvrir votre code ou maintenant, comme vous pouvez le voir, notre fichier JavaScript est vide et maintenant nous allons écrire du code JavaScript. Tout d'abord, que voulons-nous faire ? Tout d'abord, nous voulons sélectionner cette technologie H one, cette technologie paragraphe et cette technologie de bouton. Pour sélectionner cette technologie H one, cette balise de paragraphe et cette technologie de bouton, nous pouvons utiliser ou nous pouvons créer une variable et utiliser le sélecteur de requête par points de document Je vais maintenant créer une variable pour l' en-tête, en-tête signifie sélectionner une balise H one. Je crée cette variable. En-tête, pilote HEADER. Pour sélectionner ce h1t, je peux écrire un sélecteur de requête de document, donc un sélecteur de requête par point, et entre ces crochets, et entre ces crochets, je vais taper le tagnym dont le nom du tag Maintenant, je vais copier ce truc et le coller deux fois. Pourquoi je le colle deux fois parce que je souhaite sélectionner une balise de bouton et une balise de paragraphe Supprimez simplement ce H et tapez paragraphe. Pour le paragraphe, le nom de la variable sera auteur. Tapez, auteur AUT HR, et maintenant nous voulons sélectionner le texte du bouton. Supprimez celui-ci en H et tapez le bouton parce que le nom du tag est bouton . C'est pourquoi je tape un bouton et je supprime cet en-tête et le nom de variable du bouton ou le nom de variable du bouton sera BTN Maintenant, je vais créer une fonction pour créer une fonction, je vais juste taper function et le nom de la fonction sera généré et entre ces crochets, je vais le copier et le coller ici Cela signifie que je vais copier ce point de terminaison d'API ou que je peux copier tout ce code. Je vais copier tout ce code et le coller dans notre navigateur, pas non plus dans notre code dans notre navigateur. Je vais maintenant vous expliquer à quoi sert ce code. Si vous connaissez la programmation asynchrone, vous savez que fetch renvoie une promesse et si quelque chose renvoie une promesse, nous pouvons utiliser la méthode then Cela signifie que maintenant cette récupération renvoie une promesse, c' est pourquoi nous pouvons utiliser la méthode then et nous faisons ensuite du chaînage de méthodes, nous faisons du chaînage de méthodes Pourquoi nous faisons du chaînage de méthodes Parce que cette première méthode sera utilisée pour obtenir la réponse du point de terminaison AP et la seconde sera utilisée pour obtenir données du point de terminaison APA Cette première méthode consiste obtenir la réponse de ce point de terminaison AP. Maintenant, dans la deuxième méthode, je veux obtenir les données. Je peux simplement transmettre des données ou je peux transmettre n'importe quoi, mais je veux transmettre des données. Cela signifie que vous pouvez écrire n'importe quoi pour les données, mais je veux écrire uniquement des données et créer cette fonction de flèche, et je vais créer des crochets et à l'intérieur de ces crochets courbes, je vais enregistrer ces données sur console. Je peux donc voir quel type de données nous obtenons de ce point de terminaison APA. Tapez les données ici dans cet onglet de console, enregistrez-les et jetons un coup d'œil dans notre navigateur. Cliquez sur F 12. Maintenant, dans cet onglet de consultation, nous ne voyons rien, pourquoi nous n'obtenons aucune sortie. Nous n'obtenons aucune sortie car nous n'avons pas appelé cette fonction. Je vais appeler cette fonction dans l'onglet console, donc je vais écrire le journal des points de la console. À l'intérieur, je vais appeler cette fonction. Maintenant, sauvegardons evolution dans notre navigateur. Maintenant, comme vous pouvez le voir, nous obtenons un objet, c'est un objet de données et à l'intérieur de cet objet de données, nous obtenons l'identifiant et le code authornym À partir de ce AuthornyMid et de ce code, nous voulons juste authnym Si vous souhaitez accéder au code depuis cet objet, il vous suffit de taper data point Object. Pourquoi devons-nous taper data point object Parce que nous avons transmis des données ici. Si vous passez autre chose, vous devez écrire un autre code à points pour accéder au code. Passons maintenant au code pour accéder au code. Ce que je peux faire, c'est dans cet onglet de console, je peux simplement écrire un point de données et ce qu'il faut écrire dans data.it write Maintenant, nous recevons une erreur, pourquoi nous obtenons une erreur. Nous recevons une erreur parce que j'ai écrit un point, supprimez simplement ce point et sauvegardons et faisons évoluer notre navigateur Nous devons écrire un code à points de données. Je vais copier ce truc et taper le code à points de données. Je vais supprimer cet espacement, il suffit de supprimer cet espacement je l'enregistre et jetons un coup d'œil dans notre navigateur Maintenant, comme vous pouvez le voir, nous ne faisons que recevoir le code. Si vous souhaitez accéder à l' auteur, vous devez taper data point author, car dans cet objet, le nom de l'auteur a été écrit auteur. Supprimez ce code et écrivez auteur. Jetons un coup d'œil à notre liste. Maintenant, comme vous pouvez le voir, nous recevons juste authornom. Maintenant, il ne nous reste plus qu'à afficher cet autorom et le code dans notre projet Le code sera affiché dans cette technologie H one et le nom de l'auteur sera affiché dans cette balise de paragraphe. Je vais sélectionner cette technologie H one pour sélectionner cette h1t, j'écrirai le nom de la variable Le nom de la variable est header, donc je vais écrire header et point. Le texte intérieur de la technologie H one sera le code. Écrivez simplement le texte intérieur. Le texte animalier est égal à « Je vais utiliser ce Bactis, pourquoi j'utilise le J'utilise Bactis parce que je souhaite utiliser un opérateur ternaire. Pourquoi nous utilisons un opérateur ternaire, nous utilisons un opérateur ternaire parce que nous voulons utiliser ces données, simplement écrire des données ou nous pouvons voir que nous voulons injecter ces données dans ce texte interne C'est pourquoi nous utilisons un opérateur ternaire. Maintenant, il suffit d'écrire des données et pour accéder au code, vous devez écrire du code à points. Sauvegardons et jetons un coup d'œil dans notre navigateur. Maintenant, comme vous pouvez le voir, nous recevons un code dans notre balise H one. Pour l'auteur, je vais faire de même. Je vais simplement le copier et le coller en dessous supprimer cet en-tête et taper le nom de variable de ce paragraphe. Le nom de variable de ce paragraphe est auteur, tapez auteur et au lieu de ce code, vous devez écrire auteur, écrire auteur. Je vais supprimer cet auteur d'ici. Alors enregistrons ceci et jetons un coup d'œil dans notre navigateur. Maintenant, comme vous pouvez le voir, nous obtenons un code N, nous obtenons également le nom de l'auteur. Maintenant, nous allons cliquer sur le bouton de code suivant. Si je clique sur le bouton de code suivant, rien ne se passe. Cela signifie que notre code ne change pas, ou bien nous pouvons dire que nous ne pouvons pas générer de code aléatoire. Comment générer ce code aléatoire ? Pour générer un code aléatoire, nous devons appeler cette fonction encore et encore lorsque nous cliquons sur ce bouton. Cela signifie que si nous cliquons une fois sur ce bouton, nous appellerons cette fonction une fois. Si nous cliquons deux fois sur ce bouton, nous appellerons cette fonction deux fois et le fait que cette fonction soit appelée deux fois signifie qu' un nouvel appel de fonction aura lieu. Nous obtiendrons un nouveau résultat et nouvelles données, ce qui signifie que nous recevrons un nouveau code et un nouveau nom d'auteur. Je vais supprimer ce document de console et taper simplement le point du bouton sur Evenistener car nous voulons exécuter une fonction lorsque nous cliquons sur le bouton Je vais juste écrire button point sur Evenistener. Donc, dans cet écouteur d'événements, quel événement ce bouton écoutera-t-il ? L'événement que nous voulons donner est un clic parce que nous voulons exécuter une fonction lorsqu'un bouton sera cliqué Maintenant, quelle fonction voulons-nous exécuter ? Nous voulons exécuter cette fonction de génération, il suffit donc de taper generate ici. Juste le nom de la fonction. Tapez generate, sauvegardons et jetons un coup d'œil dans notre navigateur. Maintenant, si je clique sur le bouton de code suivant, nous obtiendrons un code et le nom de l'auteur. Et si vous cliquez à nouveau sur ce bouton, nous obtiendrons un autre code et une autre autorisation. Mais maintenant, comme vous pouvez le constater, notre style ne correspond pas. Nous devons placer ce contenu au centre de nos préoccupations. Pour placer ce contenu au centre, vous pouvez simplement ouvrir votre fichier CSS et dans cette technologie H one, vous ne pouvez que texter Align Center. Il suffit donc d'écrire le texte Aligner le centre. Maintenant, sauvegardons et jetons un coup d'œil dans notre navigateur. Maintenant, comme vous pouvez le constater, nous obtenons des moyens pour que notre contenu ne touche pas la bordure de ce navigateur. Il a maintenant un certain espacement entre la gauche et la droite. Voilà, nous avons créé une application de génération de code aléatoire en utilisant JavaScript. J'espère que ce cours vous plaira. Si vous souhaitez que j'ajoute des fonctionnalités supplémentaires à cette application de génération de code aléatoire, vous pouvez simplement m'en informer et j'ajouterai cette nouvelle section dans ce projet.