I am trying to create a website thesaurus app where you can search for a word in the input bar, and it spits out synonyms and antonyms beneath it. I am using the WordAPI, and I do have my own key (though I’m removing it for these purposes, and replacing with “YOUR-API-KEY-HERE”).
I am very new to coding, so I used an AI generator to create the code, aside from some of the CSS and the script info in the head tags. I added that to keep the form from reloading the page.
I’m honestly not sure what’s wrong with it. I’ve tried playing with the submission part, like changing the button type to button instead of submit and using the onClick function. I don’t think the submit process is broken, I just don’t think it’s pulling from the WordAPI correctly. But I really don’t know.
Here is the full code (minus API key) for anyone that would like to take a look:
<!DOCTYPE html>
<html>
<head>
<title>Thesaurus</title>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
document.getElementById("form").addEventListener("submit", function(e) {
e.preventDefault() // Cancel the default action
sendContactForm();
});
});
</script>
<style>
input {
height: 53px;
width: 80%;
outline: none;
font-size: 16px;
border-radius: 5px;
padding-left: 42px;
border: 1px solid #999;
margin: 15px 0px;
}
h2 {
font-size: 1.1rem;
font-weight: bold;
margin-top: 1.5rem;
margin-bottom: 0.5rem;
}
</style>
</head>
<body>
<form id="form" name="form">
<label for="word"></label>
<input type="text" id="word" name="word">
<button type="submit">Search</button>
</form>
<script>
const form = document.querySelector('form');
const wordInput = document.querySelector('#word');
const outputDiv = document.createElement('div');
form.addEventListener('submit', function(event) {
event.preventDefault();
const word = wordInput.value;
wordInput.value = '';
fetch(`https://api.wordnik.com/v4/word.json/${word}/relatedWords?useCanonical=false&limitPerRelationshipType=10&api_key=YOUR-API-KEY-HERE`)
.then(response => response.json())
.then(data => {
const synonyms = data.find(obj => obj.relationshipType == 'synonym');
const antonyms = data.find(obj => obj.relationshipType == 'antonym');
outputDiv.innerHTML = '';
if (synonyms) {
const synHeader = document.createElement('h2');
synHeader.textContent = 'Synonyms:';
outputDiv.appendChild(synHeader);
const synList = document.createElement('ul');
synonyms.words.forEach(function(word) {
const item = document.createElement('li');
item.textContent = word;
synList.appendChild(item);
});
outputDiv.appendChild(synList);
}
if (antonyms) {
const antHeader = document.createElement('h2');
antHeader.textContent = 'Antonyms:';
outputDiv.appendChild(antHeader);
const antList = document.createElement('ul');
antonyms.words.forEach(function(word) {
const item = document.createElement('li');
item.textContent = word;
antList.appendChild(item);
});
outputDiv.appendChild(antList);
}
if (!synonyms && !antonyms) {
const noResults = document.createElement('p');
noResults.textContent = `No results found for "${word}".`;
outputDiv.appendChild(noResults);
}
})
.catch(error => console.log(error));
});
document.body.appendChild(outputDiv);
</script>
</body>
</html>
Thanks in advance. Any suggestions help. Like I said, I’m pretty new to coding so if there is code I need to add/change, it will either need to be super easy to copy and paste or explained where exactly to put it.