Last active
May 14, 2024 16:08
Revisions
-
cba85 revised this gist
May 14, 2024 . No changes.There are no files selected for viewing
-
cba85 created this gist
Jan 18, 2024 .There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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(""); }); }); This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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> This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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; }