Last active
May 14, 2024 16:08
-
-
Save cba85/99f4fba06855ff9c53a1f110ef9ebfb9 to your computer and use it in GitHub Desktop.
IJVS030 - Recherche de communes françaises jQuery
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 characters
| $(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 characters
| <!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 characters
| 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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment