Veuillez vous connecter à votre compte.
Bienvenue dans cet article qui vous guidera à travers les étapes de création d'une application de traduction simple. Cette application vous permettra de saisir du texte dans une langue source, de sélectionner la langue cible, et d'obtenir la traduction du texte en temps réel.
Fonctionnalités de l'Application web
L'application de traduction que nous allons créer aura les fonctionnalités suivantes :
- Zone de texte pour saisir le texte à traduire.
- Menus déroulants pour sélectionner la langue source et la langue cible.
- Bouton de traduction pour déclencher le processus de traduction.
- Affichage de la traduction résultante.
- Compteur de caractères pour surveiller le nombre de caractères saisis.
Code Source
Double tap sur le code pour copier
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Application de Traduction</title>
<!-- Include Bootstrap and Font Awesome CSS links here -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa;
}
.navbar-dark {
background-color: #343a40 !important;
}
.navbar-brand {
display: flex;
align-items: center;
}
.navbar-brand i {
font-size: 24px;
margin-right: 10px;
}
.btn-dark {
background-color: #343a40;
border-color: #343a40;
border-radius: 10px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">
<i class="fas fa-language"></i>
Traducteur
</a>
</nav>
<div class="container mt-4">
<div class="row">
<div class="col-md-12">
<textarea id="textToTranslate" class="form-control" rows="5" maxlength="4500" placeholder="Entrez le texte à traduire"></textarea>
<div class="d-flex justify-content-between mt-3">
<select id="sourceLanguage" class="form-control w-45">
<option value="fr">Français</option>
<option value="en">Anglais</option>
<option value="ar">Arabe</option>
<option value="ru">Russe</option>
<option value="it">Italien</option>
<option value="es">Espagnol</option>
</select>
<button id="swapLanguages" class="btn btn-dark ml-2"><i class="fas fa-exchange-alt"></i></button>
<select id="targetLanguage" class="form-control w-45">
<option value="en">Anglais</option>
<option value="fr">Français</option>
<option value="ar">Arabe</option>
<option value="ru">Russe</option>
<option value="it">Italien</option>
<option value="es">Espagnol</option>
</select>
</div>
<button id="translateButton" class="btn btn-primary mt-3">Traduire</button>
<p class="text-muted mt-2" id="charCount">Nombre de caractères : 0</p>
</div>
</div>
<div class="row mt-4">
<div class="col-md-12">
<h5>Résultat de la Traduction :</h5>
<div id="translationResult" class="border p-3"></div>
<div id="loadingSpinner" class="mt-3 text-center d-none">
<div class="spinner-border text-primary" role="status">
<span class="sr-only">Chargement...</span>
</div>
</div>
</div>
</div>
</div>
<script>
const url = 'https://ctranslator.vercel.app/api';
document.addEventListener('DOMContentLoaded', function () {
const textToTranslate = document.getElementById('textToTranslate');
const sourceLanguage = document.getElementById('sourceLanguage');
const targetLanguage = document.getElementById('targetLanguage');
const swapLanguages = document.getElementById('swapLanguages');
const translateButton = document.getElementById('translateButton');
const translationResult = document.getElementById('translationResult');
const charCount = document.getElementById('charCount');
const loadingSpinner = document.getElementById('loadingSpinner');
textToTranslate.addEventListener('input', function () {
const charCountValue = textToTranslate.value.length;
charCount.innerText = `Nombre de caractères : ${charCountValue}`;
});
swapLanguages.addEventListener('click', function () {
const temp = sourceLanguage.value;
sourceLanguage.value = targetLanguage.value;
targetLanguage.value = temp;
});
translateButton.addEventListener('click', async function () {
const data = {
de: sourceLanguage.value,
a: targetLanguage.value,
text: textToTranslate.value,
};
loadingSpinner.classList.remove('d-none');
translationResult.innerText = '';
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
const jsonResponse = await response.json();
const translatedText = jsonResponse.reponse;
loadingSpinner.classList.add('d-none');
translationResult.innerText = translatedText;
});
});
</script>
</body>
</html>
