Smilies, Stars, and Thumbs-Up
Hello and welcome to a short post about helpful code snippets to create nice looking like and dislike functions in your apps.
I’ve just recently been in search of nice ideas for a rating feature in a travel app that I am programming. I came across some very cool examples on CodePen, and started fiddling with some code myself.
Today, I want to share with you the code snippets that I wrote and that I’ll keep as matrices for my future works. The examples focus on the design of rating features mainly through HTML and CSS.
Feel free to browse through the code, copy, fine-tune, and improve further for your next app ideas!
CSS animation of a series of images
This animated smiley is very much inspired by the article ‘Twitter’s “fave“ animation‘ and this Pen by Donovan Hutchinson. The smiley is embedded in a label of an HTML checkbox. The animation of the smiley is based on a series of images (in my example 28 in total). One image is associated with one frame. With the CSS animation steps timing function, you animate the frames by positioning the background. The background is one big image containing the whole series of single smiley images (see image below). Hovering over the label of the checkbox (= smiley) awakens the smiley. Clicking on the smiley leads to a checked HTML checkbox. Try it out – below in the embedded CodePen.
Background containing single smiley images for the animation.
#2.1 Thumbs up or down
Like or dislike on click
The Thumbs up or down rating feature is simply based on the Font Awesome icon class ‘fa-thumbs-up’ and ‘fa-thumbs-down’. An ease-in-out transition with a little scaling animates the thumbs when hovering over them. Five lines of JS code add the ‘active‘ class, i.e. add the blue filling color to the clicked thumb, and remove it from the other non-clicked thumb.
#2.2 Like it?
Like or dislike on click
If a more standard button is fitting the design of your app better, the Pen ‘Like it?‘ might contain some nice code for you as well. The principle is the same as for the Pen ’Thumbs up or down’, except that here the text of the button is changing on click.
Rating via radio buttons
The core of the ‘Stars’ code snippet is rating via radio buttons. One radio button is associated with one star. The star color changes are managed solely via CSS. The stars are colored depending on the status of their checked attribute and the status of the checked attribute of nearby stars. This example was very much inspired by this Pen by James Barnett, who even implemented the rating in half-star steps in his code.
Hope you’ve found some inspiration here!
How does your code for like and dislike functions look like?
I am looking forward to your shares in the comment section!