Solution: Emoji Rating System using HTML, CSS & jQuery with source code, demo, and also how you can execute full program easily. To complete the program you need to follow those steps given bellow
Hi coder, previously we discuss Responsive Header Navigation Menu that code got a good response. So, this time we post a rating system with an emoji option that looks also nice to all. More rating systems are coming in an upcoming post, so stay with us for an update.
Live Demo
Also Helpful –
Multiple Chosen with Search Option
Emoji Rating System with Source Code using HTML, CSS & jQuery
Emotion Rating System builds with normal HTML, CSS & jQuery used to create a simple rating system using custom emoji characters (‘😠’,’😦’,’😑’,’😀’,’😍’). You can use other emoji and also add other emoji.
Here we use "<input type="range" min="0" max="4" step="1">" that can be an increase or decrease easily, you only need to declare "var emojis = [''];" and use “mousemove” function on that and get the data from the form and save it what you want.
Back to coding, To complete this program with debugging free code you have to create three files. The first file is to HTML and the second file gonna be CSS for design part and the third file JavaScript for function-related,
index.html
Create an HTML file named ‘index.html‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- Coding Debugging (https://codingdebugging.com) --> <!DOCTYPE html> <html> <head> <title>Emoji Rating - Coding Debugging</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script> <!-- Our Custom CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <div align="center"> <h1>Emoji Rating - Coding Deugging</h1> <div class="rate"> <div class="emoji">😑</div> <input type="range" min="0" max="4" step="1"> </div> </div> <!-- Our Custom JS --> <script src="function.js"></script> </body> </html> |
style.css
Create a CSS file named ‘style.css‘ and put those codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.rate { text-align: center; width: 200px; height: 200px; ouline: thin solid lightgray; } .emoji { font-size: 120px; height: 170px; line-height: 170px; } input { cursor: ew-resize; } |
function.js
Create a JavaScript file named ‘function.js‘ where we put jQuery codes.
|
1 2 3 4 5 6 7 |
// CHANGE EMOJI OVER HERE var emojis = ['😠','😦','😑','😀','😍']; $("input").mousemove(function(){ var i = $(this).val(); $(".emoji").html(emojis[i]); }); |
Thank you for visiting!
We appreciate you for your precious time. I hope you are learn something from here! If you have any queries about this coding comment down below we will reply ASAP.
Keep coding, Keep debugging!