MyFundSIP - Index
.credit {
position: absolute;
bottom: 5px;
right: 10px;
opacity: 0.8;
font-size: 12px;
}
#myChart {
max-height: 460px;
}
.chartDiv {
max-height: 493px;
background-color: #eee;
display: flex;
align-items: center;
padding: 10px;
position: relative;
font-size: 18px;
letter-spacing: 1px;
}
.display_result {
font-size: 22px;
color: #4895ef;
}
.form-range {
width: inherit !important;
margin: 10px 0;
}
.text_input {
height: 40px;
float: right;
outline: 0;
border: 1px solid #ccc;
}
.outer_div {
min-height: 100px;
background-color: #eee;
padding: 20px;
margin-bottom: 2px;
}
.outer_div2 {
padding: 20px 70px 20px 30px;
}
.hide-span {
opacity: 0;
z-index: -9;
}
.inner_div {
/* border-left: 5px solid #0ebeff; */
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding-left: 10px;
position: relative;
}
.row {
--bs-gutter-x: 0 !important;
}
.slider_box {
/* position: absolute;
right: 20px;
align-items: center; */
}
input[type="range"]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #fff;
height: 30px;
width: 15px;
border-radius: 3px;
background: #4895ef;
cursor: pointer;
margin-top: -10px;
/* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
box-shadow: 0px 0px 0px #000000, 0px 0px 3px #0d0d0d;
outline: 0;
}
#showValue,
#showValue2, #showValue3 {
position: absolute;
border: 1px solid #9ccaff;
width: 40px;
height: 30px;
background: #ffffff;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #00a1ff;
top: 45px;
left: 0px;
}
#showAmps {
}
#showValue:before, #showValue2:before, #showValue3:before {
content: '';
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid transparent;
border-bottom: 7px solid #4895ef;
height: 0px;
width: 0px;
position: absolute;
/* left: 0; */
top: -12px;
}
.thisthis {
font-weight: 300;
font-size: 11px;
float: right;
line-height: 2;
}
.text-center {
text-align: center;
padding: 10px 0;
}
a.control_center {
position: absolute;
top: 10%;
bottom: -42px;
left: 49%;
display: flex;
/*z-index: 999;
display: block;*/
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #0047AC;
/*background-color: #FFFC33;*/
color: #fff;
/*color: #0047AC;*/
/*text-decoration: none;*/
font-weight: 600;
font-size: 20px;
opacity: 0.8;
/*cursor: pointer;*/
/*padding: 5px;*/
border: none;
/*cursor: pointer;*/
border-radius: 5px;
justify-content: center;
align-items: center;
/*text-align: center;*/
margin: auto;
/*display: inline-flex !important;*/
width: auto;
height: 50px;
/*align-self:center !important;*/
padding: 0px 8px 0px 8px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 850px !important;
margin: 1.75rem auto;
}
}
@media only screen and (max-width: 500px) {
.text_input {
margin-left: 10px;
font-size: 18px;
padding: 5px;
width: 100px;
}
#textValue, #textValue2 {
font-size: 16px;
padding: 2px;
}
.outer_div2, .outer_div {
padding: 10px;
}
.inner_div {
margin: 0;
}
.slider_box {
padding-right: 0;
}
.inner_div {
padding: 0;
}
.thisthis {
width: 95px;
line-height: 2;
}
.result_text {
font-size: 12px;
}
.display_result {
font-size: 16px;
}
}
@media only screen and (max-width: 300px) {
.result_text {
font-size: 10px;
}
.display_result {
font-size: 13px;
}
#textValue, #textValue2, #textValue3 {
font-size: 12px;
}
.col-4 {
font-size: 12px;
}
}
@media (min-width: 992px) {
.modal-lg, .modal-xl {
max-width: 1200px !important;
}
}
Future Requirement for Child Education(₹)
10
Expected Rate of Return..????(%)
1
₹0.83
You Need to Invest Per Month
//Child Marriage calculator,Vacation,child edu.
//Rate= 15;Futurereq=500000;year=10
//console.log(formulajs.PMT((15 / 100) / 12, 10 * 12, 0, -500000, 0));
//console.log(formulajs.PMT((15 / 100) / 12, 10 * 12, 0, -showValue, 0));
$(document).ready(function () {
localStorage.setItem('ChildModal', '#ChildEdModal');
var modalId = localStorage.getItem('ChildModal');
if(modalId != null){
$(modalId).modal("show"); //use modal with id addEventModal
localStorage.removeItem('ChildModal');
}
});
//$(window).load(function () {
// window.location = $(modalId).modal("show");
//});
let currentWatt,
catchWatt = document.getElementById("watts"),//Amount
catchTooltipMaxSlide = catchWatt.offsetWidth - 15,
catchTooltip = document.getElementById("showValue"),
catchTextValue = document.getElementById("textValue"),
catchVolt = document.getElementById("volts"),//Rate
catchTooltip2MaxSlide = catchVolt.offsetWidth - 7,
catchTooltip2 = document.getElementById("showValue2"),
currentVolt,
catchTextValue2 = document.getElementById("textValue2"),
catchAmps = document.getElementById("showAmps"),
catchReturn = document.getElementById("showReturn"),
catchInvested = document.getElementById("showInvested"),
currentYear,
catchYear = document.getElementById("years"),//Year
catchTooltip3MaxSlide = catchYear.offsetWidth - 7,
catchTooltip3 = document.getElementById("showValue3"),
catchTextValue3 = document.getElementById("textValue3"),
futureValue,
invested,
returnedValue;
catchWatt.oninput = function () {
tooltipSliding("watt");
calculateAmps();
};
catchVolt.oninput = function () {
tooltipSliding("volt");
calculateAmps();
};
catchYear.oninput = function () {
tooltipSliding("year");
calculateAmps();
};
function tooltipSliding(slider, textInput = "") {
if (slider == "watt") {
currentWatt = textInput == "" ? catchWatt.value : textInput;
catchTooltip.innerHTML = currentWatt < 0 ? 0 : currentWatt;
catchTextValue.value = parseInt(currentWatt);
let tooltipCanSlide = catchTooltipMaxSlide;
catchTooltip.style.left = `${parseInt(
(tooltipCanSlide / 200000) * currentWatt
)}px`;
} else if (slider == "volt") {
currentVolt = textInput == "" ? catchVolt.value : textInput;
catchTooltip2.innerHTML = currentVolt;
catchTextValue2.value = parseInt(currentVolt);
let tooltipCanSlide = catchTooltip2MaxSlide;
catchTooltip2.style.left = `${parseInt(
(tooltipCanSlide / 30) * currentVolt - 9
)}px`;
} else if (slider == "year") {
currentYear = textInput == "" ? catchYear.value : textInput;
catchTooltip3.innerHTML = currentYear;
catchTextValue3.value = parseInt(currentYear);
let tooltipCanSlide = catchTooltip3MaxSlide;
catchTooltip3.style.left = `${parseInt(
(tooltipCanSlide / 30) * currentYear - 9
)}px`;
}
}
function setWattValue() {
let pattern = /^[0-9]*$/,
v = catchTextValue.value;
if (pattern.test(v) && v != '' && v = 0 || v == 50) {
originalValue = parseInt(catchTextValue.value);
catchTextValue.value = originalValue;
catchWatt.value = originalValue;
tooltipSliding("watt", originalValue);
} else {
catchTextValue.value = 0;
catchWatt.value = 0;
tooltipSliding("watt", 0);
}
if (v != '' && v = 0) calculateAmps();
}
function setVoltValue() {
let pattern = /^[0-9]*$/,
v = catchTextValue2.value;
if (pattern.test(v) && v > -1 && v = 1 && v <= 30) {
originalValue = isNaN(parseInt(catchTextValue3.value)) ? 0 : parseInt(catchTextValue3.value);
catchTextValue3.value = originalValue;
catchYear.value = originalValue;
tooltipSliding("year", originalValue);
} else {
catchTextValue3.value = 0;
catchYear.value = 0;
tooltipSliding("year", 0);
}
calculateAmps();
}
window.addEventListener(
"resize",
function (event) {
catchTooltipMaxSlide = catchWatt.offsetWidth - 20;
catchTooltip2MaxSlide = catchVolt.offsetWidth - 20;
},
true
);
let myChart;
function calculateAmps() {
currentWatt = isNaN(currentWatt) ? 1 : currentWatt;
currentVolt = isNaN(currentVolt) ? 1 : currentVolt;
currentYear = isNaN(currentYear) ? 1 : currentYear;
//console.log(currentWatt);
//console.log(currentVolt);
//console.log(currentYear);
//console.log(formulajs.PMT((currentVolt / 100) / 12, currentYear * 12, 0, -currentWatt, 0));
//alert(formulajs.PMT((currentVolt / 100) / 12, currentYear * 12, 0, -currentWatt, 0));
//debugger;
//futureValue = futureValue == undefined ? 6266.33 : currentWatt * (((Math.pow((1 + (currentVolt / 100) / 12), (currentYear * 12))) - 1) / ((currentVolt / 100) / 12)) * (1 + (currentVolt / 100) / 12);
futureValue = (formulajs.PMT((currentVolt / 100) / 12, currentYear * 12, 0, -currentWatt, 0));
invested = invested == undefined ? 6000 : currentWatt * currentYear * 12;
returnedValue = futureValue - invested;
console.log('VALUES :', futureValue, invested, returnedValue)
if (Number.isNaN(futureValue) == false) {
catchAmps.innerHTML = `₹${futureValue.toFixed(2)}`;
catchReturn.innerHTML = `₹${returnedValue.toFixed(2)}`;
catchInvested.innerHTML = `₹${invested.toFixed(2)}`;
} else {
catchAmps.innerHTML = "";
}
//generateChart(parseInt(futureValue), parseInt(invested), parseInt(returnedValue))
generateChart(parseInt((futureValue*12*10)+(currentWatt-(futureValue*12*10))),parseInt(futureValue*12*10), parseInt(currentWatt-(futureValue*12*10)));
}
calculateAmps();
function generateChart(a,b,c) {
console.log('CHART===========',a,b,c)
if (!(isNaN(futureValue), isNaN(invested), isNaN(returnedValue))) {
if (myChart !== undefined) {
myChart.destroy();
}
const data = {
labels: [
'Total',
'Invested',
'Return'
],
datasets: [{
label: 'My First Dataset',
data: [a,b,c],
backgroundColor: [
'rgb(255, 99, 132)',
'rgb(54, 162, 235)',
'rgb(255, 205, 86)'
],
hoverOffset: 4
}]
};
const config = {
type: 'doughnut',
data: data,
};
myChart = new Chart(
document.getElementById('myChart'),
config
);
}
};
