I\'m Working on a future value calculator using jQuery. I\'m having issues with
ID: 3675487 • Letter: I
Question
I'm Working on a future value calculator using jQuery. I'm having issues with where to start on this so I need a solution to work backward and understand the solution. I'm looking for help on writing the JS file with jQuery.
Heres what I got.
1. Add a script element to the HTML file that gives you access to the jQuery library.
2. Write the code in the JavaScript file so it uses jQuery.
3. add a JavaScript statement that moves the focus to the Investment Amount text box each time the Calculate button is clicked.
HTML
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q & A Rollovers</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="rollover.js"></script>
</head>
<body>
<section>
<h1>jQuery FAQs</h1>
<ul id="faq_rollovers">
<li><h2>What is jQuery?</h2>
<p class="hidden">jQuery is a library of the JavaScript functions
that you're most likely to need as you develop web sites.</p>
</li>
<li><h2>Why is jQuery becoming so popular?</h2>
<p class="hidden">Three reasons: It's free; It lets you get more done
in less time; All of its functions are cross-browser compatible.</p>
</li>
<li><h2>Which is harder to learn: jQuery or JavaScript?</h2>
<p class="hidden">For most functions, jQuery is significantly easier to learn
and use than JavaScript. But remember that jQuery is JavaScript.</p>
</li>
</ul>
</section>
</body>
</html>
CSS file
/* type selectors */
article, aside, figure, figcaption, footer, header, nav, section {
display: block;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 87.5%;
width: 650px;
margin: 0 auto;
border: 3px solid blue;
}
section {
padding: 15px 25px;
}
h1 {
font-size: 150%;
}
h2 {
font-size: 120%;
padding: .25em 0 .25em 25px;
cursor: pointer;
background: url(images/plus.png) no-repeat left center;
}
h2.minus {
background: url(images/minus.png) no-repeat left center;
}
a {
color: black;
text-decoration: none;
}
a:focus, a:hover {
color: blue;
}
div {
display: none;
}
div.open {
display: block;
}
ul {
padding-left: 45px;
}
li {
padding-bottom: .25em;
}
p {
padding-bottom: .25em;
padding-left: 25px;
}
Explanation / Answer
This is a very basic simple interest calculator html page. Please refer this your calculator is similar to this only.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Q & A Rollovers</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="rollover.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// set onclick listener on button
// whenever button is clicked the function provided
// to click will get executed
$('#calculate').click(function() {
// get the values of all input fields
// as these values may be texts convert these to first number
// 10 is radix you specify to parseFloat function
var saving_balance = parseFloat($('#saving_balance').val(), 10);
var interest_rate = parseFloat($('#interest_rate').val(), 10);
var number_of_years = parseFloat($('#number_of_years').val(), 10);
// calculate simple interest
var result = saving_balance + (saving_balance * interest_rate * number_of_years) / 100;
// set the result in div as text
$('#result').text(result);
});
});
</script>
</head>
<body>
Saving Account Balance: <input type="number" id="saving_balance"><br><br>
Interest Rate: <input type="number" id="interest_rate"><br><br>
Number Of Years: <input type="number" id="number_of_years"><br><br>
<input type="button" id="calculate" value="Calculate">
<div id="result">
</div>
</body>
</html>
I want you to workout yourself from here. Don't hesitate to ask if you stuck.
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.