Skip to content

Instantly share code, notes, and snippets.

@kertnik05

kertnik05/app.js

Last active July 22, 2020 06:49
Show Gist options
  • Save kertnik05/4f89c11f2f41b64fa225f221e33c41c7 to your computer and use it in GitHub Desktop.
Save kertnik05/4f89c11f2f41b64fa225f221e33c41c7 to your computer and use it in GitHub Desktop.
Download ZIP
Vue Coding Challenge 3 Answer
Raw
app.js
// Add an onSale property to the product’s data that is used to conditionally render a span that says “On Sale!”
const app = new Vue({
el: '#app',
data: {
product: 'Socks',
description: 'A pair of warm, fuzzy socks',
image: './assets/vmSocks-green-onWhite.jpg',
link: 'somewebsite.com',
inventory: 100,
onSale: true, // my answer to the coding challenge
}
});
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Tuts</title>
<link rel="stylesheet" href="./style.css">
<style>
</style>
</head>
<body>
<div class="nav-bar"></div>
<div id="app">
<div class="product">
<div class="product-image">
<img :src="image" alt="">
</div>
<div class="product-info">
<h1>{{ product }}</h1>
<p v-show="inventory > 10">In Stock</p>
<p v-show="inventory <= 10 && inventory > 0">Almost out of Stock</p>
<p v-show="inventory === 0">Out of Stock</p>
<span v-if="onSale">On Sale!!</span><!-- my answer to the coding challenge -->
</div>
</div>
<p>{{ description }}</p>
</div>
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment