Mini projet : DOM et style
🔴 Pour ce mini-projet, vous n'avez pas le droit de modifier le HTML et le CSS, vous ne devez toucher qu'au JavaScript 🔴
Dans votre dossier bre05-js-j3, créez un dossier mini-projet dans le quel vous allez créer :
Un fichier index.html dont voici le contenu :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" >
<title>Mini-Projet : DOM et style</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Mini-Projet : DOM et style</h1>
</header>
<main>
<section class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<section class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</main>
</body>
<script type="application/javascript" src="index.js"></script>
</html>
Un fichier style.css dont voici le contenu :
body {
display: grid;
grid-template-rows: 10vh minmax(90vh, max-content);
main {
display: grid;
grid-template-columns: 30vw 30vw;
column-gap: 50px;
row-gap: 50px;
.grid {
height: 30vw;
display: grid;
grid-template-columns: repeat(3, 1fr);
div {
border: 1px dashed #ccc;
}
}
}
}
Un fichier index.js dont voici le contenu :
/*
Codes couleurs
jaune: #efec4f;
orange: #eca45c;
rouge: #e85b69;
violet: #956caf;
bleu: #427cf5;
vert: #4cee7e;
noir: #020e13;
*/
function grid1()
{
}
function grid2()
{
}
function grid3()
{
}
function grid4()
{
}
function grid5()
{
}
function grid6()
{
}
grid1();
grid2();
grid3();
grid4();
grid5();
grid6();
En ne modifiant que le JavaScript, faites en sorte que votre page soit semblable à celle-ci :
08 January 2026