Skip to content
Snippets Groups Projects
Commit 58eb6649 authored by Thomas Fritsch's avatar Thomas Fritsch
Browse files

recup fichiers tp3

parent 587084a8
Branches
No related tags found
No related merge requests found
Showing with 7703 additions and 0 deletions
{
"presets": [
["@babel/env", {"modules": false}]
],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
\ No newline at end of file
.DS_Store
node_modules
*.zip
build
\ No newline at end of file
{
"singleQuote": true,
"trailingComma": "es5",
"endOfLine": "lf",
"useTabs": true
}
{
"[javascript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
}
This diff is collapsed.
File added
html {
height: 100%;
}
body {
background: #f1f1f1;
padding-bottom: 50px;
position: relative;
min-height: 100%;
}
@media (min-width: 200px) {
.navbar-header{
float: left;
}
.navbar-right {
float: right !important;
margin-right: -15px;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
padding-top: 19.5px;
padding-bottom: 19.5px;
}
.navbar-nav {
margin:0;
}
}
#appContainer {
padding-top: 80px;
}
.row.marketing {
margin: 0 auto;
max-width: 900px;
}
.video-detail, .media-list {
background: #fff;
padding-top: 20px 0;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
}
.video-detail {
padding: 20px;
}
.media, .pizzasContainer > a {
padding: 20px;
border-bottom: 1px solid rgba(0,0,0,.1);
margin: 0;
display: flex;
}
.media .infos, .pizzasContainer > a .infos {
display: flex;
flex-direction: column;
}
.media a {
display: flex;
}
.media p {
font-size: 12px;
}
.media img, .pizzasContainer > a img {
margin-right: 20px;
width: 246px;
height: 138px;
}
.media h4 .pizzasContainer > a h4 {
font-size: 25px;
margin: 0;
}
a, a:hover {
color: #333;
}
a h4, a:hover h4 {
color: #167ac6;
}
.comments .panel {
margin: 5px 0;
}
.navbar-inverse {
background: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.1);
/*position: relative;
color: black;
}
.navbar-inverse:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;*/
background-color: #cd1a1a;
background-image: linear-gradient(45deg, #cd1a1a, #cb1a70);
}
.navbar-inverse .navbar-nav > li > a,
.navbar-inverse .navbar-nav > li > a:focus {
color: #f9d2d2;
}
.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover, .navbar-inverse .navbar-nav > .active > a:focus {
background-color: #b01717;
}
.navbar-inverse .navbar-nav > li > a:hover {
color: #fff;
background-color: #b01717;
}
.navbar-brand {
padding: 0 15px;
display: flex;
align-items: center;
}
.navbar-brand > img {
display: inline-block;
height: 50px;
margin-right: 10px;
}
.navbar-brand > small {
font-size: 12px;
font-style: italic;
margin-left:10px;
margin-top:5px;
}
footer {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 10px;
color: #0003;
}
footer a{
color: #0006;
}
form {
display:flex;
padding: 20px;
flex-direction: column;
}
form label {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
}
form label input,
form label select,
form label .form-control {
width: 70%;
}
.jumbotron {
padding: 20px 60px;
background-color: #e2e8e9;
background-image: url('../images/bg.png');
background-size: cover;
background-position: center;
animation: fadeIn .8s ease, slide 1.2s cubic-bezier(.190, 1.000, .220, 1.000);
animation-delay: .1s;
animation-fill-mode: both;
overflow: hidden;
position: relative;
}
.jumbotron .closeButton {
position: absolute;
right: 20px;
top: 20px;
width: 40px;
height: 40px;
border: none;
background: none;
transform: rotate(-45deg);
transform-origin: center;
transition: all .3s ease;
}
.jumbotron .closeButton:hover {
transform: scale(1.2) rotate(135deg);
}
.jumbotron .closeButton:before,
.jumbotron .closeButton:after {
content: '';
border-radius: 3px;
position: absolute;
top:50%;
left: 10px;
right: 10px;
border: 2px black solid;
transform-origin: center;
transform: translateY(-2px);
}
.jumbotron .closeButton:after {
transform: translateY(-2px) rotate(90deg);
}
.jumbotron .spicy{
font-size:130%;
background: linear-gradient(-55deg, #cd1a1e 0%,#faa119 40%, #fecf0a 50%, #faa119 60%, #cd1a1e 100%);
background-size: 200% 200%;
white-space: nowrap;
color: #cd1a1e;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.jumbotron .spicy:hover {
animation: slideBg .1s linear infinite;
}
.jumbotron .spicy:hover .spicy-icon{
animation: burn .01s linear infinite;
}
.jumbotron h1, .jumbotron p {
animation: fadeIn .6s ease, slide .4s cubic-bezier(.190, 1.000, .220, 1.000);
animation-delay: .4s;
animation-fill-mode: both;
}
.jumbotron p {
animation-delay: .5s;
}
.jumbotron .spicy-icon {
height:50px;
vertical-align: baseline;
transform-origin: bottom left;
}
@keyframes slideBg {
100% {
background-position: -200% center;
}
}
@keyframes burn {
100% {
transform: skew(-13deg);
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes slide {
0% {
transform: translateX(-300px);
}
}
.is-loading {
position:relative;
min-height: 200px;
}
.is-loading * {
display: none;
}
.is-loading:before {
content: '';
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,.1);
z-index: 1;
}
.is-loading:after {
content: ' ';
position: absolute;
top:50%;
left:50%;
width: 50px;
height: 50px;
border: 1px black solid;
border-top-color: rgba(0,0,0,.3);
z-index: 2;
border-radius: 50%;
animation: rotate .5s linear infinite;
transform-origin: center;
}
@keyframes rotate {
0% {
transform: translate(-50%,-50%) rotate(0deg);
}
100% {
transform: translate(-50%,-50%) rotate(360deg);
}
}
\ No newline at end of file
images/bg.png

358 KiB

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="115.333px" height="136.334px" viewBox="0 0 115.333 136.334" enable-background="new 0 0 115.333 136.334"
xml:space="preserve">
<g id="Calque_1">
<g>
<g>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-120.4673" y1="76.7539" x2="-120.2131" y2="-97.4448" gradientTransform="matrix(-0.7645 -0.6446 -0.6446 0.7645 -39.8141 8.3878)">
<stop offset="0.1515" style="stop-color:#EE2A24"/>
<stop offset="0.2463" style="stop-color:#EE3624"/>
<stop offset="0.3931" style="stop-color:#F04E23"/>
<stop offset="0.5734" style="stop-color:#F36D21"/>
<stop offset="0.7803" style="stop-color:#F7901E"/>
<stop offset="1" style="stop-color:#FEBC11"/>
</linearGradient>
<path fill="url(#SVGID_1_)" d="M2.831,84.858C4.342,67.731,14.158,55.142,24,49c21.133-13.189,40-9,62.571-22.013
c7.435-4.286,17.434-15.991,17.493-24.553c3.27,7.57,6.637,17.843,7.494,25.345c1.748,15.303-7.402,41.189-24.854,63.281
c7.341,0.693,13.481-4.11,17.125-9.022c0.707,8.582-2.574,17.8-6.907,24.122c-15.751,21.64-50.245,40.313-78.135,18.924
C-0.473,108.846,2.831,84.858,2.831,84.858z"/>
</g>
</g>
<g>
<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-102.1831" y1="-9.9224" x2="-165.6147" y2="55.8514" gradientTransform="matrix(-0.7645 -0.6446 -0.6446 0.7645 -39.8141 8.3878)">
<stop offset="0.0182" style="stop-color:#FECF0A"/>
<stop offset="0.3939" style="stop-color:#FDB515"/>
<stop offset="0.5036" style="stop-color:#F9A01B"/>
<stop offset="0.8447" style="stop-color:#F26122"/>
<stop offset="1" style="stop-color:#EF4023"/>
</linearGradient>
<path fill="url(#SVGID_2_)" d="M14.9,117.302c-6.221-7.863-8.247-18.927-5.319-27.762c5.003-16.125,20.216-23.054,35.638-26.329
c8.197-1.678,18.29-2.292,26.139-5.168c3.814-1.305,7.715-3.257,10.948-6.349c-0.187,9.336-1.18,20.169-2.869,29.145
c-3.058,15.958-8.719,30.178-22.097,40.147c-12.225,9.135-25.57,7.922-37.489,0.492L14.9,117.302z"/>
</g>
</g>
</g>
<g id="Calque_2">
<circle stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="26.667" cy="89.667" r="3"/>
<circle stroke="#000000" stroke-width="3" stroke-miterlimit="10" cx="58.667" cy="89.667" r="3"/>
<path fill="none" stroke="#000000" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M50.167,99.25
c0,4.28-3.47,7.75-7.75,7.75s-7.75-3.47-7.75-7.75"/>
</g>
</svg>
images/icon.png

5.87 KiB

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/">
]>
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="291px" height="216px" viewBox="-0.362 -0.521 291 216" enable-background="new -0.362 -0.521 291 216"
xml:space="preserve">
<defs>
</defs>
<g>
<g>
<path fill="#E2952D" d="M113.373,17.37c-42.7,17.738-77.862,52.387-95.162,97.926l161.259,61.492L113.373,17.37z"/>
<path fill="none" stroke="#E2952D" stroke-width="17.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M113.373,17.37c-42.7,17.738-77.862,52.387-95.162,97.926l161.259,61.492L113.373,17.37z"/>
<path fill="#E2952D" d="M111.113,10.579C65.813,29.397,28.51,66.153,10.155,114.47"/>
<path fill="none" stroke="#EDAD4A" stroke-width="20.311" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M111.113,10.579C65.813,29.397,28.51,66.153,10.155,114.47"/>
</g>
<g>
<defs>
<path id="SVGID_3_" d="M18.211,115.296l161.258,61.492L113.373,17.37C70.673,35.108,35.511,69.758,18.211,115.296"/>
</defs>
<clipPath id="SVGID_5_">
<use xlink:href="#SVGID_3_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_5_)" fill="#D34030" d="M52.142,145.604c0,0-17.362-30.51,4.285-41.908
C78.072,92.3,78.285,97.612,86.55,83.335c8.265-14.279,7.185-33.295,27.62-33.475c20.435-0.178,46.596-17.166,47.163-20.131
c0.569-2.967,47.681,181.818,47.681,181.818L52.142,145.604z"/>
<path clip-path="url(#SVGID_5_)" fill="none" stroke="#D34030" stroke-width="7.792" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M52.142,145.604c0,0-17.362-30.51,4.285-41.908C78.072,92.3,78.285,97.612,86.55,83.335c8.265-14.279,7.185-33.295,27.62-33.475
c20.435-0.178,46.596-17.166,47.163-20.131c0.569-2.967,47.681,181.818,47.681,181.818L52.142,145.604z"/>
<path clip-path="url(#SVGID_5_)" fill="#B93229" d="M134.009,127.792c4.47,0,8.095,3.623,8.095,8.096
c0,4.471-3.625,8.094-8.095,8.094s-8.094-3.623-8.094-8.094C125.915,131.415,129.539,127.792,134.009,127.792"/>
<path clip-path="url(#SVGID_5_)" fill="#B93229" d="M82.425,99.731c7.421,0,13.434,6.014,13.434,13.437
c0,7.419-6.013,13.435-13.434,13.435c-7.42,0-13.436-6.016-13.436-13.435C68.989,105.745,75.005,99.731,82.425,99.731"/>
<g opacity="0.7" clip-path="url(#SVGID_5_)">
<g>
<defs>
<rect id="SVGID_4_" x="107.439" y="83.032" width="26.87" height="26.871"/>
</defs>
<clipPath id="SVGID_6_">
<use xlink:href="#SVGID_4_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_6_)" fill="#B93229" d="M120.875,83.032c7.42,0,13.434,6.016,13.434,13.436
s-6.014,13.436-13.434,13.436c-7.421,0-13.436-6.016-13.436-13.436S113.455,83.032,120.875,83.032"/>
</g>
</g>
</g>
<g>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M62.15,121.151c-2.963-2.924-2.996-7.695-0.072-10.656c2.924-2.965,7.695-2.994,10.658-0.07"/>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M108.673,74.005c-2.962-2.924-2.993-7.695-0.07-10.658c2.923-2.963,7.694-2.992,10.658-0.068"/>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M109.719,100.39c2.961,2.924,2.994,7.695,0.07,10.656c-2.923,2.965-7.695,2.992-10.658,0.07"/>
<path fill="#EDAD4A" d="M273.304,113.372c-17.738-42.699-52.385-77.861-97.925-95.162l-61.493,161.262L273.304,113.372z"/>
<path fill="none" stroke="#EDAD4A" stroke-width="17.964" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M273.304,113.372c-17.738-42.699-52.385-77.861-97.925-95.162l-61.493,161.262L273.304,113.372z"/>
<path fill="#EDAD4A" d="M280.095,111.114C261.278,65.812,224.52,28.51,176.205,10.155"/>
<path fill="none" stroke="#E2952D" stroke-width="20.311" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M280.095,111.114C261.278,65.812,224.52,28.51,176.205,10.155"/>
</g>
<g>
<defs>
<path id="SVGID_2_" d="M113.885,179.472l159.419-66.1c-17.738-42.699-52.385-77.861-97.925-95.162L113.885,179.472z"/>
</defs>
<clipPath id="SVGID_7_">
<use xlink:href="#SVGID_2_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_7_)" fill="#D34030" d="M145.07,52.14c0,0,30.509-17.361,41.907,4.285
c11.399,21.646,6.085,21.86,20.364,30.125c14.278,8.264,33.294,7.184,33.474,27.621c0.179,20.434,17.166,46.594,20.131,47.164
c2.967,0.566-181.819,47.678-181.819,47.678L145.07,52.14z"/>
<path clip-path="url(#SVGID_7_)" fill="none" stroke="#D34030" stroke-width="7.792" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M145.07,52.14c0,0,30.509-17.361,41.907,4.285c11.399,21.646,6.085,21.86,20.364,30.125c14.278,8.264,33.294,7.184,33.474,27.621
c0.179,20.434,17.166,46.594,20.131,47.164c2.967,0.566-181.819,47.678-181.819,47.678L145.07,52.14z"/>
</g>
<g>
<path fill="#B93229" d="M161.58,136.831c0,4.469-3.623,8.092-8.093,8.092c-4.47,0-8.095-3.623-8.095-8.092
c0-4.473,3.625-8.098,8.095-8.098C157.957,128.733,161.58,132.358,161.58,136.831"/>
<path fill="#B93229" d="M189.641,85.245c0,7.42-6.015,13.434-13.436,13.434c-7.42,0-13.434-6.014-13.434-13.434
c0-7.422,6.014-13.436,13.434-13.436C183.626,71.81,189.641,77.823,189.641,85.245"/>
<g opacity="0.7">
<g>
<defs>
<rect id="SVGID_1_" x="179.47" y="110.261" width="26.87" height="26.869"/>
</defs>
<clipPath id="SVGID_8_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<path clip-path="url(#SVGID_8_)" fill="#B93229" d="M206.34,123.694c0,7.422-6.014,13.436-13.435,13.436
c-7.42,0-13.436-6.014-13.436-13.436c0-7.42,6.016-13.434,13.436-13.434C200.326,110.261,206.34,116.274,206.34,123.694"/>
</g>
</g>
<path fill="#353534" d="M176.396,77.54c-2.922,2.963-7.695,2.994-10.658,0.07c-2.961-2.922-2.993-7.695-0.069-10.656
c2.923-2.963,7.694-2.996,10.656-0.072C179.289,69.806,179.32,74.577,176.396,77.54"/>
<path fill="#353534" d="M223.542,124.065c-2.922,2.961-7.695,2.992-10.656,0.068c-2.963-2.923-2.994-7.695-0.071-10.656
c2.923-2.963,7.696-2.992,10.659-0.07C226.434,116.331,226.465,121.101,223.542,124.065"/>
<path fill="none" stroke="#353534" stroke-width="5.257" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M186.431,114.522c-2.924,2.963-7.696,2.994-10.659,0.07c-2.962-2.922-2.992-7.693-0.07-10.658"/>
</g>
</g>
</svg>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>PizzaLand</title>
<link rel="icon" href="images/icon.png" sizes="96x96">
<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="build/main.bundle.js" defer></script>
</head>
<body>
<main id="appContainer">
<div class="container">
<header>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img src="images/logo.svg" /> PizzaLand
</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" class="pizzaListButton">La carte</a></li>
<li><a href="#" class="pizzaFormButton">Ajouter une Pizza</a></li>
</ul>
</div>
</nav>
<section class="newsContainer" style="display:none">
<article class="jumbotron">
<button class="closeButton"></button>
<h1>Welcome to PizzaLand !</h1>
<p>Bienvenue sur notre magnifique catalogue de pizzas !</p>
</article>
</section>
</header>
<section class="row marketing">
<div class="col-lg-12">
<header class="pageTitle"></header>
<section class="media-list pizzasContainer">
</section>
</div>
</section>
</div>
</main>
<footer>
Free photos from <a href="https://unsplash.com/unsplash">Unsplash</a>
<br>
Icons made by <a href="https://www.freepik.com/" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a>
</footer>
</body>
</html>
\ No newline at end of file
export default class PageRenderer {
static titleElement;
static contentElement;
static renderPage(page) {
if (this.titleElement) {
this.titleElement.innerHTML = page.renderTitle();
}
if (this.contentElement) {
this.contentElement.innerHTML = page.render();
}
}
}
export default class Component {
tag;
attribute;
children;
constructor(tag, attribute, children) {
this.tag = tag;
this.attribute = attribute;
this.children = children;
}
render() {
let html = `<${this.tag} ${this.renderAttributes()}`;
if (this.children) {
html += `>${this.renderChildren()}</${this.tag}>`;
} else {
html += ' />';
}
return html;
}
renderAttributes() {
if (this.attribute) {
return `${this.attribute.name}="${this.attribute.value}"`;
}
return '';
}
renderChildren() {
if (this.children instanceof Array) {
return this.children.reduce(
(html, child) =>
html + (child instanceof Component ? child.render() : child),
''
);
}
return this.children || '';
}
}
import Component from './Component.js';
export default class Img extends Component {
constructor(url) {
super('img', { name: 'src', value: url });
}
}
import Component from './Component.js';
import Img from './Img.js';
export default class PizzaThumbnail extends Component {
constructor({ nom, image, prix_petite, prix_grande }) {
super('article', { name: 'class', value: 'media' }, [
new Component('a', { name: 'href', value: image }, [
new Img(image),
new Component('section', { name: 'class', value: 'infos' }, [
new Component('h4', null, nom),
new Component('ul', null, [
new Component(
'li',
null,
`Prix petit format : ${prix_petite.toFixed(2)} €`
),
new Component(
'li',
null,
`Prix grand format : ${prix_grande.toFixed(2)} €`
),
]),
]),
]),
]);
}
}
const data = [
{
nom: 'Regina',
base: 'tomate',
prix_petite: 6.5,
prix_grande: 9.95,
image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
},
{
nom: 'Napolitaine',
base: 'tomate',
prix_petite: 6.5,
prix_grande: 8.95,
image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
},
{
nom: 'Spicy',
base: 'crème',
prix_petite: 5.5,
prix_grande: 8,
image:
'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
},
];
export default data;
import data from './data.js';
import HomePage from './pages/HomePage.js';
import PageRenderer from './PageRenderer.js';
// Initialisation du PageRenderer
PageRenderer.titleElement = document.querySelector('.pageTitle');
PageRenderer.contentElement = document.querySelector('.pizzasContainer');
// Affichage de la HomePage
const homePage = new HomePage(data);
PageRenderer.renderPage(homePage); // affiche la liste des pizzas
//
// On aurait aussi pu faire ceci :
//
// const homePage = new HomePage([]);
// homePage.pizzas = data;
// PageRenderer.renderPage(homePage); // affiche la liste des pizzas
import Page from './Page.js';
import PizzaThumbnail from '../components/PizzaThumbnail.js';
export default class HomePage extends Page {
#pizzas;
constructor(pizzas) {
super('La carte');
this.pizzas = pizzas;
}
set pizzas(value) {
this.#pizzas = value;
this.children = this.#pizzas.map(pizza => new PizzaThumbnail(pizza));
}
}
import Component from '../components/Component';
export default class Page extends Component {
title = '';
constructor(title, children) {
super('section', null, children);
this.title = title;
}
renderTitle() {
return `<h1>${this.title}</h1>`;
}
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment