Apprenez à créer une application de conversion de devises avec JavaScript. Utilisez des API pour obtenir des taux de change en temps réel et développez vos compétences en développement.

Créer une Application de Conversion de Devises avec JavaScript

|

Écrit par

Hugo – La Pause Code

Introduction

Dans le monde du développement web, la création d’applications pratiques est un excellent moyen d’améliorer vos compétences. Dans cet article, nous allons explorer comment créer une application de conversion de devises en utilisant JavaScript. Nous allons tirer parti des API pour obtenir des taux de change en temps réel et fournir une interface utilisateur simple.

1. Comprendre les API

Avant de plonger dans le code, il est essentiel de comprendre ce qu’est une API (Application Programming Interface). Une API vous permet d’interagir avec d’autres services et d’accéder à des données. Pour notre application de conversion de devises, nous allons utiliser une API publique qui fournit des taux de change.

2. Choisir une API de conversion de devises

Il existe plusieurs API disponibles pour la conversion de devises. Par exemple, ExchangeRatesAPI et Open Exchange Rates sont des options populaires. Inscrivez-vous pour obtenir une clé API, qui vous permettra d’accéder aux données.

3. Configurer votre projet

Créez un nouveau dossier pour votre projet et ajoutez un fichier HTML de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convertisseur de Devises</title>
</head>
<body>
    <h1>Convertisseur de Devises</h1>
    <div>
        <label for="amount">Montant:</label>
        <input type="number" id="amount">
        <label for="from">De:</label>
        <select id="from"></select>
        <label for="to">À:</label>
        <select id="to"></select>
        <button id="convert">Convertir</button>
    </div>
    <div id="result"></div>
</body>
</html>

4. Récupérer les taux de change

Ajoutez le code JavaScript pour récupérer les taux de change depuis l’API :

const apiKey = 'VOTRE_CLE_API';
const apiUrl = `https://api.exchangeratesapi.io/latest?access_key=${apiKey}`;

fetch(apiUrl)
    .then(response => response.json())
    .then(data => {
        // Traitez les données ici
    })
    .catch(error => console.error('Erreur:', error));

5. Effectuer la conversion

Ajoutez la logique pour effectuer la conversion lorsque l’utilisateur clique sur le bouton :

document.getElementById('convert').addEventListener('click', () => {
    const amount = document.getElementById('amount').value;
    const fromCurrency = document.getElementById('from').value;
    const toCurrency = document.getElementById('to').value;
    const rate = data.rates[toCurrency] / data.rates[fromCurrency];
    const result = amount * rate;
    document.getElementById('result').innerText = `Résultat: ${result.toFixed(2)} ${toCurrency}`;
});

Conclusion

Créer une application de conversion de devises avec JavaScript est un excellent projet pour renforcer vos compétences en développement. En utilisant des API, vous pouvez facilement accéder à des données en temps réel et offrir une expérience utilisateur enrichissante. N’hésitez pas à explorer d’autres fonctionnalités, comme l’ajout d’un historique des conversions ou la possibilité de choisir plusieurs devises.

Laisser un commentaire