Home
Web Designing
Emoji Rating System with Source Code using HTML, CSS & jQuery

Emoji Rating System with Source Code using HTML, CSS & jQuery

Rajib 06 May 2020 Emoji, Emoji Rating System, Rating, Rating System, Star Rating

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

Live Demo 1 Live Demo 2

Also Helpful –

Multiple Chosen with Search Option

Typing Effect using jQuery

Implement 3D Google Pie Chart

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.

<!-- 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>

<!DOCTYPE html>

<html>

<head>

<title>Emoji Rating - Coding Debugging</title>

</head>

<body>

<h1>Emoji Rating - Coding Deugging</h1>

</div>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put those codes given below.

.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;
}

.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.

// CHANGE EMOJI OVER HERE  
var emojis = ['😠','😦','😑','😀','😍'];

$("input").mousemove(function(){
  var i = $(this).val();
  $(".emoji").html(emojis[i]);
});

// 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!

Live Demo 1 Live Demo 2 Download Code

Emoji Rating System with Source Code using HTML, CSS & jQuery

Live Demo

Also Helpful –

Emoji Rating System with Source Code using HTML, CSS & jQuery

Like this:

Related

Leave a Reply Cancel reply

Emoji Rating System with Source Code using HTML, CSS & jQuery

Live Demo

Also Helpful –

Emoji Rating System with Source Code using HTML, CSS & jQuery

Share this:

Like this:

Related

Leave a Reply Cancel reply