For this task, our main focus will be on the layout and styling of our Dictionary app. We require a space to enter a word, a space to display the definition(s) and pronunciation(s), and a button to search for the word. We will also add some basic styling to make the app visually appealing.
Open the index.html
file. Notice the basic HTML structure with a head
and body
section. We also have the title
tag and the meta
tags for character encoding and viewport settings.
Please remove any unnecessary elements from the body
section. The HTML should look like the following:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dictionary App</title>
</head>
<body class="flex flex-col h-full min-h-screen">
<!-- Content will go here -->
<!-- Scripts here. Don't remove ↓ -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
Furthermore, remove any initial test code from main.js
. Your main.js
file should only contain the necessary setup code:
import "../style.css";
Next, we’ll add the header
section. This will include a p
tag for the title of our app.
<!--Header-->
<header class="bg-sky-600 py-9">
<p class="text-2xl font-semibold text-center text-white">
Free English Dictionary
</p>
</header>
Notice that we have added class attributes to the header
and p
elements to style them. We have the following classes:
bg-sky-600
for the header
to set the background color to a sky blue.py-9
for the header
to add vertical padding.text-center
, text-white
, text-2xl
, font-semibold
for the p
tag to adjust the text styling and alignment.We will structure the main
section to include input for new words, phonetics, and definitions.
<!--Main Section-->
<main class="container flex flex-col flex-grow gap-4 mx-auto my-4">
<!-- Subsections will be added here -->
</main>
We’ve set the main
section to center within the page and spaced out its children with a gap, providing a clean, organized structure.
Within the main section, add a section
for the search functionality:
<!--Search-->
<section class="flex items-center justify-center py-6">
<div class="flex-grow">
<input
class="w-full px-4 py-2 border-2 border-r-0 border-stone-200"
id="input"
placeholder="Enter a word"
type="text"
value="Hello"
/>
</div>
<div class="flex-shrink">
<button id="submit" class="px-6 py-2 text-xl text-white bg-sky-600">
Define
</button>
</div>
</section>
Here, the input and button are horizontally aligned and styled with Tailwind’s utility classes for padding, borders, and colors.
For displaying phonetics and definitions, use separate section
tags with styling that segregates each part clearly:
<!--Phonetics-->
<section id="phonetics" class="flex flex-col gap-4">
<h1 class="text-2xl font-semibold">Phonetics</h1>
<div class="bg-stone-100">
<p class="px-4 py-3 text-white bg-stone-700">/həˈloʊ/</p>
<audio controls style="width: 100%">
<source
src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-au.mp3"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="bg-stone-100">
<p class="px-4 py-2 text-white bg-stone-700">/hɛ'loʊ/</p>
<audio controls="true" style="width: 100%">
<source
src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-uk.mp3"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
</section>
<!--Definitions-->
<section id="definitions" class="flex flex-col gap-4 mt-6">
<h1 class="text-2xl font-semibold">Definitions</h1>
<div class="bg-sky-50">
<p class="px-4 py-2 font-semibold text-white bg-sky-600">
Exclamation
</p>
<ul class="p-2 ml-6 font-light list-disc text-sky-700">
<li>Used as a greeting or to begin a phone conversation.</li>
</ul>
</div>
<div class="bg-sky-50">
<p class="px-4 py-2 font-semibold text-white bg-sky-600">Noun</p>
<ul class="p-2 ml-6 font-light list-disc text-sky-700">
<li>An utterance of "hello"; a greeting.</li>
</ul>
</div>
<div class="bg-sky-50">
<p class="px-4 py-2 font-semibold text-white bg-sky-600">
Intransitive Verb
</p>
<ul class="p-2 ml-6 font-light list-disc text-sky-700">
<li>Say or shout "hello"; greet someone.</li>
</ul>
</div>
</section>
Finally, add a footer
to provide credits or any additional information:
<!--Footer-->
<footer class="mt-8 bg-stone-50">
<div class="py-12 text-center text-stone-950">
This program uses the
<a href="https://dictionaryapi.dev/" target="_blank" class="underline"
>Free Dictionary API</a
>.
</div>
</footer>
This footer uses a light background and centered text to provide a neat, unobtrusive section at the bottom of the page.
Here is the complete HTML structure with the layout and styling for our Dictionary App:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/x-icon" href="/favicon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dictionary App</title>
</head>
<body class="flex flex-col h-full min-h-screen">
<!--Header-->
<header class="bg-sky-600 py-9">
<p class="text-2xl font-semibold text-center text-white">
Free English Dictionary
</p>
</header>
<!--Main Section-->
<main class="container flex flex-col flex-grow gap-4 mx-auto my-4">
<!--Search-->
<section class="flex items-center justify-center py-6">
<div class="flex-grow">
<input
class="w-full px-4 py-2 border-2 border-r-0 border-stone-200"
id="input"
placeholder="Enter a word"
type="text"
value="Hello"
/>
</div>
<div class="flex-shrink">
<button id="submit" class="px-6 py-2 text-xl text-white bg-sky-600">
Define
</button>
</div>
</section>
<!--Phonetics-->
<section id="phonetics" class="flex flex-col gap-4">
<h1 class="text-2xl font-semibold">Phonetics</h1>
<div class="bg-stone-100">
<p class="px-4 py-3 text-white bg-stone-700">/həˈloʊ/</p>
<audio controls style="width: 100%">
<source
src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-au.mp3"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
<div class="bg-stone-100">
<p class="px-4 py-2 text-white bg-stone-700">/hɛ'loʊ/</p>
<audio controls="true" style="width: 100%">
<source
src="https://api.dictionaryapi.dev/media/pronunciations/en/hello-uk.mp3"
type="audio/mpeg"
/>
Your browser does not support the audio element.
</audio>
</div>
</section>
<!--Definitions-->
<section id="definitions" class="flex flex-col gap-4 mt-6">
<h1 class="text-2xl font-semibold">Definitions</h1>
<div class="bg-sky-50">
<p class="px-4 py-2 font-semibold text-white bg-sky-600">
Exclamation
</p>
<ul class="p-2 ml-6 font-light list-disc text-sky-700">
<li>Used as a greeting or to begin a phone conversation.</li>
</ul>
</div>
<div class="bg-sky-50">
<p class="px-4 py-2 font-semibold text-white bg-sky-600">Noun</p>
<ul class="p-2 ml-6 font-light list-disc text-sky-700">
<li>An utterance of "hello"; a greeting.</li>
</ul>
</div>
<div class="bg-sky-50">
<p class="px-4 py-2 font-semibold text-white bg-sky-600">
Intransitive Verb
</p>
<ul class="p-2 ml-6 font-light list-disc text-sky-700">
<li>Say or shout "hello"; greet someone.</li>
</ul>
</div>
</section>
</main>
<!--Footer-->
<footer class="mt-8 bg-stone-50">
<div class="py-12 text-center text-stone-950">
This program uses the
<a href="https://dictionaryapi.dev/" target="_blank" class="underline"
>Free Dictionary API</a
>.
</div>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script type="module" src="/src/main.js"></script>
</body>
</html>
Run your application in the browser to see the layout and styling in action.
With the layout and styling set up, our Dictionary App is both functional and visually appealing. The use of Tailwind CSS helps in quickly implementing a responsive design while keeping the HTML clean and maintainable. Ensure you test the responsiveness across different devices to guarantee a smooth user experience.
Commit and Push: Don’t forget to commit your changes to your version control system and push them to your repository to ensure your work is saved and can be deployed or shared with others. Here’s a generic example:
git add .
git commit -m "Setup layout and styling for the Dictionary App"
git push
With these changes, our Dictionary App is ready for further development, such as adding dynamic functionality with JavaScript or enhancing the UI with additional TailwindCSS utilities.