Last active
February 22, 2025 10:50
-
-
Save cba85/99f4fba06855ff9c53a1f110ef9ebfb9 to your computer and use it in GitHub Desktop.
IJVS030 - Recherche de communes françaises jQuery
This file contains hidden or 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 hidden or 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 hidden or 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; | |
| } |
Super pratique, merci pour le partage !
Merci beaucoup pour ce message, c'est sympa 😊
Pour vous donner des informations sur le contexte de ce projet, il s'agit du "corrigé" d'un exercice TD dans le cadre d'un module "jQuery" pour des étudiants en développement informatique.
Je suis content que ce partage aide d'autres personnes 😎
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Super pratique, merci pour le partage !