Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request failed with status code 502
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component with react and tailwindcss

ify47 360

@ify47

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I did some learning on tailwindcss and decided to implement it with this challenge, please i need your feedback, i honestly don't really fancy this tailwind, because it makes my codes look bulky, or am i writing the codes wrongly? is there a better way to write tailwindcss?... i still prefer regular css

Community feedback

Mukwende 1,370

@mukwende2000

Posted

Yes it makes the code look dirty but that is the disadvantage, however the advantages outweigh them, you prefer regular css because these are small project, when you begin working large stuff, css will become so complex that you will understand why there are frameworks in the first place. That is why frameworks are not for small projects, regular css and js is just enough for these, the benefits of frameworks show when you begin doing some real world stuff.

Marked as helpful

1

ify47 360

@ify47

Posted

@mukwende2000 i understand, thanks for the response, and how do you see my useState implementation with the rating component, was it alright?

0
Mukwende 1,370

@mukwende2000

Posted

@ify47 the useState is just fine although i can't see the usage of rateNumber state in the Rate component, it is being used in the ThankYou components, so am not sure why you are passing it there. Also the getNumber function is kinda confusing, you have defined it with a parameter but calling it without one. Apart from the react stuff, i will encourage you to continue adding onto your html knowledge because it seems there is much lacking, all the inputs are supposed to be in a form tag, and they are supposed to be of type 'checkbox' not text.

0
ify47 360

@ify47

Posted

@mukwende2000 i am getting the users rating number passed as a child to parent component, hence the childname, once the submit is clicked, it triggers the getRatevalue and gets the inputs value through childname Const handlesubmit =()=>{ rateNumber(inputs) } Getratenumber is being passed to ratenumber and the inputs in bracket is being passed back to the parent component(app.js) , and sets the class action to false aswell, what do you mean by getNumber function, or are you referring to getRateValue, which i just explained, i dont know the code you're looking at because all the 5 inputs i added in ratingpage is radio type and i connected it to the label making using the htmlfor, thus making me able to hide the radio checkboxes

0
Mukwende 1,370

@mukwende2000

Posted

@ify47 oh yes i see now, and my bad somehow i saw text somewhere, that is okay then, and great solution overall.... just put all the inputs in a form to make it the right structure.

Marked as helpful

0
Steve 1,170

@peanutbutterjlly

Posted

hey 👋,

I feel the same way about TailwindCSS - I think its a great tool for teams or component based layouts/frontends but I don't use it regularly (I've used it on 2 of my personal projects).

Like you said, it kind of clutters the markup and isn't pleasant to look at but there is a lot of positives to it as well - it's just not really my cup of tea.

CSS frameworks/libraries are nice to 'quickly' build something and if you're at an agency that uses them then you have to use it but I almost always prefer vanilla CSS or maybe even a 'classless' framework.

Good job with your solution!

Marked as helpful

1

ify47 360

@ify47

Posted

@peanutbutterjlly thanks so much for the response 🙇‍♂️

1
Mukwende 1,370

@mukwende2000

Posted

But tailwind is not the only css framework out there so you can still use something that you will find you love, like @Steve said above..

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord