Online Vocabulary Word Builder
Definition
Enter a word and click "Look Up" to see its definition.
Loading...
';
saveBtn.style.display = 'none';
currentWordData = null;
try {
const response = await fetch(`https://api.dictionaryapi.dev/api/v2/entries/en/${word}`);
if (!response.ok) {
throw new Error('Word not found. Please check your spelling.');
}
const data = await response.json();
displayDefinition(data[0]);
} catch (error) {
definitionDisplay.innerHTML = `
${error.message}
`;
} finally {
lookupBtn.textContent = 'Look Up';
lookupBtn.disabled = false;
}
}
function displayDefinition(data) {
currentWordData = data;
const phonetic = data.phonetic || (data.phonetics.find(p => p.text)?.text || '');
let html = `
${data.word}
${phonetic}
`;
data.meanings.forEach(meaning => {
html += `
${meaning.partOfSpeech}
`;
meaning.definitions.slice(0, 2).forEach(def => { // Show max 2 definitions per part of speech
html += `- ${def.definition}${def.example ? `
"${def.example}"
` : ''} `;
});
html += `
`;
});
definitionDisplay.innerHTML = html;
const isSaved = savedWords.some(w => w.word.toLowerCase() === data.word.toLowerCase());
saveBtn.style.display = 'block';
saveBtn.disabled = isSaved;
saveBtn.textContent = isSaved ? 'Already in Your List' : '+ Save to My List';
}
function renderWordListTable() {
const table = document.getElementById('word-list-table');
if (savedWords.length === 0) {
table.innerHTML = '
| Your word list is empty. |
';
return;
}
const headers = ['Word', 'Primary Definition', 'Actions'];
table.innerHTML = `
${headers.map(h=>`| ${h} | `).join('')}
${savedWords.map(wordData => {
const firstMeaning = wordData.meanings[0];
const firstDefinition = firstMeaning.definitions[0].definition;
return `
${wordData.word}
${firstMeaning.partOfSpeech} |
${firstDefinition} |
|
`
}).join('')}
`;
}
function saveCurrentWord() {
if (currentWordData) {
savedWords.unshift(currentWordData);
saveBtn.disabled = true;
saveBtn.textContent = 'Saved!';
renderWordListTable();
}
}
lookupBtn.addEventListener('click', () => {
const word = wordInput.value.trim();
if (word) fetchWord(word);
});
wordInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') lookupBtn.click();
});
saveBtn.addEventListener('click', saveCurrentWord);
document.getElementById('word-list-table').addEventListener('click', (e) => {
if (e.target.classList.contains('remove-word-btn')) {
const wordToRemove = e.target.dataset.id;
savedWords = savedWords.filter(w => w.word !== wordToRemove);
renderWordListTable();
// Re-check save button if the removed word was the currently displayed one
if(currentWordData && currentWordData.word === wordToRemove){
saveBtn.disabled = false;
saveBtn.textContent = '+ Save to My List';
}
}
});
document.getElementById('vbd-download-pdf-btn').addEventListener('click', () => {
const table = document.getElementById('word-list-table').cloneNode(true);
// Remove action buttons for a clean PDF
table.querySelectorAll('button').forEach(btn => btn.parentElement.remove());
table.querySelectorAll('th:last-child').forEach(th => th.remove());
const tempContainer = document.createElement('div');
tempContainer.style.position = 'absolute';
tempContainer.style.left = '-9999px';
tempContainer.innerHTML = `
My Vocabulary Word List
`;
tempContainer.appendChild(table);
document.body.appendChild(tempContainer);
html2canvas(tempContainer, { scale: 2 }).then(canvas => {
document.body.removeChild(tempContainer);
const { jsPDF } = window.jspdf;
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgProps = pdf.getImageProperties(imgData);
const imgHeight = (imgProps.height * (pdfWidth - 20)) / imgProps.width;
pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, imgHeight);
pdf.save('My_Word_List.pdf');
});
});
function initialize() {
savedWords = [
{ word: 'ephemeral', phonetic: '/əˈfɛmərəl/', meanings: [{ partOfSpeech: 'adjective', definitions: [{ definition: 'Lasting for a very short time.' }] }] },
{ word: 'ubiquitous', phonetic: '/juːˈbɪkwɪtəs/', meanings: [{ partOfSpeech: 'adjective', definitions: [{ definition: 'Present, appearing, or found everywhere.' }] }] },
{ word: 'mellifluous', phonetic: '/məˈlɪfluəs/', meanings: [{ partOfSpeech: 'adjective', definitions: [{ definition: '(Of a voice or words) sweet or musical; pleasant to hear.' }] }] }
];
renderWordListTable();
}
initialize();
});
