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 new file mode 100644 index 0000000..7fbc979 --- /dev/null +++ b/Object.css @@ -0,0 +1,99 @@ +.red { + /* color: red; */ + 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; + 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; + font-size: 18px; + letter-spacing: 1px; +} + +#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..09ecef4 --- /dev/null +++ b/scripts/brown.js @@ -0,0 +1,171 @@ +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}

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

${Item.Item}

+

R ${Item.Price}

+

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

+

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

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

Total Non-dsc Price: R ${pricediscount}

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

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

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

${Item.Item}

+

R ${Item.Price}

+

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

+

${Item.Promo}

+
` + +}); + +/*=============================Discount 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 Pecent: ${totaldsc}%

+
` + + return totaldsc +},0); 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}

+
`; +}) + + + + +