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