From 973a6c1bdf4553880c21da25bf38fa7face8fd20 Mon Sep 17 00:00:00 2001 From: jimmyurl Date: Sat, 27 Jul 2024 13:54:54 +0300 Subject: [PATCH 1/3] Updated product page with quantity adjustment and checkout button --- E-CommerceWebsite | 1 + 1 file changed, 1 insertion(+) create mode 160000 E-CommerceWebsite diff --git a/E-CommerceWebsite b/E-CommerceWebsite new file mode 160000 index 0000000..6f497d1 --- /dev/null +++ b/E-CommerceWebsite @@ -0,0 +1 @@ +Subproject commit 6f497d1ee954ceb64191937cfb29162f0024debc From 896fd5cbf9ef6ad6b9447c629e5a26a825699bc0 Mon Sep 17 00:00:00 2001 From: jimmyurl Date: Sat, 27 Jul 2024 14:31:17 +0300 Subject: [PATCH 2/3] modified buttons in content details page and its css --- css/contetDetails.css | 151 ++++++++++++++++++++++-------------------- 1 file changed, 78 insertions(+), 73 deletions(-) diff --git a/css/contetDetails.css b/css/contetDetails.css index 5872c7f..fc6401e 100644 --- a/css/contetDetails.css +++ b/css/contetDetails.css @@ -1,79 +1,75 @@ -body -{ +body { margin: 0; text-transform: capitalize; font-family: 'Lato', sans-serif; font-weight: 100; } -#containerProduct -{ +#containerProduct { padding-top: 80px; } -#containerD -{ + +#containerD { width: 90%; margin: auto; display: grid; grid-template-columns: 1fr 2fr; padding: 80px 40px; } -#imageSection -{ + +#imageSection { width: 80%; margin: auto; } -#imageSection img -{ + +#imageSection img { width: 100%; float: right; border-radius: 10px; box-shadow: 1px 2px 6px 2px rgb(219, 219, 219); } -#imageSection img:hover -{ - box-shadow: 1px 0px 9px 1px rgb(3, 122, 122); +#imageSection img:hover { + box-shadow: 1px 0px 9px 1px rgb(3, 122, 122); } -#productDetails -{ +#productDetails { width: 100%; } -h1 -{ + +h1 { font-size: 35px; letter-spacing: 1px; word-spacing: 2px; } -h4 -{ + +h4 { font-size: 15px; font-weight: bold; color: rgb(3, 122, 122); letter-spacing: 1px; word-spacing: 2px; } -#productPreview -{ + +#productPreview { padding-bottom: 10px; } -#productPreview > img -{ + +#productPreview > img { width: 50px; padding: 10px 10px; border-radius: 15px; cursor: pointer; } -p -{ + +p { font-size: 15px; word-spacing: 2px; letter-spacing: 1px; line-height: 25px; } -button -{ + +button { padding: 10px 15px; color: white; background-color: rgb(3, 122, 122); @@ -82,36 +78,62 @@ button cursor: pointer; font-size: 20px; } -button a -{ + +button a { text-decoration: none; font-size: 18px; } -button:hover -{ + +button:hover { background-color: rgb(3, 94, 94); } -button a:focus -{ + +button a:focus { outline: none; } +/* Quantity adjustment styles */ +#quantityDiv { + display: flex; + align-items: center; + margin-top: 10px; +} + +#quantityDiv button { + width: 30px; + height: 30px; + font-size: 20px; + margin: 0 10px; + cursor: pointer; +} + +#quantity { + font-size: 20px; + margin: 0 10px; +} + +#button { + margin-top: 20px; +} + +#button button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + /* ----------------------------- MEDIA QUERY --------------------------- */ -@media(max-width: 1300px) -{ - h1 - { +@media(max-width: 1300px) { + h1 { font-size: 28px; } - #productPreview > img - { + #productPreview > img { width: 40px; padding: 10px 10px; padding-bottom: 30px; } - button - { + button { padding: 8px 13px; background-color: rgb(3, 122, 122); border: none; @@ -120,69 +142,52 @@ button a:focus } } -@media(max-width: 1170px) -{ - h1 - { +@media(max-width: 1170px) { + h1 { font-size: 22px; } - #productPreview > img - { + #productPreview > img { width: 40px; padding: 10px 10px; padding-bottom: 30px; } - button a - { + button a { font-size: 15px; - } - h4, p - { + h4, p { font-size: 13px; } - h3 - { + h3 { font-size: 15px; } - } -@media(max-width: 900px) -{ - /* #containerProduct */ - #containerD - { +@media(max-width: 900px) { + #containerD { width: 60%; margin: auto; display: grid; grid-template-columns: 1fr; } - #imageSection - { + #imageSection { width: 100%; text-align: center; } - #imageSection img - { + #imageSection img { text-align: center; width: 70%; float: none; } - #productDetails - { + #productDetails { width: 100%; } - #button - { + #button { text-align: center; } } -@media(max-width: 650px) -{ - #containerD - { +@media(max-width: 650px) { + #containerD { width: 80%; } -} \ No newline at end of file +} From 1a715bb83fdedef932863206c560dcbb22db4d46 Mon Sep 17 00:00:00 2001 From: jimmyurl Date: Sat, 27 Jul 2024 14:32:39 +0300 Subject: [PATCH 3/3] modified buttons in content details page and its css --- contentDetails.js | 257 +++++++++++++++++++++------------------------- 1 file changed, 115 insertions(+), 142 deletions(-) diff --git a/contentDetails.js b/contentDetails.js index f8ef320..6e0f798 100644 --- a/contentDetails.js +++ b/contentDetails.js @@ -1,147 +1,120 @@ -console.clear() - -let id = location.search.split('?')[1] -console.log(id) - -if(document.cookie.indexOf(',counter=')>=0) -{ - let counter = document.cookie.split(',')[1].split('=')[1] - document.getElementById("badge").innerHTML = counter -} - -function dynamicContentDetails(ob) -{ - let mainContainer = document.createElement('div') - mainContainer.id = 'containerD' +function dynamicContentDetails(ob) { + let mainContainer = document.createElement('div'); + mainContainer.id = 'containerD'; document.getElementById('containerProduct').appendChild(mainContainer); - let imageSectionDiv = document.createElement('div') - imageSectionDiv.id = 'imageSection' - - let imgTag = document.createElement('img') - imgTag.id = 'imgDetails' - //imgTag.id = ob.photos - imgTag.src = ob.preview - - imageSectionDiv.appendChild(imgTag) - - let productDetailsDiv = document.createElement('div') - productDetailsDiv.id = 'productDetails' - - // console.log(productDetailsDiv); - - let h1 = document.createElement('h1') - let h1Text = document.createTextNode(ob.name) - h1.appendChild(h1Text) - - let h4 = document.createElement('h4') - let h4Text = document.createTextNode(ob.brand) - h4.appendChild(h4Text) - console.log(h4); - - let detailsDiv = document.createElement('div') - detailsDiv.id = 'details' - - let h3DetailsDiv = document.createElement('h3') - let h3DetailsText = document.createTextNode('Rs ' + ob.price) - h3DetailsDiv.appendChild(h3DetailsText) - - let h3 = document.createElement('h3') - let h3Text = document.createTextNode('Description') - h3.appendChild(h3Text) - - let para = document.createElement('p') - let paraText = document.createTextNode(ob.description) - para.appendChild(paraText) - - let productPreviewDiv = document.createElement('div') - productPreviewDiv.id = 'productPreview' - - let h3ProductPreviewDiv = document.createElement('h3') - let h3ProductPreviewText = document.createTextNode('Product Preview') - h3ProductPreviewDiv.appendChild(h3ProductPreviewText) - productPreviewDiv.appendChild(h3ProductPreviewDiv) - - let i; - for(i=0; i { + let imgTagProductPreviewDiv = document.createElement('img'); + imgTagProductPreviewDiv.id = 'previewImg'; + imgTagProductPreviewDiv.src = photo; + imgTagProductPreviewDiv.onclick = function () { + imgTag.src = this.src; + }; + productPreviewDiv.appendChild(imgTagProductPreviewDiv); + }); + + let quantityDiv = document.createElement('div'); + quantityDiv.id = 'quantityDiv'; + + let minusButton = document.createElement('button'); + minusButton.id = 'minusButton'; + minusButton.innerText = '-'; + minusButton.onclick = function () { + let quantity = parseInt(document.getElementById('quantity').innerText); + if (quantity > 1) { + document.getElementById('quantity').innerText = quantity - 1; } - else - { - console.log('not connected!'); + }; + + let quantityText = document.createElement('span'); + quantityText.id = 'quantity'; + quantityText.innerText = '1'; + + let plusButton = document.createElement('button'); + plusButton.id = 'plusButton'; + plusButton.innerText = '+'; + plusButton.onclick = function () { + let quantity = parseInt(document.getElementById('quantity').innerText); + document.getElementById('quantity').innerText = quantity + 1; + }; + + quantityDiv.appendChild(minusButton); + quantityDiv.appendChild(quantityText); + quantityDiv.appendChild(plusButton); + + let buttonDiv = document.createElement('div'); + buttonDiv.id = 'button'; + + let buttonTag = document.createElement('button'); + buttonTag.innerText = 'Continue to Checkout'; + buttonTag.onclick = function () { + let quantity = document.getElementById('quantity').innerText; + let order = id + " " + quantity; + let counter = parseInt(quantity); + if (document.cookie.indexOf(',counter=') >= 0) { + order = id + " " + document.cookie.split(',')[0].split('=')[1]; + counter += Number(document.cookie.split(',')[1].split('=')[1]); } - } + document.cookie = "orderId=" + order + ",counter=" + counter; + document.getElementById("badge").innerText = counter; + console.log(document.cookie); + }; + buttonDiv.appendChild(buttonTag); + + mainContainer.appendChild(imageSectionDiv); + mainContainer.appendChild(productDetailsDiv); + productDetailsDiv.appendChild(h1); + productDetailsDiv.appendChild(h4); + productDetailsDiv.appendChild(detailsDiv); + detailsDiv.appendChild(h3DetailsDiv); + detailsDiv.appendChild(h3); + detailsDiv.appendChild(para); + productDetailsDiv.appendChild(productPreviewDiv); + productDetailsDiv.appendChild(quantityDiv); + productDetailsDiv.appendChild(buttonDiv); + + return mainContainer; } - -httpRequest.open('GET', 'https://5d76bf96515d1a0014085cf9.mockapi.io/product/'+id, true) -httpRequest.send()