Flexbox

👾Hi Ajay, congrats on completing this challenge!

I've just opened your live site and I can say that you did a great job putting everything together! There's some tips to improve your solution:

Your component is perfect, but is not responsive yet, this is due the fixed width you've applied to the container.

Look both width and max-width the main difference between these properties is that the first(width) is fixed and the second(max-width) is flexible, for example, a component with width: 320px will not grow or shrink because the size will be ever the same, but a container with max-width: 320px or min-width: 320px can grow or contract depending of the property you've set for the container. So if you want a responsive block element, never use width choose or min-width or max-width.

Note that there's no need to use height here, because since you set a height for an element, this means that this element will grow until a certain point and after that the inner content (as texts or images) will start to pop out the element due its fixed height, so isn't necessary to set the height the container height comes from the elements, its paddings and height.

✌️ I hope this helps you and happy coding!

Hi Ajay, well done in building this component! I think there are many things you did well, including making the component responsive, having optimal views, making everything functional with the JS, and having descriptive class names. I found your code to be clean and easy to read, so great job here!

I think the only suggestion I have is that instead of using li for the buttons, try to use either a button or radio inputs, as this would have with accessibility since these are control elements and can be used with the tab key, whereas the li element could not be used with a tab key. Even though you can add make them into focusable control elements, there shouldn't be a need to do that when there are more suitable elements, such as button.

Hope this helps and once again, great job!