From 0592230f47bdf3564bbe97035efcf429be116c49 Mon Sep 17 00:00:00 2001
From: Thomas Fritsch <tf@kumquats.fr>
Date: Mon, 10 Feb 2020 00:48:06 +0100
Subject: [PATCH] D.1.1. + D.1.2. children multiples
---
js/components/Component.js | 21 ++++++++++++++++++---
js/main.js | 13 ++++++++-----
2 files changed, 26 insertions(+), 8 deletions(-)
diff --git a/js/components/Component.js b/js/components/Component.js
index ee3f9a9..b427cff 100644
--- a/js/components/Component.js
+++ b/js/components/Component.js
@@ -10,9 +10,13 @@ export default class Component {
}
render() {
- return `<${this.tag} ${this.renderAttributes()} ${
- this.children ? `>${this.children}</${this.tag}>` : ' />'
- }`;
+ let html = `<${this.tag} ${this.renderAttributes()}`;
+ if (this.children) {
+ html += `>${this.renderChildren()}</${this.tag}>`;
+ } else {
+ html += ' />';
+ }
+ return html;
}
renderAttributes() {
@@ -21,4 +25,15 @@ export default class Component {
}
return '';
}
+
+ renderChildren() {
+ if (this.children instanceof Array) {
+ return this.children.reduce(
+ (html, child) =>
+ html + (child instanceof Component ? child.render() : child),
+ ''
+ );
+ }
+ return this.children || '';
+ }
}
diff --git a/js/main.js b/js/main.js
index 86237c3..1b18a50 100644
--- a/js/main.js
+++ b/js/main.js
@@ -2,10 +2,13 @@ import data from './data.js';
import Component from './components/Component.js';
import Img from './components/Img.js';
-const title = new Component('h1', null, 'La carte');
+const title = new Component('h1', null, ['La', ' ', 'carte']);
document.querySelector('.pageTitle').innerHTML = title.render();
-const img = new Img(
- 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
-);
-document.querySelector('.pizzasContainer').innerHTML = img.render();
+const c = new Component('article', { name: 'class', value: 'media' }, [
+ new Img(
+ 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+ ),
+ 'Regina',
+]);
+document.querySelector('.pizzasContainer').innerHTML = c.render();
--
GitLab