Skip to content

Main #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
BrownGitHlungwani wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Main #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
002a615
Created a reduce function to calculate discount and total amount.
BrownGitHlungwani Mar 26, 2023
0471f0d
A function to calculate total discount
BrownGitHlungwani Mar 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"githubPullRequests.ignoredPullRequestBranches": [
"main"
]
}
99 changes: 99 additions & 0 deletions Object.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
35 changes: 35 additions & 0 deletions Object.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./scripts/events.js"></script>
<title>Learn About Object Class</title>
<style>
.red {
/* color: red; */
border: 1px solid red ;
padding: .5rem;
margin: .4rem;
}
.normal {
border: 1px solid blue;
margin: .5rem;
padding: .4rem;
}
#basket {
display: flex;
flex-wrap: wrap;
justify-content: center ;
align-items: center;
}
</style>
</head>
<body>
<div id="showData"></div>
<hr>
<div id="basket"></div>
<script src="./scripts/object.js"></script>
</body>
</html>
29 changes: 29 additions & 0 deletions brown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>LESSON1</title>
<link rel="stylesheet" href="Object.css"/>
</head>

<body>
<div id="list"></div><br>

<div id="discountlist"></div>

<div id="totaldiscount"></div>

<div id="nondiscount"></div>

<div id="promo"></div>

<div id="plusdsc"></div>


<script src="scripts/brown.js"></script>
</body>

</html>
171 changes: 171 additions & 0 deletions scripts/brown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 += `<div class="${
Item.Promo && Item.discount > 0 ? "red" : "normal"
}">
<p>${Item.Item}</p>
<p>${Item.Price}</p>
<p>${Item.discount}</p>
<p>${Item.Promo}</p>
</div>`;
});

/*==============================Discount Items=====================================*/

const basketDiv2 = document.getElementById("discountlist");

Basket.map((Item) => {

Item.discount == 0 ? Item.Item:

basketDiv2.innerHTML += `<div class='discount'>
<p>${Item.Item}</p>
<p> R ${Item.Price}</p>
<p>Discount: ${Item.Price * Item.discount/100}</p>
<p>Total: R ${Item.Price - Item.Price * Item.discount/100}</p>
</div>`

});

/*=============================Payment without discount======================================*/


const basketDiv3 = document.getElementById("nondiscount");

const shoping = Basket.reduce((pricediscount, totalprice)=>{

totalprice.discount == 0? totalprice.Item:

pricediscount += totalprice.Price;

basketDiv3.innerHTML = `<div class="totaldsc">
<p>Total Non-dsc Price: R ${pricediscount}</p>
</div>`

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 = `<div class="non-dsc">
<p>Total Discount Price: R ${parseFloat(pricedsc.toFixed(2))}</p>
</div>`

return pricedsc
},0);

/*=============================Items with promo ======================================*/

const basketDiv5 = document.getElementById("promo");

Basket.map((Item) => {

Item.Promo == 0 ? Item.Item:

basketDiv5.innerHTML += `<div class='plusdiscount'>
<p>${Item.Item}</p>
<p>R ${Item.Price}</p>
<p>Plus discount: ${Item.discount + 10}%</p>
<p>${Item.Promo}</p>
</div>`

});

/*=============================Discount Promo ======================================*/

const basketDiv6 = document.getElementById("plusdsc");

const shoping3 = Basket.reduce((totaldsc, totalprice)=>{

totalprice.Promo == false? totalprice.Item:

totaldsc += totalprice.discount + 10;

basketDiv6.innerHTML = `<div class="total-dsc">
<p>Total dsc Pecent: ${totaldsc}%</p>
</div>`

return totaldsc
},0);
Loading