Vue + Javascript Star Rating
close
Vue + Javascript Star Rating

Vue + Javascript Star Rating

Vue + Javascript Star Rating

This is a simple star rating system made with vue.js and javascript below is the source code provided.


What's happening buddy today we are going to create Vue + Javascript Star Rating. As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.



Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Vue.js Star Rating</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="app">
<div class="card">
<div class="card-content">
<div class="media-content">
<p class="title is-4">Star Rating</p>
<p class="subtitle is-6">A simple VueJS rating component</p>
</div>
<star-rating :max="5" :current="value"></star-rating><br>
<br>
<button class="button" @click="randomValue">Play with values ({{value}})</button>
</div>
</div>
</div>
<script type="text/x-template" id="star-rating">
<div class="star-rating">
<span v-for="n in max">☆</span>
<div class="star-rating__current" :style="{width: getRating + "%"}">
<span v-for="n in max">★</span>
</div>
</div>
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<script
src="js/index.js"></script>
</body>
</html>


Html markup is quite simple.


Without CSS our this script (Vue + Javascript Star Rating) will never look charming. So here we are, our HTML markup is ready now we have to personalize our HTML and it can be done using CSS.



So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.



Save It As style.css :

#app {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.star-rating {
  color: gold;
  display: inline-block;
  font-size: 4em;
  position: relative;
  transform: translate(-6px);
}

.star-rating__max,
.star-rating__current {
  position: absolute;
  top: 0;
}

.star-rating__current {
  overflow: hidden;
  white-space: nowrap;
}


Stylesheet used is this

https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css


So we have written HTML markup and customised it and now we will add some functionality in this project (Vue + Javascript Star Rating).



To make this project (Vue + Javascript Star Rating) work properly for that we will use JavaScript.



So here is a JavaScript for our project (Vue + Javascript Star Rating) and also save it with the filename as provided. Make a new directory called js and put this file to that directory

.


Save It As index.js :

Vue.component('star-rating', {
  template: '#star-rating',
  props: ['max', 'current'],
  computed: {
    getRating: function() {
      return (this.current / this.max) * 100
    }
  }
})

new Vue({
  el: '#app',
  data: {
    value: 4
  },
  methods: {
    randomValue: function () {
      this.value = (Math.random()*4+1).toFixed(2)
    }
  }
})

That's it we will use vue.js for this project cdn link is https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js




Outcome :

So here we are, We have done and our project Vue + Javascript Star Rating is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.



  • Vue + Javascript Star Rating
    • css
      • style.css
    • js
      • index.js
    • index.html


Download Project (Vue + Javascript Star Rating) File :

Vue + Javascript Star Rating.zip
File Size 2.61 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.


So that's it stay updated to this blog and subscribe to the newsletters that's free do it now to get notifications of my upcoming posts.



Thank you !


Disqus Codes

No comments

Notifications

Disqus Logo