matt/laurendev
1
0
Fork 0
Code Releases Activity

Initial commit

Browse Source
This commit is contained in:
Matt Fiddaman
2022-03-30 00:01:25 +01:00
commit e09e453071
34 changed files with 323 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
js/funkos.js Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
js/img/aouwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
js/img/cwwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
js/img/floatwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
js/img/halwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
js/img/katebishop.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
js/img/myfavefunko.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
js/img/spidey.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
js/img/yelena.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

46
js/js.html Normal file
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
plain/img/aouwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
plain/img/cwwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
plain/img/floatwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
plain/img/halwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
plain/img/katebishop.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
plain/img/myfavefunko.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
plain/img/spidey.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
plain/img/yelena.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

62
plain/index.html Normal file
View 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
View 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
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
vue/img/aouwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.1 MiB

BIN
vue/img/cwwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
vue/img/floatwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
vue/img/halwanda.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
vue/img/katebishop.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
vue/img/myfavefunko.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 MiB

BIN
vue/img/spidey.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
vue/img/yelena.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

47
vue/index.html Normal file
View 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>