Skip to content

Commit

Permalink
made functional calculator
Browse files Browse the repository at this point in the history
  • Loading branch information
neilrathi17 committed Jul 31, 2020
1 parent 705dec6 commit 89a33a6
Show file tree
Hide file tree
Showing 9 changed files with 230 additions and 75 deletions.
117 changes: 98 additions & 19 deletions assets/allstyles.css
Expand Up @@ -59,6 +59,7 @@ border-right:none;
background-color: black;
margin-bottom:10px;
border: 1px solid teal;
cursor: pointer;
}
.company-more-info
{
Expand Down Expand Up @@ -102,6 +103,14 @@ border-right:none;
{
margin-top: 100px;
}
footer
{
margin-top:150px;
position: relative;
background: #021D21;
height: fit-content; bottom: 0;

}


/* hover effects--------------------------------------- */
Expand Down Expand Up @@ -171,6 +180,37 @@ border-right:none;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* Underline From Center */
.hvr-underline-from-center {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
overflow: hidden;
}
.hvr-underline-from-center:before {
content: "";
position: absolute;
z-index: -1;
left: 51%;
right: 51%;
bottom: 0;
background: ivory;
height: 2px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-underline-from-center:hover:before, .hvr-underline-from-center:focus:before, .hvr-underline-from-center:active:before {
left: 0;
right: 0;
}




Expand Down Expand Up @@ -267,12 +307,12 @@ border-right:none;
flex: 0 1 42px;
width: 100%;
background: #fff;
margin:2px auto;
margin-bottom: 5px;
padding: 10px;
position: absolute;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 15px 15px 5px 5px;
border-radius: 15px 15px 15px 15px;
height:38px;
bottom: 0;
border:1px solid #ccc;
Expand Down Expand Up @@ -367,37 +407,61 @@ border-right:none;
--animate-duration: 0.7s;
}
/* ----------------------calculator---------------------------------------- */
.calculator-input
{
padding: 5px;
margin: 10px;
background: green;
flex:1;
}

.calculator-body
{
background-color: white;
border-radius: 10px;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 1);
}
.calculator-line
{
margin: 20px;
position: relative;
left:10%;
margin-left:80px;
.slidecontainer {
width: 80%; /* Width of the outside container */
margin: 10px;
}

/* The slider itself */
.slider {
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 5px;
background: #046331;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
border-radius: 5px;

}

/* Mouse-over effects */
.slider:hover {
opacity: 1; /* Fully shown on mouse-over */
}

.calculator-final
{
background-color: grey;
background-color:#CDD5D6;
border-radius: 5px;
width: 250px;
width: fit-content;
position: relative;
left:25%;
margin: 40px 0;
margin-top: 40px;
margin-bottom: 40px;

padding: 10px;
}

.calculator-values
{
border: none;
width: 30px;
}
.calculator-values:hover
{
border: 1px solid #046331;
}

/* -------------------------------- media query-------------------------------- */
@media(max-width:700px)
{
Expand All @@ -413,9 +477,15 @@ margin-left:80px;
min-width: 100vw;
margin:0;
bottom: 0;
height: 80%;
min-height: 100%;

}
#widget-container
{
margin:10px;
margin-right:0;
}

.message
{
font-size: 25px;
Expand All @@ -425,6 +495,15 @@ margin-left:80px;
width: 100%;
left:0;
}
.calculator-final
{
left:0;
margin-left: 20px;
}
#result-calculator
{
font-size: 20px;
}
}


Expand Down
Binary file added assets/img/ccwhite.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions assets/js/calculator.js
@@ -0,0 +1,56 @@

//----------------------------------------calculator---------------------------------------------------
var final=document.querySelector('#final-value')


var slider1 = document.getElementById("investment-slider");
var output1 = document.getElementById("investment-value");
output1.value = slider1.value;

slider1.oninput = function() {
output1.value = slider1.value;
calculate();
}
var slider2= document.getElementById("returns-slider");
var output2 = document.getElementById("returns-value");
output2.value = slider2.value;
slider2.oninput = function() {

output2.value = this.value;
calculate();
}

var slider3 = document.getElementById("time-slider");
var output3 = document.getElementById("time-value");
output3.value = slider3.value;
slider3.oninput = function() {

output3.value = this.value;
calculate();
}
calculate();
function valueChanger1()
{
slider1.value=output1.value;
calculate();
}
function valueChanger2()
{
slider2.value=output2.value;
calculate();
}
function valueChanger3()
{
slider3.value=output3.value;
calculate();
}

function calculate()
{
var p=slider1.value;
var r=slider2.value;
var t=slider3.value;
var total=p*Math.pow((1+(r/100)),t);
total=Math.ceil(total);
final.innerHTML=total;
}
10 changes: 8 additions & 2 deletions assets/js/main.js
Expand Up @@ -31,7 +31,14 @@ function makeCards()

makeCards()


function destroy()
{
var list=document.getElementsByClassName('row');
for(var i=0;i<list.length;++i)
{
list[i].remove();
}
}



Expand Down Expand Up @@ -83,4 +90,3 @@ function chatbotToggle()
});



68 changes: 39 additions & 29 deletions calculator.html
Expand Up @@ -25,55 +25,60 @@
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mr-auto">
<li class="nav-item ">
<a class="nav-link" href="#">Categories<span class="sr-only">(current)</span></a>
<a class="nav-link hvr-underline-from-center" href="#">Categories<span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Graphical analysis</a>
<a class="nav-link hvr-underline-from-center" href="#">Graphical analysis</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Mutual fund caluclator</a>
<a class="nav-link hvr-underline-from-center" href="#">Mutual fund caluclator</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="profile.html">UserName</a>
<a class="nav-link hvr-underline-from-center" href="profile.html">UserName</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="logout()" href="">Logout</a>
<a class="nav-link hvr-underline-from-center" onclick="logout()" href="">Logout</a>
</li>
</ul>
</div>
</nav>



<!-- ----------------------------------content----------------------------------- -->

<div class="container">
<div class="jumbotron bg-danger">
<div class="jumbotron text-white" style="margin-top: 30px; background-image: url(https://i-invdn-com.akamaized.net/news/arrows_down_b_3._800x533_L_1414401860.jpg); ">
<h3 class="display-3 text-center" style="font-size:50px">Mutual Funds Calculator</h3>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-8 sm-12">
<div class="calculator-body" style="border:1px solid yellow">
<div class="calculator-body" style="border:1px solid darkred">
<h4 class="text-center display-4">Returns calculator</h4>
<form action="">
<div class="calculator-line">
<p> Total Investment: <span ><strong>Rs.</strong></span><input type="text" placeholder="" class="calculator-input"></p>
</div>
<div class="calculator-line">
<p> Returns <input type="text" placeholder="" class="calculator-input" > <span><strong>%</strong></span></p>

<div class="container" style="margin-top: 50px;">
<div class="slidecontainer">
<h5>Total investment: ₹<input id="investment-value" class="calculator-values" style="width: 100px;" onchange="valueChanger1()"></input></h5>
<input type="range" min="1" max="100000" value="10000" class="slider" id="investment-slider">
</div>
<div class="calculator-line">
<p> Time period: <input type="text" placeholder="" class="calculator-input"> <span ><strong>Years</strong></span></p>
<div class="slidecontainer">
<h5>returns: <input id="returns-value" class="calculator-values"></input<span>%</span></h5>
<input type="range" min="1" max="30" value="1" class="slider" id="returns-slider">
</div>
<button class="btn btn-lg btn-outline-success" type="button" style="left:30%;position:relative" onclick="calculate()" >Calculate Your returns!</button>
</form>
<div class="slidecontainer ">
<h5>Time period: <input id="time-value" class="calculator-values"></input> <span>years</span></h5>
<input type="range" min="1" max="30" value="10" class="slider" id="time-slider">
</div>
</div>


<div class="calculator-final">
<h3>
Final Value: <span></span>
<h3 id="result-calculator">
Final Value: <span id="final-value"></span>

</h3>
</div>
Expand All @@ -83,28 +88,33 @@ <h3>
<div class="col-md-4 sm-12 text-white" style="border-left:1px solid darkred">
<p>Mutual funds are one of the most popular avenues of investment in the Indian context. As of June 2019, the average assets under management (AuM) of the entire MF industry stands at a staggering Rs. 24.25 trillion, an over four-fold increase from Rs. 5.83 trillion in 2009.

Though mutual fund investments are subject to market risks, the returns can be estimated reasonably accurately. You can use the free mutual fund return calculator from Groww to arrive at the amount of the expected returns. </p>
Though mutual fund investments are subject to market risks, the returns can be estimated reasonably accurately. You can use the free mutual fund return calculator from Stocker to arrive at the amount of the expected returns. </p>
</div>
</div>
</div>
</div>

<footer>
<div class="container" >
<p>
<img src="assets/img/ccwhite.png" alt="" style="width: 180px; height: 100px; margin: 50px;">
<h5 style="color: white; display: inline;">Desgined and developed by codechef-VIT</h5>

</p>

</div>
</footer>





<!-- ----------------------------------footer---------------------------------------------------- -->
<footer>
<div class="container-fluid" style="background: rgb(32, 32, 32); border-top: 1px solid black; height: fit-content; bottom: 0;margin: 0;">
<p style="margin: 0;">made by codechefvit</p>
</div>
</footer>

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<script src="assets/js/main.js"></script>
<!-- <script src="assets/js/main.js"></script> -->
<script src="assets/js/calculator.js"></script>
<script src="https://kit.fontawesome.com/34ffa1f212.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</body>
Expand Down

0 comments on commit 89a33a6

Please sign in to comment.