cargando el proyecto completo final

alerobleto2807 · Sep 22, 2022 · 81df2ed · 81df2ed
commit 81df2ed
Show file tree

Hide file tree

Showing 3 changed files with 125 additions and 0 deletions.
diff --git a/code.js b/code.js
@@ -0,0 +1,32 @@
+function compute(){
+
+    //create variables for lagic
+   var principal = document.getElementById("principal").value;
+   var rate = document.getElementById("rate").value;
+   var years = document.getElementById("years").value;
+   var interesting = principal * years * rate /100;
+
+   if(principal < 1){
+    alert("Please enter a valid Number"); // testing the button connection
+    document.getElementById("principal").focus();
+    return;
+}
+
+   // logic for to convert numbers in year of the future
+   var year_future = new Date().getFullYear()+parseInt(years);
+
+   //obtein the element result with the button calculate...
+   var boton_result = document.getElementById("result");
+   document.getElementById("result").innerHTML = "" + interesting; 
+
+   // add more info
+   document.getElementById("result").innerHTML=` "If you deposit is" ${principal}$, \<br>\ "At an interest rate: ${rate}%", \<br>\ "You receive :  ${interesting}$", \<br>\ "in the next Years  ${year_future}"`
+
+
+}
+
+  // funtion for read  the menu-range
+  function updateRate() {
+    var rateval = document.getElementById("rate").value;
+    document.getElementById("rate_val").innerText=rateval;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+    <head>
+    <script src="script.js"></script>
+    <link rel="stylesheet" href="style.css">
+    <title>🧮 | Calculator Interest-Simle</title>
+    </head>
+    <div class="maindiv">
+        <body>
+            <h1>Simple Interest Calculator</h1>
+
+            Amount <input type="number"  id="principal" min="1" max="1000000" class="amount">  <br/>
+            Rate <input onchange="updateRate()" type="range"  id="rate" min="1" max="20" step="0.25" value="10.25" class="rate"> 
+            <span id="rate_val" >
+                10.25%
+            </span>
+            <br/>
+            No. of Years <input type="number"  id="years" min="1" max="20">  <br/>
+            <select name="years" id="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>
+            </select>
+            Interest : <span id="resulted"></span><br>
+
+            <button class="calcular__boton" onclick="compute()">Calcular interés</button>
+            <div class="info">
+                <span id="result" class="result"></span>
+            </div>
+
+
+            <footer class="foter">
+                &#169; Calculator IS- created for -*-Robleto Dev-*-
+             </footer>
+             <script src="code.js"></script>
+        </body>
+
+    </div>  
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,47 @@
+body {
+    /* background-color:rgb(5, 3, 0);*/
+    background: linear-gradient(90deg, rgb(13, 72, 150), black);
+ }
+ h1{
+     color:white;
+     font-family: Verdana, Geneva, Tahoma, sans-serif;
+     width: 200%;
+ }
+
+ .maindiv{
+     width: 300px;
+     padding: 20px;
+     border-radius: 25px;
+     border-color: white;
+     color: white;
+     margin: auto;
+ }
+
+ .amount{
+     margin-bottom: 10px;
+ }
+
+ .rate{
+     margin-bottom: 10px;
+ }
+
+ .foter{
+     padding-top: 200px;
+     width: 200%;
+ }
+
+ .calcular__boton{
+    margin-top: 15px;
+    background: rgb(204, 87, 45);
+    border-radius: 5px;
+    color: black;
+ }
+
+ .info{
+     border-color: aqua;
+ }
+
+ .resulted{
+     padding-top: 18px;
+     padding: 18px;
+ }