Advice Generator App

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

I’m proud of how clean and maintainable the code turned out. I used design tokens for spacing, colors, and typography, which made the CSS scalable. The fade transition for advice felt like a nice detail. Next time, I’d like to experiment with a loading spinner instead of plain text and maybe reduce the animation delay to feel even snappier.

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

One challenge was making the pattern divider responsive. At first, I hardcoded the mobile SVG, but I solved it by switching to the <picture> element so the desktop version loads automatically on larger screens. Another challenge was managing the advice fade animation. I played with different timeout values until it felt smooth but not laggy.

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

I’d love feedback on two areas:

• Whether the fade animation timing feels natural or could be improved.

• Suggestions for making the app more accessible (I added visually hidden text and aria-labels, but I’m always looking to improve).