Skip to content

Instantly share code, notes, and snippets.

@jitendra19

jitendra19/index.html

Created April 23, 2020 18:32
Show Gist options
  • Save jitendra19/4cfe695573e86e66dbdf31cd36cfad51 to your computer and use it in GitHub Desktop.
Save jitendra19/4cfe695573e86e66dbdf31cd36cfad51 to your computer and use it in GitHub Desktop.
Download ZIP
vue JS practice
Raw
index.html
<div id="app">
<h1 class="bg-light fixed-top">{{name}}</h1>
<nav class="navbar navbar-light ">
<div class="navbar-text ml-auto">
<b>cart:</b>
<span class="badge badge-pill badge-success"></span>
</div>
</nav>
<div class="form-inline mr-auto mt-5">
<label class="font-weight-bold mr-2" for="formMax">max</label>
<input type="text" id="formMax" class="form-control w-25" v-model="maximum">
</div>
<input type="range" class="custom-range" min="0" max="200" v-model="maximum">
<div class="row d-flex mb-3 align-items-center"
v-for="item in products"
v-if="item.price<=Number(maximum)">
<div class="col-1 m-auto">
<button class="btn btn-info">+</button>
</div>
<div class="col-4">
<img class="img-fluid d-block" :src="item.image" :alt="item.name">
</div>
<div class="col">
<h3 class="text-info">{{ item.name }}</h3>
<p class="mb-0">{{ item.description }}</p>
<div class="h5 float-right">${{ Number(item.price) }}</div>
</div>
</div>
</div>
Raw
script.js
var app = new Vue({
el: '#app',
data: {
name: 'jitendra',
maximum: 99,
products: null
},
mounted: function() {
fetch('https://hplussport.com/api/products/order/price')
.then(response => response.json())
.then(data => {
this.products = data;
})
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
Raw
styles
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment