Pomocy! Demonstracyjny tłumacz na stronie

pytanie zadane 31 maja 2020 w JavaScript przez krawczol2136 Nowicjusz (120 p.)

Wiem, że to pewnie podstawy podstaw ale chcę zrobić demo tłumacza na stronie. Tekst napisany w obcym języku, pod nim przycisk 'Tłumacz'. Po kliknięciu wyświetla się zdanie po polsku a na przycisku zmiana na 'Pokaż oryginalny tekst'. Jak mówię, proste ale dopiero ogarnąłem html i css.

komentarz 31 maja 2020 przez ScriptyChris Mędrzec (190,190 p.)

Na czym konkretnie polega problem?

Jeśli chodzi o dostarczenie tłumaczeń do aplikacji, to możesz je zrobić samemu, albo posłużyć się którymś z dostępnych API.

2 odpowiedzi

odpowiedź 31 maja 2020 przez VBService Ekspert (252,740 p.)
edycja 31 maja 2020 przez VBService

Może chodziło Tobie o coś takiego. Dobrze nadaje się do tego jQuery.
Demo on-line.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#switch_translate").click(function(){
     $("#pl").fadeToggle();
     $("#en").fadeToggle();

     if($("#switch_translate").text() == 'Tłumacz') {
        $("#switch_translate").text('Pokaż oryginalny tekst');
     } else {
        $("#switch_translate").text('Tłumacz');
     }

     $("#switch_translate").toggleClass('en', 'pl');

  });
});
</script>
<style>
#pl {
   position: absolute;
   top: 20px;
   left: 20px;
   width: 420px;
   height: 120px;
   padding: 10px;
   color: black;
   background-color: orange;
   border: 2px dotted darkgreen;
   border-radius: 5px;
}
#en {
   position: absolute;
   top: 20px;
   left: 20px;
   width: 420px;
   height: 120px;
   padding: 10px;
   color: white;
   background-color: darkgreen;
   border: 2px dotted orange;
   border-radius: 5px;
   display: none;
}
button {
   position: absolute;
   top: 150px;
   left: 40px;
   font-weight: bold;
   border-radius: 5px;
   cursor: pointer;
}
button:focus {
   outline: none;
}
button.pl {
   width: 80px;
   color: black;
   background-color: orange;
   border: 2px dotted darkgreen;
}
button.en {
   width: 180px;
   color: white;
   background-color: darkgreen;
   border: 2px dotted orange;
}
</style>
</head>
<body>


<div id="pl">Wiem, że to pewnie podstawy podstaw ale chcę zrobić demo tłumacza na stronie. Tekst napisany w obcym języku, pod nim przycisk 'Tłumacz'. Po kliknięciu wyświetla się zdanie po polsku a na przycisku zmiana na 'Pokaż oryginalny tekst'. Jak mówię, proste ale dopiero ogarnąłem html i css.</div>

<div id="en">I know it's probably the basics but I want to do a translator demo on the website. Text written in a foreign language, under it the 'Translate' button. After clicking the sentence is displayed in Polish and the button changes to 'Show original text'. As I said, simple but I have just embraced html and css.</div>

<button id="switch_translate" class="pl">Tłumacz</button>

</body>
</html>