Task 3: Set up the layout and styling
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.
Step 1: Reset the HTML structure
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";Step 2: Add the header
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-600for theheaderto set the background color to a sky blue.py-9for theheaderto add vertical padding.text-center,text-white,text-2xl,font-semiboldfor theptag to adjust the text styling and alignment.
Step 3: Add the main section
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.
Step 4: Configure the search input and button
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.
Step 5: Add phonetics and definitions sections
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>Step 6: Implement the footer
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.
Step 7: Putting it all together
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 pushWith 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.