How can I add below Sip calculator to wix with codes

Ask the community
,
1
html, body { height: 100vh; }

body {
background-color: lightgrey;
}
.button{
background-color: #4CAF50;
border: none;
border-radius: 1em;
color: white;
padding: 10px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 0 auto;
cursor: pointer;
}
#value1,
#value2,#value3,
#return
{
border: 2px solid #ccc;
border-radius: 1em;
background-color: #f8f8f8;
box-sizing: border-box;
display: inline-block;
margin: 8px 0;
padding: 10px 8px;
width: 90%;
}

h2 {
color: black;
text-indent:0 auto;;
margin: 0 auto;

}

div {
height: 600px;
width: 350px;
background-color: powderblue;
}

    <title>Sip Calculator</title> 
    <script language="javascript"> 
            function sipCalculator() 

            { 
                    var investment = parseInt(document.getElementById("value1").value);  

                    var annualRate = parseInt(document.getElementById("value2").value); 
		var years = parseInt(document.getElementById("value3").value); 

		var monthlyRate = annualRate/12/100;	 
				
		var months= years*12; 

		 ansd=0; 
				
		ansD=document.getElementById("return");					 
							
                

                    ansD.value = investment *(Math.pow((1 + monthlyRate), months) -

1)/monthlyRate *(1+monthlyRate);

            } 

    </script>

Sip calculator


Monthly Investment

 <input type ="text" class="value1" id="value1" name="Monthly Investment"

value=“”/>

  <h2> Rate of Return</h2> 


      <input type="text" class="value2" id="value2" name="Rate of Return"

value=“”/>

	<h2> Years</h2> 

		<input type="text"  class="value3" id="value3" name="Years"

value=“”/>

			<input type="button" class="button" name="Sumbit"

value=“Calculate” onclick=“javascript:sipCalculator()”/> 


			<h2>Expected Amount</h2> 

				         <input type="text" class="return"

id=“return” name=“answer” value=“”/>

This is what I want to do with wix code is that possible?
please help me with java script part how can i do this with wix code.

Many thanks in advance.

1 Like
2

Hi Ashish Singh ,

At the top of your editor, go to devmode and put it on.

Here is some tutorial on how to access elements on your page, and use them using code.

Also take a look here : Introduction - Velo API Reference - Wix.com

Since you already made it in html, it won’t be any problem coding it after looking at the tutorial.

Kind regards,
Kristof.