:root {
–background-color: #ffffff;
–vigo-color: #2BBD3E;
–slider-color: #2BBD3E;
–input-number-color: #e7e5e5b7;
}
* {
box-sizing: border-box;
}
.calcform{
display: flex;
justify-content: center;
align-items: center;
color: #222;
}
#amountLabel {
width: 210px;
;
}
.sip-calculator {
border: 5px solid #ffffff;
-moz-box-shadow: 0px 0px 5px hsla(12, 2%, 55%, 0.527);
-webkit-box-shadow: 0px 0px 5px hsl(15, 2%, 55%);
box-shadow: 0px 0px 10px hsl(0, 0%, 73.9%);
padding: 3em;
margin: 1em;
width: 530px;
background-color: #ffffff;
}
.sip-calculator-amount,
.sip-calculator-year,
.sip-calculator-roi {
margin-bottom: 2.2em;
width: 100%;
}
.amount-slider,.year-slider,.roi-slider {
width: 100%;
height: 2px;
border-radius: 10px;
background: var(–slider-color);
outline: none;
}
input[type=range] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-ms-track {
width: 100%;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 2.5px solid var(–vigo-color);
height: 20px;
width: 20px;
border-radius: 40px;
background: white;
cursor: pointer;
margin-top: 0px;
}
input[type=range]::-moz-range-thumb {
border: 2.5px solid var(–vigo-color);
height: 20px;
width: 20px;
border-radius: 40px;
background: white;
cursor: pointer;
}
input[type=range]::-ms-thumb {
border: 2.5px solid var(–vigo-color);
height: 20px;
width: 20px;
border-radius: 40px;
background: white;
cursor: pointer;
}
input[type=number] {
-moz-appearance: none;
-webkit-appearance: none;
cursor: pointer;
background: var(–input-number-color);
border-style: none;
height: 30px;
margin-left: 20px;
margin-right: 10px;
text-align: right;
padding-right: 5px;
font-family: ‘Roboto’, sans-serif;
font-size: 1.5em;
border-radius: 4px;
/* float: right; */
}
input[type=number]:focus {
outline: none;
border: 1px solid #3197EE;
}
/* For radio */
.radio {
margin: 0.5rem;
text-align: center;
}
.radio input[type=”radio”] {
position: absolute;
opacity: 0;
}
.radio input[type=”radio”]+.radio-label:before {
content: ”;
background: #f4f4f4;
border-radius: 100%;
border: 2px solid #2BBD3E;
display: inline-block;
width: 1.4em;
height: 1.4em;
position: relative;
top: -0.2em;
margin-right: 1em;
vertical-align: top;
cursor: pointer;
text-align: center;
transition: all 250ms ease;
}
.radio input[type=”radio”]:checked+.radio-label:before {
background-color: #2BBD3E;
box-shadow: inset 0 0 0 4px #f4f4f4;
}
.radio input[type=”radio”]:focus+.radio-label:before {
outline: none;
border-color: #3197EE;
}
.radio input[type=”radio”]:disabled+.radio-label:before {
box-shadow: inset 0 0 0 4px #f4f4f4;
border-color: #b4b4b4;
background: #b4b4b4;
}
.radio input[type=”radio”]+.radio-label:empty:before {
margin-right: 0;
}
/* Radio End */
@media only screen and (max-width: 325px) {
.sip-calculator {
height: 560px;
}
h1 {
font-size: 1.5em;
}
}
@media (max-width: 576px) {
body {
font-size: smaller;
}
.sip-calculator {
width: 100%;
padding: 2em;
margin: .1em;
}
}
/*Dropdown Menu*/
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background: #f1f2f3;
background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
display: none;
}
/* Custom Select */
.select {
position: relative;
display: flex;
width: 100%;
height: 3em;
line-height: 3;
background: #f1f2f3;
overflow: hidden;
border-radius: .25em;
margin-top: 10px;
margin-bottom: 10px;
}
select {
flex: 1;
padding: 0 1em;
color: #222;
cursor: pointer;
}
/* Arrow */
.select::after {
content: ’25BC’;
position: absolute;
top: 0;
right: 0;
padding: 0 1em;
background: #2BBD3E;
cursor: pointer;
pointer-events: none;
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
}
/* Transition */
.select:hover::after {
color: #FFF900;
}
.hide {
display: none !important;
FD Calculator
<!– Choose an option –>
0% (Less than 2.5 Lac)
5% (2.5 – 5 Lac)
20% (5 – 10 Lac)
30% (10 Lac+)
Total Value:
‘use strict’;
var amountSlider = document.getElementById(“myTotalInvestmentAmount”);
var amountOutput = document.getElementById(“inputTotalInvestment”);
var roiSlider = document.getElementById(“myRoi”);
var roiOutput = document.getElementById(“inputRoi”);
var yearSlider = document.getElementById(“myYears”);
var yearOutput = document.getElementById(“inputYears”);
var taxBracket = document.getElementById(“slct”);
amountOutput.innerHTML = amountSlider.value;
roiOutput.innerHTML = roiSlider.value;
yearOutput.innerHTML = yearSlider.value;
amountSlider.oninput = function() {
amountOutput.innerHTML = this.value;
}
roiSlider.oninput = function() {
roiOutput.innerHTML = this.value;
}
yearSlider.oninput = function() {
yearOutput.innerHTML = this.value;
}
function showTotalInvestment(newVal) {
amountSlider.value = newVal;
calculateIt();
};
function showValRoi(newVal) {
roiSlider.value = newVal;
calculateIt();
};
function showValYears(newVal) {
yearSlider.value = newVal;
calculateIt();
};
function showValTaxBracket(newVal) {
var taxBracketValue = taxBracket.value;
calculateIt();
}
amountSlider.addEventListener(“input”, updateValueAmount);
roiSlider.addEventListener(“input”, updateValueRoi);
yearSlider.addEventListener(“input”, updateValueYears);
function updateValueAmount(e) {
amountOutput.value = e.srcElement.value;
calculateIt();
}
function updateValueRoi(e) {
roiOutput.value = e.srcElement.value;
calculateIt();
}
function updateValueYears(e) {
yearOutput.value = e.srcElement.value;
calculateIt();
}
var calculatorMode = ‘fd’;
var heading = document.getElementById(“heading”);
var amountLabel = document.getElementById(“amountLabel”);
function changeMode(mode) {
calculatorMode = mode;
heading.innerHTML = mode === ‘fd’ ? ‘FD Calculator’ : ‘FD with Tax Calculator’;
if (mode === ‘fd’) {
document.getElementById(“tax_bracket”).style.display = “none”;
} else {
document.getElementById(“tax_bracket”).style.display = “unset”;
}
return calculatorMode;
}
function calculateIt() {
var totalValueOutput = document.getElementById(“totalValue”);
var totalInvestmentValue = document.sipForm.realTotalInvestmentAmount.value; //fieldname2
var rateOfInterestValue = document.sipForm.realRoi.value; //fieldname6
var numberofYearsValue = document.sipForm.realYears.value; //fieldname3
var taxBracketValue = taxBracket.value; //fieldname7
var fd = Math.round(totalInvestmentValue * (Math.pow((1 + rateOfInterestValue / 400), 4 * numberofYearsValue)));
var fdWithTax = Math.round(totalInvestmentValue * (Math.pow((1 + rateOfInterestValue * (1 – taxBracketValue / 100) / 400), 4 * numberofYearsValue)));
var finalOutput = calculatorMode === ‘fd’ ? fd : fdWithTax;
totalValueOutput.innerHTML = “Rs. ” + finalOutput.toLocaleString();
}
calculateIt();