Skip to content

Commit 3da59ad

Browse files
Loule95450Loule95450
authored
Merge pull request #1 from CodingFactory-Repos/Feature/ShowCourses
👻 - Show Courses content
2 parents e88da62 + b090bda commit 3da59ad

3 files changed

Lines changed: 94 additions & 154 deletions

File tree

‎data/courses.js‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
const COURSES = {
2-
1: {id: 1, img: 'ux_ui.jpg', title: 'UX/UI', initial_price: 200, price: 9.99, mark: 4, stock: 10},
3-
2: {id: 2, img: 'php_8.png', title: 'PHP 8', initial_price: 200, price: 9.99, mark: 3, stock: 10},
4-
3: {id: 3, img: 'react_js.png', title: 'React JS', initial_price: 200, price: 9.99, mark: 2, stock: 5},
5-
4: {id: 4, img: 'node_js.jpg', title: 'Node JS', initial_price: 200, price: 9.99, mark: 5, stock: 3},
6-
5: {id: 5, img: 'my_sql.png', title: 'MySQL', initial_price: 200, price: 9.99, mark: 4, stock: 2}
7-
}
1+
const COURSES = [
2+
{id: 1, img: 'ux_ui.jpg', title: 'UX/UI', initial_price: 200, price: 9.99, mark: 4, stock: 10},
3+
{id: 2, img: 'php_8.png', title: 'PHP 8', initial_price: 200, price: 9.99, mark: 3, stock: 10},
4+
{id: 3, img: 'react_js.png', title: 'React JS', initial_price: 200, price: 9.99, mark: 2, stock: 5},
5+
{id: 4, img: 'node_js.jpg', title: 'Node JS', initial_price: 200, price: 9.99, mark: 5, stock: 3},
6+
{id: 5, img: 'my_sql.png', title: 'MySQL', initial_price: 200, price: 9.99, mark: 4, stock: 2}
7+
]

‎index.html‎

Lines changed: 53 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,167 +1,73 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
3+
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
66
<meta http-equiv="X-UA-Compatible" content="ie=edge">
77
<title>Cours en ligne</title>
88
<link rel="stylesheet" href="css/styles.css">
99
<link rel="stylesheet" href="css/skeleton.css">
10-
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans" rel="stylesheet">
11-
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
12-
</head>
13-
<body>
14-
<header id="header" class="header">
15-
<div class="container">
16-
<div class="row">
17-
<div class="four columns logo">
18-
<img src="img/coding_factory.jpg" id="logo">
19-
</div>
20-
<div class="two columns u-pull-right">
21-
<ul>
22-
<li class="submenu">
23-
<img src="img/cart.png" id="img-cart">
24-
<div id="cart">
25-
<table id="cart-table" class="u-full-width">
26-
<thead>
27-
<tr>
28-
<th></th>
29-
<th>Article</th>
30-
<th>Prix</th>
31-
<th>Qté</th>
32-
<th></th>
33-
</tr>
34-
</thead>
35-
<tbody></tbody>
36-
</table>
37-
<a href="#" id="empty-cart" class="button u-full-width">Vider le panier</a>
38-
</div>
39-
</li>
40-
</ul>
10+
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans"
11+
rel="stylesheet">
12+
<link rel="stylesheet"
13+
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
14+
</head>
15+
<body>
16+
<header id="header" class="header">
17+
<div class="container">
18+
<div class="row">
19+
<div class="four columns logo">
20+
<img src="img/coding_factory.jpg" id="logo">
21+
</div>
22+
<div class="two columns u-pull-right">
23+
<ul>
24+
<li class="submenu">
25+
<img src="img/cart.png" id="img-cart">
26+
<div id="cart">
27+
<table id="cart-table" class="u-full-width">
28+
<thead>
29+
<tr>
30+
<th></th>
31+
<th>Article</th>
32+
<th>Prix</th>
33+
<th>Qté</th>
34+
<th></th>
35+
</tr>
36+
</thead>
37+
<tbody></tbody>
38+
</table>
39+
<a href="#" id="empty-cart" class="button u-full-width">Vider
40+
le panier</a>
41+
</div>
42+
</li>
43+
</ul>
44+
</div>
4145
</div>
4246
</div>
43-
</div>
44-
</header>
47+
</header>
4548

46-
<form id="search-item" class="search-form">
47-
<input type="text" placeholder="Rechercher ...">
48-
</form>
49+
<form id="search-item" class="search-form">
50+
<input type="text" onkeyup="search_cours()" placeholder="Rechercher ...">
51+
</form>
4952

50-
<div id="courses-list">
53+
<div id="courses-list">
5154

52-
<h1>Cours en ligne</h1>
53-
<div class="courses__container"></div>
54-
<div id="no_course" class="hidden">Aucun cours n'est disponible pour votre recherche</div>
55-
</div>
56-
57-
<div class="courses__container">
58-
<div class="course__item">
59-
<figure class="course_img">
60-
<img src="img/courses/ux_ui.jpg">
61-
</figure>
62-
<div class="info__card">
63-
<h4>UX/UI</h4>
64-
<figure class="mark m_4">
65-
<img src="img/rates.png">
66-
</figure>
67-
<p>
68-
<span class="price">200 €</span>
69-
<span class="discount">9.99 €</span>
70-
</p>
71-
<p>
72-
Disponible: <span class="stock">10</span>
73-
</p>
74-
<a href="#" class="add-to-cart" data-id="1"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
75-
</div>
55+
<h1>Cours en ligne</h1>
56+
<div class="courses__container"></div>
57+
<div id="no_course" class="hidden">Aucun cours n'est disponible pour votre
58+
recherche</div>
7659
</div>
7760

78-
<div class="course__item">
79-
<figure class="course_img">
80-
<img src="img/courses/php_8.png">
81-
</figure>
82-
<div class="info__card">
83-
<h4>PHP 8</h4>
84-
<figure class="mark m_3">
85-
<img src="img/rates.png">
86-
</figure>
87-
<p>
88-
<span class="price">200 €</span>
89-
<span class="discount">9.99 €</span>
90-
</p>
91-
<p>
92-
Disponible: <span class="stock">10</span>
93-
</p>
94-
<a href="#" class="add-to-cart" data-id="2"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
95-
</div>
96-
</div>
61+
<div class="courses__container">
9762

98-
<div class="course__item">
99-
<figure class="course_img">
100-
<img src="img/courses/react_js.png">
101-
</figure>
102-
<div class="info__card">
103-
<h4>React JS</h4>
104-
<figure class="mark m_2">
105-
<img src="img/rates.png">
106-
</figure>
107-
<p>
108-
<span class="price">200 €</span>
109-
<span class="discount">9.99 €</span>
110-
</p>
111-
<p>
112-
Disponible: <span class="stock">5</span>
113-
</p>
114-
<a href="#" class="add-to-cart" data-id="3"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
115-
</div>
116-
</div>
117-
118-
<div class="course__item">
119-
<figure class="course_img">
120-
<img src="img/courses/node_js.jpg">
121-
</figure>
122-
<div class="info__card">
123-
<h4>Node JS</h4>
124-
<figure class="mark m_5">
125-
<img src="img/rates.png">
126-
</figure>
127-
<p>
128-
<span class="price">200 €</span>
129-
<span class="discount">9.99 €</span>
130-
</p>
131-
<p>
132-
Disponible: <span class="stock">3</span>
133-
</p>
134-
<a href="#" class="add-to-cart" data-id="4"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
135-
</div>
136-
</div>
137-
138-
<div class="course__item">
139-
<figure class="course_img">
140-
<img src="img/courses/my_sql.png">
141-
</figure>
142-
<div class="info__card">
143-
<h4>MySQL</h4>
144-
<figure class="mark m_4">
145-
<img src="img/rates.png">
146-
</figure>
147-
<p>
148-
<span class="price">200 €</span>
149-
<span class="discount">9.99 €</span>
150-
</p>
151-
<p>
152-
Disponible: <span class="stock">2</span>
153-
</p>
154-
<a href="#" class="add-to-cart" data-id="5"><i class="fa fa-cart-plus"></i>Ajouter au panier</a>
155-
</div>
15663
</div>
157-
</div>
15864

159-
<footer>
160-
</footer>
65+
<footer>
66+
</footer>
16167

162-
<script src="data/courses.js"></script>
163-
<script src="js/app.js"></script>
164-
<script src="js/search.js"></script>
68+
<script src="data/courses.js"></script>
69+
<script src="js/app.js"></script>
70+
<script src="js/search.js"></script>
16571

166-
</body>
167-
</html>
72+
</body>
73+
</html>

‎js/app.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
for (var i = 0; i < COURSES.length; i++) {
2+
console.log(COURSES[i]); // Console log all courses
3+
4+
// Show all courses in HTML file
5+
document.querySelector('.courses__container').innerHTML += `
6+
<div class="course__item">
7+
<figure class="course_img">
8+
<img src="img/courses/${COURSES[i].img}">
9+
</figure>
10+
<div class="info__card">
11+
<h4>${COURSES[i].title}</h4>
12+
<figure class="mark m_4">
13+
<img src="img/rates.png">
14+
</figure>
15+
<p>
16+
<span class="price">${COURSES[i].initial_price} €</span>
17+
<span class="discount">${COURSES[i].price} €</span>
18+
</p>
19+
<p>
20+
Disponible: <span class="stock">${COURSES[i].stock}</span>
21+
</p>
22+
<a href="#" class="add-to-cart" data-id="${COURSES[i].id}"><i class="fa
23+
fa-cart-plus"></i>Ajouter au panier</a>
24+
</div>
25+
</div>
26+
`;
27+
}
28+
29+
// On button click add product to cart
30+
document.querySelector('.courses__container').addEventListener('click', function (e) {
31+
if(e.target.classList.contains('add-to-cart')) {
32+
console.log(`Tu as cliqué sur le produit ${e.target.dataset.id}`);
33+
}
34+
});

0 commit comments

Comments
 (0)