Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

React + Styled Components + Debounce search

P

@AurelienWebnation

Desktop design screenshot for the Dictionary web app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

This project is currently the best I made and the most proud of. I really loved coding this dictionary.

What challenges did you encounter, and how did you overcome them?

Astonishment, a challenges I encountered was to set an error on the input when this one is empty. I used an realtime api call with a debounce and you don't need to press enter or click to submit your word. So I can't use the onSubmit function to prevent an empty input. Instead, I choose to made a verification into the handleChange function.

What specific areas of your project would you like help with?

I used the handleChange function to check if the input is empty or not, this is the function :

function handleChange() {

if (!event.target.value) {
  setInputError('Whoops, can’t be empty…');
} else {
  setInputError('');
}

setWord(event.target.value);

}

I think there is a better way to do this. Actually, the network request will be made, even if the input is empty.

Community feedback

haquanq ®️ 1,585

@haquanq

Posted

Hello @AurelienWebnation,

Nice work on the solution!

I think it is unnecessary to show input error (empty error) when the request will eventually be sent. Maybe considers adding an empty component with descriptive text to encourage users to use the search when the input is empty is more appropriate.

Have a nice day and happy coding!!!

0

P

@AurelienWebnation

Posted

@haquanq Hey, thanks for your reply!

The figma model want to show an error when the input is empty, this is why we need to show that error to the user.

0
haquanq ®️ 1,585

@haquanq

Posted

hey @AurelienWebnation, the Figma model did not tell you to build a search component with "debouce" feature!! So maybe it is unnecessary to do so!

0
P

@AurelienWebnation

Posted

@haquanq That's right! I think the best option like you said is to create and display a specific component when search input is empty.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord