From b090bda2b96c5e336e7d1b573ef222863ab01e36 Mon Sep 17 00:00:00 2001 From: Louis <35641311+Loule95450@users.noreply.github.com> Date: Mon, 25 Oct 2021 12:10:06 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=91=BB=20-=20Show=20Courses=20content?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/courses.js | 14 ++-- index.html | 200 +++++++++++++----------------------------------- js/app.js | 34 ++++++++ 3 files changed, 94 insertions(+), 154 deletions(-) diff --git a/data/courses.js b/data/courses.js index 0d92fa9..e9b9768 100644 --- a/data/courses.js +++ b/data/courses.js @@ -1,7 +1,7 @@ -const COURSES = { - 1: {id: 1, img: 'ux_ui.jpg', title: 'UX/UI', initial_price: 200, price: 9.99, mark: 4, stock: 10}, - 2: {id: 2, img: 'php_8.png', title: 'PHP 8', initial_price: 200, price: 9.99, mark: 3, stock: 10}, - 3: {id: 3, img: 'react_js.png', title: 'React JS', initial_price: 200, price: 9.99, mark: 2, stock: 5}, - 4: {id: 4, img: 'node_js.jpg', title: 'Node JS', initial_price: 200, price: 9.99, mark: 5, stock: 3}, - 5: {id: 5, img: 'my_sql.png', title: 'MySQL', initial_price: 200, price: 9.99, mark: 4, stock: 2} -} +const COURSES = [ + {id: 1, img: 'ux_ui.jpg', title: 'UX/UI', initial_price: 200, price: 9.99, mark: 4, stock: 10}, + {id: 2, img: 'php_8.png', title: 'PHP 8', initial_price: 200, price: 9.99, mark: 3, stock: 10}, + {id: 3, img: 'react_js.png', title: 'React JS', initial_price: 200, price: 9.99, mark: 2, stock: 5}, + {id: 4, img: 'node_js.jpg', title: 'Node JS', initial_price: 200, price: 9.99, mark: 5, stock: 3}, + {id: 5, img: 'my_sql.png', title: 'MySQL', initial_price: 200, price: 9.99, mark: 4, stock: 2} +] diff --git a/index.html b/index.html index 7edda34..771c8d3 100644 --- a/index.html +++ b/index.html @@ -1,167 +1,73 @@ - + Cours en ligne - - - - - + -
- -
+
+ +
-
+
-

Cours en ligne

-
- -
- -
-
-
- -
-
-

UX/UI

-
- -
-

- 200 € - 9.99 € -

-

- Disponible: 10 -

- Ajouter au panier -
+

Cours en ligne

+
+
-
-
- -
-
-

PHP 8

-
- -
-

- 200 € - 9.99 € -

-

- Disponible: 10 -

- Ajouter au panier -
-
+
-
-
- -
-
-

React JS

-
- -
-

- 200 € - 9.99 € -

-

- Disponible: 5 -

- Ajouter au panier -
-
- -
-
- -
-
-

Node JS

-
- -
-

- 200 € - 9.99 € -

-

- Disponible: 3 -

- Ajouter au panier -
-
- -
-
- -
-
-

MySQL

-
- -
-

- 200 € - 9.99 € -

-

- Disponible: 2 -

- Ajouter au panier -
-
-
-
+
+
- - - + + + - - + + \ No newline at end of file diff --git a/js/app.js b/js/app.js index e69de29..28793cf 100644 --- a/js/app.js +++ b/js/app.js @@ -0,0 +1,34 @@ +for (var i = 0; i < COURSES.length; i++) { + console.log(COURSES[i]); // Console log all courses + + // Show all courses in HTML file + document.querySelector('.courses__container').innerHTML += ` +
+
+ +
+
+

${COURSES[i].title}

+
+ +
+

+ ${COURSES[i].initial_price} € + ${COURSES[i].price} € +

+

+ Disponible: ${COURSES[i].stock} +

+ Ajouter au panier +
+
+ `; +} + +// On button click add product to cart +document.querySelector('.courses__container').addEventListener('click', function (e) { + if(e.target.classList.contains('add-to-cart')) { + console.log(`Tu as cliqué sur le produit ${e.target.dataset.id}`); + } +}); \ No newline at end of file