💼Dictionary App
import { $, $all, log } from './layout/helpers.mjs';
// ------------ event listeners ------------
async function getData() {
const baseURL = 'https://api.dictionaryapi.dev/api/v2/entries/en/';
const term = $('.word').value.toLowerCase().trim();
const url = `${baseURL}${term}`;
try {
const response = await fetch(url);
const data = await response.json();
displayData(data);
} catch (error) {
log(error);
}
}
$('form').onsubmit = async function (e) {
e.preventDefault();
await getData();
};
// click "search" button
$('.search').onclick = async () => {
await getData();
};
/*
structure of API response
-------------------------
data
└ 0 (object)
├ word: "sheep"
├ phonetic: "ʃiːp"
├ origin: "Old English scēp, ..."
├ meanings (array)
│ └ 0 (object)
│ ├ partOfSpeech: "noun"
│ └ definitions (array)
│ ├ 0: {definition: "...", synonyms: [...], antonyms: [...]}
│ ├ 1: {definition: "...", synonyms: [...], antonyms: [...]}
│ └ 2: {definition: "...", synonyms: [...], antonyms: [...]}
│
└ phonetics (array)
└ 0: {audio: "...", text: "..."}
*/
//
const displayData = (data) => {
log(data);
// if main hidden, unhide it.
const hiddenMain = $('.hidden');
if (hiddenMain) hiddenMain.classList.remove('hidden');
// add 'sink' style to every h3
$all('.app h3').forEach((h3) => h3.classList.add('sink'));
// part of speech
$(
'.term',
).innerHTML = `${data[0].word} <span class="sink">${data[0].meanings[0].partOfSpeech}</span>`;
// definitions
$('.list').innerHTML = data[0].meanings[0].definitions
.map((def) => `<li>${def.definition}</li>`)
.join('');
// audio
$(
'.audio',
).innerHTML = `<audio src="${data[0].phonetics[0].audio}" controls>`;
};
CSS ⟩ Layout System
codepen ⟩ dictionary app
Last updated
Was this helpful?