lexoskeleton/feq_dictionary_app

Front End Queens Open Source Dictionary Web App

Dev Divas Dictionary App

The Project

Our goal was to create a real-world dictionary web app according to the guidelines presented by Front End Mentor. The user can:

• 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
• Switch between serif, sans serif, and monospace fonts
• Switch between light and dark themes

Known Issues

• Possible compatibility issues across MacOS & PC.

The Tech Stack

Technologies used include:

• HTML
• CSS
• The Dictionary API
• JavaScript

The Contributors

Meet the Dev Divas!

• Lexi Antar
• Gabriela Knop Marques
• Ainur Saduova
• Iroh Omolola
• Audrey Clark
• Christine Belzie

feq_dictionary_app's Issues

Functionality - Update search query to submit upon hitting the "enter" key

Right now the search can only happen if the user clicks the search button. Can we add an event listener to make submit the search with the "enter" key?

Functionality - Use Search Bar to Search Dictionary API

View - Create Search Input with Form Validation

We need an HTML input search bar that does not allow blank searches.

folder restructure

add folders for css & js (styles & js)

Style - Apply Light/Dark Theme(s) to Site

Missing Query size for the text inside the font-family menu

Add a Query to change the font size of the text inside the font-family menu.

View - Create Results Div

This is the div that will store the results from the Search Input, or the error message if applicable

Bug - Fix Invalid Search Error Message

Style - Add Media Queries for Responsive Design

Style/Functionality - Add OnSubmit Action to Search Box

our search box is currently a text input field without an option to submit.

we have not yet connected to the dictionary api, but for now, we need to create an onSubmit action that:

• triggers the error message for an empty search
• does not throw an error out when there is a valid search (there are letters entered)

Bug - Light/Dark Toggle Currently Stuck on Dark Mode

Documentation - Create a ReadMe

Bug - Search Bar does not accept new input from Invalid Search view

Create a Container Div to Centralize the App on the page

1. Create a div to be a container of the page
2. Style this div to centralize and add a gap between navbar, searchbar and the results.

Style - Move and Style Light/Dark Theme Toggle

Add a condition to display Synonyms and Antonyms

Add a condition to display Synonyms and Antonyms only when the length of each differs from empty "".

Fix app styles to look like Figma design

Fix small styles like:

• grey lines side by subtitle noun and verb
• purple dots
• alignment of the app parts

View - Create Light/Dark Theme Toggle

We want to switch between light & dark mode with a toggle.

Functionality/Style - Allow for Toggle between Light/Dark Themes

View - HTML - Search Bar Screen

Functionality - Dynamically populate Results div with results from Dictionary API

Style font selector

View - HTML - Results Screen

View - HTML - Error Screen

Bug - Fix "Synonym Subtitle" and "Example" should update with new search results (JS)

See the Synonyms and the quote towards the bottom.
The result next to synonyms could use some padding or margin as well.

Deployment

more extra credit - let's deploy this somewhere so we can share the link in the readme and on our portfolios!

Compatibility - MacOS & PC

Investigate color/style setting incompatibility across MacOS & PC systems.

View - Create Font Dropdown

We want to switch between serif, sans serif, and monospace fonts.

Style - Style Search Bar to handle empty submissions

Known Issue - Firefox Compatibility

an "extra credit" issue for folks who'd like to keep working on the project after submission: text dropdown light/dark theme change broken in firefox and edge:

Polishing JavaScript functionality and code

Remove console.logs, check functionality, optimize code

Style - Move & Style Search Bar