cba85/app.js

## app.js
$(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("");
  });
});

## index.html
<!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>

## style.css
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;
  }
	$(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("");
	});
	});
	<!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>
	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;
	}