DEV Community

Rohit Sharma
Rohit Sharma

Posted on

3 1

Create a weight converter with Javascript

Hello Everyone, Today we're going to create a Weight Converter with the help of basic JavaScript. If you're a beginner then this article may be useful for you.
Our Weight Converter will look like this:-

For this project we use Bootstrap classes. If in any case you don't know about Bootstrap then no problem you can easily style this web page with CSS from scratch.

Add the following code within the <head> .

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">  
Enter fullscreen mode Exit fullscreen mode

HTML

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                <h1 class="display-4 text-center mb-3">Weight Converter</h1>
                <form>
                    <div class="form-group">
                        <input type="number" class="form--control form--control-lg" placeholder="Enter Pounds....." id="lbsInput">
                    </div>
                </form>
                <div id="output">
                    <div class="card card-primary mb-2">
                        <div class="card-block">
                            <h4>Grams:</h4>
                            <div id="gramsOutput">

                            </div>
                        </div>
                    </div>
                    <div class="card card-success mb-2">
                        <div class="card-block">
                            <h4>Kilograms:</h4>
                            <div id="kgOutput">

                            </div>
                        </div>
                    </div>
                    <div class="card card-danger mb-2">
                        <div class="card-block">
                            <h4>Ounces:</h4>
                            <div id="ozOutput">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Enter fullscreen mode Exit fullscreen mode

CSS

body{
            margin-top: 70px;
            background: #333;
            color: #ffffff;

        }
        #output{
            visibility: hidden;
        }
        input[type=number]{
            width: 100%;
        }
Enter fullscreen mode Exit fullscreen mode

JavaScript

This part is also easy. Our code contains only 10 lines of code.

document.getElementById('lbsInput').addEventListener('input',function(e){
            let lbs= e.target.value;
            let input = document.getElementById('lbsInput');
            let data = input.value;
            document.getElementById('gramsOutput').innerHTML= lbs/0.0022046;
            document.getElementById('kgOutput').innerHTML= lbs/2.2046;
            document.getElementById('ozOutput').innerHTML= lbs*16;
            document.getElementById('output').style.visibility='visible';

            if (data =='') {
                document.getElementById('output').style.visibility='hidden';
            }
        });
Enter fullscreen mode Exit fullscreen mode

I hope you will love it ♥. If you love it then support me.

Buy Me A Coffee

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

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

👋 Kindness is contagious

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

Okay