Frontend Mentor - Dictionary web app solution

This is a solution to the Dictionary web app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

Svelte + TS Dictionary web app for Frontend Mentor challenge.

Run npm run dev to start the project locally.

The challenge

Users should be able to:

  • Search for words using the input field
  • See the Free Dictionary API's response for the searched word
  • See a form validation message when trying to submit a blank form
  • Play the audio file for a word when it's available
  • Switch between serif, sans serif, and monospace fonts
  • Switch between light and dark themes
  • View the optimal layout for the interface depending on their device's screen size
  • See hover and focus states for all interactive elements on the page
  • Bonus: Have the correct color scheme chosen for them based on their computer preferences. Hint: Research prefers-color-scheme in CSS.

Screenshot

Desktop

Mobile

Built with

  • Svelte
  • Tailwind
  • Typescript
  • Vite

Top categories

svelte logo

Need a Svelte website built?

Hire a professional Svelte developer today.
Loading Svelte Themes