This dictionary provides definitions and examples by lexical field. Two contexts are included:
- One for darkMode (this adapts to the user's system preferences)
- One for changing the font (serif, sans-serif and mono)
The stories are hosted on Chromatic at this URL.
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.
| Serif font + light mode | Serif font + dark mode |
|---|---|
 |
 |
| Sans-serif font + light mode | Sans-serif font + dark mode |
|---|---|
 |
 |
| Mono font + light mode | Mono font + dark mode |
|---|---|
|
|
- Semantic HTML5 markup
- Mobile-first workflow
- TailwindCSS
- React
- Storybook
- Chromatic
- Website - Portfolio
- Frontend Mentor - @CalcagnoLoic