main.js

const data = [
	{
		nom: 'Regina',
		base: 'tomate',
		prix_petite: 6.5,
		prix_grande: 9.95,
		image:
			'https://images.unsplash.com/photo-1532246420286-127bcd803104?fit=crop&w=500&h=300',
	},
	{
		nom: 'Napolitaine',
		base: 'tomate',
		prix_petite: 6.5,
		prix_grande: 8.95,
		image:
			'https://images.unsplash.com/photo-1562707666-0ef112b353e0?&fit=crop&w=500&h=300',
	},
	{
		nom: 'Spicy',
		base: 'crème',
		prix_petite: 5.5,
		prix_grande: 8,
		image:
			'https://images.unsplash.com/photo-1458642849426-cfb724f15ef7?fit=crop&w=500&h=300',
	},
];

class Component {
	tag;
	attribute;
	children;

	constructor(tag, attribute, children) {
		this.tag = tag;
		this.attribute = attribute;
		this.children = children;
	}

	render() {
		return `<${this.tag} ${this.renderAttributes()} ${
			this.children ? `>${this.children}</${this.tag}>` : ' />'
		}`;
	}

	renderAttributes() {
		if (this.attribute) {
			return `${this.attribute.name}="${this.attribute.value}"`;
		}
		return '';
	}
}

class Img extends Component {
	constructor(url) {
		super('img', { name: 'src', value: url });
	}
}

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