Build a Bootstrap CSS UI Unit Weight Converter Web App in Vanilla Javascript Full Project For Beginners

Build a Bootstrap CSS UI Unit Weight Converter Web App in Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a unit weight converter web app using bootstrap css ui in vanilla javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"/>
    <div class="container">
        <div class="row">
            <div class="col-md-6 offset-md-3">
                    <h1 class="display-4 text-center mb-5">
                        Weight Converter
                    </h1>
        
                    <form>
                       <div class="form-group">
                           <select class="custom-select mb-2 mr-sm-2 mb-sm-0 " id="select">
                               <option value="lbs">lbs</option>
                               <option value="grams">g</option>
                               <option value="kgs">kg</option>
                               <option value="oz">oz</option>
                           </select>
                       </div>
                        <div class="form-group">
                            <input
                            step="1"
                            id="Input" 
                            type="number" 
                            class="form-control form-control-lg" 
                            placeholder="Throw me some numbers.">
                        </div><!-- /.form-group -->
                    </form>
                    <div id="output">
                        <div class="card card-grams mb-2">
                            <div class="card-block">
                                <h4>Grams:</h4>
                                <div id="gramsOutput">0</div>
                            </div><!-- /.card-block -->
                        </div><!-- /.card -->

                        <div class="card card-kgs mb-2">
                            <div class="card-block">
                                <h4>Kilograms:</h4>
                                <div id="kgOutput">0</div>
                            </div><!-- /.card-block -->
                        </div><!-- /.card -->

                        <div class="card card-oz mb-2">
                            <div class="card-block">
                                <h4>Ounces:</h4>
                                <div id="ozOutput">0</div>
                            </div><!-- /.card-block -->
                        </div><!-- /.card -->

                        <div class="card card-lbs mb-2">
                            <div class="card-block">
                                <h4>Pounds:</h4>
                                <div id="lbsOutput">0</div>
                            </div><!-- /.card-block -->
                        </div><!-- /.card -->


                    </div><!-- /#output -->

            </div><!-- /.col -->
        </div><!-- /.row-->
    </div><!-- /.container -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

 

See also  Node.js Project to Extract Text From PDF File Using pdf-to-text Library in Javascript Full Tutorial For Beginners

 

Now make a style.css file and copy paste the following code

 

style.css

 

body {
    margin: 70px auto;
    background: #333;
    color: #fff;
}

input:focus::-webkit-input-placeholder {
    opacity: 0;
}



#output {
    visibility: hidden;
}

#select {
    border: none;
    border-radius: 0;
}

#Input {
    border: 1px solid #000;
    border-radius: 0;
}

.card {
    border-radius: 0;
    border: none;
    background: none;
}

.card-lbs {
    background: #395662;
}

.card-oz {
    background: #F4A261;
}

.card-kgs {
    background: #2A9D8F;
}

.card-grams {
    background: #E76F51;
}

 

 

Now make a script.js file and copy paste the following code

 

script.js

 

// variables ==============================================
        const input = document.querySelector('#Input'),
               form = document.querySelector('form'), 
              grams = document.querySelector('#gramsOutput'), 
                 kg = document.querySelector('#kgOutput'), 
                 oz = document.querySelector('#ozOutput'),
                lbs = document.querySelector('#lbsOutput'),
             output = document.querySelector('#output'), 
             select = document.querySelector('#select'); 



        // functions ==============================================  
        function pickUnit() {
            if(this.value === "lbs"){
                input.addEventListener('input', calcPounds);
            } else if (this.value === "kgs"){
                input.addEventListener('input', calcKilograms);
            } else if (this.value === "grams"){
                input.addEventListener('input', calcGrams);
            } else if (this.value === "oz"){
                input.addEventListener('input', calcOz);
              }
            output.style.visiblity  = 'visible'; 
        }

        function calcPounds() {
            grams.innerHTML = (Number(this.value) / 0.0022046).toFixed(2);
            kg.innerHTML    = (Number(this.value) / 2.2046).toFixed(2);
            oz.innerHTML    = Number(this.value) * 16;
            lbs.innerHTML   = this.value;  

        }
        
        function calcGrams() {
            grams.innerHTML = Number(this.value);
            kg.innerHTML    = (Number(this.value) / 1000).toFixed(2);
            oz.innerHTML    = Number(this.value) * 0.035274;
            lbs.innerHTML   = (Number(this.value) / 500).toFixed(2);
        }
        
        function calcOz() {
            grams.innerHTML = (Number(this.value) / 0.035274).toFixed(2);
            kg.innerHTML    = (Number(this.value) / 35.274).toFixed(2);
            oz.innerHTML    = Number(this.value);
            lbs.innerHTML   = (Number(this.value) * 0.062500).toFixed(2);
        }
        
        function calcKgs() {
            grams.innerHTML = Number(this.value) * 1000;
            kg.innerHTML    = Number(this.value);
            oz.innerHTML    = (Number(this.value) * 35.274).toFixed(2);
            lbs.innerHTML   = (Number(this.value) * 2.2046).toFixed(2);
        }
        

        // event listeners ==========================================
        input.addEventListener('input', function(e){
                output.style.visibility = 'visible'; }
                ); 
        input.addEventListener('input', calcPounds);
        select.addEventListener('input', pickUnit); 


        form.addEventListener('submit', (e) =>  { 
                e.preventDefault(); 
                console.log('form submission submission cancelled')
                });

 

See also  Build a HTML5 Apple Catcher or Picking Game From Tree in Browser Using Javascript Full Project For Beginners

 

Now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply