Initial commit
65
js/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
js/img/antivenom.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
js/img/aouwanda.jpg
Normal file
|
After Width: | Height: | Size: 5.1 MiB |
BIN
js/img/cwwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
js/img/floatwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
js/img/halwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
js/img/katebishop.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
js/img/myfavefunko.jpg
Normal file
|
After Width: | Height: | Size: 6.1 MiB |
BIN
js/img/spidey.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
js/img/yelena.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
46
js/js.html
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
<!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>
|
||||||
|
<div class='container py-3'>
|
||||||
|
<h1>Funkos</h1>
|
||||||
|
|
||||||
|
<div class="row row-cols-2 row-cols-md-3 row-cols-md-4 gy-5" id='funkos'>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template id='funkoTemplate'>
|
||||||
|
<div class='col'>
|
||||||
|
<div class="card text-center">
|
||||||
|
<img class='card-img-top funko__img' width="150" />
|
||||||
|
<div class="card-header">
|
||||||
|
<p class='funko__title'></p>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="card-text">
|
||||||
|
<p>Price: £<span class='funko__price'></span></p>
|
||||||
|
<p>Rank: <span class="funko__rank"></span></p>
|
||||||
|
<p class='funko__description'></p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a class="btn btn-primary stretched-link funko__readmore">Read more</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src='funkos.js'></script>
|
||||||
|
<script src='script.js'></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
21
js/script.js
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
window.addEventListener('load', () => {
|
||||||
|
const funkoTemplate = document.querySelector('#funkoTemplate');
|
||||||
|
const funkoContainer = document.querySelector('#funkos');
|
||||||
|
|
||||||
|
funkos.forEach(funko => {
|
||||||
|
const elem = funkoTemplate.content.cloneNode(true);
|
||||||
|
const special = ['img', 'href'];
|
||||||
|
|
||||||
|
elem.querySelector('.funko__img').setAttribute('src', `img/${funko.img}.jpg`);
|
||||||
|
elem.querySelector('.funko__readmore').setAttribute('href', `/${funko.href}.html`);
|
||||||
|
|
||||||
|
for (const [k, v] of Object.entries(funko)) {
|
||||||
|
if (special.includes(k))
|
||||||
|
continue;
|
||||||
|
|
||||||
|
elem.querySelector(`.funko__${k}`).innerHTML = v;
|
||||||
|
}
|
||||||
|
|
||||||
|
funkoContainer.appendChild(elem);
|
||||||
|
});
|
||||||
|
});
|
||||||
BIN
plain/img/antivenom.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
plain/img/aouwanda.jpg
Normal file
|
After Width: | Height: | Size: 5.1 MiB |
BIN
plain/img/cwwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
plain/img/floatwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
plain/img/halwanda.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
BIN
plain/img/katebishop.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
plain/img/myfavefunko.jpg
Normal file
|
After Width: | Height: | Size: 6.1 MiB |
BIN
plain/img/spidey.jpg
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
plain/img/yelena.jpg
Normal file
|
After Width: | Height: | Size: 1.3 MiB |
62
plain/index.html
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<!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>
|
||||||
|
<div class='container-fluid'>
|
||||||
|
<h1>Funko Pops</h1>
|
||||||
|
|
||||||
|
<div class='row row-cols-2 row-cols-md-3 row-cols-lg-4 gy-5'>
|
||||||
|
<div>
|
||||||
|
<p>Age of Ultron Wanda</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/aouwanda.jpg' alt='Age of Ultron Wanda'
|
||||||
|
width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Anti Venom</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/antivenom.jpg' alt='Anti Venom'
|
||||||
|
width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Integrated Spiderman Suit</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/spidey.jpg' alt='Integrated Spiderman Suit'
|
||||||
|
width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Halloween Wanda</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/halwanda.jpg' alt='Halloween Wanda'
|
||||||
|
width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>The Scarlet Witch</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/floatwanda.jpg' alt='The Scarlet Witch'
|
||||||
|
width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Kate Bishop and Lucky the Dog</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/katebishop.jpg'
|
||||||
|
alt='Kate Bishop and Lucky the Dog' width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Yelena</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/yelena.jpg' alt='Yelena' width='150px' />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p>Civil War Wanda</p>
|
||||||
|
<img src='https://laurenacton.github.io/img/cwwanda.jpg' alt='Civil War Wanda'
|
||||||
|
width='150px' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
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>
|
||||||