diff --git a/src/components/Component.js b/src/components/Component.js
index 746b0a3525e871dd8f4643ccb4c8e357036604fe..0c22b23795eecbe2d6ca880243e063a30ed983a3 100644
--- a/src/components/Component.js
+++ b/src/components/Component.js
@@ -9,18 +9,34 @@ class Component {
}
render() {
+ let res;
if (this.attribute != null) {
- return `<${this.tagName} ${this.renderAttribute()} /> `;
+ res = `< ${this.renderAttribute()} /> `;
}
if (this.children != null || this.children != undefined) {
- return `<${this.tagName}> ${this.children} </${this.tagName}>`;
+ res += `<${this.tagName}> ${this.renderChildren()} </${this.tagName}>`;
} else {
return '<' + this.tagName + '/>';
}
+ return res;
}
renderAttribute() {
- return `${this.attribute.name}="${this.attribute.value}"`;
+ return `img src="${this.attribute.value}"`;
+ }
+
+ renderChildren() {
+ let path = '';
+ if (this.children instanceof Component) {
+ return this.children.render();
+ } else if (this.children instanceof Array) {
+ for (let i = 0; i < this.children.length; i++) {
+ path += this.children[i];
+ }
+ } else {
+ path = `${this.children} `;
+ }
+ return path;
}
}
export default Component;
diff --git a/src/main.js b/src/main.js
index aa9633d5d0201911b3a55e4bac8d652eceeec0da..53069d3c16685c0ebb089249d1df585758132562 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,9 +1,14 @@
import Component from './components/Component.js';
import Img from './components/Img.js';
-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('.pageContent').innerHTML = img.render();
+//const title = new Component('h1', null, ['La', ' gucci ', 'carte']);
+//document.querySelector('.pageTitle').innerHTML = title.render();
+
+const c = new Component('article', { name: 'class', value: 'pizzaThumbnail' }, [
+ new Img(
+ 'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300'
+ ),
+ 'Regina',
+]);
+console.log(c.render());
+document.querySelector('.pageContent').innerHTML = c.render();