Coding for Dummies: I Used ChatGPT to Write the Code for a Simple English Dictionary!
I am a complete dolt when it comes to technology. I come from a time when computers were still a novelty in India and telephones were still attached to coiled-up wires. So, you see. But with ChatGPT making waves everywhere from pay-and-use toilets to vanity vans and everything in between, I thought, “Why not give it a try!” And here I am with a full-blown article on my attempt at making ChatGPT write code. Yay!
As I sat scratching my balls in the summer heat a few nights ago, I asked ChatGPT, “Can you write me the code for a simple English dictionary that returns the meaning of English words when searched for?” ChatGPT said, “Yes, Sir!” and set about writing the code for a simple webpage that pulls the meaning of the ‘searched’ word from an ‘open’ dictionary. But there was a catch. The code wouldn’t work without an API key.
“What the f*** is an API?” I asked.
“You don’t even know what an API is, you dummy?” I imagine that’s what ChatGPT wanted to say, except it didn’t. It went on to describe APIs more politely and the response looked something like this with some seasoning for readability.
API stands for Application Programming Interface (You should go back to school if you don’t know that in 2024). They allow different programs to talk to each other without getting lost in translation.
Think of an API as a messenger that carries your request to a website or app and returns with the response. For example, when you look up a word in some online dictionary, the webpage uses an API to ask the dictionary service for the word's meaning and get the response. In case you were wondering, APIs look like URLs (don’t tell me you don’t know what a URL is!). ?
Aha! I was preparing to ask ChatGPT to write me the code when it burst the bubble. “You need an API key to access an API.”
“Oh, come on! What the f*** in an API key now?”
ChatGPT was inhumanly polite once again.
API keys help control who can use the service (like a dictionary) and how often, making sure it is being used properly. You can imagine an API key as a password that identifies you when you use an API. It allows the service to know who you are and what kind of access you have. When you make a request through an API, you usually include your API key, so the service knows it's you making the request.
Light bulb moment!
“Yeah buddy, I get everything now! How about you write the code now.” Turns out Free Dictionary is the only online English dictionary with an open API anyone can access without limitations. And you don’t need a key to access it.
Here’s the API: https://api.dictionaryapi.dev/api/v2/entries/en/<word>
Armed with this potent tool, ChatGPT produced the code for my bare-bones English dictionary that returns the meaning of any English word you search for. It even gives a sassy reply if you type gibberish in the search bar!
领英推荐
Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<title>Fun Dictionary</title>
<style>
/* Style the page */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
/* Set background image */
background-image: url('https://i.ibb.co/CK7fNmh/pexels-pixabay-267669.jpg');
background-size: cover; /* Cover the entire background */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
}
/* Style the input and button */
input, button {
margin: 10px;
padding: 10px;
font-size: 1em;
border-radius: 5px;
border: 1px solid #ccc;
}
button {
background-color: #007bff;
color: white;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
/* Style the result box */
#result {
margin-top: 20px;
padding: 15px;
border: 1px solid #ccc;
border-radius: 8px;
background-color: white;
font-size: 1.2em;
width: 80%; /* Adjust the width as desired */
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
white-space: pre-wrap; /* Ensure each sentence occupies a separate line */
}
/* Style for the text */
#title, label {
color: white; /* Set text color to white */
}
</style>
<script>
// Function to fetch and display the word meaning
async function fetchWordMeaning(event) {
event.preventDefault(); // Prevent form submission
// Get the word from the input field
const word = document.getElementById('wordInput').value;
// API endpoint
const apiEndpoint = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
try {
// Fetch the definition from the API
const response = await fetch(apiEndpoint);
const data = await response.json();
// Process the JSON response and display the results
if (response.ok) {
let resultText = ''; // Initialize the result text
// Iterate over the meanings
for (let meaning of data[0].meanings) {
resultText += `Part of speech: ${meaning.partOfSpeech}\n`;
// Iterate over the definitions
for (let definition of meaning.definitions) {
resultText += `- Definition: ${definition.definition}\n`;
// Check if there are examples and display them
if (definition.example) {
resultText += ` Example: ${definition.example}\n`;
}
}
// Add a separator between each part of speech
resultText += '\n';
}
// Display the results in the result div
document.getElementById('result').textContent = resultText;
} else {
// Display an error message if the word is not found
document.getElementById('result').textContent = 'Did you invent the word, Darling?';
}
} catch (error) {
// Handle errors and display an error message
document.getElementById('result').textContent = 'An error occurred while fetching the definition.';
console.error('Error fetching data:', error);
}
}
</script>
</head>
<body>
<!-- Display the title -->
<h1 id="title">Fun Dictionary</h1>
<!-- Form to get the word -->
<form onsubmit="fetchWordMeaning(event)">
<label for="wordInput">Enter an English word:</label>
<input type="text" id="wordInput" required>
<button type="submit">Search</button>
</form>
<!-- Display the results in a box -->
<div id="result"></div>
</body>
</html>
Here’s a little explainer for dolts like me:
HTML Structure:
CSS Styles:
JavaScript:
Form and Elements:
Once you’ve copied the code, open a simple text editor, paste the code, and save it as an HTML file with a .html or .htm extension. Now open the file - it should open as a webpage – and start playing. You can experiment with the formatting if you want; maybe use a different background image or a not-so-sassy error message. The playground is yours, my friend!
Something for the professionals
I know, I know! You can do better! Most people can. But this is me. However, if you are in need of a bonafide maverick of a programmer, you should call up Remote Resource? . They have some of the best coders on their payroll ready to come out all guns blazing on any project.
Great perspective! Hirak Dasgupta
Senior Content writer at Remote Resource
10 个月Fantastic read...the way you have woven the article is incredible...I could not resist the temptation to read the entire article at one go.