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

Billboard image

Deploy and scale your apps on AWS and GCP with a world class developer experience

Coherence makes it easy to set up and maintain cloud infrastructure. Harness the extensibility, compliance and cost efficiency of the cloud.

Learn more

Top comments (1)

Collapse
 
mightycoderx profile image
MightyCoderX

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

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay