diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..6f3a2913 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 138da963..e1ae535b 100644 --- a/public/index.html +++ b/public/index.html @@ -4,11 +4,84 @@ My Store - - + + + - + + +
+
+ +
+ +
+ +
+
+ + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 034dbd5e..9877ae9c 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,191 @@ -//stuff \ No newline at end of file +let products = []; + +window.onload = function() { + fetch("https://acastore.herokuapp.com/products") + .then(response => response.json()) + .then(data => products = data) + .then(products => Products(products)) + mainDiv = document.getElementById("mainScreen"); + register = document.getElementById("register"); + home = document.getElementById("home"); + txtEmail = document.getElementById("email"); + txtPassword = document.getElementById("password"); + btnSignUp = document.getElementById("btn-signup"); + btnSignUp.onclick = signUp; + adminBtn = document.getElementById("admin-btn"); + adminBtn.onclick = admin; + adminContainer = document.getElementById("admin-container"); + txtName = document.getElementById("product-name"); + txtDescription = document.getElementById("product-description"); + txtPrice = document.getElementById("product-price"); + btnSave = document.getElementById("save-btn"); + btnSave.onclick = save; +} + +class User { + constructor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; + } + } + +function signUp() { + mainDiv.style.display = "block"; + register.style.display = "none"; + let newUser = new User(txtEmail.value, txtPassword.value, null); + fetch("https://acastore.herokuapp.com/users", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newUser) + }).then(response => response.json()); + console.log(newUser); + localStorage.setItem('newUser', JSON.stringify(newUser)); +} + +function showHome() { + Products(products); +} + + +function Products(products) { +let productLi = ""; +let detailsButton = document.createElement('button').value = "More Details"; +let toCartButton = document.createElement('button').value = "Add to Cart"; + +for (let i =0; i < products.length; i++) { + let product = products[i]; + productLi += `
${product.name} +
+ +
+ + + `; +} +document.getElementById("products").innerHTML= productLi; +} + +function populateCart() { +parsedItems.forEach() + let cartItems = document.getElementById('cart-items'); + let li = document.createElement('li'); + let removeButton = document.createElement('button'); + removeButton.innerHTML = "Remove"; + removeButton.addEventListener("click", function(){ + this.parentElement.remove(); + }) + li.appendChild(document.createTextNode(product.name)); + cartItems.appendChild(li); + let price = document.createElement('span'); + price.className = "amount"; + price.style.paddingLeft = "10px"; + price.appendChild(document.createTextNode(product.price)); + li.appendChild(price); + li.append(removeButton); +} + + + +function moreDetails(id) { + let detailsDiv = document.getElementById(id); + if (detailsDiv !== null) { + if (detailsDiv.style.visibility === "visible") { + detailsDiv.style.visibility = "hidden"; + } else if (detailsDiv.style.visibility === "hidden") { + detailsDiv.style.visibility = "visible"; + } + } +} + +function addToCart(id) { + let cartItems = document.getElementById('cart-items'); + let product = products.find(function(product) { + return product.id == id; + }); + let li = document.createElement('li'); + let removeButton = document.createElement('button'); + removeButton.innerHTML = "Remove"; + removeButton.addEventListener("click", function(){ + this.parentElement.remove(); + calculateCartTotal(); + }) + li.appendChild(document.createTextNode(product.name)); + cartItems.appendChild(li); + let price = document.createElement('span'); + price.className = "amount"; + price.style.paddingLeft = "10px"; + price.appendChild(document.createTextNode(product.price)); + li.appendChild(price); + li.append(removeButton); +} + + + +function calculateCartTotal() { + let amounts = document.getElementsByClassName("amount"); + let total = 0; + for (let i = 0; i < amounts.length; i++) { + const amount = parseFloat(amounts[i].innerText.replace('$', '')); + total = total + amount; + total = Math.round(total * 100) / 100; + } + console.log(total); + let cartTotal = document.getElementById('cart-total'); + cartTotal.innerText = "$" + total; +} + +function search() { + let searchWord = document.getElementById("searchBox").value.toLowerCase(); + let filteredProducts = products.filter(p => p.name.toLowerCase() === searchWord) + + Products(filteredProducts); +} + + +class Save { + constructor(name, description, price) { + this.name = name; + this.description = description; + this.price = price; + } + } + +function admin(){ + adminContainer.style.display = "block"; +} + +function save() { + let newProduct = new Save(txtName.value, txtDescription.value, txtPrice.value); + fetch("https://acastore.herokuapp.com/products", { + method: "POST", + headers: { + "Content-Type": "application/json" + }, + body: JSON.stringify(newProduct) + }).then(response => response.json()); + console.log(newProduct); + localStorage.setItem('newProduct', JSON.stringify(newProduct)); + Products(products); +} + + diff --git a/public/products.js b/public/products.js index 0e2facb6..6dfce0f7 100644 --- a/public/products.js +++ b/public/products.js @@ -2,7 +2,7 @@ const products = [{ "id": 1, "name": "Body Luxuries Sweet Lavender Hand Sanitizer", "description": "Makes your hands clean", - "reviews": 46, + "reviewsNum": 46, "rating": 2, "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", "price": "$95.11", diff --git a/public/styles.css b/public/styles.css new file mode 100644 index 00000000..750ef523 --- /dev/null +++ b/public/styles.css @@ -0,0 +1,78 @@ +#title { + text-align: center; + font-size: 50px; + font-weight: bold; +} + +#search { + display: flex; + flex-direction: row; + justify-content: center; +} + +#btnHome { + height: 30px; + margin-right: 25px; +} + +#searchBox { + width: 500px; + height: 25px; + border: 1px solid black; + margin-right: 5px; +} + +#find { + border: 1px solid black; + color: white; + background-color: black; + margin-right: 20px; + height: 30px; +} + +#find:hover { + color: black; + background-color: lightgray; +} + +#cat-container { + display: flex; + flex-direction: row; + justify-content: center; + height: 30px; +} + +#categories { + border: 1px solid black; +} + +h3 { + margin-right: 5px; + text-align: start; + margin-top: 5px; +} + +#products { + font-weight: bold; + font-size: 20px; + /* display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-around; */ +} + +/* .details { + display: flex; + justify-content: column; + justify-content: center; +} */ + +.details { + font-weight: 400; + font-size: 15px; +} + +#checkout { + margin-top: 10px; +} +