Skip to content

Instantly share code, notes, and snippets.

@cba85
Last active May 14, 2024 16:08

Revisions

  1. cba85 revised this gist May 14, 2024. No changes.
  2. cba85 created this gist Jan 18, 2024.
    68 changes: 68 additions & 0 deletions app.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,68 @@
    $(document).ready(function () {
    $("form").on("submit", function (e) {
    e.preventDefault();

    $(".error").hide();
    $(".no-results").hide();
    $("#results").hide();

    //const name = $("#name").val();
    let name = $("input[name='name']").val();
    name = name.trim();

    if (!name) {
    $(".error").fadeIn();
    return;
    }

    $.get(
    `https://geo.api.gouv.fr/communes?nom=${name}&fields=departement%2Cregion%2Cpopulation%2CcodesPostaux&boost=population`
    )
    .done(function (data) {
    if (!data.length) {
    $(".no-results").fadeIn();
    return;
    }

    let html = `<h3>${data.length} résultats</h3>`;

    $.each(data, function (index, city) {
    html += `<div class="city">
    <h4>${city.nom}</h4>
    <table>
    <tbody>
    <tr>
    <th>Population</th>
    <td>${city.population.toLocaleString("fr-FR")} habitants</td>
    </tr>
    <tr>
    <th>Département</th>
    <td>${city.departement.nom} (${city.departement.code})</td>
    </tr>
    <tr>
    <th>Région</th>
    <td>${city.region.nom}</td>
    </tr>
    <tr>
    <th>Codes postaux</th>
    <td>${city.codesPostaux.join(", ")}</td>
    </tr>
    <tr>
    <th>Code commune</th>
    <td>${city.code}</td>
    </tr>
    </tbody>
    </table>
    </div>`;
    });

    $("#results").html(html).slideDown();
    })
    .fail(function (error) {
    console.log(error);
    return;
    });

    $("input[name='name']").val("");
    });
    });
    53 changes: 53 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,53 @@
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Recherche de communes françaises</title>
    <meta
    name="description"
    content="Recherche de communes françaises via l'API Découpage Administratif de la DIRNUM"
    />
    <link rel="stylesheet" href="style.css" />
    <script
    src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"
    defer
    ></script>
    <script src="app.js" defer></script>
    </head>
    <body>
    <h1>Recherche de communes françaises</h1>

    <h2>Trouver les informations sur une commune</h2>

    <form action="">
    <label for="name">Nom</label>
    <input
    type="text"
    name="name"
    id="name"
    placeholder="Nom de la ville"
    autofocus
    />
    <button type="submit">Rechercher</button>
    </form>

    <p class="error">🙄 Il faut entrer le nom d'une ville...</p>

    <p class="no-results">
    😢 <em>Aucune ville ne correspond à votre recherche.</em>
    </p>

    <div id="results"></div>

    <footer>
    <small>
    Données provenant de
    <a href="https://api.gouv.fr/les-api/api-geo"
    >l'API Découpage Administratif de la DIRNUM</a
    >
    🇫🇷</small
    >
    </footer>
    </body>
    </html>
    60 changes: 60 additions & 0 deletions style.css
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,60 @@
    body {
    max-width: 640px;
    margin: 0 auto;
    padding: 1em;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    a,
    a:hover {
    color: blue;
    }

    .error {
    color: #b30000;
    font-weight: bold;
    display: none;
    }

    h1 {
    margin-top: 0;
    color: blue;
    }

    h4 {
    margin: 0;
    margin-bottom: 0.5em;
    color: blue;
    }

    table {
    width: 100%;
    }

    th {
    text-align: left;
    vertical-align: top;
    }

    td {
    text-align: right;
    vertical-align: top;
    }

    .no-results {
    display: none;
    }

    #results {
    display: none;
    }

    .city {
    margin-bottom: 1em;
    border: 1px dotted;
    padding: 0.5em;
    }

    footer {
    margin-top: 2em;
    }