Mini-projet : Bulletin de notes

Étape 0 : le fichier index.php

<?php

$students = [
    [
        "firstName" => "Hannah",
        "lastName" => "Fields",
        "grades" => [12, 11, 15],
        "average" => -1
    ],
    [
        "firstName" => "Richard",
        "lastName" => "Stein",
        "grades" => [18, 12, 13],
        "average" => -1
    ],
    [
        "firstName" => "Mark",
        "lastName" => "Hartoff",
        "grades" => [9, 11, 10],
        "average" => -1
    ],
    [
        "firstName" => "Charlie",
        "lastName" => "Nestle",
        "grades" => [9, 8, 5],
        "average" => -1
    ],
    [
        "firstName" => "Suzy",
        "lastName" => "Brent",
        "grades" => [18, 15, 16],
        "average" => -1
    ]
];

?>

<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <title>Bulletin de notes</title>
    </head>
    <body>
        <h1>
            Bulletin de notes
        </h1>
        <h2>
            Liste des étudiants
        </h2>
        <ul id="students">
            
        </ul>
    </body>
</html>

Étape 1 : afficher la liste des utilisateurs

<li>
    <article class="">
        <header>
            <h1>Nom et prénom de l'étudiant</h1>
        </header>
        <section>
            <h2>Notes : </h2>
            <ul>
                <li>Note 1</li>
                <li>Note 2</li>
                <li>Note 3</li>
            </ul>
        </section>
        <footer>
            <h3>Moyenne des notes de l'étudiant </h3>
        </footer>
    </article>
</li>

Faites en sorte d'utiliser le code ci-dessus pour afficher pour chaque étudiant-e son nom et son prénom, laissez le reste du code avec les valeurs par défaut (Note 1, Note 2, Note 3, Moyenne).

Correction

Correction de l'Étape 1

Étape 2 : Afficher les notes

Maintenant en plus, faites en sorte de dynamiser les <li> avec la liste des notes de l'étudiant-e.

Correction

Correction de l'Étape 2

Étape 3 : calculer et afficher la moyenne

Créez une fonction computeAverage(array $grades) : float qui va calculer la moyenne des notes de l'étudiant. Une fois cette moyenne calculée vous allez l'afficher dans le HTML.

Correction

Correction de l'Étape 3

Étape 4 : Dynamiser du CSS

Dans un fichier style.css, que vous linkerez dans votre fichier index.php définissez trois classes :

.orange change la couleur du texte en orange
.red change la couleur du texte en rouge
.green change la couleur du texte en vert
Si un étudiant a une moyenne inférieure à 10, son article a la classe red.
Si sa moyenne est entre 10 (inclus) et 13 (inclus), son article a la classe orange.
Si sa moyenne est supérieure à 13, l'article a la classe green.

Correction

Correction de l'Étape 4

21 May 2025