Skip to content

Instantly share code, notes, and snippets.

Josh Anthony Jantho1990

Block or report user

Report or block Jantho1990

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@Jantho1990
Jantho1990 / App.10b.vue
Created Aug 9, 2018
StarRating Vue -- 10b
View App.10b.vue
<template>
<div id="app">
<h1>Vue StarRating</h1>
<div class="star-rating-container">
<img class="logo" src="./assets/logo.png">
<star-rating
:rating="rating"
:min-rating="minRating"
:max-rating="maxRating"
:star-ratio="starRatio"
View RatingInputs.10a.vue
<style>
.rating-inputs {
grid-area: input;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 1fr;
text-align: left;
margin: auto;
}
View StarRating.9c.vue
<script>
import ratingIsValid from '../lib/validate'
// ...
export default {
// ...
beforeMount () {
let {rating, minRating, maxRating, starRatio, limit} = this
if (!ratingIsValid(rating, minRating, maxRating, starRatio, limit)) {
throw new Error(
`Illegal rating values detected. You should check your initial App state. (rating: ${rating}, minRating: ${minRating}, maxRating: ${maxRating}, starRatio: ${starRatio}, limit: ${limit})`
View RatingInputs.9b.vue
<script>
import inputIsValid from '../lib/validate'
export default {
// ...
methods: {
anyAreEmpty (...values) {
return values.filter(value => value === '').length > 0
},
handleRating () {
@Jantho1990
Jantho1990 / validate.js
Created Aug 8, 2018
StarRating Vue -- 9a
View validate.js
export let ratingIsValid = function (rating, minRating, maxRating) {
if (rating >= minRating && rating <= maxRating) return true
return false
}
export let valuesNotZeroOrLess = function (...values) {
let filteredValues = values.filter(value => value > 0)
return values.length === filteredValues.length
}
@Jantho1990
Jantho1990 / App.8e.vue
Created Aug 8, 2018
StarRating Vue -- 8e
View App.8e.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<star-rating
:rating="rating"
:min-rating="minRating"
:max-rating="maxRating"
:star-ratio="starRatio"
:limit="limit"
/>
@Jantho1990
Jantho1990 / App.8d.vue
Created Aug 8, 2018
StarRating Vue -- 8d
View App.8d.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<star-rating
:rating="rating"
/>
<rating-inputs
:rating="rating"
@rating-update="handleRatingUpdate"
/>
View RatingInputs.8c.vue
<template>
<div class="rating-inputs">
<label for="rating">Rating</label>
<input
name="rating"
type="number"
v-model="rating_"
v-on:input="handleRating"
/>
</div>
View RatingInputs.8b.vue
<template>
<div class="rating-inputs">
<label for="rating">Rating</label>
<input
name="rating"
type="number"
v-model="rating_"
/>
</div>
</template>
@Jantho1990
Jantho1990 / RatingInputs.8a.vue
Last active Aug 7, 2018
StarRating Vue -- 8a
View RatingInputs.8a.vue
<template>
<div class="rating-inputs">
<label for="rating">Rating</label>
<input
name="rating"
type="number"
/>
</div>
</template>
You can’t perform that action at this time.