Partie-B

src/main.js

@@ -29,12 +29,7 @@
 // document.querySelector('.pageContent').innerHTML = html;
 
 // E.1. Array.forEach :
-// html = '';
-// data.forEach( nom => {
-// 	const url = `images/${nom.toLowerCase()}.jpg`;
-// 	html += `<a href="${url}">
-// 		<img src="${url}" />
-// 		<h4>${nom}</h4>
+// html = '';querySelector('.pageContent').innerHTML = img.render();4>
 // 	</a>`;
 // })
 // document.querySelector('.pageContent').innerHTML = html;
@@ -78,8 +73,38 @@ const data = [
 	}
 ];
 
+class Component {
+	tagName;
+	attribute;
+	children;
+	constructor(tagName, attribute, children) {
+		this.tagName = tagName;
+		this.attribute = attribute;
+		this.children = children;
+	}
+	render(){ // déclaration de méthode
+		if(this.children != null && this.children != undefined) {
+			return `<${this.tagName}>${this.children}</${this.tagName}>`;
+		} else {
+			return `<${this.tagName} ${this.attribute.name}="${this.attribute.value}"/>`;
+		}
+	}
+}
+
+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( '.pageContent' ).innerHTML = img.render();
+
 
 // // Attention : data.sort() modifie le tableau original
+// render( data );
 // render( data.sort(sortByName) );
 // render( data.sort(sortByPrice) );