<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Currency Formatter</title>
    <!--Google Font-->
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="container">
            <input type="text" id="amount" placeholder="Enter the amount here">
            <button id="btn">Format</button>
        </div>
        <p id="output1">
            <span>Indian Rupees:</span>
        </p>
        <p id="output2">
            <span>US Dollars:</span>
        </p>
        <p id="output3">
            <span>Japanese Yen:</span>
        </p>
    </div>
    <!--Script-->
    <script src="script.js"></script>
</body>
</html>
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Roboto Mono",monospace;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #a283fc,
        #6637ed
    ), #fafcfe;
    background-size: 100% 32%;
    background-repeat: no-repeat;
}
.wrapper{
    width: 80vmin;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
}
.container{
    width: 100%;
    background-color: #ffffff;
    box-shadow: 15px 15px 40px rgba(1,9,31,0.05);
    padding: 40px 30px;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-gap: 20px;
}
input{
    height: 40px;
    outline: none;
    border: none;
    color: #37373a;
    font-size: 16px;
    border-bottom: 1px solid #37373a;
}
button{
    background-color: #6637ed;
    border: none;
    color: #ffffff;
    outline: none;
    height: 40px;
    padding: 0 20px;
    cursor: pointer;
    border-radius: 3px;
}
p{
    background-color: #ffffff;
    box-shadow: 12px 12px 30px rgba(1,9,31,0.05);
    padding: 20px 10px;
    text-align: center;
    margin-top: 30px;
    color: #37373a;
    border-radius: 5px;
}
p span{
    font-weight: bold;
}
let btn = document.getElementById("btn");

let rupees = document.getElementById("output1");
let dollars = document.getElementById("output2");
let yen = document.getElementById("output3");

let formatter1 = new Intl.NumberFormat(
    "en-IN",
    {style: "currency", currency: "INR"}
);
let formatter2 = new Intl.NumberFormat(
    "en-US",
    {style: "currency", currency: "USD"}
)
let formatter3 = new Intl.NumberFormat(
    "ja-JP",
    {style: "currency", currency: "JPY"}
)

btn.addEventListener("click", ()=>{
    let amount = document.getElementById("amount").value;

    rupees.innerHTML = `<span>Indian Rupees:</span>${formatter1.format(amount)}`;
    dollars.innerHTML = `<span>US Dollars:</span>${formatter2.format(amount)}`;
    yen.innerHTML = `<span>Japanese Yen:</span>${formatter3.format(amount)}`;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.