Here I am with my "Star rating" system:
✔️ No JavaScript.
✔️ No complex HTML code, only the needed <input> elements for the user interaction...
For further actions, you may consider blocking this person and/or reporting abuse
While the gradient-stuff is super-cool, the star could also be done with a simple polygon:
Then the
backgroundcan be anything you want.but you cannot repeat a clip-path ;) that's why I am using it as mask. It's one star repeated.
Ah, yes. I thought you had an
<i>after each<input>. What aboutrtl-support? 😁The lazy solution would be to use
Or I can update the code like this: codepen.io/t_afif/pen/eYWJNBd
updated the post to include this. I was writing this fast yesterday and forgot to work on it.
Cool!
Dude, you're no doubt a wizard
Hat off, high five and sincere great respect for your priceless contribution to the world's selection of perfect non-trivial simple high quality solutions
@inhuofficial think twice before saying my code is not accessible !
Oh dear, I feel strange....urggh no, no not again.
{Angry Rants man] - time for another fucking rant you fuckers, they were meant to be gone but fuck it you have done too much damage. @afif , @madsstoumann prepare for war!
I’m a pacifist 🌱
Yeah - are you a pacifist like Gandhi in Side Meir's Civilization? Be nice to you and suddenly you just drop a Nuke due to a bug in your code?
😂
A war we are gonna win!
you opened the pandora's box ...
First let me say that I am new to this site and love what I see so far. I believe I will learn a lot from you and thanks for all your hard work!
I added this great script to my html page once and it worked fine until I tried to add it more than once on the same page then the default checked rating that I set for each recipe disappears.
It goes back to the regular color of gray for all of them. When I hover and click the color changes but when I refresh it returns to gray.
I have a page with 21 different recipes on it and I want a different default rating for each one.
What am I missing?
PS: I am somewhere between newbie and intermediate in my coding skills.
did you make sure you used a different 'name' for each rating? You should not copy/paste the code and keep the same name. Check my codepen and you will notice that each group has a different name
Thank you that was the problem. I also had to move the word checked to the appropriate value instead of the default 3 value.
Thanks again for your support!
I am now trying to add a number to the right of the stars to indicate total number of voters.
I have tried using a span element after the star div but it doesn't line up properly with the star ratings.
From what I gather I cannot use margin or padding with a span element which is what I tried (span.ratingTotal{padding:0 0 5px 10px;}).
I also tried just placing the text inside the star div before the i tags and after them but that didn't work either.
The only thing I tried that seems to work is to use a p class tag and place it under the star ratings but I prefer to have it inline with them.
Is there a way to do this?
try like this: jsfiddle.net/ktpn8oq7/
Wow, thanks very much.
I had tried something similar but didn't make the same css changes as you.
I am trying to understand your css better as it is a little more advanced than I am used to.
I had decided to go with the p class but will now undo everything and try your solution.
Thanks again!
Dude, please, write a comprehensive guide on, "How to be great at CSS? (like Temani Afif)."
haha! that guide will contain one word "practise and parctise and practise" ;) There is no magic in become better.
Also read what Temani Afif is writing 😇
I've been a JavaScript instructor and still teach and mentor juniors/interns. It's funny how these advices are actually simple and disappointing as in, there never are any "magic bullets". Thanks!
However, do you recommend any resources? I got a membership in FrontendMentors, I'll be creating the websites they've listed there. I also know of Dribbble but I'd go for it after I'm done with FrontendMentors.
personally I am not a huge fan of never-ending online courses with their months of tutorial. The best way for me to learn is one trick a day. If each day you spend 10 min reading one or two articles about a new trick, it's fairly enough. Then, you can spend 1h trying that trick on your own to create something with it. That's it!
Building complex website to learn will waste you a lot of time and you will have to deal with a lot of things at the same time and it's hard to keep everything in mind. You may learn some methodologies but the road to become better will be very long and you will get tired rapidly.
find some good folks on twitter that you follow. read articles on DEV here, take a look at css-tricks.com/ and smashingmagazine.com/category/css/. try some of my challenges here: css-challenges.com/, etc
If you manage to learn something new each day and practice at least 1h a day, you will become better.
This is gold :) Thanks a lot Temani!
These were some really great and easy to follow instructions. I easily followed through it and saw the results. Thank you so much for these. I will be keeping these in mind and use them whenever a coding situation calls for it. It looks good.
It's never ending 😅
Don't judge me on this post. It was a fast one written a very hot Sunday. I cannot stay without competing with the actual "Star rating" posts 😛
What did you mean when you said?:
You know that kind of CSS code where users add the inputs and then try to hide them out of the screen using
position:absolute;and small sizes, etc.Also all the manual CSS code written to cover all the cases where we are obliged to set very specific values to get the intended result which make the code not scalable and each time you need to update something you have to redo a lot of code.
This is what I call hacky and there is nothing of this in my code. My code scale easily, there is no hard-coded value, I am not trying to make the input out of sight, you don't need to touch the CSS code if you want to add more stars or to change the size, etc
Ah, so no dirty filth, basically.
Ok, that makes sense.
Always pushing boundaries. I love this!
That sick!
Good Job!
Great idea! But is that accessible for screen readers?
Very cool! One question... or maybe two? ;)
1) It is possible to "unrate", meaning rating "zero"?
2) Is it possible to use html entities instead of using css to draw the stars?
I think I will need to redo the code to meet these requirements :)
What you want is doable not by adjusting my code. Creating a new one will be easier.
Amazing!
This looks great, might I suggest, the black outline, when clicking the stars, doesn't need to be there
you can easily remove it but it's useful for accessibility, when you navigate using keyboard you can easily see where you are. People tend to always remove the outline from buttons and other elements but they are important.
Is this possible to do with JS AND custom SVG or image for the star?
More competition in a different area:
Star rating in the Terminal
Siddharth ・ Jul 6 ・ 4 min read