All solutions

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

This is my first time doing a multi-step form. I ran into a few issues but I'm not unhappy with the final product.

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

I used the zod library for the form validation. I totally didn't use it the correct way. I ended up using it in a hacky sort of way. I later saw a better method of using it for the same type of validation together with the useForm hook. If you have any comments or observations regarding that or any other thing, please let me know.

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

Your feedback and suggestions are welcome always. Thanks

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

I didn't really struggle with this one as I mostly used techniques and methods I'm already used to. However there are no doubt still many ways to improve the solution. Let me know if you spot any. Feedback is most welcome

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

The page overlay that shows up when the sidebar is open (on mobile) surprising gave me quite a bit of difficulty. I initially put the overlay element outside the header and whenever I showed it, it covered the page but not the header. I played around with the z-index but then it covered the header and sidebar. Somehow I learned that as the sidebar itself was a child of the header I could not put the overlay between the header and the sidebar just by manipulating the z-index. Finally solved it by just putting the overlay element in the header component

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

Tried to implement lazy loading for the images and a placeholder spinner. Gave up on this as the results weren't exactly what I was looking for. Would love to study and practice more with lazy loading and maybe implement it in a future challenge. Any feedback on good resources would be appreciated

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

My first time working with libraries for animation. Wanted to try out some popular ones. Ran into some issues trying to use react-beautiful-dnd (for drag and drop) functionality together with react-spring (for the animation). Later settled on react-transition-group. It was overkill using a library for animation as this solution has very little in terms of animation (excluding that from the drag and drop library) but it was just for practice. Also found that react strict mode caused the drag and drop functionality provided by the library to malfunction (stop working completely on page refresh) so I had to remove that even while working on it.

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

Let me know your thoughts on any area of this solution where I could've improved. I would very much appreciate feedback

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

My first time working with libraries for animation. Wanted to try out some popular ones. Ran into some issues trying to use react-beautiful-dnd (for drag and drop) functionality together with react-spring (for the animation). Later settled on react-transition-group. It was overkill using a library for animation as this solution has very little in terms of animation (excluding that from the drag and drop library) but it was just for practice. Also found that react strict mode caused the drag and drop functionality provided by the library to malfunction (stop working completely on page refresh) so I had to remove that even while working on it.

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

Let me know your thoughts on any area of this solution where I could've improved. I would very much appreciate feedback

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

Encountered some issues resizing the carousels crated using react-glider library. It is my first time using that and because it creates it's own html structure for the carousels I had issues where trying to resize them broke the functionality. By trial and error I found that to resize it's width u'll want to target the .glider-contain div and the height can be changed without issue by targeting .glider-track

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

Encountered some issues resizing the carousels crated using react-glider library. It is my first time using that and because it creates it's own html structure for the carousels I had issues where trying to resize them broke the functionality. By trial and error I found that to resize it's width u'll want to target the .glider-contain div and the height can be changed without issue by targeting .glider-track

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

Had issues with showing only y-overflow whilst hiding x. Found from some research that it's an inherent CSS issue. Used the images in the background as a workaround

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

My first time using react and tailwind. Please feel free to offer feedback and criticism. The gradient in the hero section always seemed to completely obscure the background image. Any ideas to fix that is welcome

In my time using HTML number input I've found that it's sometimes not so easy to prevent a user from entering some unwanted characters like the e, +, - and dot(.). Tried different approaches. Some of those didn't work too well. I settled on using a regex expression to replace those characters in the value. Please let me know if you've used a different method that works.

And why does the number input return an empty string for input.value when (+), (-) are the inputs. And I believe it returns only '2' when one inputs '2.'. Cos this gave me some headache when I was trying to read the value on each input and slice off the end when the character is one of the unwanted ones.

Thanks in advance

In my time using HTML number input I've found that it's sometimes not so easy to prevent a user from entering some unwanted characters like the e, +, - and dot(.). Tried different approaches. Some of those didn't work too well. I settled on using a regex expression to replace those characters in the value. Please let me know if you've used a different method that works.

And why does the number input return an empty string for input.value when (+), (-) are the inputs. And I believe it returns only '2' when one inputs '2.'. Cos this gave me some headache when I was trying to read the value on each input and slice off the end when the character is one of the unwanted ones.

Thanks in advance

Certainly learned a lot doing this one as I ran into a lot of challenges. One was preventing negative inputs for bill, custom tip and persons. Tried a few solutions but each had a down side before I finally settled on the one in the code. Please let me know if there's a better way to do that. If you see any other areas I can improve, feel free to let me know. You're much appreciated

This was my first time using an api call in javascript. I should point point out that I've only been learning and using js going on two months now, so I have limited experience with some aspects of it especially with asynchronous functions.

I tried to implement some sort of feedback to the user when the api call fails due to bad network. I was able to get it working (sort of). If you tried to generate an advice without a connection you'd see what I did. The issue is. I wanted to be able to make the api call retry a couple of times before giving that feedback; right now it just gives the error once it fails the first time. Tried to research some solutions online but some persons were using 'Promises' which I frankly don't understand well at this point. If you know a way I could do something like that or you can point me to a good resource to learn about promises, I'd be very grateful. Thanks in advance

Feedback is welcome. Thanks

Feedback is welcome. Thanks

Feedback on how to improve any aspect of this solution is always welcome. Please if you're familiar with BEM methodology and you have the time to look through my code, tell me if i'm using it right and how to improve it.

Feedback is welcome, especially with my Sass and BEM methodology usage. Thanks

Feedback is always welcome. I attempted to use BEM methodology in this challenge. Please let me know if I'm doing it right and how to improve it.

Just learned SCSS and this is my first time using it. Please let me know if I'm using it right or if I can improve something. Thanks

Feedback is welcome

Feedback is welcome

Feedback is welcome

Feedback is welcome.Please give suggestion if you notice any area I can improve this solution. Thanks in anticipation.

Feedback is welcome.Please give suggestion if you notice any area I can improve this solution. Thanks in anticipation.

Feedback is welcome.

While adding the icons with css ::before, I had some issues positioning the text at the center in front of the icon. Found a way to do this using

:: before {
vertical-align: middle;
}

To my eyes anyway, it doesn't look perfectly centered still. Let me know if there's a better way I could've done this. Thanks for your time. Much appreciated