118
0

Project 1: Convert USD to INR Currency Convertor | JavaScript Project

118
0

Hey this is the simple project for beginner in this project we will use just a function to convert the USD to INR currency. Let’s begin without wasting the time.

Html code

<!DOCTYPE html>
<html lang="en">
<head>
    <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>Currency Convertor</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <h2>Currency Convertor</h2>
        <div class="box">
            <div class="left-box">
                <input type="number" name="" id="input">USD
            </div>
            <div class="right-box">
                <input type="number" name="" id="result" disabled> INR
            </div>
        </div>
        <button class="btn" onclick="converted()">Convert</button>
    </div>
    <script src="./convert.js"></script>
</body>
</html>

Css code

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(48deg,rgb(44, 44, 138),rgb(112, 112, 221));
}
.container{
    background: #fff;
    padding:1rem;
    box-shadow: 0 0 12px rgb(0 0 0 / 35%);
    border-radius:8px;
    width:500px;
    text-align: center;
}
.box{
    width:100%;
    display: flex;
    margin: 20px 0px;
}
.box div{
    width: 100%;
}
select, input{
    width:95%;
    height:40px;
    cursor: pointer;
    outline: none;
    color: black;
    margin:10px;
}
.btn{
    width: 95%;
    height: 40px;
    border: none;
    cursor: pointer;
    background-color: blue;
    color: #fff;
}

Js code

function converted(){
    const USDCurrency = document.getElementById('input').value;
    let convertedINR = USDCurrency*78.16;

    document.getElementById('result').value = `${convertedINR}`;
}

Leave a Reply

Your email address will not be published.