Simple Interest Calculator Using Pure HTML, CSS & JS.
SOURCE CODE:
HTML:
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Interest Calculator</title> </head> <body> <div class="container"> <h1>Simple Interest Calculator</h1> <div class="inpSection"> <div class="amt"> <label for="amount">Enter Total Amount: </label> <input type="number" name="amount" id="amount" placeholder="Enter Total Amount"> </div> <div class="time"> <label for="time">Enter Time: </label> <input type="number" name="time" id="time" placeholder="Enter Time"> </div> <div class="rate"> <label for="rate">Rate: </label> <input type="number" name="rate" id="rate" placeholder="Enter Rate"> </div> <div class="button"> <button onclick="Calculate()">Calculate</button> </div> <div class="result"> <h3 id="si"></h3> </div> </div> </div> </body> </html> CSS CODE:
*{ user-select: none; margin: 0; padding: 0; font-family: sans-serif; box-sizing: border-box; text-decoration: none; } body{ display: grid; height: 100vh; width: 100%; place-items: center; background: linear-gradient(90deg, rgba(179,52,178,1) 0%, rgba(182,120,49,1) 28%, rgba(106,68,159,1) 56%, rgba(23,137,190,1) 78%, rgba(0,212,255,1) 100%); } .container { text-align: center; border-radius: 8px; box-shadow: 0 2px 4px rgba(214, 202, 202, 0.05); height: 62vh; width: 28vw; background: radial-gradient(at center, rgba(214, 202, 202, 0.05), rgba(224, 217, 217, 0.5)); } .container h1 { margin: 10px; } .inpSection{ margin: 20px 50px; text-align: left; } input{ color: rgba(51, 45, 45, 0.5); font-weight: 650; outline: none; border: none; box-shadow: 0 2px 4px rgba(214, 202, 202, 0.05); font-size: 18px; padding: 15px; height: 35px; margin: 10px; display: flex; width: 20vw; } .button button{ padding: 10px; margin: 10px 110px; font-size: 18px; font-weight: 650; cursor: pointer; border: none; outline: none; box-shadow: 0 2px 4px rgba(224, 217, 217, 0.5); } .result{ position: relative; margin: 20px 0; } label{ font-weight: 600; } h3{ font-size: 20px; } function Calculate() { let p=document.getElementById('amount').value; let t=document.getElementById('time').value; let r=document.getElementById('rate').value; let SI=(p*t*r)/100; document.getElementById('si').innerHTML="The Total Simple Intrest Is: "+SI; } 
Top comments (1)
I think it could be improved, UI/UX design wise