All solutions

My 2nd challenge by using React. This challenge let me understand more on the range slider, both Chrome and Mozilla have different implementation when it comes to the range progress bar.

I've added some animation to the price changes and also the button. Any feedback is appreciated. :)

This is my first React project. I am currently learning this library, so I hope that I implemented it correctly.

I am using regex for the text field validation and purposely limit the length for the 3 input text so that user won't type irrelevant values.

Any feedback (especially React) is really appreciated. Thank you

I really enjoyed doing this challenge.

Any feedback is appreciated.

Spend quite amount of time to align the images/svg properly on different screen size but I really enjoyed doing this challenge. Any feedback is welcome. Thanks!

Any feedback is welcome. Thanks!

The difficult part for this challenge is to fit the layout of each devices resolution. I am using em for margin and padding rather than px this time. Please let me know whether I'm using it correctly or not. Thank you!

Even this challenge did not need <label>, but I still added <label> with display: none; to each <input> to clear off the accessibility issue.

• Validate email address by using a regular expression

This was quite challenging to me. I had to change my initial design for a few times in order to achieve better results. Any code review and feedback is appreciated. Thanks!

This design is my first time using BEM methodology and also CSS preprocessor. Any feedback is appreciated. Thank you!

The most challenging part was the 2 background images. I changed a few methods to make sure it placed correctly. After a few testing, this final result fits the most with the original design in both desktop view and mobile view. Please share with me if you think there is another way to place the 2 background image more better. Thank you.