html, body, #container {

    width: 100%;

    height: 100%;

    margin: 0;

    padding: 0;

}

​

:root {

    --background-color: white;

    --vigo-color: #5367FF;

    --slider-color: #00D09C;

    --input-number-color: #EBEBEB;

}

​

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}

​

h1 {

    text-align: center;

    margin-left: 0.2em;

    margin-right: 0.2em;

    margin-bottom: 0.9em;

}

​

body {

    display: flex;

    justify-content: center;

    align-items: center;

    font-family: 'Roboto', sans-serif;

    background-color: var(--background-color);

    color: #222;

}

​

#amountLabel {

    width: 210px;

    ;

}

​

.sip-calculator {

    border: 5px solid white;

    -moz-box-shadow: 0px 0px 5px hsl(15, 2%, 55%);

    -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: white;

}

​

.sip-calculator-amount,

.sip-calculator-year,

.sip-calculator-roi {

    margin-bottom: 2.2em;

    width: 100%;

}

​

.amount-slider,

.year-slider,

.roi-slider {

    width: 100%;

    height: 1px;

    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: 1px solid #b4b4b4;

    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: #5367FF;

    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;

    }

}

​

/*Groww Logo on mobile*/

@media (max-width: 768px) {

    .groww-logo {

        width: 100px;

        height: 25px;

    }

}

/* -- THE CALCULATOR CODE -- */

var amountSlider = document.getElementById("myAmount");

var amountOutput = document.getElementById("inputAmount");

var roiSlider = document.getElementById("myRoi");

var roiOutput = document.getElementById("inputRoi");

var yearSlider = document.getElementById("myYears");

var yearOutput = document.getElementById("inputYears");

​

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 showValAmount(newVal) {

  amountSlider.value = newVal;

  calculateIt();

};

function showValRoi(newVal) {

  roiSlider.value = newVal;

  calculateIt();

};

function showValYears(newVal) {

  yearSlider.value = newVal;

  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 = 'sip';

var heading = document.getElementById("heading");

var amountLabel = document.getElementById("amountLabel");

​

function changeMode(mode){

  calculatorMode = mode;

  heading.innerHTML = mode === 'sip' ? 'SIP Calculator' : 'Lumpsum Calculator';

  amountLabel.innerHTML = mode === 'sip' ? 'Monthly Investment :' : 'Total Investment :';

  calculateIt();

}

​

function calculateIt() {

  var wealthOutput = document.getElementById("yourWealth");

  var A = document.sipForm.realAmount.value;

  var R = document.sipForm.realRoi.value;

  var N = document.sipForm.realYears.value;

  var sip = Math.round((Math.pow((1 + (Math.pow((1 + R / 100), (1 / 12)) - 1)), (N * 12)) - 1) / (Math.pow((1 + R / 100), (1 / 12)) - 1) * A);

  var lumpsum = Math.round(Math.pow((1 + R / 100), N) * A);

  var finalOutput = calculatorMode === 'sip' ? sip : lumpsum;

  wealthOutput.innerHTML = "Rs. " + finalOutput; // Print BMI

}

calculateIt();

​

/* -- THE CHART CODE -- */

anychart.onDocumentReady(function() {

​

  // add empty dataset

  var dataSet = anychart.data.set();    

​

  //populate dataset with data from the calculator

  [tiv,rent] = calculator();

​

  var data = dataSet.data([

    {x: "Total invested value", value: tiv},

    {x: "Net Return percentage", value: rent}

  ]);

  // add listeners to modify chart accordingly

  amountSlider.addEventListener("input", updateChartData);

  roiSlider.addEventListener("input", updateChartData);

  yearSlider.addEventListener("input", updateChartData);

  amountOutput.addEventListener("input", updateChartData);

  roiOutput.addEventListener("input", updateChartData);

  yearOutput.addEventListener("input", updateChartData);

  // add modification function

  function updateChartData() {

    [tiv,rent] = calculator();

    dataSet.data([

      {x: "Total invested value", value: tiv},

      {x: "Net Return percentage", value: rent}

    ]);

​

      //add title stating the total

    var totalWealth = tiv + rent;

    chart.title("Your wealth is " + totalWealth);

​

    //add total to the legend by adding custome legend item

    chart.legend().itemsFormatter(function(legendItems) {

      legendItems.push({

        text: "Your wealth is " + totalWealth,

        iconEnabled: false,

        fontColor: "#455a64",

        fontWeight: 600

      });

      return legendItems;

    });

  }

​

  // create the chart

  var chart = anychart.pie();

​

  //add title stating the total

  var totalWealth = tiv + rent;

  chart.title("Your wealth is " + totalWealth);

​

  //add total to the legend by adding custome legend item

  chart.legend().itemsFormatter(function(legendItems) {

    legendItems.push({

      text: "Your wealth is " + totalWealth,

      iconEnabled: false,

      fontColor: "#455a64",

      fontWeight: 600

    });

    return legendItems;

  });

  // add the data

  chart.data(data);

​

  // sort elements

  chart.sort("desc");  

  // set legend position

  chart.legend().position("right");

​

  // set items layout

  chart.legend().itemsLayout("vertical");  

​

  // display the chart in the container

  chart.container('container');

  chart.draw();

});

// add a function to return needed values

function calculator() {

  var A = document.sipForm.realAmount.value;

  var R = document.sipForm.realRoi.value;

  var N = document.sipForm.realYears.value;

  var sip = Math.round((Math.pow((1 + (Math.pow((1 + R / 100), (1 / 12)) - 1)), (N * 12)) - 1) / (Math.pow((1 + R / 100), (1 / 12)) - 1) * A);

  var tiv = A * N * 12;

  var rent = sip - tiv;

  console.log('test')

  return [tiv, rent]    

}