Skip to content

suanTech/react-dictionary-app

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

38 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Dictionary App

** This is a dictionary app built for coding challenge on Frontend mentor **

  • check out the challenge here
  • live demo here

Requirement

  • 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.

Introduction

A simple but stylish dictionary web app built with React, styled component and REST API.

Screenshots

screenshot

🗝️ Features

  • Fetch API using axios
  • Error management - Form validation, Not found component
  • Apply Global Styles and Theme to manage consistent styling
  • Smooth dropdown animation using CSS keyframes
  • Toggle switch to chanage between dark/light mode
  • Detects user's prefers-color-scheme and set theme accordingly
  • Change body fonts with dropdown menu using useEffect
  • Smooth transition applied throughout the app
  • Completely responsive 🙌

🛠️ Tech Stack

techStack

🔜 Future Challenge

  • Testing app
  • Save Favorite term

About

dictionary web app / frontend mentor coding challenge

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published