Skip to content
This repository was archived by the owner on Feb 4, 2023. It is now read-only.

Commit 736b552

Browse files
Merge pull request #69 from VanshSh/CashRegisterManager
Feat: CashRegisterManager Project
2 parents c5b263a + ff29405 commit 736b552

File tree

6 files changed

+303
-0
lines changed

6 files changed

+303
-0
lines changed
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
2+
# Cash Register Manager
3+
This application assists you in determining how many cash notes worth 2000,500,100,50,10,5,1 should be returned to the customer after the billing.
4+
5+
## Technologies Used
6+
- HTML
7+
- CSS
8+
- JavaScript
9+
- Netlify (Hosting)
10+
11+
## Check it out Here!
12+
## [Cash Register Manager](https://cashregistermanagerbyvansh.netlify.app/)
13+
14+
https://user-images.githubusercontent.com/81517284/126500255-53085c4a-f605-4305-b1bc-b64d7efa0af4.mp4
Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
const billAmount = document.getElementById("billAmt");
2+
const nextButton = document.getElementById("nextBtn");
3+
4+
const cashGivenInput = document.querySelector(".cashGivenInput");
5+
const cashGiven = document.getElementById("cashGiven");
6+
const submitButton = document.getElementById("submitBtn");
7+
8+
const errorMessage = document.querySelector(".errorMessage");
9+
10+
const changeReturn = document.querySelector(".changeReturn");
11+
12+
const output = document.getElementById("output");
13+
const noOfNotes = document.querySelectorAll(".noOfNotes");
14+
15+
const noteArray = [2000, 500, 100, 20, 10, 5, 1];
16+
17+
// Next Button
18+
nextButton.addEventListener(`click`, () => {
19+
hideError();
20+
21+
if (Number(billAmount.value) > 0) {
22+
nextButton.style.display = "none";
23+
cashGivenInput.style.display = "block";
24+
} else {
25+
showError("Enter Valid bill Amount");
26+
}
27+
});
28+
29+
// Submit Button
30+
submitButton.addEventListener(`click`, () => {
31+
32+
hideError();
33+
34+
let billAmountValue = Number(billAmount.value);
35+
let cashGivenValue = Number(cashGiven.value);
36+
37+
if (billAmountValue > 0 && cashGivenValue > 0) {
38+
39+
40+
// Invalid Inputs
41+
if (!Number.isInteger(cashGivenValue)) {
42+
showError("Enter Valid Amount in Cash Given Field");
43+
return;
44+
}
45+
if (billAmountValue > cashGivenValue) {
46+
showError(`Cash Given value is less than bill, Please Enter right Amount`);
47+
return;
48+
}
49+
50+
// Calculate No of notes
51+
calculateNotes(billAmountValue, cashGivenValue);
52+
} else {
53+
showError("Enter Valid Bill Amount");
54+
}
55+
56+
})
57+
58+
59+
// Functions
60+
61+
62+
// To calculate no of Notes
63+
let calculateNotes = (bill, cash) => {
64+
let returnAmount = cash - bill;
65+
66+
if (returnAmount < 1) {
67+
showError("No Amount to Return");
68+
return;
69+
}
70+
changeReturn.style.display = "block";
71+
72+
73+
for (let i = 0; i < noteArray.length; i++) {
74+
returnAmount = compare(returnAmount, noteArray[i], i);
75+
}
76+
77+
}
78+
79+
// How many Notes to return
80+
function compare(remainder, noteAmount, index) {
81+
82+
if (remainder >= noteAmount) {
83+
let notes = Math.floor(remainder / noteAmount);
84+
remainder = remainder - notes * noteAmount;
85+
noOfNotes[index].innerText = `${notes}`;
86+
}
87+
return remainder
88+
}
89+
90+
91+
// Error Message
92+
function showError(text) {
93+
errorMessage.style.display = "block";
94+
errorMessage.innerText = text;
95+
changeReturn.style.display = "none";
96+
}
97+
98+
// Hide Error
99+
function hideError() {
100+
errorMessage.style.display = "none";
101+
}
Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Cash Register</title>
9+
<link rel="stylesheet" href="./style.css">
10+
</head>
11+
12+
<body>
13+
14+
<section class="section">
15+
<h1>Cash Register Manager</h1>
16+
<p>Return the amount with Minimum number of notes.</p>
17+
18+
<!-- Enter Bill Amount -->
19+
<div class="label">Please Enter Bill Amount</div>
20+
<div>
21+
<input type="number" id="billAmt" placeholder=>
22+
<button id="nextBtn">Next</button>
23+
</div>
24+
25+
<!-- Enter Cash Given Amount -->
26+
27+
<div class="cashGivenInput">
28+
<div class="label">Cash Given:</div>
29+
<input type="number" id="cashGiven" >
30+
<button id="submitBtn">Submit</button>
31+
</div>
32+
33+
<!-- Error Message -->
34+
<div class="errorMessage"></div>
35+
36+
<!-- Return Amount -->
37+
<div class="changeReturn">
38+
<div class="label">Return Change:</div>
39+
<div id="output">
40+
41+
<!-- Tbale for notes -->
42+
<table>
43+
<tr>
44+
<th>No.of Notes</td>
45+
<td class="noOfNotes"></td>
46+
<td class="noOfNotes"></td>
47+
<td class="noOfNotes"></td>
48+
<td class="noOfNotes"></td>
49+
<td class="noOfNotes"></td>
50+
<td class="noOfNotes"></td>
51+
<td class="noOfNotes"></td>
52+
</tr>
53+
<tr>
54+
<th>Note</td>
55+
<td>2000</td>
56+
<td>500</td>
57+
<td>100</td>
58+
<td>20</td>
59+
<td>10</td>
60+
<td>5</td>
61+
<td>1</td>
62+
</tr>
63+
</table>
64+
</div>
65+
</div>
66+
67+
68+
</section>
69+
70+
<script src="app.js"></script>
71+
</body>
72+
73+
</html>
Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
:root {
2+
--purple: #643a71;
3+
--pink: #e3879e;
4+
}
5+
6+
* {
7+
font-family: spectral, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
8+
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
9+
box-sizing: border-box;
10+
}
11+
12+
body {
13+
background-color: antiquewhite;
14+
margin-bottom:5px ;
15+
}
16+
17+
.section {
18+
background-color: var(--purple);
19+
width: 100%;
20+
max-width: 500px;
21+
min-height: 300px;
22+
border-radius: 1.7rem 0;
23+
margin: auto;
24+
text-align: center;
25+
border: 4px solid black;
26+
}
27+
28+
/* Section h1,p */
29+
h1,
30+
p {
31+
color: var(--pink);
32+
font-size: 1.4rem;
33+
font-weight: bolder;
34+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
35+
}
36+
37+
/* Labels */
38+
.label {
39+
font-size: 1.6rem;
40+
color: wheat;
41+
font-weight: bold;
42+
padding: 1.5rem 1rem 0.5rem;
43+
}
44+
45+
input {
46+
width: 100%;
47+
padding: 1rem;
48+
text-align:center;
49+
font-weight: bolder;
50+
color:purple;
51+
font-size:28px;
52+
height: 50px;
53+
display: block;
54+
border: 3px solid palevioletred;
55+
border-radius: 7px;
56+
}
57+
58+
59+
60+
button {
61+
padding: 0.5rem 1rem;
62+
display: block;
63+
font-size: 1rem;
64+
margin: 1rem auto 0;
65+
font-weight:bold;
66+
border-radius: 50px;
67+
}
68+
69+
.cashGivenInput {
70+
display: none;
71+
}
72+
73+
.changeReturn {
74+
display: none;
75+
}
76+
77+
.errorMessage {
78+
padding: 1rem;
79+
color: yellow;
80+
font-size: 1.7rem;
81+
82+
}
83+
84+
#output {
85+
margin: 1rem 0;
86+
}
87+
88+
#output table,
89+
th,
90+
td {
91+
padding: 0.2rem;
92+
color: var(--purple);
93+
background-color: var(--pink);
94+
border: 2px solid var(--purple);
95+
border-collapse: collapse;
96+
}
97+
98+
.noOfNotes {
99+
background-color: whitesmoke;
100+
color: var(--pink);
101+
font-weight: bold;
102+
font-size: 20px;
103+
}
104+
105+
table {
106+
width: 100%;
107+
table-layout: fixed;
108+
109+
}
110+
111+
th,
112+
td {
113+
word-wrap: break-word;
114+
}
Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
https://cashregistermanagerbyvansh.netlify.app/
34 KB
Loading

0 commit comments

Comments
 (0)