jjuanrivvera99 · March 26, 2020 18:37 · Mar 26, 2020
diff --git a/index.html b/index.html
@@ -0,0 +1,30 @@
+<div id="app">
+<nav class="navbar navbar-light bg-light fixed-top">
+
+  <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>
diff --git a/script.js b/script.js
@@ -0,0 +1,14 @@
+var app = new Vue({
+ el: '#app',
+ data: {
+  maximum: 99,
+  products: null
+ },
+ mounted: function() {
+  fetch('https://hplussport.com/api/products/order/price')
+  .then(response => response.json())
+  .then(data => {
+    this.products = data;
+  })
+ }
+});
diff --git a/scripts b/scripts
@@ -0,0 +1,4 @@
+<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
+<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
diff --git a/styles b/styles
@@ -0,0 +1 @@
+<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
diff --git a/vue-bootstrap-template.markdown b/vue-bootstrap-template.markdown
@@ -0,0 +1,7 @@
+Vue/Bootstrap Template
+----------------------
+This is a template for working with Vue.js with the Bootstrap framework pre-installed.
+
+A [Pen](https://codepen.io/planetoftheweb/pen/WPQjQj) by [Ray Villalobos](https://codepen.io/planetoftheweb) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/planetoftheweb/pen/WPQjQj/license).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
No results found