Dans cet article, nous allons créer une application Web de conversion de devises simple mais utile à l'aide de HTML, CSS et JavaScript. Cette application sera utile à toute personne qui voyage fréquemment ou qui effectue des transactions internationales. À la fin de l’article, vous pourrez lancer une application de conversion de devises directement dans votre navigateur. 🎉

✨ Démo du projet | 📂 Télécharger le code source sur GitHub

🤖 Dans l'application Code vous pouvez apprendre le HTML, le CSS et le JavaScript, ainsi que de nombreux autres cours pour commencer votre parcours dans le développement Web ! 🌱

1. Description du projet ✨

Notre application de conversion de devises permettra à l'utilisateur de sélectionner la devise dans laquelle il souhaite saisir le montant et de le convertir dans une autre devise au taux de change actuel. Nous utiliserons l'API pour obtenir les taux de change actuels. L'interface de l'application sera intuitive et simple afin que tout débutant puisse facilement la comprendre. 🌐

2. Préparation du projet 🛠️

Pour commencer, nous aurons besoin des outils et ressources suivants :

Éditeur de texte (par exemple, VS Code) pour écrire du code.
Navigateur pour tester le fonctionnement de l'application.
API pour obtenir les taux de change. Nous utiliserons l'API gratuite de Exchangerate-API, qui vous permet de recevoir des données à jour sur les taux de change. Pour ce faire, vous devez vous inscrire sur le site et obtenir une clé API.

Dès que vous aurez une clé API, nous pourrons l'intégrer à notre projet et l'utiliser pour la conversion de devises. 🚀

3. Étapes de développement 🖥️

Étape 1 : Créer le code HTML

HTML est la base de notre application. À l'aide de HTML, nous allons créer une structure pour saisir des données et afficher le résultat.

Voici à quoi ressemblera le fichier principal index.html :

<!DOCTYPE html>
<!-- Сделано командой coursme - https://coursme.com/ -->
<html lang="ru" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Приложение для конвертации валют | Coursme</title>
  <link rel="stylesheet" href="style.css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Ссылка на CDN для иконок FontAwesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
<div class="wrapper">
  <header>Конвертер валют</header>
  <form action="#">
    <div class="amount">
      <p>Введите сумму</p>
      <input type="text" value="1">
    </div>
    <div class="drop-list">
      <div class="from">
        <p>Из</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/us.png" alt="flag">
          <select> <!-- Опции добавляются через JavaScript --> </select>
        </div>
      </div>
      <div class="icon"><i class="fas fa-exchange-alt"></i></div>
      <div class="to">
        <p>В</p>
        <div class="select-box">
          <img src="https://flagcdn.com/48x36/np.png" alt="flag">
          <select> <!-- Опции добавляются через JavaScript --> </select>
        </div>
      </div>
    </div>
    <div class="exchange-rate">Получение обменного курса...</div>
    <button>Получить обменный курс</button>
  </form>
</div>

<script src="js/country-list.js"></script>
<script src="js/script.js"></script>

</body>
</html>

Étape 2 : Style avec CSS

Maintenant, ajoutons un peu de style pour que notre application soit soignée et belle. Voici à quoi ressemblera le fichier styles.css :

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 10px;
  background: #11152C;
}
::selection{
  color: #fff;
  background: #11152C;
}
.wrapper{
  width: 370px;
  padding: 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}
.wrapper header{
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}
.wrapper form{
  margin: 40px 0 20px 0;
}
form :where(input, select, button){
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: none;
}
form p{
  font-size: 18px;
  margin-bottom: 5px;
}
form input{
  height: 50px;
  font-size: 17px;
  padding: 0 15px;
  border: 1px solid #999;
}
form input:focus{
  padding: 0 14px;
  border: 2px solid #11152C;
}
form .drop-list{
  display: flex;
  margin-top: 20px;
  align-items: center;
  justify-content: space-between;
}
.drop-list .select-box{
  display: flex;
  width: 115px;
  height: 45px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}
.select-box img{
  max-width: 21px;
}
.select-box select{
  width: auto;
  font-size: 16px;
  background: none;
  margin: 0 -5px 0 5px;
}
.select-box select::-webkit-scrollbar{
  width: 8px;
}
.select-box select::-webkit-scrollbar-track{
  background: #fff;
}
.select-box select::-webkit-scrollbar-thumb{
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}
.drop-list .icon{
  cursor: pointer;
  margin-top: 30px;
  font-size: 22px;
}
form .exchange-rate{
  font-size: 17px;
  margin: 20px 0 30px;
}
form button{
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  background: #11152C;
  transition: 0.3s ease;
}
form button:hover{
  background: #11152C;
}

Étape 3 : Description du code JavaScript

Dans notre application de conversion de devises JavaScript, nous allons effectuer plusieurs tâches de base :

Remplissage des listes déroulantes avec les devises: Nous allons d'abord remplir les deux listes déroulantes (fromCurrency et toCurrency) avec les devises disponibles en utilisant les données de devise fournies dans l'objet country_list. Ce processus implique l'ajout de drapeaux et de codes de devise aux listes.
Traitement de la sélection de devises: Lorsque l'utilisateur sélectionne une devise dans l'une des listes déroulantes, nous mettrons automatiquement à jour le drapeau affiché pour chaque devise afin de refléter le choix de l'utilisateur.
Changement de devise à l'aide de l'icône: Pour la commodité de l'utilisateur, nous ajouterons la possibilité de changer de devise entre les champs « De » et « À » via l'icône d'échange de devises. Lorsque vous cliquez sur l'icône, les devises seront échangées.
Obtenir le taux de change: Lorsque vous cliquez sur le bouton « Obtenir le taux de change » ou lorsque vous modifiez l'une des devises, l'application envoie une demande à l'API externe pour obtenir le taux de change actuel entre les devises sélectionnées. Nous utiliserons l'API de Exchangerate-APIpour recevoir les données actuelles sur les taux de change.
Affichage des résultats: Après avoir reçu le cours, nous calculerons le résultat de la conversion du montant saisi dans la devise sélectionnée et l'afficherons à l'écran. Si quelque chose ne va pas (par exemple, il n'y a pas d'Internet ou l'API ne répond pas), nous afficherons une erreur.

Description et fonctionnalité du code

Remplissage des listes déroulantes: Nous utiliserons l'objet country_list, qui contient les codes de devise et les pays correspondants. Avec cet objet, nous remplirons les deux listes déroulantes (avec les devises pour les champs « De » et « À »).

for (let i = 0; i < dropList.length; i++) {
    for (let currency_code in country_list) {
        let selected = i == 0 ? currency_code == "USD" ? "selected" : "" : currency_code == "NPR" ? "selected" : "";
        let optionTag = `<option value="${currency_code}" ${selected}>${currency_code}</option>`;
        dropList[i].insertAdjacentHTML("beforeend", optionTag);
    }
}

Ici, nous parcourons toutes les listes déroulantes et y ajoutons des devises. Par défaut, la devise USD sera sélectionnée pour le champ « De » et la devise NPR pour le champ « À ».

Mise à jour du drapeau lors du changement de devise: Lorsque l'utilisateur sélectionne une devise, nous mettons à jour le drapeau qui affiche le pays auquel cette devise appartient. Pour cela, nous utilisons la méthode loadFlag, qui changera l'image du drapeau dans la balise <img> :

function loadFlag(element) {
    for (let code in country_list) {
        if (code == element.value) {
            let imgTag = element.parentElement.querySelector("img");
            imgTag.src = `https://flagcdn.com/48x36/${country_list[code].toLowerCase()}.png`;
        }
    }
}

Changement de devise à l'aide de l'icône: L'utilisateur peut échanger des devises à l'aide de l'icône d'échange. Lorsque vous cliquez sur cette icône, les codes de devise dans les champs « De » et « À » sont échangés :

const exchangeIcon = document.querySelector("form .icon");
exchangeIcon.addEventListener("click", () => {
    let tempCode = fromCurrency.value;
    fromCurrency.value = toCurrency.value;
    toCurrency.value = tempCode;
    loadFlag(fromCurrency);
    loadFlag(toCurrency);
    getExchangeRate();
});

Obtenir le taux de change: Lorsque l'utilisateur clique sur le bouton « Obtenir le taux de change », ou lorsqu'il change de devise, nous envoyons une requête à l'API pour obtenir le taux actuel. L'API renvoie le taux de change pour les devises sélectionnées et nous calculons le montant total :

function getExchangeRate() {
    const amount = document.querySelector("form input");
    const exchangeRateTxt = document.querySelector("form .exchange-rate");
    let amountVal = amount.value;
    if (amountVal == "" || amountVal == "0") {
        amount.value = "1";
        amountVal = 1;
    }

    const apiKey = 'f2cd93cc5c526e3204de8e90';  // Votre clé API
    exchangeRateTxt.innerText = "Getting the exchange rate...";

    let url = `https://v6.exchangerate-api.com/v6/${apiKey}/latest/${fromCurrency.value}`;

    fetch(url).then(response => response.json()).then(result => {
        let exchangeRate = result.conversion_rates[toCurrency.value];
        let totalExRate = (amountVal * exchangeRate).toFixed(2);
        exchangeRateTxt.innerText = `${amountVal} ${fromCurrency.value} = ${totalExRate} ${toCurrency.value}`;
    }).catch(() => {
        exchangeRateTxt.innerText = "Something went wrong";
    });
}

Nous envoyons une requête à l'API et utilisons le taux obtenu pour calculer le montant total. Si une erreur se produit (par exemple, des problèmes avec la connexion Internet), nous affichons un message d'erreur.

Points importants :

Empêcher l'envoi du formulaire: Lorsque vous cliquez sur le bouton « Obtenir le taux de change », nous empêchons le comportement standard du formulaire (rechargement de la page) à l'aide de e.preventDefault() afin que tout le traitement se produise sur la même page.
Validation de l'entrée: Nous vérifions que l'utilisateur n'a pas entré 0 ou une valeur vide dans le champ de montant. Si cela se produit, nous utilisons la valeur 1 par défaut.
Clé API: Le code utilise une API externe pour obtenir les taux de change actuels. Vous devez obtenir votre propre clé API en vous inscrivant sur Exchangerate-APIpour remplacer la clé actuelle dans le code.
Mise à jour du drapeau: Nous mettons à jour l'image du drapeau dans la balise <img> en fonction de la devise sélectionnée, en obtenant le code du pays de l'objet country_list.

Cette approche vous permet de créer une application de conversion de devises flexible à l'aide de HTML, CSS et JavaScript, qui recevra des données à jour d'une API externe et fournira à l'utilisateur une interface conviviale pour la conversion de devises en temps réel.

Vous pouvez télécharger le code complet sur notre GitHub

Conclusion ✨

Vous avez maintenant un convertisseur de devises fonctionnel qui utilise les taux de change actuels de l'API ! Vous pouvez ajouter plus de devises ou améliorer l'interface à votre discrétion. N'oubliez pas que ce projet est idéal pour les débutants, car il couvre tous les aspects de base du développement Web : la création d'une structure HTML, le style avec CSS et le travail avec les API à l'aide de JavaScript. Bonne chance pour le développement ! 🎯

Pour le code source complet et éventuellement des améliorations supplémentaires, consultez notre GitHub.

Si vous avez des questions, n'hésitez pas à les poser. Bonne chance dans la programmation, et que vos projets soient toujours aussi intéressants et passionnants ! 👊🌟

Application de conversion de devises 💰🌍

1. Description du projet ✨

2. Préparation du projet 🛠️

3. Étapes de développement 🖥️

Étape 1 : Créer le code HTML

Étape 2 : Style avec CSS

Description et fonctionnalité du code

Points importants :

Conclusion ✨

Tu as aimé l'article ?
Place à la pratique !

Application de conversion de devises 💰🌍

1. Description du projet ✨

2. Préparation du projet 🛠️

3. Étapes de développement 🖥️

Étape 1 : Créer le code HTML

Étape 2 : Style avec CSS

Description et fonctionnalité du code

Points importants :

Conclusion ✨

Tu as aimé l'article ?Place à la pratique !

Tu as aimé l'article ?
Place à la pratique !