This is a solution to the Dictionary web app challenge on Frontend Mentor.
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
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- React - JS library
- Styled Components - For styles
- Vite PWA plugin - For native app like functionality
It's the first time I've tried out styled components and SCSS, so the CSS code is a bit all over the place. In the future I'll make sure to structure my app more carefully.
- Frontend Mentor - @kxrn0