From 5697983341cc61ea73211ea0e72524597c1cf311 Mon Sep 17 00:00:00 2001 From: Kelly T Nguyen Date: Mon, 24 Jun 2019 19:23:50 -0500 Subject: [PATCH 1/6] initial commit --- public/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/public/index.js b/public/index.js index 034dbd5e..6515a734 100644 --- a/public/index.js +++ b/public/index.js @@ -1 +1,2 @@ -//stuff \ No newline at end of file +//stuff +//more stuff \ No newline at end of file From 78ee29ebe6d269767e7d715ea6c68dbedc0ad051 Mon Sep 17 00:00:00 2001 From: Kelly T Nguyen Date: Thu, 27 Jun 2019 02:17:59 -0500 Subject: [PATCH 2/6] in progress --- public/index.html | 11 ++++++++--- public/index.js | 23 +++++++++++++++++++++-- 2 files changed, 29 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 138da963..2ce29c12 100644 --- a/public/index.html +++ b/public/index.html @@ -5,10 +5,15 @@ My Store - - - + + + + + +
+ + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 6515a734..3a32caf4 100644 --- a/public/index.js +++ b/public/index.js @@ -1,2 +1,21 @@ -//stuff -//more stuff \ No newline at end of file +// have search bar with enter button +// show name, rating, number of reviews and price +// include a link or button that should be clicked on so that you can see the details of the product + +function Products(products){ + let productDivs = ""; + + for (let i=0; i < products.length; i++) { + let product = products[i]; + productDivs +=`
${product.name}
` + } + document.getElementById("products").innerHTML = productDivs; +} +Products(products); + +function search(){ + let searchWord = document.getElementById("search").value; + + let filteredProducts = products.filter(p=>p.name === searchWord) + Products(filteredProducts); +} \ No newline at end of file From 62371c6989e990761e632231b3fdde97f0f367ba Mon Sep 17 00:00:00 2001 From: Kelly T Nguyen Date: Mon, 1 Jul 2019 13:45:40 -0500 Subject: [PATCH 3/6] in progress --- public/index.html | 9 ++++++--- public/index.js | 25 ++++++++++++++++--------- 2 files changed, 22 insertions(+), 12 deletions(-) diff --git a/public/index.html b/public/index.html index 2ce29c12..c837501e 100644 --- a/public/index.html +++ b/public/index.html @@ -7,9 +7,12 @@ - - - +
+ + + + +
diff --git a/public/index.js b/public/index.js index 3a32caf4..e821581a 100644 --- a/public/index.js +++ b/public/index.js @@ -1,21 +1,28 @@ -// have search bar with enter button -// show name, rating, number of reviews and price -// include a link or button that should be clicked on so that you can see the details of the product - function Products(products){ let productDivs = ""; for (let i=0; i < products.length; i++) { let product = products[i]; - productDivs +=`
${product.name}
` + productDivs += + `
+

${product.name}

+
  • Description: ${product.description}
    • +
  • ${product.price}
    • +
  • Category: ${product.category}
    • +
  • Rating (5 is the highest): ${product.rating}
    • +
    ` + } document.getElementById("products").innerHTML = productDivs; } Products(products); -function search(){ - let searchWord = document.getElementById("search").value; - let filteredProducts = products.filter(p=>p.name === searchWord) +function search(){ + let searchWord = document.getElementById("searchBox").value; + //Shows exact mathing + let filteredProducts = products.filter(p => p.name === searchWord) + Products(filteredProducts); -} \ No newline at end of file +} + From 4144b812c32e7de88efb3908d5315b9a4d20c9ca Mon Sep 17 00:00:00 2001 From: Kelly T Nguyen Date: Fri, 5 Jul 2019 03:40:29 -0500 Subject: [PATCH 4/6] added some style --- images/hamburger.png | Bin 0 -> 1577 bytes images/shopping-cart-256.png | Bin 0 -> 3252 bytes public/index.html | 37 +++++++++++-- public/index.js | 60 +++++++++++++++------ public/store-styles.css | 100 +++++++++++++++++++++++++++++++++++ 5 files changed, 176 insertions(+), 21 deletions(-) create mode 100644 images/hamburger.png create mode 100644 images/shopping-cart-256.png create mode 100644 public/store-styles.css diff --git a/images/hamburger.png b/images/hamburger.png new file mode 100644 index 0000000000000000000000000000000000000000..54bdd1bf11c5d8fec7a455c0701fd5f8afd4d999 GIT binary patch literal 1577 zcmbtUYfuwc6y7BpAP99|}P*pfF@f0Fa=F2m^q`vw~R=bUAOqY%~$<9b*GSgCR)#1q2=W z4uYnE=*U|LN~1y05Fdh=MG$14jMZ=71QglaZDDMH{{DXd{{eCSbrFd~Gcz+7hAk}2 z=gHsAfE+BN(fDUys~RYrQ$x`m5H16@W&{EOCLl0^5D}P2gx!i>Op{6sO;(tJF6*6^ z1x&h@03SGJ>lS~PdbQ{R*pQL~c_|RIfQ-K|B*Q)hLW@*RFxz6l+{W6P{?r|-2ger9 z@n?l)JRiX_^UD2fx3K*Ygn^BAU03Oha~?gbHhK?8FR8np))>a@J-SMY;$|vCkHM7% zZ!%F~q)k>Ig?V<6ZYAZv;(ByQ77x&@?-SCMXZmId+sd6~dsX8M2a8r;KWsHe;obgb z{}S_???tjWULop`H_kj&LE}ET%iCke_DR^(KI{@)&Sj9RGI@oa4Wo}6hD3$&obx~B z?AxyCbzQDa_2O6KaZY33j{M+U z?YXwNiebiS?0GPr-{CN;Z%!(TN|EM^uQb&#Se!=Q%WkafyhfoRDCh`PSSTs;L*u54MDZZ0w27*0u3{jpw$oHMrQjJqcE86xVn{M()0-_&0t z?>?m+!n~t;Nhc2*=~vE$8+ORG_n6JT!V(X|k8*7!vg^%$b<^Q`^6ng9cro%xUAtVX z>ehB%uaBD%KI)MiC-;(orm;?6I)Gfw2H$F3_+qKy3Z_-h9rNo-QqCo;H5Q}#(ZMP9 z(&6rRsyMU}fR?;$sxaq(~YtC6aoveqV)h(IhVxP}@@XdNqT%!;tCVg5DAU9tF0E zV*`jtYBqfvC~=?RWu_xl5KK0?sY zZ}S*5*cx;Xr)e)i5-3RN*ZG;qBX4||hc}uck{%S}1>iY0<8dP_OoeebQvh1x^HV~> zXQ9o)RKQ(Qq$(NMV*C|alM|eU<9oT~3?jU|^3k)8b%1>B)201=hg-kTk|xgLbvVu- zonxjt1f_fjqcltE-HOM$I`!e>sFpHVuMy(7h;Hf*-UGZ#0+b8xhC5Cb3qUfdG77c2 z;JikgO#$86F2T=o%B$v~QXxxk@`;ba_~0^X8pspOb~#@rr}R zXhp^n_L)P}Lu(weqpQ_9@`nK|+r8;ARmz`rGtcGEEIJ)PFz!z#{Qet5ksQ^D6 zr&M-CsvtU5$c#NG1OU0y+!*U<9_!pTgwZ^iZthI_hIKSLlSaEwjo19cAu&m?FD~=H U9qPn=F~9-huu=a@oB7he0IBx1@CAtM@F zX)J|o*P7j(dj5*%^SS56Ilr@gxAW%28R}~@AyG&G0Miv64PyWxv=RasV6?%d!om~) z=u1OAQ%&0RzxH1O|9=UzdWz9R&v_f`n*azD2B$;NGn_!4WMn$U%yOEQjh*8RC)Zij zIc^?aK7Ii~^dG_^qGI9_l2X#=F*3693KtcXlrQ~>Q&YdJp{b>FS# zA0|F}octu^X<9~RcFr?GUVcGgQE^FWS$RceRdr2mUHyxO#-^9euUcAPx3#}{+d+EQ z-P7CG|6zbU_;KhHWn^@G;`5iuuhgmOnb~jO=jIoFEG{jttp2mMzOlKr{c~q`Z~x%% zNT)&$4FCh_iiVo0|M+swzEz4Q`@4a<636%iWSq6GQ0GU|i*E@gBR?DDjqwypb^2l4yhr*+AQ91JcVPvTSCyF7v!;s8zV8MbJs+uRV z#wyy%SJYAtG)HIohSj#~?`of0nW!zsLTi#?;cNRWA%J@hVso+B5k}~u*6+Ro7=Nj2 zY{2I;yl4SJmAnAVv(Eqp4;bdI_5$F~%#|6xK< zMFqe)88AY-^`Oi~LJ1@rfj{TLd<>LJjULBdqz~OhR4J7=5H-&-datR#dh*LEChj8J@zE8eA2`V6){>udd<{JV-zQhFAxt!DR6h*Y&z_L(%hHn^@LY6Q_uqnFXvGN~IRHhHh zwcDcMV}D~=T*GW8DLsrfNf{`Hf7re+gR@NV9o7xAs$4|$#;bj<4KtCAFJdP0Ec_hb z#^T};P*UE}-jhMxeDq!xArrAaU=2lK!d4#-;=+5=+ojf_J7d-~gi~G?`RRy2S&uQi zVryACLi#6h#(4NP;9!DtJqlcsmI%+Wcj0fv2jb0jVda;aXIbK*{xNt&B-65HmZlaA z@*a~GBt(ZXz|l$Yc?IZ-F>O|?c8a9;stUbUzSD+)_NnI~u4c4%uox0`aXH(mtVA0K zs@t(_D_R|uPR$silnh1D>`@WlH|4}2)+~ew@D5Y0-R;OvROnmO^udy6D5{RCcg^Ka zKp1G^#Y!fsSfQgr8nCnUr|hl|5*K+5EYU`QHPn}6OVNC+-51KYk)^K%J1c>=-UWS} z1rdN=rd`Bz5XZJH<3+B2SLR5l(e4$nI#P?ovhbhS;zpkf7s$u5>=AO=K9Pw=Zzroa zX!JA6A&Pa79nBO3G@E42NefOZYk5Q0k-A^Bqc!3BwaH`Ku|tu&^{>36ijlIMBo)B-qDZ?`h8OmP>z-&_gee6*-WuX zpX~P);{YQ^*{>5PSRq9Dd(UsItSL;?KOZ3))_hf}NVBqB+w{Ow& zWx}pm!f2I#Zh>8-JPk$J6a`u|A2GYvA0}ggINXIswe8<5j~O5__-8E_{*C=5rd|?! z)cC#C^m}2yZW!gb(l7m@-}n9>e#Img{_=j`3yOdgKl01+MOoT&)#vE`HYeBfTYfJ4 zZqQ{I1X;tMY7DrhQk|R?P(r#0ut?6!IJCtDt7QwT9rc%!^L((1jG-|v>!Ma6RFf3( z`VRPTkZt3e+iK=(RcS@^;_5RmyLK-gKkf9V?_Vg=&Wxvb)^VTdJqXIh);{!{q2z9L zKF-{_T>uLqTfLvG8hDY9=pyLC;if-2OvIpI(@6AKT;SwZun*`vy;bMF=x9a?0z)SYE1A5ma04oa5DOFe(qrPuly*sG`Dzhq0+_sRDDuN#_FO6(QAXtgZ6a#OY0Yl`}m zG_Csj<>q4v?_IIV9#RvNHnZNBo)ukm=n`{Z;qG^x!x=wC^5|Y`Xh8Vn+M)eqh+f>Z zwQ9}`J*P^W&Wts+*zF+w>a{YHkWX4eJ01|ozJQ+s6BB>i$BV?W+GV3*`Qk0*>a#}am0MyrB@53&lhrV4VE%})lh z?JB7dIN{F6VbX4Ogo%@FiC-aG3Eo4S)ud2=jjbI#@1N%d+xyf9Fyrix9{DAfbex$e z7|c^C^$$MC<=UHCxH}K_#CiD?Y;Q5!wKHnavsC*Bx87dk^&Ua+;F71;q`>SkbXGIz zz$NKGBlf^F{lKo<^3;>_u}SCS My Store + + - -
    - + + + + + + +
    +
    + +

    -
    + + +
    +
    + + + +
    diff --git a/public/index.js b/public/index.js index e821581a..46750430 100644 --- a/public/index.js +++ b/public/index.js @@ -1,28 +1,54 @@ +let shoppingCart = []; + function Products(products){ - let productDivs = ""; - - for (let i=0; i < products.length; i++) { - let product = products[i]; - productDivs += - `
    -

    ${product.name}

    -
  • Description: ${product.description}
    • -
  • ${product.price}
    • -
  • Category: ${product.category}
    • -
  • Rating (5 is the highest): ${product.rating}
    • -
    ` - - } + let productDivs = ""; + + for (let i=0; i < products.length; i++) { + let product = products[i]; + productDivs += + `
    +

    ${product.name}

    +
    +
    +
    Price: ${product.price}
    +
    +
    + +
    ` + } document.getElementById("products").innerHTML = productDivs; } -Products(products); +window.onload = () => { + Products(products); +} + +function ProductDetails(id) { + let product = products.find(p=>p.id === id); + let button = document.getElementById(`viewBtn ${product.id}`); + document.getElementById(`more ${product.id}`).innerHTML = + `
    +
  • Description: ${product.description}
    • +
  • Category: ${product.category}
    • +
  • Rating (5 is the highest): ${product.rating}
    • +
    `; + button.setAttribute('onClick', `hideDetails(${product.id})`) + button.innerHTML = "Hide"; +} + +function hideDetails(id) { + let product = products.find(p => p.id === id); + document.getElementById(`more ${product.id}`).innerHTML = ""; + document.getElementById(`viewBtn ${product.id}`).setAttribute('onClick', `ProductDetails(${product.id})`) +} function search(){ let searchWord = document.getElementById("searchBox").value; //Shows exact mathing - let filteredProducts = products.filter(p => p.name === searchWord) - + let filteredProducts = products.filter(p => p.name.toLowerCase().includes(searchWord)) + Products(filteredProducts); } + diff --git a/public/store-styles.css b/public/store-styles.css new file mode 100644 index 00000000..f1948950 --- /dev/null +++ b/public/store-styles.css @@ -0,0 +1,100 @@ +body { + background: whitesmoke; + text-align: center; + font-family: 'Lato', sans-serif; +} + +h1 { + font-family: 'Kaushan Script', cursive; +} + +/* Navigation Bar */ +.navbar { + background:pink; + margin-bottom: 10px; + margin-right: auto; + position: sticky; + top: 0; + display: flex; + align-items: center; + z-index: 1; + width: 100%; +} + +.navbar-center { + width: 100%; + max-width: 1170px; + margin: 0 auto; + display: flex; + align-items: center; + justify-content: space-between; +} + +.cart-btn { + position: relative; + cursor: pointer; +} + +.cart-items { + position: absolute; + border: 1px solid gray; + top: -8px; + right: -8px; + background: darkorange; + padding: 0 5px; + border-radius: 30%; +} +/* End of Navigation Bar */ + +#product { + border: 1px solid black; + margin: 5px; + width: 280px; + height: 500px; + padding: 10px; +} + +#products { + text-align: center; + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +#pictures { + width: 200px; + height: 200px; + padding-bottom: 20px; +} + +.icon { + height: 25px; + width: 25px; +} + +.smallerCart { + height: 15px; + width: 15px; + padding-right: 5px; +} + +#bag-btn { + /* top: 70%; + right: 0; */ + border: 10px; + text-transform: uppercase; + padding: 0.5rem 0.75rem; + font-weight: bold; + /* transition: 0s; + transform: translateX(101%); */ + margin-top: 30px; + cursor: pointer; +} + +#bag-btn:hover { + color:black; +} + +#product:hover { + opacity: 0.85; +} \ No newline at end of file From a69e2ab84413eac4c64e6163f6e51fb634dcab03 Mon Sep 17 00:00:00 2001 From: Kelly T Nguyen Date: Sun, 7 Jul 2019 23:02:55 -0500 Subject: [PATCH 5/6] added remove and cart function --- images/decrease.png | Bin 0 -> 1195 bytes images/exit.png | Bin 0 -> 3247 bytes images/increase.png | Bin 0 -> 1163 bytes images/product test.png | Bin 0 -> 25790 bytes public/index.html | 37 +++++++++-- public/index.js | 47 ++++++++++++- public/store-styles.css | 144 +++++++++++++++++++++++++++++++++++++++- 7 files changed, 219 insertions(+), 9 deletions(-) create mode 100644 images/decrease.png create mode 100644 images/exit.png create mode 100644 images/increase.png create mode 100644 images/product test.png diff --git a/images/decrease.png b/images/decrease.png new file mode 100644 index 0000000000000000000000000000000000000000..28035e250ea80dad20e4d8b349d7d7f90d3cb05e GIT binary patch literal 1195 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 WuReS3+9SGCqM9ozje+g9kN*S0__BWh literal 0 HcmV?d00001 diff --git a/images/product test.png b/images/product test.png new file mode 100644 index 0000000000000000000000000000000000000000..a0c2b6433ca6fe5f5f61f6cffb64b1fc33affcdb GIT binary patch literal 25790 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 z
    -

    Kelly's Minimart

    +
    - -
    0
    + +
    @@ -30,7 +30,6 @@

    Kelly's Minimart

    -

    @@ -42,9 +41,37 @@

    Kelly's Minimart

    - + + + + + + + + diff --git a/public/index.js b/public/index.js index 46750430..34a5586e 100644 --- a/public/index.js +++ b/public/index.js @@ -13,11 +13,20 @@ function Products(products){
    Price: ${product.price}


    - +
    ` } document.getElementById("products").innerHTML = productDivs; + + let counter = 0; + shoppingCart.map(p => { + counter = counter + p.quantity + }) + document.getElementsByClassName("cart-items").innerHTML = counter; + + document.getElementById("numberCart").innerHTML = `${counter}`; } window.onload = () => { @@ -51,4 +60,40 @@ function search(){ Products(filteredProducts); } +function addToCart(prodID){ + let foundProd = products.find(p => p.id === prodID); + let inCart = shoppingCart.find(p => p.id === prodID); + + if (!inCart) { + shoppingCart.push(foundProd); + shoppingCart.find(p => p.id === prodID).quantity=1; + + } else { + inCart.quantity +=1; + } + console.log(shoppingCart); + + Products(products); +} + +function inCart() { + Products(shoppingCart); + shoppingCart.map(p => { + let bagBtn = document.getElementById(`bag-btn${p.id}`); + bagBtn.innerHTML = "Remove"; + bagBtn.setAttribute( "onClick", `remove(${p.id})`); + document.getElementById(`cartView${p.id}`).innerHTML = `QTY: ${p.quantity}`; + }); +} + +function remove(prodId) { + let idx = shoppingCart.findIndex(p => p.id === prodId); + shoppingCart.splice(idx, 1); + inCart(); +} + +function goHome() { + Products(products); + document.getElementById("goHome"); +} \ No newline at end of file diff --git a/public/store-styles.css b/public/store-styles.css index f1948950..21bd61df 100644 --- a/public/store-styles.css +++ b/public/store-styles.css @@ -46,6 +46,7 @@ h1 { } /* End of Navigation Bar */ +/* Products section */ #product { border: 1px solid black; margin: 5px; @@ -92,9 +93,146 @@ h1 { } #bag-btn:hover { - color:black; + cursor: pointer; + background: gray; + color: white; } #product:hover { - opacity: 0.85; -} \ No newline at end of file + opacity: 0.8; +} + +#home { + background: pink; +} + +/* End of Product Section */ +/* +/* Cart */ +/* .exit { + height: 25px; + width: 25px; +} */ + +/* COMMENT THIS OUT IF IT DOESN'T WORK */ +/* .cart-overlay { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + background: transparent; + transition: ease-in; + /* background: lightpink; + z-index: 2; + visibility: hidden; +} + +.cart { + position: fixed; + top: 0; + right: 0; + width: 100%; + height: 100%; + overflow: scroll; + z-index: 3; + background:lightgray; + padding: 1.5rem; + transition: ease-in; + transform: translateX(100%); +} + +.showCart { + transform: translateX(0); +} + +.transparentBcg { + visibility: visible; +} + +@media screen and (min-width: 768px) { + .cart { + width: 30vw; + min-width: 450px; + } +} + +.close-cart { + font-size: 1.7rem; + cursor: pointer; +} + +.cart h2 { + text-align: center; + margin-bottom: 2rem; +} +.productPic { + height: 100px; + width: 100px; +} + +.increase, .decrease{ + height: 30px; + width: 30px; + cursor: pointer; +} + +/* End of Cart */ + +/* Cart Item */ +/* +.exit:hover { + background: gray; +} + +.cart-item { + display: grid; + align-items: center; + grid-template-columns: auto 1fr auto; + grid-column-gap: 1.5rem; + margin: 1.5rem 0; +} + +.cart-item h4 { + font-size: 0.85rem; +} + +.cart-tem h5 { + margin: 0.5rem 0; +} + +.item-amount { + text-align: center; +} + +.remove-item { + color: lightgray; + cursor: pointer; + padding: 2px; +} + +.remove-item:hover { + color: white; +} + +.clear-cart { + background: lightgray; + border: 1px solid black; + padding: 7px; +} + +.clear-cart:hover { + background: gray;; + color: white; +} + +/* End of Cart Item */ + +/* .cart-footer { + margin-top: 2rem; + text-align: center; +} + +.cart-footer h3 { + margin-bottom: 1rem; +} */ \ No newline at end of file From ccb98d0a51ecbb987dde71276fd91dee4e9d63d1 Mon Sep 17 00:00:00 2001 From: Kelly T Nguyen Date: Mon, 15 Jul 2019 17:34:22 -0500 Subject: [PATCH 6/6] added sign in --- public/index.html | 18 ++++++++++++++-- public/index.js | 47 +++++++++++++++++++++++++++++++++++------ public/store-styles.css | 7 ++++++ 3 files changed, 63 insertions(+), 9 deletions(-) diff --git a/public/index.html b/public/index.html index 3d36023f..e9425a3a 100644 --- a/public/index.html +++ b/public/index.html @@ -11,6 +11,19 @@ +
    +
    +

    Welcome to

    +

    Kelly's MiniMart

    +
    +
    +

    + +
    +
    + + + +

    @@ -42,7 +56,7 @@ Add to Bag --> - +
    - + \ No newline at end of file diff --git a/public/index.js b/public/index.js index 34a5586e..5cef2bcd 100644 --- a/public/index.js +++ b/public/index.js @@ -1,4 +1,5 @@ let shoppingCart = []; +let products = []; function Products(products){ let productDivs = ""; @@ -13,7 +14,7 @@ function Products(products){
    Price: ${product.price}


    -
    ` @@ -30,8 +31,40 @@ function Products(products){ } window.onload = () => { - Products(products); + fetch("https://acastore.herokuapp.com/products") + .then(response => response.json()) + .then(data => products = data) + .then(products => Products(products)); + // Products(products); + mainScreen = document.getElementById("mainScreen"); + registration = document.getElementById("registration"); + btnSignup = document.getElementById("btnSignup"); + btnSignup.onclick = signUp; + txtEmail = document.getElementById("email"); + txtPassword = document.getElementById("password"); +} + +class User { + constrctor(email, password, cartId) { + this.email = email; + this.password = password; + this.cartId = cartId; + } } + function signUp() { + mainScreen.style.display = "block"; + registration.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 ProductDetails(id) { let product = products.find(p=>p.id === id); @@ -79,7 +112,7 @@ function addToCart(prodID){ function inCart() { Products(shoppingCart); shoppingCart.map(p => { - let bagBtn = document.getElementById(`bag-btn${p.id}`); + let bagBtn = document.getElementById(`bag-btn ${p.id}`); bagBtn.innerHTML = "Remove"; bagBtn.setAttribute( "onClick", `remove(${p.id})`); @@ -93,7 +126,7 @@ function remove(prodId) { inCart(); } -function goHome() { - Products(products); - document.getElementById("goHome"); -} \ No newline at end of file +// function goHome() { +// Products(products); +// document.getElementById("goHome"); +// } \ No newline at end of file diff --git a/public/store-styles.css b/public/store-styles.css index 21bd61df..51b01ebe 100644 --- a/public/store-styles.css +++ b/public/store-styles.css @@ -8,6 +8,13 @@ h1 { font-family: 'Kaushan Script', cursive; } +#registration { + text-align: center; + padding-top: 250px; +} + + + /* Navigation Bar */ .navbar { background:pink;