Início projeto da 1º Aula

Aula_2/assets/css/media-query.css

@@ -0,0 +1,30 @@
+@media (max-width: 576px) {
+    .container {
+        width: 100%;
+    }
+}
+
+
+@media (min-width: 768px) {
+    .container {
+        width: 720px;
+    }
+}
+
+@media (min-width: 992px) {
+    .container {
+        width: 960px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container {
+        width: 1140px;
+    }
+}
+
+@media (min-width: 1400px) {
+    .container {
+        width: 1320px;
+    }
+}

Aula_2/assets/css/style.css

@@ -0,0 +1,132 @@
+body {
+    background: #FFF;
+    color: #000;
+    box-sizing: border-box;
+    font-family: 'Inter', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+}
+
+
+header {
+    width: 100%;
+}
+.navigation {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 0 15px 0;
+}
+.navigation .navigation-item {
+    font-size: small;
+}
+
+
+
+.product {
+    margin: 30px 0 0 0;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+
+
+.product-info .info-name {
+    width: 20rem;
+    font-size: 2rem;
+}
+
+.product-info .info-price {
+    width: 20rem;
+    margin: 10px 0 0 0;
+    font-size: 1.1rem;
+    display: flex;
+    flex-flow: wrap column;
+    gap: 3px;
+}
+.info-price .parcelas {
+    display: flex;
+    gap: 5px;
+    font-size: 0.8rem;
+    color: #0066cc;
+}
+
+.options .colors {
+    width: 20rem;
+    margin: 30px 0 0 0;
+}
+.options .colors h2 {
+    font-size: 1.5rem;
+}
+.colors .colors-list {
+    display: flex;
+    flex-flow: wrap row;
+    gap: 20px;
+    margin: 10px 0 0 0;
+}
+.colors-list .color {
+    width: 35px;
+    height: 35px;
+}
+.colors-list .color input {
+    display: none;
+}
+.colors-list .color img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    cursor: pointer;
+}
+
+.save-later {
+    width: 20rem;
+}
+.save-later .save-later-button {
+    display: flex;
+    align-items: start;
+    gap: 0.5rem;
+    padding: 0.5rem 0 0;
+}
+
+
+.product-preview {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.product-image-wrapper {
+    width: inherit;
+}
+.product-image-wrapper {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.product-previews {
+    margin: 50px 0 0 0;
+    width: 100%;
+}
+.product-preview .previews-list {
+    display: flex;
+    flex-flow: wrap row;
+    justify-content: center;
+    gap: 15px;
+}
+.previews-list .preview-item {
+    width: 40px;
+    height: 40px;
+}
+.previews-list .preview-item input {
+    display: none;
+}
+.previews-list .preview-item img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    cursor: pointer;
+}

Aula_2/assets/js/script.js

@@ -0,0 +1,65 @@
+function setupProduct(productData) {
+    const nameElement = document.getElementById('name');
+    const priceElement = document.getElementById('price');
+    const colorsElement = document.querySelector('.colors-list');
+    const previewElement = document.getElementById('preview');
+    const previewsElement = document.querySelector('.previews-list');
+
+
+    function setVariation(index) {
+        const variation = productData.product.variations[index];
+
+        if (variation) {
+            previewElement.src = variation.images[1].src;
+            setPreviews(variation, index);
+        }
+    };
+
+    function setPreviews(variation, variationIndex) {
+        if (variation.images.length > 0) {
+            variation.images.forEach((index) => {
+                previewsElement.innerHTML += 
+                    `<li class="preview-item">
+                        <input type="radio" data-current-preview="${index}" name="preview-option">
+                            <img src="data/image/${variationIndex}/${index + 1}.png" alt="Foto do Produto">
+                        </input>
+                    </li>`;
+            });
+        }
+    };
+
+
+    if (productData.product.colors.length > 0) { //Checar se há colors
+        productData.product.colors.forEach((index) => {
+            let colorElement = document.createElement('li');
+            colorElement.innerHTML = 
+                `<li class="color">
+                    <input type="radio" data-current-color="${index}" name="color-option">
+                        <img src="data/image/${index + 1}.png" alt="Foto da cor">
+                    </input>
+                </li>`;
+
+            colorsElement[0].appendChild(colorElement);
+        });
+    }
+
+    if (productData.product.variations.length > 0) {
+        previewElement.src = productData.product.variations[0].images[1].src;
+    }
+
+    if (productData.product.name) { //Checar se há name
+        nameElement.textContent = productData.product.name;
+    }
+
+    if (productData.product.price) { //Checar se há price
+        priceElement.textContent = `R$${productData.product.price}`;
+    }
+};
+
+
+
+//GET JSON do product.json
+fetch('data/product.json')
+    .then(response => response.json())
+    .then(productData => setupProduct(productData))
+    .catch(error => console.error('An error ocurred while trying to fetch the Product JSON... ', error))

Aula_2/data/product.json

@@ -0,0 +1,75 @@
+{
+    "product": {
+        "name": "SmartWatch",
+        "description": "Pulseira loop esportiva",
+        "price": 499.99,
+
+        "colors": [
+            {
+                "src": "data/image/1.png"
+            },
+
+            {
+                "src": "data/image/2.png"
+            },
+
+            {
+                "src": "data/image/3.png"
+            }
+        ],
+
+        "variations": [
+            {
+                "name": "Celeste", 
+                "images": [
+                    {
+                        "src": "data/image/1/0.png"
+                    },
+
+                    {
+                        "src": "data/image/1/1.png"
+                    },
+
+                    {
+                        "src": "data/image/1/2.png"
+                    }
+                ]
+            },
+
+            {
+                "name": "Rosa", 
+                "images": [
+                    {
+                        "src": "data/image/1/0.png"
+                    },
+
+                    {
+                        "src": "data/image/1/1.png"
+                    },
+
+                    {
+                        "src": "data/image/1/2.png"
+                    }
+                ]
+            },
+
+
+            {
+                "name": "Estelar", 
+                "images": [
+                    {
+                        "src": "data/image/3/0.png"
+                    },
+
+                    {
+                        "src": "data/image/3/1.png"
+                    },
+
+                    {
+                        "src": "data/image/3/2.png"
+                    }
+                ]
+            }
+        ]
+    }
+}