Initial commit
17
vue/components/funkoCard.js
Normal file
@@ -0,0 +1,17 @@
|
||||
export default {
|
||||
props: ['funko'],
|
||||
template: `
|
||||
<div class="card text-center">
|
||||
<img class='card-img-top' :src="'https://laurenacton.github.io/img/' + funko.img + '.jpg'" :alt="funko.name" width="150" />
|
||||
<div class="card-header">
|
||||
<p>{{funko.name}}</p>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-text">
|
||||
<p>{{funko.desc}}</p>
|
||||
</div>
|
||||
<a :href="{{funko.href}}" class="btn btn-primary stretched-link">Read more</a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
65
vue/funkos.js
Normal file
@@ -0,0 +1,65 @@
|
||||
const funkos = [
|
||||
{
|
||||
title: 'Age of Ultron Wanda',
|
||||
img: 'aouwanda',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'Anti Venom',
|
||||
img: 'antivenom',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'Integrated Spiderman Suit',
|
||||
img: 'spidey',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'Halloween Wanda',
|
||||
img: 'halwanda',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'The Scarlet Witch',
|
||||
img: 'floatwanda',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'Kate Bishop and Lucky the Dog',
|
||||
img: 'katebishop',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'Yelena',
|
||||
img: 'yelena',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'Civil War Wanda',
|
||||
img: 'cwwanda',
|
||||
price: 50,
|
||||
description: 'bob',
|
||||
rank: 1
|
||||
},
|
||||
{
|
||||
title: 'My fave funko',
|
||||
img: 'myfavefunko',
|
||||
price: 'priceless',
|
||||
description: 'arsehole',
|
||||
rank: -400
|
||||
}
|
||||
];
|
||||
BIN
vue/img/antivenom.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
vue/img/aouwanda.jpg
Normal file
|
After Width: | Height: | Size: 5.1 MiB |
BIN
vue/img/cwwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
vue/img/floatwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
vue/img/halwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
vue/img/katebishop.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
vue/img/myfavefunko.jpg
Normal file
|
After Width: | Height: | Size: 6.1 MiB |
BIN
vue/img/spidey.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
vue/img/yelena.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
47
vue/index.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang='en'>
|
||||
|
||||
<head>
|
||||
<meta charset='UTF-8'>
|
||||
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
|
||||
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
|
||||
<title>Funko Pops</title>
|
||||
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'
|
||||
integrity='sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3'
|
||||
crossorigin='anonymous'>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<script src="https://unpkg.com/vue@3"></script>
|
||||
|
||||
<div id="app">
|
||||
<div class='container pt-3'>
|
||||
<h1>Funkos</h1>
|
||||
|
||||
<div class="row row-cols-2 row-cols-md-3 row-cols-md-4 gy-5">
|
||||
<div v-for='funko in funkos'>
|
||||
<Funko
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="funkos.js"></script>
|
||||
|
||||
<script type="module">
|
||||
import FunkoCard from './components/FunkoCard.vue'
|
||||
|
||||
Vue.createApp({
|
||||
components: {
|
||||
FunkoCard
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
funkos: funkos
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||