Merge pull request #7 from moevm/kharitonov_components

Page: Components

main/_front/src/js/components.js

@@ -0,0 +1,22 @@
+const choiceLists = document.querySelectorAll(".choice");
+
+choiceLists.forEach((choiceList) => {
+	const choiceItems = choiceList.querySelectorAll(".choice__elem");
+	choiceItems.forEach((choice) => {
+		if (choice.classList.contains("active")) {
+			choiceList.dataset.value = choice.dataset.value;
+			// console.log(choice.dataset.value);
+		}
+		choice.addEventListener("click", (e) => {
+			choiceItems.forEach((choice) => {
+				if (choice === e.target) {
+					choiceList.dataset.value = choice.dataset.value;
+					choice.classList.add("active");
+					console.log(choice.dataset.value);
+				}else {
+					choice.classList.remove("active");
+				}
+			});
+		});
+	});
+})

main/_front/src/scss/_base.scss

@@ -8,4 +8,10 @@ body {
 	max-width: 1170px;
 	margin: 0 auto;
 	padding: 0 15px;
+}
+
+.grey_background {
+	border: 1px solid #d8d8d8;
+	background-color: #F8F8F8;
+	border-radius: 10px;
 }

main/_front/src/scss/blocks/_card.scss

@@ -0,0 +1,37 @@
+.cards {
+	display: flex;
+	gap: 20px;
+	flex-wrap: wrap;
+}
+
+.card {
+	width: 268px;
+	background-color: #fff;
+	box-shadow: 0 2px 10px 4px rgba(#727272, 0.25);
+	border-radius: 10px;
+	padding: 34px 16px 16px;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.card__description {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.card__name {
+	font-size: 16px;
+	text-align: center;
+	font-weight: 400;
+	line-height: 19px;
+	height: 65px;
+	margin: 8px 0 16px;
+}
+
+.card__price {
+	font-size: 24px;
+	font-weight: 500;
+	margin-bottom: 16px;
+}

main/_front/src/scss/blocks/_components.scss

@@ -0,0 +1,33 @@
+.components {
+
+}
+
+.components__inner {
+	display: flex;
+	justify-content: space-between;
+	align-items: flex-start;
+	column-gap: 20px;
+}
+
+.components__choice {
+	width: 276px;
+	padding: 20px;
+	display: flex;
+	flex-direction: column;
+	gap: 15px;
+}
+
+.components__choice-title {
+	font-size: 24px;
+	line-height: 28px;
+	font-weight: 700;
+	text-align: center;
+}
+
+.components__main {
+	flex: 1;
+}
+
+.components__sort {
+	margin-bottom: 20px;
+}

main/_front/src/scss/blocks/_sort.scss

@@ -0,0 +1,19 @@
+.sort {
+	display: flex;
+	align-items: center;
+	width: 100%;
+	padding: 13px 20px;
+}
+
+.sort__text {
+	font-size: 18px;
+	color: #000;
+	margin-right: 20px;
+	font-weight: 500;
+}
+
+.sort__block {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+}

main/_front/src/scss/blocks/_title.scss

@@ -0,0 +1,9 @@
+.title {
+	margin: 15px 0 20px;
+}
+
+.title__text {
+	font-size: 30px;
+	font-weight: 700;
+	line-height: 47px;
+}