diff --git a/.babelrc b/.babelrc
index 0af68049be3214a485fcf9f67cc9dff636f70c47..e35c6fde65989e7f7b3c1ea6ca9135aa17ed7c45 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,4 +1,6 @@
{
- "presets": ["@babel/env"],
+ "presets": [
+ ["@babel/env", {"modules": false}]
+ ],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
\ No newline at end of file
diff --git a/index.html b/index.html
index 192285165bfee62f40a8f9aa8fa866440d84d2c3..49850b7602d627a1fafcd921079b86244e42f306 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
<link rel="stylesheet" type="text/css" href="css/flatly-bootstrap.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
- <script src="build/main.js" defer></script>
+ <script type="module" src="build/main.js"></script>
</head>
<body>
<main id="appContainer">
diff --git a/js/components/Component.js b/js/components/Component.js
new file mode 100644
index 0000000000000000000000000000000000000000..ee3f9a9363a54a6e3fecde0a4075fa4fc3d8015c
--- /dev/null
+++ b/js/components/Component.js
@@ -0,0 +1,24 @@
+export default 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 '';
+ }
+}
diff --git a/js/components/Img.js b/js/components/Img.js
new file mode 100644
index 0000000000000000000000000000000000000000..7947a6283ab9421a7a94129085a9a49e24f08663
--- /dev/null
+++ b/js/components/Img.js
@@ -0,0 +1,6 @@
+import Component from './Component.js';
+export default class Img extends Component {
+ constructor(url) {
+ super('img', { name: 'src', value: url });
+ }
+}
diff --git a/js/data.js b/js/data.js
new file mode 100644
index 0000000000000000000000000000000000000000..83a34d24fc678654d799c10f4adaa3f7ccef5cc4
--- /dev/null
+++ b/js/data.js
@@ -0,0 +1,27 @@
+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',
+ },
+];
+export default data;
diff --git a/js/main.js b/js/main.js
index e2f6f48116ef37f749d6e3d3e75c7372b6973456..86237c305fe03ae5f09dd42a5972b3ac087297b6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -1,60 +1,6 @@
-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 });
- }
-}
+import data from './data.js';
+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();