timii / wordocean Goto Github PK

Currently, the input fields have a dark background while the site has light mode enabled and a light background when dark mode is active. We should reverse the background and text color to match the whole site.

When searching for a word which doesn't have a definition, the loading GIF just keeps on playing. We need to add some sort of time limit to show "Sorry, we couldn't find a definition for your word" when the loading takes too long.

Also add display for when the API doesn't respond with a definition.

Example: searching "hh" in English:

Currently, when a word has multiple definitions, it renders multiple elements on top of each other instead of under each other.

Examples:
Word with one definition:

Word with multiple definitions:

When the user clicks on "Search", add a check for each input field to look if any input is given and if not, display a hint for the user

Refactor project to have an index.html file to be able to host the site on GitHub pages

Add media queries to css files to correctly show the design on smaller displays.

For Example:
The phonetics when the site is full screen

when the site is smaller

Remove old comments, add new descriptive comments and refactor where needed

Store the API response in the state

Add styles for screens smaller than ~400px in width, e.g.: Galaxy Fold:

Change "standardTransition" CSS var from all to specific transition to avoid smooth transitions between different screen sizes.

Example:

• puddle image uses standardTransition even though just the background needs the transition