TUTO / COURS sur le DOM en JavaScript COMPLET - On Clone Le Quiz de MICODE

👉 Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
👉 FICHIER NOTION AVEC CSS ET HTML DE BASE : codelynx.notion.site/Code-pou...
👉 Le QUIZ final : melvynx.github.io/quiz-micode...
▶ VIDÉO
Dans ce nouvel épisode, nous explorons ensemble les aspects avancés du DOM (Document Object Model), cette interface de programmation essentielle pour interagir avec le contenu de vos pages web en JavaScript.
00:00 - Intro
02:18 - Setup du projet
08:14 - Premier script
09:14 - querySelector
11:30 - Inspécteur Chrome
13:00 - Modification des nodes
16:00 - Navigation dans le DOM
24:00 - Alternatives querySelector
27:00 - Création d'élément
37:00 - Event listener
47:00 - Début du Quiz
58:00 - Les events
01:05:00 - Retours à notre quiz
01:07:00 - Création de la question
01:11:00 - Gestion du submit
01:21:00 - Gestion fin de quiz
01:28:00 - Gestion du bouton suivant magique
01:35:00 - Petit détails
01:41:00 - Deploy de l'application sur Github Pages
01:49:00 - Outro
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
Le club du développeur secret codelynx.dev/club
Cours GRATUIT sur useState : codelynx.dev/beginreact/usestate
Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs
Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject #javascripttutorials #javascripttutorialforbeginners

[@melvynxdev]

Partie 1 (BASE) : mlv.sh/yt-js-p1 Partie 2 (TABLEAU / REFERENCE / OBJECT ) : mlv.sh/yt-js-p2

[@Katermuke]

Tu es et de loin a ce jours le meilleurs youtuber front-end du youtube game, toujours un plaisir de regarder tes vidéo ne change rien !

[@melvynxdev]

Merci beaucoup à toi ❤️

[@nabyyyyy]

je valide hein, la qualité est vraiment présente. GG à toi@@melvynxdev

[@tubvideo8611]

Vraiment merci beaucoup pour ce temps ; tu est vraiment gentil !!!

[@melvynxdev]

merci bcp

[@sangfroidniloi]

Hyper bien expliqué, je croyais ne jamais comprendre le JS :D Merci, merci, merci !!!!

[@melvynxdev]

Merci beaucoup à toi !

[@juandevillenfagne3874]

Super vidéo de micode d’ailleurs

[@melvynxdev]

La vidéo est bien mais la mignature et titre sont tellement clickbait alors que le contenue ne parle ni de GPT5 ni de remplacement

[@TheGoldbuckle]

Génial ! J'ai tout recodé en même temps pour bien comprendre chaque fonctions etc et c'était vraiment bien. Des fois ça va un peu vite quand même ^^ j'écris assez vite mais pour suivre et comprendre en même temps j'ai dû mettre pause de temps à autres ^^ Sinon c'était top encore une fois de voir comment faire quelque chose de carré avec de bonnes pratique plutôt que de juste faire un fichier html css et js basique.

[@melvynxdev]

Hello, merci oui je vais toujours un peu vite, j'ai pas envie que tu t'ennuie xD

[@ethansmith2803]

Super vidéo 👍🏼 une petite vidéo sur Vite ça allèrent cool pour crée des projets rapidement

[@melvynxdev]

J’en ai déjà OMG

[@mamadoualphatoure6566]

SLT Melvyn, Franchement la vidéo est bien structurée, l'explication est claire.❤❤❤ Une petite remarque, c'est que tu vas très vite en parlant qu'en écrivant. A ce rythme il est difficile 💥💥💥 pour les débutants de suivre très bien et comprendre.👋👋👋

[@melvynxdev]

Merci beaucoup ça fait plaisir

[@monsieur7787]

Au top 👌

[@melvynxdev]

merci

[@mohamedlabarre166]

SUPER

[@melvynxdev]

génial

[@HenrySommeil]

Des masterclass gratuitement c'est Noël avant l'heure

[@melvynxdev]

exacteent je fais un noël pour la rentrée :D

[@d_i_b_i]

Salut melvynx🤗 !!! HELP !!! Très instructive ta vidéo.. je voudrais la reproduire de A - Z mais avec des questions différentes.. J'ai remarqué que tu as dit que c'est chatGPT qui a généré les tiennes.. J'ai essayer ( avec Gemini ) mais je t'avoue que je ne sais pas comment bien formuler la question😅 pour qu'il me donne un tableau d'objet avec comme Key1 le mot word et comme valeur un mot du dictionnaire, et Key2 le mot definition avec comme valeur la definition de la valeur de Key1. 😅😅 Ex : const dico = [ { word: "Ordinateur", definition: "Machine électronique complexe capable de traiter des informations et d'exécuter des programmes.", }, ... ] Je sais pas si je suis claire dans ma demande.😑 Bref comme formuler la question a l'IA🤔

[@melvynxdev]

Hello, il faut lui donner un exemple puis lui donner de demander de générer les questions !

[@user-hg2pi3oc1e]

Salut merci pour cette video🥳. 9a serait cool si tu faisais une pour node js 💯

[@melvynxdev]

Ah oui, c'est un peu JavaScript :o

[@gednda7001]

Il y a de l'avenir avec toi et t'as plein d'avenir

[@melvynxdev]

Merci !

[@sangfroidniloi]

Il reste une action non gérée, si on clique sur Submit sans avoir sélectionné une réponse, on se retrouve avec un selectedAnswer is null dans la fonction Submit, il faudrait soit désactiver le bouton submit jusqu'à une première sélection, soit gérer la non sélection avec un petit message

[@melvynxdev]

Ah oui tu as raison... oups

[@GoToTheNextLevel]

Super contenu, merci J'ai une question, c'est quoi la différence entre JavaScript d'aujourd'hui et JavaScript d'avant ( d'il y a 6ans par exemple )

[@melvynxdev]

La syntaxe et certaines fonctionnalités comme les async/await

[@raffgiga21]

1:29:20 au lieu de re render à chaque seconde, ça ne serait pas plus opti de juste modifier le innerText à la place de recréer à chaque fois un nouvel élément ?

[@melvynxdev]

L’optimisation dans une application de cette taille n'est vraiment pas importante. Oui, ce serait plus opti, mais il faudrait aussi modifier le contenu de toutes les radios ainsi que les id et le disabled. Soit rendre mon code 3x plus verbeux. Je préfère un code pas opti mais très lisible et c’est un peu ce que React fait, ils détruisent et recréent tout même si ReactDOM essaie d’optimiser ça

[@mohamedlabarre166]

Salut s 'agissant de l'importation du fichier des questions est il possible d ' importer ce fichier autrement ? je veux dire sans Nodejs ? Merci.

[@melvynxdev]

Hello, tu peux l'importer dnas le fichier HTML

[@user-cy8qz2xz8l]

Salut, je suis interessé par ton module de formation BeginJs, et j'ai des questions, que faut-il comme pré-requis pour suivre le cours, j'ai commencé la partie gratuite et tu utilises des termes que je ne connais pas, tu installes npm pour faire du js , j'ai regardé tes videos de présentation, et je suis d'accord, javascript est trop survolé, je voudrais le maitriser, donc que faut-il connaitre avant de commence Begin js, et combien de temps dure la formation en bossant dessus à temps plein. Merci pour ton retour

[@melvynxdev]

Salut, n'hésite pas à rejoindre mon Discord : codelynx.dev/discord pour des réponses plus simples et rapides. Sinon, la formation peut être réalisée en 2 à 10 semaines, selon ta rapidité et le temps que tu consacres par semaine. En y consacrant tout ton temps, ça peut être terminé en 2 semaines.

[@mohamedlabarre166]

Bonjour Melvyn peux tu m ' indiquer le lien de la video de Micode qui aborde ce challenge ? merci.

[@melvynxdev]

Litérallement la première vidéo quand tu écris micode : kzbin.info/www/bejne/iarEnoucd7udqK8

[@sangfroidniloi]

Autre petite formalité : on met le label les input dans la balise label, en html, il me semble que les deux balises doivent être sœurs non ?

[@sangfroidniloi]

Ah non, je me réponds à moi même, on peut aussi imbriquer l'élément input comme enfant de label ;)

[@melvynxdev]

oh yes merci !

[@alexmoussavi1492]

Je débute sur ta chaine, ce projet est-il en nodeJS

[@melvynxdev]

Non

[@AliZeidi-dw2jl]

je n'arrive meme pas a faire la commande du dossier

[@melvynxdev]

Je ne comprends pas. Tu parles du setup de vite ? Il faut avoir NodeJS et VSCode installé !

[@user-ye5ec5nl5l]

Après ce tutoriel on peut s’attaquer à ReactJs ?

[@melvynxdev]

Non après ce tutoriel il faut créer des applications et pratiquer de ton côté

[@jeandarius8791]

Drôle manière de dire answer😂

[@melvynxdev]

answer

[@loicnaoussi]

J'ai une erreur quand j'execute npm create vite@latest: npx: installed 1 in 3.293s /home/loicnaoussi/.npm/_npx/51635/lib/node_modules/create-vite/index.js:3 import './dist/index.mjs'

[@melvynxdev]

tu es sûr d'avoir node installé ?