Skip to content

Commit dede8ea

Browse files
manuelnongbamanuelnongba
authored
E-Levy calculator (devvsakib#40)
* E-Levy calculator E-Levy Calculator to calculate money transfer charges for telecoms in Ghana. * Update script.js * Update script.js
1 parent 90dbdb4 commit dede8ea

File tree

4 files changed

+189
-0
lines changed

4 files changed

+189
-0
lines changed

‎E-Levy-Calculator/index.html‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Document</title>
8+
<link
9+
rel="stylesheet"
10+
href="https://fonts.googleapis.com/css?family=Poppins"
11+
/>
12+
<link rel="stylesheet" href="style.css" />
13+
<script defer src="script.js"></script>
14+
</head>
15+
<body>
16+
<div class="container">
17+
<h1 class="header">
18+
<img class="img" src="logo.jpeg" alt="" />E-LEVY CALCULATOR
19+
</h1>
20+
21+
<div class="form__row">
22+
<select class="form__input--type">
23+
<option value="select">Select Network</option>
24+
<option value="vodafone">Vodafone</option>
25+
<option value="MTN">MTN</option>
26+
</select>
27+
</div>
28+
</div>
29+
<div class="network__voda hidden">
30+
<div>
31+
<input class="input" type="number" name="amount" id="cash" /><br />
32+
</div>
33+
<div class="total-display">
34+
<b> Total Amount:</b> <br />
35+
<b class="result"></b><br />
36+
E-Levy Fee:
37+
<b class="result-elevy"></b><br />
38+
Momo Fee:
39+
<b class="network"></b>
40+
</div>
41+
</div>
42+
<!-- <div class="network__mtn hidden">
43+
<div>
44+
<form action="">
45+
<input class="input-m" type="number" name="amount" id="cash" /><br />
46+
</form>
47+
</div>
48+
<div class="total-display-m">
49+
<b> Total Amount:</b> <br>
50+
<b class="result-m"></b>
51+
E-Levy Fee: <br>
52+
<b class="result-elevy-m"></b>
53+
Momo Fee: <br>
54+
<b class="network-m"></b>
55+
</div> -->
56+
</body>
57+
</html>

‎E-Levy-Calculator/logo.jpeg‎

21.8 KB
Loading

‎E-Levy-Calculator/script.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
'use-strict';
2+
const input = document.querySelector('.input');
3+
const displayTotal = document.querySelector('.result');
4+
const resultElevy = document.querySelector('.result-elevy');
5+
const networkFee = document.querySelector('.network');
6+
const inputType = document.querySelector('.form__input--type');
7+
const network = document.querySelector('.network__voda');
8+
const resultField = document.querySelector('.total-display');
9+
10+
displayTotal.textContent = `GH¢ ${0}`;
11+
networkFee.textContent = `GH¢ ${0}`;
12+
13+
input.addEventListener('input', (e) => {
14+
e.preventDefault();
15+
const amount = Number(input.value);
16+
if (inputType.value === 'MTN') {
17+
if (amount > 50 && amount <= 1000) {
18+
const momoCharge = amount * (0.75 / 100);
19+
networkFee.textContent = `GH¢ ${momoCharge.toFixed(2)}`;
20+
}
21+
if (amount <= 50) networkFee.textContent = `GH¢ ${0.38}`;
22+
if (amount > 1000) networkFee.textContent = `GH¢ ${7.5}`;
23+
}
24+
if (amount > 100) {
25+
const elevy = amount * 0.015;
26+
const result = elevy + amount;
27+
displayTotal.textContent = `GH¢ ${result.toFixed(2)}`;
28+
resultElevy.textContent = `GH¢ ${elevy.toFixed(2)}`;
29+
} else {
30+
displayTotal.textContent = `GH¢ ${amount}`;
31+
resultElevy.textContent = `GH¢ ${0}`;
32+
}
33+
});
34+
35+
inputType.addEventListener('change', (e) => {
36+
e.preventDefault();
37+
if (inputType.value === 'vodafone') {
38+
input.value = '';
39+
displayTotal.textContent = `GH¢ ${0}`;
40+
resultElevy.textContent = `GH¢ ${0}`;
41+
networkFee.textContent = `GH¢ ${0}`;
42+
network.classList.remove('hidden');
43+
inputType.style.border = '3.5px solid white';
44+
input.style.border = '5px solid white';
45+
resultField.style.border = '3.5px solid white';
46+
document.body.style.backgroundColor = 'rgb(228, 44, 44)';
47+
}
48+
49+
if (inputType.value === 'MTN') {
50+
input.value = '';
51+
displayTotal.textContent = `GH¢ ${0}`;
52+
resultElevy.textContent = `GH¢ ${0}`;
53+
network.classList.remove('hidden');
54+
inputType.style.border = '3.5px solid rgb(10, 66, 110)';
55+
input.style.border = '3.5px solid rgb(10, 66, 110)';
56+
resultField.style.border = '3.5px solid rgb(10, 66, 110)';
57+
document.body.style.backgroundColor = 'rgb(234, 206, 9)';
58+
}
59+
if (inputType.value === 'select') {
60+
document.querySelector('.network__voda').classList.add('hidden');
61+
document.body.style.backgroundColor = 'rgb(159, 154, 154)';
62+
}
63+
});

‎E-Levy-Calculator/style.css‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
body {
2+
font-family: 'Poppins';
3+
text-align: center;
4+
background-color: rgb(159, 154, 154);
5+
color: rgb(45, 45, 45);
6+
}
7+
.input {
8+
height: 30px;
9+
width: 300px;
10+
padding: 10px;
11+
font-size: x-large;
12+
border: 5px solid black;
13+
border-radius: 5px;
14+
margin-top: 100px;
15+
margin-bottom: 100px;
16+
}
17+
18+
.result {
19+
font-size: xx-large;
20+
}
21+
22+
.total-display {
23+
background-color: rgb(192, 192, 192);
24+
margin: 20px;
25+
margin-right: 35%;
26+
margin-left: 25%;
27+
font-size: large;
28+
border-radius: 3px;
29+
height: 200px;
30+
width: 700px;
31+
border: 1px solid black;
32+
color: black;
33+
}
34+
35+
.header {
36+
font-size: xx-large;
37+
margin-bottom: 20px;
38+
}
39+
40+
.form__row {
41+
margin: 20px;
42+
padding: 20px;
43+
}
44+
.form__input--type {
45+
border-radius: 5px;
46+
padding: 1rem 1rem;
47+
width: 20%;
48+
border: 3.5px solid black;
49+
}
50+
.form__label {
51+
font-size: xx-large;
52+
}
53+
.hidden {
54+
display: none;
55+
}
56+
.result-elevy {
57+
font-size: large;
58+
}
59+
60+
.network {
61+
font-size: large;
62+
}
63+
.img {
64+
width: 60px;
65+
height: 30px;
66+
border-radius: 5px;
67+
margin-right: 15px;
68+
margin-top: 5px;
69+
}

0 commit comments

Comments
 (0)