index.php

<?php

/**
 * CABARAN JOMLAUNCH YOUTH 2022 (WEB) 02
 *
 * Nama Peserta: Amirul
 * Telegram: @amlxv
 *
 * CSS Framework: TailwindCSS
 * Font Source: Google Fonts
 * Font: Poppins
 *
 * @see https://i.imgur.com/5HMyNBV.png
 *
 */

include("random_data.php");

/**
 * This function is used to filter
 * the people by their gender.
 *
 */
function filterPeopleByGender($people, $gender)
{
    return array_filter(
        $people,
        fn ($person) => $person["Gender"] == $gender
    );
}

/**
 * This function is used to handle
 * the table header.
 *
 */
function handleTableHeader()
{
    $class = "px-4 py-3.5 text-left text-sm font-semibold text-gray-900";
    $title = array("ID", "FIRST NAME", "LAST NAME", "AGE", "YEARS");
    echo "<tr>" .
        join(
            "",
            array_map(
                fn ($title) => "<th scope='col' class=\"$class\">$title</th>",
                $title
            )
        ) .
        "</tr>";
}

/**
 * This function is used to handle
 * the table body.
 *
 */
function handleTableBody($people, $gender)
{
    $class = "px-6 py-4 text-sm text-gray-900";

    foreach ($people as $key => $person) {
        if ($key == array_key_first($people))
            echo "<tr><td colspan='5' class=\"$class text-center bg-green-200 border border-green-400 font-semibold\">"
                . strtoupper($gender)
                . "</td></tr>";

        echo "<tr>
                <td class=\"$class\">$key</td>
                <td class=\"$class\">{$person['First Name']}</td>
                <td class=\"$class\">{$person['Last Name']}</td>
                <td class=\"$class\">{$person['Age']}</td>
                <td class=\"$class\">{$person['Years']}</td>
             </tr>";
    }
}

/**
 * Seperate the people
 * by their gender type
 *
 */
$people = array(
    "female" => filterPeopleByGender($data, "Female"),
    "male" => filterPeopleByGender($data, "Male"),
);

?>

<!-- Start working with displaying the table on the browser  -->

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
    tailwind.config = {
        theme: {
            fontFamily: {
                sans: ["Poppins", "sans-serif"],
            },
        }
    }
    </script>
</head>

<body class="p-4 bg-gradient-to-r from-green-300 via-blue-500 to-purple-600">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="mt-8 flex flex-col items-center">
            <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
                <div class="inline-block min-w-fit py-2 align-middle md:px-6 lg:px-8">
                    <div class="overflow-hidden rounded-lg">
                        <table class="min-w-fit">
                            <thead class="bg-green-50">
                                <?php
                                /**
                                 * Call the handleTableHeader function
                                 * to display the table header.
                                 *
                                 */
                                handleTableHeader();
                                ?>
                            </thead>
                            <tbody class=" bg-green-50">
                                <?php
                                /**
                                 * Iterate over the people array and
                                 * display the table body.
                                 *
                                 */
                                foreach ($people as $gender => $people) {
                                    handleTableBody($people, $gender);
                                }
                                ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>