diff --git a/index.js b/index.js new file mode 100644 index 00000000..d3720daa --- /dev/null +++ b/index.js @@ -0,0 +1,21 @@ +let express = require("express"); +const app = express(); + +app.use(express.static('public')) + +app.listen(3000); + +//day 8 express code +// const express = require("express"); +// const bodyParser = require("body-parser"); + +// const app = express(); +// app.use(bodyParser.json()); + +// app.listen(3002, (err) => { +// if (err) { +// return console.log("Error", err); +// } +// console.log("Web server is now listening for messages", err); +// }); + diff --git a/public/index.css b/public/index.css new file mode 100644 index 00000000..a81c53fd --- /dev/null +++ b/public/index.css @@ -0,0 +1,37 @@ +*{ + box-sizing: border-box; +} +body{ + margin: 0; + padding: 0; +} +.searchbox{ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 40px; + border-radius: 40px; + padding: 10px; + color: black; +} +.search-btn{ + float: right; + width: 40px; + height: 40px; + padding: 10px; + border: 1px; + outline-color:black; +} +.search-txt{ + float: left; + padding: 0; + height: 30px; + outline-color: grey; + font-size: 16px; + width: 240px; +} + +.item{ + border: solid black 1px; +} \ No newline at end of file diff --git a/public/index.html b/public/index.html index 138da963..3347f256 100644 --- a/public/index.html +++ b/public/index.html @@ -4,11 +4,50 @@ My Store + - - + + + + + + + + + + + + + +
+ + +
+ + + + + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 034dbd5e..6c81d738 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,101 @@ -//stuff \ No newline at end of file +//stuff +//just checking +// let prod=require("products.js"); +let products=[]; + +//cart is an empty array you push items to +let cart=[]; +//best practice to set this to null? +let addCartBtn = document.getElementById("btnAddToCart").innerHTML; + +function listProducts(prods){ + let productDivs = ""; + for(let i=0; i < prods.length; i++){ + let product = prods[i]; + productDivs +=`
+ , +
${product.name}, +
Category: ${product.category}, +
Description: ${product.description}, +
Rating: ${product.rating}, +
Price: ${product.price}, +
${addCartBtn}
` + } + + document.getElementById("products").innerHTML = productDivs; + document.getElementById("btnAddToCart").onclick = function() {addToCart()}; +} +//what happens on load +window.onload = function(){ + fetch("https://acastore.herokuapp.com/products") + .then(res => res.json()) + .then(parsedData => listProducts(parsedData)) + + + // listProducts(products); + // mainDiv = document.getElementById("main"); + // register = document.getElementById("register"); + // btnSignUp = document.getElementById("btnSignUp"); + // btnSignUp.onclick = signUp; + // txtEmail = document.getElementById("email"); + // txtPassword = document.getElementById("password"); +} +//what happens when you return home +function returnHome(){ + fetch("https://acastore.herokuapp.com/products") + .then(res => res.json()) + .then(parsedData => listProducts(parsedData)) + + listProducts(prod); +} +//what happens when you add something to the cart +function addToCart(prod){ + cart.push(prod); +} +//see the cart +function goToCart(){ + listProducts(cart); +} +//what happens when you search +function search(){ + let searchText = document.getElementById("btnSearch").value; + fetch("https://acastore.herokuapp.com/products") + .then(res => res.json()) + .then(parsedData => { + let filteredProducts = parsedData.filter(p=>p.name.toLowerCase().includes(searchText)); + listProducts(filteredProducts); + }) + + + } + + //user info +class UserInfo { + constructor(email, password, cartId){ + this.email= email; + this.password= password; + this.cartId= cartId; + } +} +//sign up +function signUp(){ + mainDiv.style.display = "block"; + register.style.display = "none"; + let newUser = new UserInfo(txtEmail.value, txtPassword.value, null); + //learn this bs its called fetch and its wild + 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)); + +} + + + +//document.body.innerHTML = productDivs; //this will override a text input box +