En este artículo, vamos a crear una aplicación de traducción de oraciones con la ayuda de API usando JavaScript.
Configuración básica: abra VS Code y abra una carpeta desde su disco donde desee crear este proyecto y asigne el nombre Translate-Sentence (folderName). Después de abrir, cree los siguientes archivos:
- índice.html
- traducir.js
- estilo.css
Estructura del proyecto: Debería verse así:
Archivo HTML: esta es la página de índice principal que está conectada al archivo style.css para diseñar y translate.js para las operaciones lógicas en el sitio web.
El archivo HTML contiene básicamente tres partes:
- Encabezamiento
- Contenedor Principal: Contiene dos partes:
- Área de texto de entrada
- Área de texto de salida
- Pie de página
índice.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> </head> <body> <nav class="header">Translate It</nav> <div class="main"> <div class="translation-box"> <textarea id="input-text" placeholder="Enter the sentence"> </textarea> </div> <button id="btn-translate">Translate</button> <div id="translated-box"> <textarea id="output-text" placeholder="Here you will se translated text"> </textarea> </div> </div> <footer class="footer">About Us</footer> <script src="translate.js"></script> </body> </html>
Archivo JavaScript: este archivo JavaScript toma la identificación del botón e ingresa texto y envía texto a una variable.
Nota: la API se puede utilizar para 5 llamadas por hora. Al usar la API anterior, la oración se traducirá al idioma de los minions.
El enfoque principal de la lógica en javascript es:
- Al hacer clic en el botón , se llamará a la función clickHandler .
- La función clickHandler toma la entrada del área de texto de entrada y actualiza la apiUrl.
- A continuación, se llama al método fetch, que convierte el texto de entrada en lenguaje de minions y se refleja en la salida TextArea.
Método Fetch: Fetch toma la Url como argumento y luego devuelve una promesa que resuelve el objeto de respuesta y luego de ese objeto de respuesta, el texto de salida toma el contenido traducido.
traducir.js
JavaScript
var inputText = document.querySelector('#input-text');
var outputText = document.querySelector('#output-text');
var buttonTranslate = document.querySelector('#btn-translate');
var apiUrl = "https://api.funtranslations.com/translate/minion.json";
function errorHandle(error) {
// In case error occurs the errorHandle
// function will be called
alert('Error occurred')
console.log("error occurred", error);
}
function clickHandler() {
// When someone clicks on translate
// button clickHandler will be called
var text = inputText.value;
var updatedUrl = apiUrl + "?text=" + text;
fetch(updatedUrl).then(response =>
response.json()).then(json =>
outputText.innerText =
(json.contents.translated)).catch(errorHandle);
}
buttonTranslate.addEventListener("click", clickHandler);
// Adding the event listener click
Archivo CSS: este archivo es responsable del estilo de la página HTML.
estilo.css
CSS
textarea {
display: block;
margin: 1rem;
width: 70vw;
height: 20vh;
padding: 1rem;
box-sizing: border-box;
justify-content: center;
}
* {
box-sizing: border-box;
}
.header {
font-size: 50px;
text-align: center;
background-color: #f77e38;
padding: 1rem;
}
#btn-translate {
background-color: #f77e38;
border-radius: 12px;
height: 5vh;
width: 20vw;
font-size: larger;
margin-left: 25vw;
cursor: pointer;
}
.main {
box-sizing: border-box;
margin-left: 15vw;
}
.footer {
font-size: 40px;
align-items: center;
margin-top: 8rem;
height: 7rem;
background-color: #f77e38;
text-align: center;
}
Salida: Instale la extensión del servidor en vivo en VS Code. Haga clic en Live Server y nuestra aplicación ya está lista.
