const hand = document.getElementById('hand');
const bank = document.getElementById('bank');
const investment = document.getElementById('investment');
const owed = document.getElementById('owed');
const debt = document.getElementById('debt');
const misc = document.getElementById('misc');
const net = document.getElementById('net');
const form = document.getElementById('form');
const zakat = document.getElementById('zakat');
const showError = (tagName, message) => {
const formControl = tagName.parentElement;
formControl.className = 'form-control error';
const small = formControl.querySelector('small');
small.innerText = message;
};
const showSuccess = (input) => {
const formControl = input.parentElement;
formControl.className = 'form-control success';
};
const handleSubmit = (e) => {
if (hand.value == '') {
showError(hand, 'Cash at hand is Required.');
} else {
showSuccess(hand);
}
if (bank.value == '') {
showError(bank, 'Cash in Bank is Required.');
} else {
showSuccess(bank);
}
if (investment.value == '') {
showError(investment, 'Value of Investment is Required.');
} else {
showSuccess(investment);
}
if (owed.value == '') {
showError(owed, 'Cash at hand is Required.');
} else {
showSuccess(owed);
}
if (debt.value == '') {
showError(debt, 'Money owed is Required.');
} else {
showSuccess(debt);
}
if (misc.value == '') {
showError(misc, 'Miscellaneous expenses Required.');
} else {
showSuccess(misc);
}
const income =
Number(hand.value) +
Number(bank.value) +
Number(investment.value) +
Number(owed.value);
const liabilities = Number(debt.value) + Number(misc.value);
const netIncome = income - liabilities;
net.value = netIncome;
if (netIncome < 136640) {
zakat.innerHTML = "You do not meet the minimum requirement to pay Zakat for this Year"
}
else {
const zakatValue = 0.025 * netIncome;
zakat.innerHTML = "You should pay " + "₦" + Math.ceil(zakatValue) + " in zakat for the year."
}
e.preventDefault();
};
form.addEventListener('submit', handleSubmit);
* {
box-sizing: border-box;
}
body {
font-family: 'Rubik', sans-serif;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: left;
}
.container h6 {
text-align: left;
}
label {
display: block;
margin-bottom: 5px;
}
.form h2 {
color: hsl(0, 94%, 66%);
}
input {
padding: 15px;
text-align: center;
margin-bottom: 20px;
width: 150%;
border-radius: 4px;
}
input:focus {
outline: 0
}
.bottom {
margin-left: -120px;
}
.top h5{
margin-bottom: -10px;
}
.top h1 {
color: hsl(0, 94%, 66%);
font-weight: 900;
}
button{
width: 150%;
padding: 10px;
background-color: hsl(0, 94%, 66%);
color: white;
border-radius: 5px;
}
button:focus{
outline: 0;
}
.form-control {
position: relative;
}
.form-control.success input {
border-color: #2ecc71;
}
.form-control.error input {
border-color: #e74373;
}
.form-control small {
color: #e74373;
position: absolute;
bottom: 0;
left:0;
margin-bottom: 5px;
visibility: hidden;
}
.form-control.error small {
visibility: visible;
}
footer p {
font-size: 8px;
text-align: center;
}
#zakat {
width: 250px
}
@media screen and (max-width: 600px) {
.top h1 {
margin-top: 50px;
}
.container {
width: 400px
}
input {
padding: 15px;
text-align: center;
margin-bottom: 20px;
width: 120%;
border-radius: 4px;
}
footer {
margin-bottom: 100px;
}
button{
width: 120%
}
Zakat Calculator