- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
- Formations
- conversion_path Parcours & Formations
- science Projets
- data_object Exercices de code
- psychology Exercices IA
- quiz Quiz
- Articles
- rss_feed Blog
- sort_by_alpha Glossaire
- menu_book Guides
- help_center FAQ
- media_link Ressources
- Communauté
- groups La communauté
- forum Questions
- live_tv Mentorats
- science Projets mensuels
Deviens membre Premium magic_button
Débloque cette session en devenant Membre Premium 🚀
Inscris-toi
(c'est gratuit !)
Un compte est nécessaire pour participer aux discussions.
Créer un compte person00:00:00 :Dans cette partie on va rajouter une condition ici sur nos boutons pour pouvoir changer la couleur dubouton si c'est celui sur lequel on a cliqué. Donc vous voyez ça va commencer à faire des
00:00:09 :lignes qui sont un peu grandes, je vais minimiser ici mes fichiers à gauche pour avoir un peu plusde place et cette condition en fait on va la rajouter dans la classe ici. Donc en fait on
00:00:19 :va vouloir modifier cette classe ici, donc la classe bouton secondary, on va la modifier enfonction du nombre de jours qui est actuellement affiché. Pour ça on va utiliser page label
00:00:29 :puisque page label ça va contenir si on est sur la vue de semaine la chaîne de caractère semaine,pour les mois ça va contenir mois et pour l'année ça va contenir année. Donc c'est parfait puisque
00:00:37 :nous ce qu'on veut c'est par exemple quand on clique sur semaine, donc quand on va être dansla vue semaine, ce page label va être égal à semaine et donc on veut changer la couleur dubouton pour que ce ne soit plus bouton secondary mais bouton info tout simplement. Donc ce qu'on
00:00:51 :va faire ici c'est une condition. Alors une condition, là encore vous allez voir la syntaxeest très proche de celle de Python. On va faire donc des accolades avec les pourcentages, là encore
00:01:00 :vous commencez à être habitué, et on va faire une condition avec un if et on va vérifier ici sipage-label est égale, donc les deux symboles égales, à la chaîne de caractère semaine commececi. Donc bien faire attention ici par ailleurs avec les guillemets, là vous voyez que je mets des
00:01:17 :guillemets simples, c'est normal puisque j'ai des guillemets doubles ici pour déterminer ma classe.Donc il faut bien faire attention, si je mets à la place d'un guillemet simple un guillemet double,vous voyez que là on va avoir une erreur puisque ça va considérer qu'on est en train de fermer ce
00:01:29 :symbole classe ici. Donc moi ce que je veux c'est vraiment indiquer ici que j'ai une chaîne decaractère et pour ce faire donc je varie entre les guillemets simples pour ma chaîne de caractèreet les guillemets doubles pour définir ma classe. D'accord ? Donc ça c'est la condition qui va
00:01:43 :vérifier que notre page label est égale à semaine, donc si c'est le cas et bien on ne va pasafficher bouton secondary, on va afficher bouton info, donc si on est sur la page des semaines cebouton sera d'une couleur un peu bleutée. Sinon, donc là on va faire un else, donc je remets des
00:01:59 :accolades ici et on va mettre là encore les pourcentages et on va faire tout simplementun else. Donc là encore vous voyez ça ressemble beaucoup à Python, on a notre if, notre else et
00:02:10 :on va avoir à la fin comme pour les boucles for un tag qui va nous permettre de déterminer la finde notre condition. Donc moi dans le else ici je vais mettre bouton tiré secondary, donc si on est
00:02:22 :sur la page semaine on affiche bouton info, sinon on affiche bouton secondary et à la fin comme jevous dis il faut fermer cette condition comme pour les boucles for et on va mettre cette fois-ci unend if comme ceci avec les pourcentages, les accolades encore une fois. Donc vous voyez ça
00:02:37 :commence à faire pas mal de code, on a déjà l'url au début, là maintenant on a la condition et vuqu'il faut mettre à chaque fois pas mal de choses comme le end if pour terminer la condition c'estassez long à écrire mais ça va être à peu près la même condition pour les trois boutons ici. Dans
00:02:50 :ce cas-ci on vérifie si c'est semaine, donc si c'est semaine on met bouton info sinon on metbouton secondary, on va copier tout ça et on va le mettre pour les mois donc on va remplacer boutonsecondary ici par cette condition et le prochain également par cette condition et on va juste
00:03:04 :remplacer la chaîne de caractère donc on va vérifier ici si c'est égal au mois et ici sic'est égal à l'année. Donc si on est avec semaine c'est ce bouton qui va être en bleu, si c'est le
00:03:13 :mois on va avoir le bouton mois qui va être en bleu et l'année pareil. Donc on va tester tout ça,on revient sur notre page ici, j'actualise et là je suis par défaut sur la vue semaine donc vousvoyez que mon bouton est bien avec le bg-info, si je clique sur mois on va être sur la page des
00:03:28 :mois et donc c'est cette condition qui sera vérifiée et je vais tester l'année pour voirsi ça marche de la même façon donc c'est parfait et si je mets un jour aléatoire donc par exemple350 là on n'a aucun des boutons qui est en bleu puisque forcément aucune des conditions n'est
00:03:40 :vérifiée et on a juste l'affichage personnalisé ici donc si vous voulez vous pourriez rajouter unbouton personnalisé avec même peut-être une boîte de dialogue en javascript qui vous demande unnombre de jours personnalisé à rentrer et ensuite l'envoyer dans l'url. Donc on pourrait faire des
00:03:55 :choses du genre là moi je vais juste garder mes trois boutons semaine mois et année et ça mepermet donc de cliquer directement sur ces trois boutons pour avoir des affichages différents avecmes devises je vais juste vérifier que tout fonctionne bien là encore si j'enlève mes devisessi j'en mets deux seulement au lieu de quatre ou si j'en mets qu'une ça fonctionne parfaitement donc
00:04:13 :là vous voyez on peut afficher très facilement les valeurs de l'usd sur l'année sur le mois surla semaine à chaque fois avec notre graphique qui s'adapte et cette petite animation quepersonnellement j'aime beaucoup. Donc voilà comment changer la couleur des boutons voilà
Ce n'est pas fini...
✋
Tu as complété % du parcours 🔥
Termine l'intégralité de la formation pour pouvoir débloquer ton attestation de réussite.