Merge pull request #11 from moevm/manucharova_components_page

Page: components
moevm · Nov 10, 2024 · 4a0196f · 4a0196f
2 parents 3549fd7 + b46170e
commit 4a0196f
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 45 deletions.
diff --git a/main/_front/src/html/components.html b/main/_front/src/html/components.html
@@ -9,10 +9,10 @@
 	<title>Document</title>
 	<link rel="stylesheet" href="../scss/style.scss">
 	<script src="../js/components.js" defer></script>
-
+ 
 </head>
 <body>
-
+ 
 <header class="header">
 	<div class="container">
 		<div class="header__inner">
@@ -201,7 +201,7 @@ <h1 class="title__text">Комплектующие</h1>
 				<h3 class="components__choice-title" style="display: none;">Фильтры</h3>
 				<div id="socket" class="checkbox-group" style="display: none;" data-value="socket">
 					<h4 class="checkbox-group__title">Cокет</h4>
-
+ 
 					<div class="checkbox" data-value="AM4">
 						<label>
 							<input type="checkbox" class="checkbox-real"/>
@@ -253,47 +253,8 @@ <h4 class="checkbox-group__title">Cокет</h4>
 						</div>
 					</div>
 				</div>
-				<div class="components__cards cards">
-					<div class="card">
-						<img src="https://via.placeholder.com/200x200" alt="">
-						<div class="card__description">
-							<div class="card__name">ЦП AMD Ryzen 7 2700</div>
-							<div class="card__price">8 500 ₽</div>
-							<button class="card__button btn">Купить</button>
-						</div>
-					</div>
-					<div class="card">
-						<img src="https://via.placeholder.com/200x200" alt="">
-						<div class="card__description">
-							<div class="card__name">ЦП AMD Ryzen 7 2700</div>
-							<div class="card__price">8 500 ₽</div>
-							<button class="card__button btn">Купить</button>
-						</div>
-					</div>
-					<div class="card">
-						<img src="https://via.placeholder.com/200x200" alt="">
-						<div class="card__description">
-							<div class="card__name">ЦП AMD Ryzen 7 2700</div>
-							<div class="card__price">8 500 ₽</div>
-							<button class="card__button btn">Купить</button>
-						</div>
-					</div>
-					<div class="card">
-						<img src="https://via.placeholder.com/200x200" alt="">
-						<div class="card__description">
-							<div class="card__name">ЦП AMD Ryzen 7 2700</div>
-							<div class="card__price">8 500 ₽</div>
-							<button class="card__button btn">Купить</button>
-						</div>
-					</div>
-					<div class="card">
-						<img src="https://via.placeholder.com/200x200" alt="">
-						<div class="card__description">
-							<div class="card__name">ЦП AMD Ryzen 7 2700</div>
-							<div class="card__price">8 500 ₽</div>
-							<button class="card__button btn">Купить</button>
-						</div>
-					</div>
+				<div class="components__cards cards" id="cards_place">
+
 				</div>
 			</div>
 		</div>

diff --git a/main/_front/src/js/components.js b/main/_front/src/js/components.js
@@ -1,5 +1,5 @@
 const choiceLists = document.querySelectorAll(".choice");
-
+ 
 choiceLists.forEach((choiceList) => {
 	const choiceItems = choiceList.querySelectorAll(".choice__elem");
 	choiceItems.forEach((choice) => {
@@ -20,3 +20,27 @@ choiceLists.forEach((choiceList) => {
 		});
 	});
 })
+
+const cards_place = document.querySelector("#cards_place");
+
+const addCards = () => {
+	fetch("http://localhost:4444/components")
+		.then(res => res.json())
+		.then(data => {
+			data.forEach((item) => {
+				cards_place.insertAdjacentHTML("beforeend", `
+				<div class="card">
+					<img src="https://via.placeholder.com/200x200" alt="">
+					<div class="card__description">
+						<div class="card__name">${item.name}</div>
+						<div class="card__price">${item.price} ₽</div>
+						<button class="card__button btn">Купить</button>
+					</div>
+				</div>
+				`)
+			})
+		})
+}
+
+addCards();
+