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

Advice generator app

Jiwon Suh 210

@suhjiwon95

Desktop design screenshot for the Advice generator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
  • API
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


I'm open to all suggestions! :D

Community feedback

@fazzaamiarso

Posted

Hi @suhjiwon95! Great work!

I have some quick tips for you

  • To improve user experience, you can fetch an initial advice so the UI doesn't feel empty. You can also insert an Empty State UI.
  • When naming in Javascript, especially Frontend, it's primary convention is to use camelCase. If I'm not mistaken, snake_case is Python's convention.
const advice_id = data.slip.id; 

const adviceId = data.slip.id; 👍
  • You can also do Object destructuring.
 const { advice } = data.slip;

I hope it helps! Cheers!

Marked as helpful

0

Jiwon Suh 210

@suhjiwon95

Posted

Thank you for your suggestion! @fazzaamiarso

What exactly the object destructuring will do?

0

@fazzaamiarso

Posted

@suhjiwon95 It's essentially extracting properties of an Object. It's also more efficient when you want to get multiple properties from an Object. You can also destructure an Array.

// example object
const person = { firstName : "John", lastName : "Smith", age : 23, country : "USA" } }

// use destructuring
const { firstName, lastName } = person;  ✅

// 😮‍💨 can be tedious to re-assign
const firstName = person.firstName;
const lastName = person.firstName;

A common use case is to extract a Component's Props in React. Here's a more comprehensive guide

I hope it answers your question!

Marked as helpful

1
Jiwon Suh 210

@suhjiwon95

Posted

Wow this is far more advanced JS for me at this point 🤣 But I will definitely check it out! @fazzaamiarso

0
Jonathan 20

@jchu51

Posted

Hi @suhjiwon95,

congrats on completing the challenge. 🎉

few minor suggestions It's a best practice to call API endpoints using the async/await pattern with promises. To handle potential failures, always include try-catch blocks. For a better user experience, consider adding a loading status or a failure message. While data is being fetched, display a loading indicator or text in the box. If the fetch fails, a message such as 'Failed to generate, please retry' would be beneficial."

It's advantageous to explore various frontend frameworks like React, Vue, and Angular. Additionally, if you're utilizing VSCode, consider installing 'prettier' for enhanced formatting.

1

Jiwon Suh 210

@suhjiwon95

Posted

Thank you for the suggestions. @jchu51

It’s always those small details make things better. I’m still learning to catch up on those details and industry conventions!

So I really appreciate those kind of suggestions.

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