Name of code : Api mymemory traduction

Categorie : API

Les quatre boutons permettent de sélectionner la langue dans laquelle le contenu doit être traduit. Un script en JavaScript est utilisé pour effectuer la traduction du contenu en utilisant l'API MyMemory. Lorsqu'un bouton est cliqué, le script récupère le contenu du paragraphe, envoie une requête à l'API MyMemory pour obtenir la traduction dans la langue sélectionnée, puis met à jour le contenu de la page avec la traduction.

Demo : Api mymemory traduction

Javascript

HTML

Visual Sstudio Code

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Page multilingue</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h2 id="lang">lang API</h2>
    <h1 id="title">Bonjour!</h1>
    <p id="content">Cliquez sur les boutons pour changer la langue.Nous avons sélectionné avec des professeurs expérimentés de français des textes faciles à lire et amusants. A la fin des textes, un exercice sous forme de QCM permet de valider ses acquis. Il est à noter que l'édition gratuite des textes sous forme de PDF est un vrai plus. Désormais la langue de Molière n'aura plus de secret pour vous. </p>

 
    <button id="frButton">Français</button>
    <button id="enButton">Anglais</button>
    <button id="esButton">Espagnol</button>
    <button id="deButton">Allemand</button>

    <script>
        // Fonction qui traduit le contenu de la page
        var lang ="fr"
        function translateTo(lang2) {
            if(lang != lang2){
                var content = $('#content').text();
                var url = 'https://api.mymemory.translated.net/get';
                var data = {
                    q: content,
                    langpair: lang+'|'+lang2
                };
                $.get(url, data, function(response) {
                    var ContentLang = response.responseData.translatedText;
                    $('#title').text('Bonjour!');
                    $('#content').text(ContentLang);
                    $('#lang').text(lang2);
                    lang = lang2 ;
                });
            }
        }


        // Événements de clic pour les boutons
        $('#frButton').click(function() {
            translateTo("fr");
        });

        $('#enButton').click(function() {
            translateTo("en");
        });

        $('#esButton').click(function() {dddd
            translateTo("es");
        });

        $('#deButton').click(function() {
            translateTo("de");
        });
    </script>
</body>
</html>