Add files via upload

YoNiga7 · Jun 3, 2024 · 2b9b3c6 · 2b9b3c6
1 parent 039ebb0
commit 2b9b3c6
Show file tree

Hide file tree

Showing 7 changed files with 253 additions and 0 deletions.
diff --git a/LAB7/api/categories.json b/LAB7/api/categories.json
@@ -0,0 +1,5 @@
+[
+  {"id": 1, "name": "electronics", "shortname": "electronics", "notes": ""},
+  {"id": 2, "name": "clothing", "shortname": "clothes", "notes": ""},
+  {"id": 3, "name": "music", "shortname": "music", "notes": ""}
+]
diff --git a/LAB7/api/categories/clothing.json b/LAB7/api/categories/clothing.json
@@ -0,0 +1,6 @@
+[
+  {"id": 1, "name": "tshirt", "shortname": "tshirt", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "50 грн", "image": "https://place-hold.it/400x400/black"},
+  {"id": 2, "name": "tshirt", "shortname": "jeans", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "100 грн", "image": "https://place-hold.it/400x400/black"},
+  {"id": 3, "name": "jacket", "shortname": "jacket", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "150 грн", "image": "https://place-hold.it/400x400/black"},
+  {"id": 4, "name": "pants", "shortname": "pants", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "40 грн", "image": "https://place-hold.it/400x400/black"}
+]
diff --git a/LAB7/api/categories/electronics.json b/LAB7/api/categories/electronics.json
@@ -0,0 +1,6 @@
+[
+  {"id": 1, "name": "smartphone", "shortname": "smartphone", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "1000 грн", "image": "https://place-hold.it/400x400"},
+  {"id": 2, "name": "laptop", "shortname": "laptop", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "2000 грн", "image": "https://place-hold.it/400x400"},
+  {"id": 3, "name": "tablet", "shortname": "tablet", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "1500 грн", "image": "https://place-hold.it/400x400"},
+  {"id": 4, "name": "headphones", "shortname": "headphones", "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", "price": "1500 грн", "image": "https://place-hold.it/400x400"}
+]
diff --git a/LAB7/api/categories/music.json b/LAB7/api/categories/music.json
@@ -0,0 +1,34 @@
+[
+  {
+    "id": 1, 
+    "name": "guitar", 
+    "shortname": "guitar", 
+    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.", 
+    "price": "4500 грн", 
+    "image": "https://place-hold.it/400x400/Red"
+ },
+ {
+  "id": 2,
+  "name": "piano",
+  "shortname": "piano",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "price": "15000 грн",
+  "image": "https://place-hold.it/400x400/Red"
+ },
+ {
+  "id": 3,
+  "name": "violin",
+  "shortname": "violin",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "price": "15000 грн",
+  "image": "https://place-hold.it/400x400/Red"
+ },
+ {
+  "id": 4,
+  "name": "drums",
+  "shortname": "drums",
+  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
+  "price": "10000 грн",
+  "image": "https://place-hold.it/400x400/Red"
+ }
+]
diff --git a/LAB7/index.css b/LAB7/index.css
@@ -0,0 +1,61 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+}
+
+header {
+  background-color: #333;
+  color: #fff;
+  padding: 10px;
+  text-align: center;
+}
+
+nav ul {
+  padding: 0;
+  list-style-type: none;
+}
+
+nav ul li {
+  display: inline;
+  margin-right: 20px;
+}
+
+nav ul li a {
+  color: #fff;
+  text-decoration: none;
+}
+
+main {
+  padding: 20px;
+}
+
+#categories {
+  margin-bottom: 20px;
+}
+
+.categories-container {
+  display: flex;
+  justify-content: center;
+  gap: 40px;
+}
+.products-container {
+  display: flex;
+  justify-content: center;
+}
+
+.product {
+  display: inline-block;
+  width: 200px;
+  margin-right: 20px;
+  vertical-align: top;
+}
+
+.product img {
+  max-width: 100%;
+  height: auto;
+}
+
+a {
+  text-decoration: none;
+  color: #333;
+}
diff --git a/LAB7/index.html b/LAB7/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="index.css">
+  <title>LAB7</title>
+</head>
+<body>
+    <header>
+        <nav>
+            <ul>
+                <li><a href="#" id="homeLink">Home</a></li>
+                <li><a href="#" id="catalogLink">Catalog</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <div class="categories-container" id="categories"></div>
+        <div class="products-container" id="products"></div>
+    </main>
+
+    <script type="module" src="script.js"></script>
+</body>
+</html>
diff --git a/LAB7/script.js b/LAB7/script.js
@@ -0,0 +1,116 @@
+let isCatalogOpen = false;
+
+document.addEventListener('DOMContentLoaded', function() {
+  const homeLink = document.getElementById('homeLink');
+  const catalogLink = document.getElementById('catalogLink');
+
+  homeLink.addEventListener('click', function(event) {
+      event.preventDefault();
+      // with click on "Home" load home page
+      loadCategories();
+  });
+
+  catalogLink.addEventListener('click', function(event) {
+      event.preventDefault();
+      // with click on "Catalog" load catalog
+      loadCategories();
+  });
+
+  loadHomePage();
+});
+
+function loadHomePage() {
+  // clear the categories container
+  const categoriesContainer = document.getElementById('categories');
+  categoriesContainer.innerHTML = '';
+
+  // clear the products container
+  const productsContainer = document.getElementById('products');
+  productsContainer.innerHTML = '';
+}
+
+function loadCategories() {
+  const categoriesContainer = document.getElementById('categories');
+  categoriesContainer.innerHTML = '';
+
+  fetch('./api/categories.json')
+  .then(response => response.json())
+  .then(data => {
+      data.forEach(category => {
+          const categoryLink = document.createElement('a');
+          categoryLink.href = '#';
+          categoryLink.textContent = category.name;
+          categoriesContainer.appendChild(categoryLink);
+
+          categoryLink.addEventListener('click', function(event) {
+              event.preventDefault();
+              isCatalogOpen = true;
+              loadCategory(category.name);
+          });
+      });
+
+      // add specials link
+      const specialsLink = document.createElement('a');
+      specialsLink.href = '#';
+      specialsLink.textContent = 'Specials';
+      categoriesContainer.appendChild(specialsLink);
+
+      specialsLink.addEventListener('click', function(event) {
+          event.preventDefault();
+          isCatalogOpen = true;
+          loadSpecials();
+      });
+  });
+}
+
+function loadCategory(categoryName) {
+  const productsContainer = document.getElementById('products');
+  productsContainer.innerHTML = '';
+
+  fetch(`./api/categories/${categoryName}.json`)
+      .then(response => response.json())
+      .then(data => {
+          data.forEach(product => {
+              const productDiv = document.createElement('div');
+              productDiv.classList.add('product');
+
+              const productImg = document.createElement('img');
+              productImg.src = product.image;
+              productImg.alt = product.name;
+              productDiv.appendChild(productImg);
+
+              const productName = document.createElement('h3');
+              productName.textContent = product.name;
+              productDiv.appendChild(productName);
+
+              const productDescription = document.createElement('p');
+              productDescription.textContent = product.description;
+              productDiv.appendChild(productDescription);
+
+              const productPrice = document.createElement('p');
+              productPrice.textContent = `Price: ${product.price}`;
+              productDiv.appendChild(productPrice);
+
+              productsContainer.appendChild(productDiv);
+          });
+      });
+}
+
+function loadSpecials() {
+  const productsContainer = document.getElementById('products');
+  productsContainer.innerHTML = '';
+
+  const categories = ['electronics', 'clothes', 'music'];
+  const randomCategory = categories[Math.floor(Math.random() * categories.length)];
+  loadCategory(randomCategory);
+}
+
+function loadCatalog() {
+  isCatalogOpen = true;
+  // loads first category
+  const categories = ['electronics', 'clothes', 'music'];
+  categories.forEach(category => {
+      loadCategory(category);
+  });
+}
+