From 002a61513ff54e9cfc414672e659fc800fbb525d Mon Sep 17 00:00:00 2001 From: BrownGitHlungwani Date: Mon, 27 Mar 2023 01:09:06 +0200 Subject: [PATCH 1/2] Created a reduce function to calculate discount and total amount. --- Object.css | 93 +++++++++++++++++++++++++ Object.html | 35 ++++++++++ brown.html | 29 ++++++++ scripts/brown.js | 170 ++++++++++++++++++++++++++++++++++++++++++++++ scripts/object.js | 139 +++++++++++++++++++++++++++++++++++++ 5 files changed, 466 insertions(+) create mode 100644 Object.css create mode 100644 Object.html create mode 100644 brown.html create mode 100644 scripts/brown.js create mode 100644 scripts/object.js diff --git a/Object.css b/Object.css new file mode 100644 index 0000000..e514f26 --- /dev/null +++ b/Object.css @@ -0,0 +1,93 @@ +.red { + /* color: red; */ + border: 1px solid red ; + padding: .5rem; + margin: .4rem; +} +.normal { + border: 1px solid blue; + margin: .5rem; + padding: .4rem; +} +#list { + display: flex; + flex-wrap: wrap; + justify-content: center ; + align-items: center; +} + +#discountlist { + display: flex; + flex-wrap: wrap; + justify-content: center ; + align-items: center; +} + +.discount{ + border: 1px solid aqua; + margin-top: 5rem; + margin: .5rem; + padding: .4rem; +} + +#totaldiscount { + display: flex; + flex-wrap: wrap; + justify-content: center ; + align-items: center; +} + +.totaldsc{ + border: 1px solid magenta; + margin-top: 5rem; + margin: .5rem; + padding: .4rem; + font-size: 18px; + letter-spacing: 1px; +} +#nondiscount { + display: flex; + flex-wrap: wrap; + justify-content: center ; + align-items: center; +} +.non-dsc{ + border: 1px solid darkorange; + margin-top: 5rem; + margin: .5rem; + padding: .4rem; + font-size: 18px; + letter-spacing: 1px; +} + +#promo { + display: flex; + flex-wrap: wrap; + justify-content: center ; + align-items: center; +} + +.plusdiscount{ + border: 1px solid lawngreen; + margin-top: 5rem; + margin: .5rem; + padding: .4rem; + font-size: 18px; + letter-spacing: 1px; +} + +#plusdsc { + display: flex; + flex-wrap: wrap; + justify-content: center ; + align-items: center; +} + +.total-dsc{ + border: 1px solid dimgrey; + margin-top: 5rem; + margin: .5rem; + padding: .4rem; + font-size: 18px; + letter-spacing: 1px; +} \ No newline at end of file diff --git a/Object.html b/Object.html new file mode 100644 index 0000000..47f1832 --- /dev/null +++ b/Object.html @@ -0,0 +1,35 @@ + + + + + + + + Learn About Object Class + + + +
+
+
+ + + \ No newline at end of file diff --git a/brown.html b/brown.html new file mode 100644 index 0000000..0782610 --- /dev/null +++ b/brown.html @@ -0,0 +1,29 @@ + + + + + + + + LESSON1 + + + + +

+ +
+ +
+ +
+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/scripts/brown.js b/scripts/brown.js new file mode 100644 index 0000000..a51ffa1 --- /dev/null +++ b/scripts/brown.js @@ -0,0 +1,170 @@ +const Basket = [ + { + Item: "Bread", + Price: 30, + discount: 1, + Promo: true, + }, + { + Item: "Rice", + Price: 200, + discount: 0, + Promo: false, + }, + { + Item: "Meat", + Price: 340, + discount: 5, + Promo: false, + }, + { + Item: "Bri", + Price: 340, + discount: 15, + Promo: true, + }, + { + Item: "Chicken", + Price: 140, + discount: 0, + Promo: true, + }, + { + Item: "Soap", + Price: 100, + discount: 5, + Promo: false, + }, + { + Item: "Cream", + Price: 70, + discount: 2, + Promo: true, + }, + { + Item: "Milk", + Price: 80, + discount: 0, + Promo: false, + }, + { + Item: "Bin", + Price: 200, + discount: 0, + Promo: true, + }, + { + Item: "Plastic", + Price: 100, + discount: 3, + Promo: false, + }, + { + Item: "Cereal", + Price: 75, + discount: 2, + Promo: true, + }, +]; + + +const basketDiv = document.getElementById("list"); + +Basket.map((Item)=> { + // console.log(value) + basketDiv.innerHTML += `
+

${Item.Item}

+

${Item.Price}

+

${Item.discount}

+

${Item.Promo}

+
`; +}); + +/*===================================================================*/ + +const basketDiv2 = document.getElementById("discountlist"); + +Basket.map((Item) => { + + Item.discount == 0 ? Item.Item: + + basketDiv2.innerHTML += `
+

${Item.Item}

+

${Item.Price}

+

Discount: ${Item.Price * Item.discount/100}

+

Total: ${Item.Price - Item.Price * Item.discount/100}

+
` + +}); + +/*===================================================================*/ + + +const basketDiv3 = document.getElementById("totaldiscount"); + +const shoping = Basket.reduce((pricediscount, totalprice)=>{ + + totalprice.discount == 0? totalprice.Item: + + pricediscount += totalprice.Price; + + basketDiv3.innerHTML = `
+

Total Non-dsc Price: ${pricediscount}

+
` + + return pricediscount +},0); + +/*===================================================================*/ + +const basketDiv4 = document.getElementById("nondiscount"); + +const shoping2 = Basket.reduce((pricenodsc, totalprice)=>{ + + totalprice.discount == 0? totalprice.Item: + + pricenodsc += totalprice.Price * totalprice.discount/100; + + basketDiv4.innerHTML = `
+

Total Discount Price: ${pricenodsc}

+
` + + return pricenodsc +},0); + +/*===================================================================*/ + +const basketDiv5 = document.getElementById("promo"); + +Basket.map((Item) => { + + Item.Promo == 0 ? Item.Item: + + basketDiv5.innerHTML += `
+

${Item.Item}

+

${Item.Price}

+

Plus discount: ${Item.discount + 10}

+

${Item.Promo}

+
` + +}); + +/*===================================================================*/ + +const basketDiv6 = document.getElementById("plusdsc"); + +const shoping3 = Basket.reduce((totaldsc, totalprice)=>{ + + totalprice.Promo == false? totalprice.Item: + + totaldsc += totalprice.discount + 10; + + basketDiv6.innerHTML = `
+

Total dsc Price: ${totaldsc}

+
` + + return totaldsc +},0); +console.log(shoping3); \ No newline at end of file diff --git a/scripts/object.js b/scripts/object.js new file mode 100644 index 0000000..b7b1ada --- /dev/null +++ b/scripts/object.js @@ -0,0 +1,139 @@ +const firstEvent = events[0] + +// get keys from firstEvent - key:value pairs +const keys = Object.keys(firstEvent); +// console.log(keys) +keys.map(key=>{ + // console.log(key) +}); +// for loops, forEach, map, +for(let i =0; i{ +}); +const printData = (message) => { + document.getElementById("showData").innerHTML += `

${message}

`; +}; + +for(let a in keys) { + a%2? printData(`This has an even index: ${keys[a]}`): printData(`This has an Old Index: ${keys[a]}`) +} +keys.filter(key=> { + // key === "price" ? printData("Its A Price!"): printData(`Thats Something Else: ${key}!`); +}) + +const basketItems = [ + { + promo: true, + discount: 1, + price: 30, + item: "bread" + }, + + { + promo: true, + discount: 0, + price: 200, + item:"rice" + }, + + { + promo: true, + discount: 5, + price: 340, + item: "meat" + }, + + { + promo: true, + discount: 15, + price: 340, + item: "brai" + }, + + { + promo: true, + discount: 0, + price: 140, + item: "chicken" + }, + + { + promo: true, + discount: 5, + price: 100, + item: "soap" + }, + + { + promo: true, + discount: 2, + price: 70, + item: "cremora" + }, + + { + promo: true, + discount: 0, + price: 80, + item:"milk" + }, + { + promo: true, + discount: 0, + price: 200, + item: "bin" + }, + { + promo: true, + discount: 1, + price: 100, + item: "plastic" + }, + { + promo: true, + discount: 5, + price: 75, + item: "bin plastic" + }, +]; + +const basketDiv = document.getElementById("basket"); + +const name = "Kagisho Pitsi".split(" "); // type array ['Kagisho', "Pitsi"] + +const [item1,item2,item3,item4, item5, item6]=basketItems + +const {discount, price, item, promo} = item2 + + +const [name1, name2] = name // object destructuring + + +basketItems.map((item)=> { + // console.log(value) + basketDiv.innerHTML += `
+

${item.item}

+

${item.price}

+

${item.discount}

+

${item.promo}

+
`; +}) + + + + + From 0471f0d3a9060d33b8a6274fff865c364c0870fd Mon Sep 17 00:00:00 2001 From: BrownGitHlungwani Date: Mon, 27 Mar 2023 08:10:34 +0200 Subject: [PATCH 2/2] A function to calculate total discount --- .vscode/settings.json | 5 +++++ Object.css | 6 ++++++ scripts/brown.js | 37 +++++++++++++++++++------------------ 3 files changed, 30 insertions(+), 18 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..b242572 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "githubPullRequests.ignoredPullRequestBranches": [ + "main" + ] +} \ No newline at end of file diff --git a/Object.css b/Object.css index e514f26..7fbc979 100644 --- a/Object.css +++ b/Object.css @@ -3,11 +3,15 @@ border: 1px solid red ; padding: .5rem; margin: .4rem; + font-size: 18px; + letter-spacing: 1px; } .normal { border: 1px solid blue; margin: .5rem; padding: .4rem; + font-size: 18px; + letter-spacing: 1px; } #list { display: flex; @@ -28,6 +32,8 @@ margin-top: 5rem; margin: .5rem; padding: .4rem; + font-size: 18px; + letter-spacing: 1px; } #totaldiscount { diff --git a/scripts/brown.js b/scripts/brown.js index a51ffa1..09ecef4 100644 --- a/scripts/brown.js +++ b/scripts/brown.js @@ -82,7 +82,7 @@ Basket.map((Item)=> { `; }); -/*===================================================================*/ +/*==============================Discount Items=====================================*/ const basketDiv2 = document.getElementById("discountlist"); @@ -92,17 +92,17 @@ Basket.map((Item) => { basketDiv2.innerHTML += `

${Item.Item}

-

${Item.Price}

+

R ${Item.Price}

Discount: ${Item.Price * Item.discount/100}

-

Total: ${Item.Price - Item.Price * Item.discount/100}

+

Total: R ${Item.Price - Item.Price * Item.discount/100}

` }); -/*===================================================================*/ +/*=============================Payment without discount======================================*/ -const basketDiv3 = document.getElementById("totaldiscount"); +const basketDiv3 = document.getElementById("nondiscount"); const shoping = Basket.reduce((pricediscount, totalprice)=>{ @@ -111,30 +111,32 @@ const shoping = Basket.reduce((pricediscount, totalprice)=>{ pricediscount += totalprice.Price; basketDiv3.innerHTML = `
-

Total Non-dsc Price: ${pricediscount}

+

Total Non-dsc Price: R ${pricediscount}

` return pricediscount },0); -/*===================================================================*/ +/*=========================Payment with discount==========================================*/ -const basketDiv4 = document.getElementById("nondiscount"); +const basketDiv4 = document.getElementById("totaldiscount"); -const shoping2 = Basket.reduce((pricenodsc, totalprice)=>{ +const shoping2 = Basket.reduce((pricedsc, totalprice)=>{ + + const discount = totalprice.Price - totalprice.Price * totalprice.discount/100; totalprice.discount == 0? totalprice.Item: - pricenodsc += totalprice.Price * totalprice.discount/100; + pricedsc += discount; basketDiv4.innerHTML = `
-

Total Discount Price: ${pricenodsc}

+

Total Discount Price: R ${parseFloat(pricedsc.toFixed(2))}

` - return pricenodsc + return pricedsc },0); -/*===================================================================*/ +/*=============================Items with promo ======================================*/ const basketDiv5 = document.getElementById("promo"); @@ -144,14 +146,14 @@ Basket.map((Item) => { basketDiv5.innerHTML += `

${Item.Item}

-

${Item.Price}

-

Plus discount: ${Item.discount + 10}

+

R ${Item.Price}

+

Plus discount: ${Item.discount + 10}%

${Item.Promo}

` }); -/*===================================================================*/ +/*=============================Discount Promo ======================================*/ const basketDiv6 = document.getElementById("plusdsc"); @@ -162,9 +164,8 @@ const shoping3 = Basket.reduce((totaldsc, totalprice)=>{ totaldsc += totalprice.discount + 10; basketDiv6.innerHTML = `
-

Total dsc Price: ${totaldsc}

+

Total dsc Pecent: ${totaldsc}%

` return totaldsc },0); -console.log(shoping3); \ No newline at end of file