Create simple interest calculator

Signed-off-by: ashley burns <[email protected]>
ibm-developer-skills-network · Mar 11, 2024 · 92ea893 · 92ea893
1 parent badce31
commit 92ea893
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 20 deletions.
diff --git a/.gitignore b/.gitignore
@@ -127,3 +127,4 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+.vscode/settings.json
diff --git a/index.html b/index.html
@@ -1,16 +1,46 @@
+<!DOCTYPE html>
 <html>
-    <head>
+  <head>
+    <title>Simple Interest Calculator</title>
     <script src="script.js"></script>
-    <link rel="stylesheet" href="style.css">
-    </head>
-    <body>
-        <h1>Simple Interest Calculator</h1>
+    <link rel="stylesheet" href="style.css" />
+  </head>
 
-        Amount <input type="number"  id="principal">  <br/>
-        Rate <input type="number"  id="rate">  <br/>
-        No. of Years <input type="number"  id="years">  <br/>
-        Interest : <span id="result"></span><br>
+  <body>
+    <div class="maindiv">
+      <h1>Simple Interest Calculator</h1>
 
-        <button onclick="compute()">Compute</button>
-    </body>
+      Amount <input type="number" id="principal" /> <br />
+      Rate
+      <input
+        type="range"
+        id="rate"
+        min="1"
+        max="20"
+        value="10.25"
+        step="0.25"
+        onchange="updateRate()"
+      />
+      <br />
+      <span id="rate_val"> 10.25 </span>% <br />
+      No. of Years <input type="number" id="years" list=""all_years"/> <br />
+      <datalist id="all_years">
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+        <option value="9">9</option>
+        <option value="10">10</option>
+      </datalist>
+      Interest : <span id="result"></span><br />
+
+      <button onclick="compute()">Compute Interest</button>
+      <span id="result"></span>
+    </div>
+    <footer>&#169; This Calculator belongs to --Ashley Burns--</footer>
+  </body>
 </html>
diff --git a/script.js b/script.js
@@ -1,6 +1,39 @@
-function compute()
-{
-    p = document.getElementById("principal").value;
-
+function compute() {
+  var principal = document.getElementById("principal").value;
+  var rate = document.getElementById("rate").value;
+  var years = document.getElementById("years").value;
+  var interest = (principal * years * rate) / 100;
+  var amount = parseInt(principal) + parseFloat(interest);
+  var result = document.getElementById("result");
+  var year = new Date().getFullYear() + parseInt(years);
+
+  if (principal <= 0) {
+    alert("Enter a positive number!");
+    document.getElementById("principal").focus();
+  } else {
+    result.innerHTML =
+      "If you deposit $" +
+      "<mark>" +
+      principal +
+      "</mark>" +
+      ",<br> at an interest rate of " +
+      "<mark>" +
+      rate +
+      "%" +
+      "</mark>" +
+      "<br> You will receive an amount of $" +
+      "<mark>" +
+      amount +
+      "</mark>" +
+      ",<br> in the year " +
+      "<mark>" +
+      year +
+      "</mark>" +
+      "<br>";
+  }
+}
+
+function updateRate() {
+  var rateval = document.getElementById("rate").value;
+  document.getElementById("rate_val").innerText = rateval;
 }
-
diff --git a/style.css b/style.css
@@ -1,4 +1,17 @@
-body {background-color:tan;}
-h1{color:green;}
-
-
+body {
+  background-color: black;
+  font-family: Arial;
+  color: white;
+}
+h1 {
+  color: gray;
+  font-family: Verdana;
+}
+.maindiv {
+  background-color: white;
+  color: black;
+  width: 300px;
+  padding: 20px;
+  border-radius: 25px;
+  text-align: center;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -127,3 +127,4 @@ dmypy.json

		# Pyre type checker
		.pyre/
		.vscode/settings.json