Skip to content
Snippets Groups Projects
Commit ef7b6d6a authored by Cody Dumortier's avatar Cody Dumortier
Browse files

component render

parent e1d8fe80
No related branches found
No related tags found
No related merge requests found
class Character { class Component {
firstName; tagName;
lastName; children;
constructor(firstName, lastName) { attribute;
this.firstName = firstName; constructor(tagName, attribute, children) {
this.lastName = lastName; this.tagName = tagName;
this.children = children;
this.attribute = attribute;
} }
fullName() { render() {
return `${this.firstName} ${this.lastName}`; if (
(this.children === null || this.children === undefined) &&
this.attribute === null
) {
return `<${this.tagName} />`;
} else if (
(this.children === null || this.children === undefined) &&
this.attribute !== null
) {
return `<${this.tagName} ${this.renderAttribute(this.attribute)} />`;
} else if (this.children !== null && this.attribute === null) {
return `<${this.tagName}>${this.children}</${this.tagName}>`;
} else {
return `<${this.tagName} ${this.renderAttribute(this.attribute)}>
${this.children}</${this.tagName}>`;
} }
} }
const heisenberg = new Character('Walter', 'White'); renderAttribute({ name, value }) {
console.log(heisenberg.firstName, heisenberg.fullName()); return `${name}="${value}"`;
}
}
const data = [
{
name: 'Regina',
base: 'tomate',
price_small: 6.5,
price_large: 9.95,
image:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
},
{
name: 'Napolitaine',
base: 'tomate',
price_small: 6.5,
price_large: 8.95,
image:
'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
},
{
name: 'Spicy',
base: 'crème',
price_small: 5.5,
price_large: 8,
image:
'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
},
];
const title = new Component(`h1`, null, `La carte`);
const img = new Component('img', {
name: 'src',
value:
'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
});
console.log(title.render());
console.log(img.render());
let html = `${title.render()}
${img.render()}`;
document.querySelector('.pageTitle').innerHTML = html;
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment