Create a weight converter with Javascript
Tags: webdev, javascript, beginners, tutorial
Published: 2021-12-09 15:57:28

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:-

{% codepen https://codepen.io/godzillaa/pen/ZEXOqmW %}

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>` .

```html
<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">  
```

##HTML
```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>

```

##CSS
```css
body{
            margin-top: 70px;
            background: #333;
            color: #ffffff;
         
        }
        #output{
            visibility: hidden;
        }
        input[type=number]{
            width: 100%;
        }
```

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

```javascript
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';
            }
        });
```

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

<a href="https://www.buymeacoffee.com/devrohit" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>