Frontend Mentor - Dictionary web app solution

This is a solution to the Dictionary web app challenge.

Table of contents

• Frontend Mentor - Dictionary web app solution
• Table of contents
• Overview
  • The challenge
  • Screenshot
  • Links
  • Built with
  • Get started
    • clone project
    • install dependencies
    • start project on local server
  • Author:

Overview

The challenge

Users are 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

• Have the correct color scheme chosen for them based on their computer preferences. Hint: Research prefers-color-scheme in CSS.

Screenshot

Links

• Live Site URL: https://nomad-dict.netlify.app/

Built with

• React - JS library
• CSS modules

Get started

clone project

git clone <repo link>

install dependencies

npm install

start project on local server

npm start

Author:

Frontend Mentor - @bilal