Aprenda a construir una aplicación de diccionario simple usando JavaScript
JavaScript es uno de los lenguajes de programación más populares entre los desarrolladores web. Mientras aprenden JavaScript, todos comienzan con los conceptos básicos y la creación de aplicaciones simples utilizando la manipulación DOM.
En este artículo, aprenderá cómo crear un diccionario usando JavaScript y manipulación DOM. Este artículo espera que conozca los conceptos básicos de JavaScript antes de leerlo.
Echando un vistazo a la API
API significa Interfaz de programación de aplicaciones . Las API simplifican el desarrollo y la innovación de software al permitir que las aplicaciones intercambien datos y funcionalidad de forma fácil y segura.
Este proyecto utiliza la API dictionaryapi.dev . Esta es una API gratuita que proporciona múltiples definiciones, fonética y otros términos gramaticales relacionados con las palabras que busca.
El enlace a la API es el siguiente:
https://api.dictionaryapi.dev/api/v2/entries/en/word
Diseño frontend del proyecto
El diseño de la interfaz de este proyecto se crea utilizando HTML y TailwindCSS . Puede importar TailwindCSS en su archivo HTML utilizando el CDN que se proporciona a continuación.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" />
La página HTML tiene una entrada y un botón donde el usuario puede ingresar la palabra a buscar. Hay tres divs más para mostrar la parte del discurso, múltiples definiciones y audio que le ayuda a pronunciar la palabra correctamente. De forma predeterminada, estos tres divs tienen una propiedad de visualización de none. Cuando los datos se obtienen de la API, la propiedad de visualización de estos divs se establecerá en bloque.
<div class="bg-green-100 min-h-screen pt-10">
<h2 class="text-green-600 text-5xl pt-4 font-semibold text-center">
Dictionary
</h2>
<div class="flex justify-center p-8 items-center">
<input
type="text"
placeholder="Enter the word"
id="word"
class="
py-2
w-1/4
focus:outline-none
border-2 border-green-600
rounded
px-3
"
/>
<button
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search
</button>
</div>
<div class="flex flex-col justify-center items-center">
<div id="partOfSpeechDiv" class="hidden">
<h2 class="text-xl text-gray-500 py-2" id="partOfSpeechHeader"></h2>
<p class="text-md" id="partOfSpeechPara"></p>
</div>
<div class="hidden" id="meaningDiv">
<h2 class="text-4xl py-3 px-3 text-green-500" id="meaningHeader"></h2>
</div>
<div id="audio" class="hidden"></div>
</div>
</div>
<script src="./index.js"></script>Esta interfaz se verá así
Agregar funcionalidad usando JavaScript
Antes de obtener los datos a través de la API y mostrarlos, debe obtener acceso a los elementos HTML mediante sus identificadores. Puede obtener acceso a los identificadores mediante el método JavaScript getElementById () .
const word = document.getElementById("word");
const search = document.getElementById("search");
const display = document.getElementById("display");
const partOfSpeechDiv = document.getElementById("partOfSpeechDiv");
const partOfSpeechHeader = document.getElementById("partOfSpeechHeader");
const partOfSpeechPara = document.getElementById("partOfSpeechPara");
const meaningDiv = document.getElementById("meaningDiv");
const audioDiv = document.getElementById("audio");
const meaningHeader = document.getElementById("meaningHeader");Agregar el oyente de eventos
El elemento de entrada en la página HTML tiene una identificación denominada palabra . Después de obtener acceso al elemento de entrada, puede recuperar el valor del texto en el elemento de entrada utilizando el atributo .value .
El botón de búsqueda tiene la identificación denominada búsqueda . Debe agregar un detector de eventos de clic para activar el evento y realizar una llamada de función para obtener los datos a través de la API.
Async y Await
Desde 2017, JavaScript ha introducido el concepto de asíncrono y espera para realizar solicitudes asincrónicas. Utiliza async- await en lugar de .then y .catch para resolver y rechazar promesas.
search.addEventListener("click", async () => {
try {
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`;
const res = await fetch(url);
const data = await res.json();
displayData(data);
} catch (error) {
console.log(error);
}
});
Para trabajar con promesas usando async-await , debe agregar la palabra clave async antes de la definición de la función. Y cada vez que realiza una solicitud o llama a una función, debe agregar la palabra clave await antes.
La palabra clave aguardan una pausa en la ejecución adicional de la función hasta que la solicitud anterior no quede terminado.
Debe realizar toda la acción de promesa de espera asíncrona en el bloque try-catch . Si la promesa no puede recuperar los datos, mostrará el error en el bloque de captura . Antes de pasar la palabra a la API, debe estar en formato minúsculas para obtener resultados precisos. Puede utilizar el método de cadena .lowercase () para convertir la palabra.
El método de recuperación recuperará los datos de la API. Debe agregar la palabra clave await para que la función se detenga en ese momento mientras el método de recuperación recupera los datos.
Después de recuperar los datos, debe convertirlos en formato JSON usando el método .json () en la respuesta.
Visualización de datos en la página web
Después de recuperar los datos y convertirlos a formato JSON , debe mostrarlos en la página web. Debe llamar al método displayData () y pasarle los datos.
La estructura de la respuesta de la API es la siguiente:
La API devuelve la parte del habla, múltiples definiciones y fonética de las palabras en la respuesta.
Puede obtener todas las definiciones de la palabra dada usando:
const meanings = data[0].meanings[0].definitions;
Los significados de las variables son una matriz que contiene todas las definiciones de la palabra dada.
Para obtener la parte del discurso de la palabra dada:
const partOfSpeech = data[0].meanings[0].partOfSpeech;
Puede agregar la parte del discurso de la palabra usando el atributo .innerHTML . En el código HTML, la parte del discurso div tenía la propiedad de mostrar ninguno de forma predeterminada, pero en el código JavaScript, después de obtener los datos, debe establecer la propiedad de visualización en bloquear .
Visualización de las definiciones
Tienes que crear una variable llamada MeaningList . Después de agregar todas las definiciones a esta variable, debe asignarle el atributo .innerHTML para mostrarlo en la página web.
Recorra la matriz de significados y realice un seguimiento de una única definición y el índice en el que está presente. Agregue la definición única y el índice a la variable MeaningList dentro del elemento de párrafo de HTML.
Una vez que esté fuera del circuito, hay que pasarlo al atributo .innerHTML de meaningDiv.
Mostrar el elemento de audio en la página web
La respuesta que recibe la API contiene fonética que ayuda a los usuarios a comprender la pronunciación de la palabra. Para agregar este sonido en la página web, debe crear un elemento de audio y pasar la fonética en el atributo src de ese elemento. Finalmente, debe colocar el elemento de audio en audioDiv usando el atributo .innerHTML .
const displayData = (data) => {
console.log(data);
const partOfSpeech = data[0].meanings[0].partOfSpeech;
const meanings = data[0].meanings[0].definitions;
partOfSpeechDiv.className =
"bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block";
partOfSpeechHeader.innerHTML = "Part of Speech";
partOfSpeechPara.innerHTML = partOfSpeech;
let meaningList = ``;
meanings.forEach((meaning, ind) => {
meaningList += `<p class='my-3 px-4 py-1 text-md'>${ind + 1}) ${
meaning.definition
} </p>`;
});
meaningDiv.className =
"text-center w-1/4 bg-gray-100 my-6 border-2 border-green-500 rounded block";
meaningHeader.innerText = "Meanings";
meaningDiv.innerHTML = meaningList;
let aud = `<audio src="${data[0].phonetics[0].audio}" controls>`;
audioDiv.className = "block";
audioDiv.innerHTML = aud;
};
Agregue otro proyecto a su lista
Ahora que ha aprendido a crear una aplicación de diccionario utilizando JavaScript, es hora de que cree algunos proyectos interesantes por su cuenta. Los proyectos de construcción no solo repasarán sus conceptos básicos, sino que también agregarán proyectos a su currículum.
¿Busca más práctica sobre los conceptos de manipulación de JavaScript y DOM? Aquí hay otro proyecto que puede construir para fortalecer sus habilidades.