Я сделал калькулятор ... Теперь математика вычисляется в javascript, а затем я использую эти идентификаторы, чтобы показать результат. Я хочу добавить в этот калькулятор круговую диаграмму и гистограмму, и там будет показано рассчитанное число. Я действительно новичок .. Ваша помощь очень ценится .. Очень скоро понадобится. Большое спасибо
FD FD с налогом Общие инвестиции ₹
<input class="amount-slider" name="realTotalInvestmentAmount" id="myTotalInvestmentAmount" type="range" step="500" min="500" max="150000" value="5000" />
<div id="amount-slider" class="steps">
<span class="tick" style="left: 0%;">|<br> <span
class="marker">0</span></span> <span
class="tick d-none d-sm-block" style="left: 12.5%;">|<br>
<span class="marker">18K</span></span> <span
class="tick" style="left: 25%;">|<br> <span
class="marker">37K</span></span> <span
class="tick d-none d-sm-block" style="left: 37.5%;">|<br>
<span class="marker">56K</span></span> <span
class="tick" style="left: 49.5%;">|<br> <span
class="marker">75K</span></span> <span
class="tick d-none d-sm-block" style="left: 62.8%;">|<br>
<span class="marker">95K</span></span> <span
class="tick" style="left: 75.3%;">|<br> <span
class="marker">1.14L</span></span> <span
class="tick d-none d-sm-block" style="left: 87.5%;">|<br>
<span class="marker">1.33L</span></span> <span
class="tick" style="left: 100%;">|<br> <span
class="marker">1.5L</span></span>
</div>
</div>
<div class="sip-calculator-year py-3">
<div class="row form-group lamount">
<label class="col-lg-4 control-label" id="amountLabel">Number of Years</label>
<div class="col-lg-6">
<div class="input-group">
<input class="form-control" name="Years" id="inputYears" type="text" value="10" min="1" max="25" step="1" oninput="showValYears(this.value)" />
<div class="input-group-append">
<span class="input-group-text" id="years">Yr</span>
</div>
</div>
</div>
</div>
<input class="year-slider" name="realYears" id="myYears" type="range" min="1" max="25" step="1" value="10">
<div id="year-slider" class="steps">
<span class="tick" style="left: 0%;">|<br> <span
class="marker">1</span></span><span class="tick"
style="left: 17.3%;">|<br> <span class="marker">5</span></span><span
class="tick" style="left: 37.7%;">|<br> <span
class="marker">10</span></span><span class="tick"
style="left: 58%;">|<br> <span class="marker">15</span></span><span
class="tick" style="left: 78.3%;">|<br> <span
class="marker">20</span></span><span
class="tick" style="left: 100%;">|<br> <span
class="marker">25</span></span>
</div>
</div>
<div class="sip-calculator-roi">
<div class="row form-group lamount">
<label class="col-lg-4 control-label" id="amountLabel">Rate of Interest</label>
<div class="col-lg-6">
<div class="input-group">
<input class="form-control" name="Retunrs" id="inputRoi" type="text" value="7" min="1" max="15" step="1" oninput="showValRoi(this.value)" / >
<div class="input-group-append">
<span class="input-group-text" id="roi">%</span>
</div>
</div>
</div>
</div>
<input class="roi-slider" name="realRoi" id="myRoi" type="range" min="1" max="15" step="1" value="7">
<div id="roi-slider" class="steps">
<span class="tick" style="left: 0%;">|<br> <span
class="marker">1</span></span> <span class="tick"
style="left: 15.3%;">|<br> <span class="marker">3</span></span>
<span class="tick" style="left: 36%;">|<br> <span
class="marker">6</span></span> <span class="tick"
style="left: 57%;">|<br> <span class="marker">9</span></span>
<span class="tick"
style="left: 77.5%;">|<br> <span class="marker">12</span></span>
<span class="tick" style="left: 100%;">|<br> <span
class="marker">15</span></span>
</div>
</div>
<div class="sip-calculator-roi pt-3">
<p>
<div id="tax_bracket" style="display: none;">
<label>Select Tax Bracket</label>
<div class="select">
<select name="slct" id="slct" oninput="showValTaxBracket(this.value)">
<!-- <option selected disabled>Choose an option</option> -->
<option selected value="0">0% (Less than 2.5 Lac)</option>
<option value="5">5% (2.5 - 5 Lac)</option>
<option value="20">20% (5 - 10 Lac)</option>
<option value="30">30% (10 Lac+)</option>
</select>
</div>
</div>
</p>
</div>
<p style="margin-top: 1em;font-size: 1.2em; background: #f1f2f3; border-radius: 7px; padding: 20px;">
<strong>Total Value:</strong>
<span id="totalValue" style="font-size: 1.2em;margin-left: 8px;"></span>
</p>
<!-- <div style="margin-top: 15px;"><img class="groww-logo" src="groww-logo-ed.png" target="_parent" align="right"/></div> -->
</div>
</form>
<script>
'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();
</script>