📝Brief
Your challenge is to build out this dictionary web app using the Dictionary API and get it looking as close to the design as possible.
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go. https://dictionaryapi.dev/ Get word definitions
Usage : The basic syntax of a URL request to the API is shown below:
https://api.dictionaryapi.dev/api/v2/entries/en/
As an example, to get definition of English word hello, you can send request to
https://api.dictionaryapi.dev/api/v2/entries/en/hello
Your users should be able to:
[x] Search for words using the input field [x] See the Free Dictionary API's response for the searched word [ ] See a form validation message when trying to submit a blank form [x] Play the audio file for a word when it's available [x] Switch between serif, sans serif, and monospace fonts [x] Switch between light and dark themes [x] 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.
🗃Assets provided
Sketch and Figma design files
Mobile, tablet & desktop layouts
Professional design system for colors, fonts, etc.
Optimized image assets
README file to help you get started
HTML file with pre-written content
💡Ideas to test yourself
Write your styles using a pre-processor, such as Sass, Less or Stylus
Train your eye for detail by getting your solution as close to the design as you can
Use a JavaScript framework/library to practice templating and/or building using components
Try estimating the time it will take for you to build the project. Then see if the time taken matches up to your estimate. Project estimations are a skill that is often overlooked but is important for professional developers