D.1.1. + D.1.2. children multiples

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 || '';
+	}
 }

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();