All solutions

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

Usage of React Context API to prevent prop-drilling and applying the concept of "lifting state up".

I would have implemented lifting the form ref instead of the calculation result itself so I do not have to pass the form ref to the `` component. In this way, I have access for both the form values and element itself. This is useful for resetting and getting the form values.

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

The dilemma I encountered was a decision between if I should validate the form fields before or after the user interaction. I decided to just use the HTML validations instead and style the elements accordingly. This is the reason why the :invalid styles are displayed initially.

For future projects, I think I will validate the values and style the elements accordingly AFTER the user interaction so the :invalid styles are not displayed initially.

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

Not most proud of, but I enjoyed developing these designs with Tailwind v4, it makes much easier to work with through directly customizing themes in the .css file instead of a .js/.ts configuration files.

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

I tried to be as pixel-perfect as it can be, but next time I would have use rem/em units instead of static unit such as px

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

I tried to have the "wrapper" element padding in each side but it will not work since the image for mobile breakpoint needs to be stretch side-to-side. Instead, what I did was to have each `` a padding-inline.

Interactive Card Details Form 🎉

NOTE: There's bugs where the sliders are not working according to its intent.

• These are caused by the slides' width according to the media query your device is in.
  • This can be fixed by checking if the media query is changing. (if media query changes, check slide width value, and replace value of scrollTo)
• Another one is changing slideIndex value when using mouse/trackpad scrolling
  • This can be fixed by adding a scroll event listener to the wrapper element of the slides

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Interactive Card Details Form 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Notifications Page 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

News Homepage 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Age Calculator App 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Newsletter Signup Form w/ Success Message 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Newsletter Signup Form w/ Success Message 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Article Preview Component 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

BMI Calculator 🎉

Questions:

• Can you help me with my accessibility reports?

Any feedbacks or questions are appreciated though! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 06/24/2023

Pod Request Access Landing Page🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 06/24/2023

Meet Landing Page 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 06/17/2023

Workit Landing Page 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 06/23/2023

Intro Component w/ Signup Form 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 06/21/2023

FAQ Accordion Card 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 06/06/2023

Huddle Landing Page 🎉

Any feedbacks or questions are appreciated! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.

Updated Solution: 05/31/2023

Base Apparel Coming Soon Page 🎉

Any feedbacks or questions are appreciated though! 😁 Feel free to start a thread or a discussion, and I'll try to accommodate your concerns.