Rendu projet JavaScript - Manipulation du DOM

Question

Mes salutations Louis, voici le rendu de mon projet, qu'en pensez-vous ?
Je me suis bien amusé, surtout du côté style.
Je suis la correction.
// 1. Supprimer le div avec l'id #a-supprimer
document.querySelector('#a-supprimer').remove();
// 2. Créer un header
let header = document.createElement('header');
header.style.backgroundColor = '#e3b04b';
header.style.display = 'flex';
header.style.flexDirection = 'column';
header.style.justifyContent = 'center';
document.body.prepend(header); // Pour ajouter le header au début du body.
let h1 = document.createElement('h1');
h1.textContent = 'Bienvenue';
h1.style.textAlign = 'center';
h1.style.fontFamily = 'Arial, sans-serif';
h1.style.color = '#fff';
h1.style.fontSize = '3rem';
header.append(h1); // Pour ajouter le h1 au header.
// 3. Créer un sous-header
let nav = document.createElement('nav');
nav.style.display = 'flex';
nav.style.gap = '1rem';
nav.style.paddingLeft = '1.5rem';
header.append(nav);
nav.style.backgroundColor = '#f1d6ab';
let accueil = document.createElement('h3');
accueil.textContent = 'Accueil';
accueil.style.fontFamily = 'Arial, sans-serif';
accueil.style.color = '#4a97ee';
nav.append(accueil);
let span = document.createElement('span');
span.textContent = '/';
span.style.display = 'flex';
span.style.alignItems = 'center';
span.style.justifyContent = 'center';
span.style.fontSize = '1.5rem';
span.style.fontWeight = '600';
span.style.color = '#000';
nav.append(span);
let contact = document.createElement('h3');
contact.textContent = 'Une autre page';
contact.style.fontFamily = 'Arial, sans-serif';
contact.style.color = '#4a97ee';
nav.append(contact);
// 4. Créer un paragraphe
let main = document.createElement('main');
main.style.paddingLeft = '1.5rem';
document.body.append(main);
let paragraph = document.createElement('p');
paragraph.textContent = 'Ceci est un paragraphe créé avec JavaScript.';
paragraph.style.fontFamily = 'Arial, sans-serif';
paragraph.style.color = '#333';
paragraph.style.fontSize = '1.2rem';
main.append(paragraph);

Louis-Nicolas Leuillet · Accepted Answer

Salutations !
Bon, c'est du très bon travail bravo ! Tu as bien compris les différentes étapes du projet et tout est là : la suppression de l'élément, la création du header avec le h1 , le sous-header avec la navigation, et le paragraphe dans un main . La logique est solide et le code est bien structuré.
J'aime bien le fait que tu aies poussé le style assez loin, on voit que tu t'es effectivement amusé avec !
Juste une petite remarque pour la suite : quand tu as beaucoup de styles à appliquer sur un même élément, ça peut vite devenir verbeux en JavaScript. Dans un vrai projet, on préférerait généralement créer une classe CSS et l'ajouter avec element.classList.add('ma-classe') . Ça garde le JS plus lisible et ça sépare bien la logique du style. Mais dans le cadre de cet exercice, c'est tout à fait correct de faire comme tu as fait. Continue comme ça !

Eliezer Tshiabola · Answer

D'accord, merci coach

Rendu projet JavaScript - Manipulation du DOM

Formation JavaScript (legacy)