TUTORIEL : CALCULATRICE EN JAVASCRIPT SIMPLE
Вставка
- Опубліковано 12 вер 2024
- Calculatrice simple pour niveau intermédiaire.
.
Le code source sur Github : github.com/wik...
Ou sur CodePen : codepen.io/wik...
.
Webgradients : webgradients.com/
--------------------
Me retrouver ailleurs :
Instagram : / wikodemedias
CodePen : codepen.io/wikode
Github : github.com/wikode
Twitter : / wikodemedias
--------------------
Musique :
► Music by: Dj Quads - "Cruise Around"
• SUBSCRIBE to the Official DJ QUads UA-cam channel HERE: www.youtube.co....
• Follow Dj Quads on SoundCloud HERE: / aka-dj-quads
• Follow Dj Quads on Twitter HERE: / djquads
• Follow Dj Quads on Spotify HERE: open.spotify.c....
• Follow Dj Quads on Instagram HERE: / djquads
• Support Dj Quads on Patreon HERE: / djquads
• Music released by: Chill Out Records goo.gl/fh3rEJ
• www.ChillOutMedia.com / www.LoFi-HipHop.com
Bonjour à tous ! Pour ceux qui se demandent pourquoi keyCode est barré lorsque vous écrivez le code chez vous, c'est parce qu'il est amené à disparaître. Mais pas de panique ! Lorsque ce genre de choses arrivent, il suffit d'aller chercher la propriété sur MDN : developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
Il semble que cet event est remplacé par keyboardEvent.code dorénavant. Il vous suffit donc de remplacer :)
Pour le moment keyCode est encore supporté par certains navigateurs donc cela peut fonctionner mais je vous recommande de changer directement.
A bientôt et n'oubliez pas de voir les nouveaux tutos sur la chaîne ! ;)
merci c'est justement ce que je constatai
Bravo pour votre tuto qui est d'une très grande qualité! votre diction est excellente, les explications sont très claires, pas d'hésitation, pas de surplus d'information inutile. Qualités remarquables de pédagogie, grande maîtrise, chapeau l'artiste!
Merci beaucoup! Votre retour me fait très plaisir !! Cela me motive à en faire d'autres à l'avenir :)
Merci, pour une fois que qqun applique et explique litteralement tout le processus, je m'abonne
Vraiment très bien tes vidéos, c'est clair, c'est pédagogique ; on apprend de nouvelles choses et de nouveaux concepts à chaque approche.
Très franchement j'ai adoré ta vidéo! Elle est très intéressante, complète, facile à comprendre, tout est bien illustré/expliqué.
Bref, elle est super :)
Merci beaucoup ! :)
Hey mec, ton tuto était très cool, j'ai repéré quelques bugs que j'ai essayé de fixe (je suis un débutant en js):
- Tu as oublié de fixer de taille max pour la calculatrice, elle peux donc s'étirer à l'infini si l'utilisateur rentre trop de nombre. j'ai donc mis un max-width: 18vw; dans .calculatrice, ainsi que un width : auto pour qui s'adapte au ratio d'écran, c'est pas parfait mais bon
-J'ai modifié la détection de problème, en la fessant afficher directement dans l'écran
window.addEventListener('error', (e) => {
ecran.textContent = ('ERREUR MATHS');
})
- Vus que la calculatrice ne s'étire plus à l'infini, j'ai rajouté une limite de caractère pour évitez qu'il sorte de l'écran (dans la const calculer) :
if (ecran.textContent.length >= 15 ){
ecran.textContent = ('SATURED RAM');
}
Sinon pour affichez les tableaux ils existent console.table() qui affiche plus d'information sur le tableau.
Sinon gg pour le tuto ^^ tu expliques tellement bien ^^
Salut ! Merci pour toutes ces suggestions et le partage des morceaux de code pour les faire, c'est cool 😁
Pour couper le nombre de caractères automatiquement (pour éviter que ça dépasse de l'écran, sans s'embêterà définir un nombre précis en JS) tu peux aussi utiliser des propriétés CSS avec :
text-overflow: ellipsis (voir MDN pour les autres options; à utiliser avec overflow: hidden et white-space: nowrap pour que ça fonctionne !)
Merci encore pour ton commentaire 😁 !
@@codefacileWK C'est pas bête, je me le note pour plus tard :) et derien, je compte faire toutes les vidéos de ta chaine en essayant de modifier ton projet, si je recopie bêtement sans comprendre je progresserais jamais :) (j'ai pas encore le niveau pour réussir à faire un projet de a à z tout seul)
Très bonne vidéo gg, tes petites explications avec des exemples font vraiment la diff.
Je viens de découvrir ta chaine j'ai survolé la liste de tes videos, si elles sont aussi biens que celle-ci je te remercie fort d'avance.
Merci beaucoup c'est vraiment sympa! :)
Un tuto bien clair une pédagogie d'explication excellente et bien méthodique. Merci de nous aider..
Merci, c'est très bien expliqué avec en cadeau les astuces vs code
nouvelle masterclass de wikode medias c'est quoi ce poulet sérieux merci au nom de tous les nuls en code de france
Je découvre votre chaine et quelle bonne surprise ! Ce tuto est vraiment excellent 👌👌👌
Inutile d'aller contre ce que tout le monde pense de votre vidéo, ça serait malhonnête 🤣
J'ai hâte de découvrir vos autres publications 😀 🔜
Merci beaucoup pour ce retour ! C'est très encourageant pour moi 😁
C’était vraiment super merci beaucoup
Vraiment TOP ! Très clair, des réalisations concrètes ! Tu gagnes un abonné, merci pour ton travail 🙏
Merci beaucoup ça me fait vraiment plaisir ! :)
@@codefacileWK avec plaisir ☺J'avais une petite question : la calculatrice s'allonge en même temps qu'un chiffre très long. As-tu une solution? Un "resize : none" en CSS ou bien une ligne de JS en + ? Je me demande si en calculant un nombre infini ça ne ferait pas beuguer la machine ...
oups désolé pour la question, je viens de voir le commentaire plus bas
Tu prends le temps d expliquer , c'est super , tu gagnes un abonné 🙂 . Merci en tout cas 🙂
Merci beaucoup 😁
Bravo pour ce tuto hyper clair et efficace, ça m'a bien aidé !
Merci bien c'est majestueux MONSIEUR
TU MÉRITE L'ABONNEMENT VRAIMENT TOP CONTINUE 👍🏾👌🏿😏
Merci beaucoup ! :)
Merci beaucoup pour cette vidéo, tu expliques vraiment bien !
Merci à toi pour ce retour ! :)
Merci pour le tuto t'as vidéo m'a beaucoup aider.
Maginifique Tuto, enfin quelque chose de clair
très pedagogique , explicite, c'est à feliciter
Très bon format. Bonne continuation
Merci! À vous également :)
Merci pour ce tuto! très bien expliqué ! Bravo !
Salut ! Ça fait un mois que j'ai commencé à apprendre le JavaScript, et j'ai essayé de créer la logique d'une calculatrice en solo. Cependant, je suis bloqué. Il s'avère que la logique en elle-même ne suffit pas ; il faut aussi connaître toute une série de méthodes ! Heureusement, ta vidéo est venue à ma rescousse. Tout fonctionne parfaitement pour moi, à l'exception du keyCode, qui pose problème lorsque j'appuie sur la touche "13" du clavier. Elle effectue une multiplication étrange, tandis que lorsque j'appuie sur le signe "=" avec la souris, j'obtiens le bon résultat. :-)
Merci pour cette chaîne ! Est-il vraiment possible de devenir développeur en 6 mois... ? Haha, c'est difficile, je pense. En tout cas, dans mon cas, après 2 mois de HTML et CSS, et 1 mois de JavaScript, j'ai encore beaucoup à apprendre. ^^
Merci beaucoup ! Ce tuto ma beaucoup aidé ;)
Super tuto ! merci pour le partage. Très bien expliqué
Merci beaucoup pour votre retour 👍 bonne journée !
@@codefacileWK Merci beaucoup, en espérant avoir d’autres tutoriels prochainement !
Bonjour, tout d'abord merci pour ce super tuto, clair et très efficace pour les débutants !
J'ai un problème, lorsque je rentre la propriété KeyboardEvent.code, et que je lance un console.log(valeur) (exactement ce que vous faites à 27:20), je me retrouve avec des "undefined" après avoir appuyé sur les touches... Je vous avoue avoir du mal à comprendre cette propriété, auriez-vous une aide à m'apporter ?
Tutoriel TOP!!!!! merci beaucoup!!!!!!
Super tuto ! Je m'en souviendrai :)
C un bon tuto merci ... Bonne contunation ....
Bien qu'il marche, pourquoi avec moi, le "keyCode" est-il baré ? au niveau de le partie "keydown"
Bonjour, Je me permet d'envoyer ce message pour demander si c'est normal que les icons des boutons n'apparaît pas sur Opera GX (navigateur)
J’ai tout bien fait, mais lorsque j’appuie sur un bouton, le nombre n’apparaît pas
Vraiment merci hein merci❤️❤️❤️❤️
Bonjour j’ai un souci une erreur (document is not defined)
Bonjour à toi. Tu viens de gagner un abonné. Explication très clair et précis. Je vous suis depuis Haiti. Mais j'ai une question. Comment l'exporter sous forme apk d'Android. Merci
Bonjour et merci pour ce retour ! :)
A mon connaissance il n'est pas possible d'exporter un projet web au format apk... mais peut-être qu'il existe des solutions. A voir sur internet ou chatGPT !
Bonjour , j'ai voulu réécrire le code pour le tester et il n'as pas fonctionné. J'ai regardé si je n'ai pas fait d'erreurs de tapes et il n'y en avait aucune donc le code ne fonctionne pas . Je voudrais savoir comment vous avez fait pour faire fonctionner la calculatrice car je n'y arrive pas .
Bonjour, la fonction eval() présente des risques de sécurité d'après le mdn. Quelqu'un aurait une alternative à cette syntaxe ?
bonjour
super tuto
j'ai juste un soucis, le body prend toute la largeur de la page web et l'écran aussi, les touches sont bien placé mais j'ai une grosse bande à droite des touches
Bonjour,
N'hésitez pas à aller voir le code source en description pour le comparer au votre et trouver les différences qui cause ce rendu
je ne vois pas comment tu fais apparaitre dans la console du navigateur les colonnes des touches et autre à chaque fois je n'ai rien qui s'affiche dans la console
Bonjour, je ne me souvenais plus de ce commentaire. Je voulais me lancer dans Visual studio code mais c'est trop compliqué. Je préfère en rester à Excel et VBA. Bonne continuation.
Salut j ai suivis ce tuto, j ai revérifié tout les ligne de codes mais quand j appuie sur une touche elle ne s affiche pas sur l ecran
Salut ! Est-ce que tu as regardé la console pour voir s'il y avait une erreur ? Sinon essaye un console log dans l'event listener à l'appuie d'une touche pour voir si ton listener fonctionne bien :)
Bonjour,
Petite question, pour la première partie, (j'entends par là l'affichage de "Hello" dans la console)
après le lancement de Live serveur la phrase "Live reload enabled." apparait dans la console et "Hello" n'est pas présent.
j'ai ajouté :
body{
background-color: coral;
}
dans style.css
et à l'enregistrement du projet le fond a bien changé de couleur.
une idée?
merci à vous.
j'ai avancé dans le projet, tout semble fonctionner correctement, sauf le "Console.log(touches);"
la console reste désespérément vide....
Bonjour, difficile de vous aider comme ça. N'hésitez pas à voir le code source (lien description) pour comparer avec votre code ! Bon courage
Mais comment faire pour le rendre en application
Pourquoi quand je fais button.bouton*19 tout s'affiche sur une seule ligne ? SI je fais bouton*19 c'est ok pourtant.
Ce n'est que du formattage, j'ai aussi ce comportement depuis quelques temps. Avec l'extension Prettier pour visual studio code vous pouvez paramétrer un formattage à la sauvegarde qui remettra tout joliment automatiquement :)
Merci pour le tuto ✌🏾.Abonné 😎.
Merci beaucoup pour ton retour ! 😁
Une autre question, aurais tu une idée pourquoi à 27:15 quand je tape valeur = e.keyCode, keycode se met en barré ? Pourtant ça fonctionne quand même
Comme beaucoup d'autres l'ont relevé en commentaire, c'est parce que depuis la sortie de cette vidéo keyCode est progressivement supprimé. Cela signifie que certains navigateurs le comprennent encore (c'est pour cela que ça fonctionne chez vous) mais qu'il est recommandé de ne plus l'utiliser. Vous pouvez aller sur la page MDN de keyCode pour en savoir plus developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode
A priori cela est remplacé par keyboardEvent.code
petite question comment fait-on pour telecharger html sous visual studo code
Bonjour! Vous trouverez les liens du repo sur github dans la description de la vidéo. Il suffit de le télécharger ou le cloner
Salut ! Déjà merci pour le tuto il est vraiment de qualité avec des explications très clair sur la logique à adopter etc...
Mais pareil qu'une autre personne j'ai un soucis avec .keyCode qui est barré avec la mention comme quoi ce serait "déprécié". Du coup je ne peux avancer sur le tuto, as-tu une solution ? Merci et continue tes vidéos, elles sont top ! ;)
ca ne change rien qu'il soit barré moi aussi ca le fait et ca marche tres bien!
Voila, je viens de faire un changement formation, informatique réseaux => développeur web.
Et j'ai vraiment été intéressé par cette vidéo, et le plug-in "button.bouton*19" à 06:11. Est-ce que cela est intégrer directement à Visual Studio ?
Hello ! Il s'agit de Emmet qui est intégré de base à VS code normalement :)
Qu'est ce qu'on est sensé y apprendre si on n'est pas capable de la faire soit même ?
Je suis entrain de faire ce challenge d'un site de devweb, et je dois faire uen calculatrice.. et je me retrouve dans des convolutions et ne trouve pas la logique
Le tuto ou les tutos en général sont très bien, mais pour un débutant le plus important est d'avoir la logique.
Y’a t’il une possibilité de reproduire cette calculatrice mais sans avoir les Keycode ? La faire fonctionner sans ce mécanisme ?
Bonjour ! Oui il suffit de ne pas inclure toutes les parties qui concernent les keycodes. Par contre, pensez à conserver les event listener au clic sur les boutons à l'écran, afin de la garder fonctionnelle en cliquant sur les boutons de la calculatrice :)
@@codefacileWK D’accord ! Merci de cette réponse rapide je suis vraiment dans la galère je vais essayer ;)
@@codefacileWK Possibilité de vous parler en privée ?
Si ça ne vous dérange pas, on peut échanger ici en commentaire ? Comme ça si d'autres se posent les mêmes questions ils auront les réponses :)
@@codefacileWK Non aucun soucis! C’est un peux long à expliquer, mais en gros j’ai un projet de faire une calculatrice et j’aurais déjà du la rendre la semaine dernière mais je n’ai jamais réussi à en faire une correct qui fonctionne. Du coup je suis venu sur votre tuto en panique pour réussir à en faire une qui passe un minimum.. J’ai éviter de reprendre toutes les caractéristiques du design de votre calculatrice car on verra tout de suite que ce ça ne vient pas de moi haha ! Mais du coup j’aimerai enlever les key codes mais si j’ai compris le fonctionnement et que je trouve ça particulièrement intéressant, on m’accusera immédiatement de trichera malheureusement... Du coup, moi qui est vraiment très mauvais en codage en particulièrement en java j’aimerai juste la faire fonctionner normalement qu’elle calcul juste ce que je lui demande et sans avoir les keycode et les chose un peux « techniques » que je ne suis pas censé connaître.. Voilà en gros désolé pour mon message un peux long mais je voulais être franc avec vous et que vous compreniez bien mon problème bonne journée.
pourquoi 3 petits points pour le tableau à 20:02 ? merci !
Pour passer d'une nodeList à un tableau. Les 3 petits points c'est ce qu'on appelle le spread operator, ça permet de prendre chaque élément de la nodeList et de les placer dans le tableau parent ! On le fait pour manipuler plus facilement des éléments du DOM (du genre faire un foreach)
Je ne sais pas si c’est visual code studio qui a changé au fil du temps mais la moitié du code me revenait en erreur…
Bonjour, si c'est des lignes rouges dans VS code c'est soit un problème de code (manque de parenthèse ou accolade très fréquent), soit l'indexation qui bug et dans ce cas il faut essayer de redémarrer VS Code.
D'ailleurs, si vous changez la "e.keyCode" par "e.key", tout devient plus simple et vous n'avez plus besoin de faire des allers-retours avec votre index, etc., car cela vous renvoie directement la touche appuyée en "clair". Donc, si vous appuyez sur 7, cela renvoie 7. Il faudra changer le data-key de l'HTML et aussi le CSS, mais c'est vite fait. Par contre, j'ai toujours un bug de temps en temps quand je commence à cliquer à la souris et que je veux valider avec Entrée sur le clavier. Des fois ça bug, et des fois non, c'est bizarre. Mais sinon, la logique est top, j'ai adoré ce cours !
mon ecran est bloqué à gauche du clavier de la calculatrice, je ne comprend pas pourquoi
Bonjour, je vous invite à comparer votre code avec le code source du projet (voir liens en description). Si c'est un problème d'affichage purement visuel, le problème vient certainement du code CSS !
à tout les coups t'a fait la même erreur que moi, à mettre "100px" pour indiquer le nombre de pixel, au lieu de "100%" pour indiquer que tu veux qu'il prenne tout l'espace :)
petit abonnement au passage
Merci beaucoup ! 🙏
@@codefacileWK salut je m'abonne aussi !
merci beaucoup pour tout l'explication mais juste un truc! quand j'ai copier ton code source sa n'a pas vraiment marché il reste toujours le problème de l'affichage des application et des num mercii ^_^
Bonjour ! Quel est le message d'erreur affiché dans la console ? :)
@@codefacileWK
Failed to load resource: net::ERR_FILE_NOT_FOUND
gen204:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
index.html:1 Uncaught SyntaxError: Unexpected token '
@@mimouamigo2673 Mince, il semblerait qu'il y erreur :
- Soit de frappe (essaye de voir dans le fichier html si tout colle bien, à priori il y aurait un " < " en trop, mais peut-être que le problème vient d'ailleurs).
- Sinon, puisque la dernière ligne d'erreur vient de l'alerte du message d'erreur, dans app.js essaye de remplacer l'event listener comme ceci :
window.addEventListener('error', (e) => {
alert('Une erreur est survenue dans votre calcul : ' + e.message && e.message)
})
De cette façon, c'est seulement s'il y a message à l’événement qu'il sera affiché. Cela devrait l'empêcher de chercher le message s'il est null.
Tiens moi au courant si tu ne trouves pas :)
Chez moi le code fonctionne, peut-être clone tout le repo depuis github, sinon copie / colle chaque fichier ?
@@codefacileWK d'accord merci ^_^ je vais voir
Bon moi au début ça marchait normalement et je suivais.
Mais à partir du debut du css dès la div calculatrice ça ne fonctionnait plus comme vous le montrez dans la vidéo.
Veuillez m'aidez s'il vous plaît !
Bonjour! Quel est le problème plus précisément ?
Vous n'avez aucun style qui s'affiche ? Ou il y a du style mais pas le bon?
@@codefacileWK si ! Au faite j'ai réglé le problème du style mais par contre en Javascript je comprends pas bien car ça ne marche pas .
Même après avoir fait textuellement ce que vous avez fait
Oh punaise ! Je partais sans liker !
Merci ;)
Haha merci ! 😁
8:30
Super ! Par contre Key se prononce "ki" pas "keille" :P
Haha je fais au max avec mon superbe accent ! 😂 promis je ferai des efforts 🤞
Bonjour, "" const listekeycode = touches.map(touche => touche.dataset.key); """ Des que j'enregistre il me met absoluement des () autour de touche : const listekeycode = touches.map((touche) => touche.dataset.key); Ce qui me fais planter le code :/
je ne sais plus où je suis avec le javascript!ça ne veut pas passer dans ma tete!tous les tutos se ressemblent!je ne vois pas son utilité!les tutos se limitent malheureusement aux définitions classiques ,à faire des additions soustractions,des présentations du type,le nom ,le prénom est etc.....On a l'impression que ce n'est pas de l'informatique,donc vite décourageant!!!ya til un ange sauveur!?,
Sur youtube le contenu est gratuit, il est donc difficile de trouver des cours complet. Vous en aurez sur des plateformes payantes type udemy si vous voulez aller plus loin !
En FR et gratuit vous avez sinon ce site : www.pierre-giraud.com/javascript-apprendre-coder-cours/ qui est très bien
Pas assez de pédagogie, vous ne vous mettez pas au niveau des débutants. Vous allez trop vite. Merci quand même.
Bonjour. Merci pour votre retour ! Je suis surpris de votre commentaire. Pourriez-vous m'en dire plus et me donner des exemples de ce que je pourrais améliorer ? Cela m'aiderait beaucoup !
Merci !
Est un spam jvois pas d'autres chose 💀💀@@codefacileWK
bravo...merci m'encourager d'abone ma nouvelle chaine youtube
Merci pour ce tuto! très bien expliqué ! Bravo !