DEV Community

Cover image for Glass Morphism Simple Interest Calculator Using Pure HTML, CSS & JS.
Technical Vandar
Technical Vandar

Posted on

21 7

Glass Morphism Simple Interest Calculator Using Pure HTML, CSS & JS.

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode
    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;
    }
Enter fullscreen mode Exit fullscreen mode

Youtube Tutorial

Watch Here




Find Me On:

Facebook
Youtube
Github

Top comments (1)

Collapse
 
mightycoderx profile image
MightyCoderX

I think it could be improved, UI/UX design wise

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more