Convertisseur de devises
Montant :
De :
À :
Convertir
/* Conteneur centré */
#currency-converter-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f4f7;
}
/* Bloc convertisseur */
#currency-converter {
background-color: #ffffff;
border-radius: 12px;
padding: 30px;
width: 320px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
text-align: center;
color: #333;
}
#currency-converter h2 {
color: #228B22; /* Vert dollar */
margin-bottom: 20px;
font-size: 1.5em;
}
/* Style des inputs et labels */
.input-block {
margin-bottom: 15px;
}
label {
display: block;
font-size: 1em;
margin-bottom: 5px;
color: #228B22;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 8px;
font-size: 1em;
}
/* Bouton de conversion */
button {
background-color: #228B22; /* Vert dollar */
color: white;
border: none;
padding: 12px 20px;
font-size: 1em;
border-radius: 8px;
cursor: pointer;
width: 100%;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #1c7b1c;
}
/* Résultat */
#result {
margin-top: 20px;
font-size: 1.2em;
color: #228B22;
}
/* Responsive */
@media (max-width: 768px) {
#currency-converter {
width: 90%;
}
}
const fixerApiKey = ‘0f3e044a541d8434edb783f28fded028’; // Ta clé API Fixer.io
const fixerApiUrl = `http://data.fixer.io/api/latest?access_key=${fixerApiKey}`;
// Récupérer les devises fiduciaires depuis Fixer.io
async function loadCurrencies() {
try {
const response = await fetch(fixerApiUrl);
const data = await response.json();
if (data.success) {
const currencySelects = document.querySelectorAll(‘select’);
const currencies = Object.keys(data.rates);
// Ajout des devises fiduciaires dans les menus déroulants
currencies.forEach(currency => {
currencySelects.forEach(select => {
const option = document.createElement(‘option’);
option.value = currency;
option.textContent = currency;
select.appendChild(option);
});
});
} else {
console.error(‘Erreur lors de la récupération des devises:’, data.error.info);
}
} catch (error) {
console.error(« Erreur lors du chargement des devises : », error);
}
}
// Fonction de conversion des devises fiduciaires
async function convertCurrency() {
const amount = document.getElementById(« amount »).value;
const fromCurrency = document.getElementById(« fromCurrency »).value;
const toCurrency = document.getElementById(« toCurrency »).value;
try {
const response = await fetch(fixerApiUrl);
const data = await response.json();
if (data.success) {
const fromRate = data.rates[fromCurrency];
const toRate = data.rates[toCurrency];
// Conversion
const convertedAmount = (amount / fromRate) * toRate;
// Affichage du résultat
document.getElementById(« result »).innerHTML =
`${amount} ${fromCurrency} = ${convertedAmount.toFixed(2)} ${toCurrency}`;
} else {
console.error(‘Erreur lors de la conversion:’, data.error.info);
}
} catch (error) {
console.error(« Erreur lors de la conversion : », error);
document.getElementById(« result »).innerHTML = « Erreur lors de la conversion »;
}
}
// Charger les devises dès que la page est prête
window.onload = loadCurrencies;
La Money