• Friday , 20 October 2017

Simple Weight Converter App With JavaScript & Bootstrap 4

Code Canyon



In this mini-project tutorial we will be building a simple weight converter app using JavaScript and Bootstrap 4 for the ui. It will convert pounds to grams, kilograms and ounces. This will be pure vanilla JavaScript with no JS libraries or frameworks.

CODE: Code for this project

BECOME A PATRON: Get special perks
http://www.patreon.com/traversymedia
ONE TIME DONATIONS:
http://www.paypal.me/traversymedia

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia

http://www.instagram.com/traversymedia

COURSES & MORE INFO:
http://www.traversymedia.com

Original source

3d Ocean

Related Posts

29 Comments

  1. Melanie E Magdalena
    September 19, 2017 at 22:24

    Homework delivery temperature converter style! https://codepen.io/bermudaquest/full/prvqjp/

  2. Gabriel Pozo
    September 19, 2017 at 22:24

    How would you do this with a click event instead of real time results?

  3. Bryan Lopez
    September 19, 2017 at 22:24

    Awesome tutorial!!

  4. Rakesh Debnath
    September 19, 2017 at 22:24

    @input…
    placeholder="Enter Pounds…" does not show up when set the type="number"!

  5. Rufus
    September 19, 2017 at 22:24

    awesome vid as usual. best 17 minutes i have spent

  6. sd Born
    September 19, 2017 at 22:24

    Thank you, Brad! Nice video!

  7. Mark
    September 19, 2017 at 22:24

    why is col-md-6 automatically centered. shouldnt there be an offset class?

  8. Mark
    September 19, 2017 at 22:24

    he makes these shortcuts eg .container and it makes automatically the class with what?? emet?? what is the name?

  9. saeid rahmani
    September 19, 2017 at 22:24

    Hi Brad,
    I did the height converter instead 🙂 https://github.com/saeid78/height-convertor-

  10. Elite Fox
    September 19, 2017 at 22:24

    check out mine! I redesigned the UI and change a few things. http://www.heave.cf

  11. Adam Klekot
    September 19, 2017 at 22:24

    BOOTSTRAP 4 UPDATE:
    For those who are watching after August 2017:
    change bootstrap card-block class to card-body class

  12. Luis Manzanero
    September 19, 2017 at 22:24

    Here's my homework 🙂

    https://luisfromdp.github.io/weightconverter/

    Thanks Traversy Media!!

  13. kingwindie
    September 19, 2017 at 22:24

    0n a scale of beginner to advanced how would this project be rated?
    he created a "variable" but typed "let" instead of "var",i have never come across the "let" thing before

  14. Adebayo Ishola
    September 19, 2017 at 22:24

    My attempt >> https://github.com/bayoishola20/converter

    Quite late. :grins:

  15. 0the0ambient0
    September 19, 2017 at 22:24

    As always, great tutorial

  16. Mendi Sterenfeld
    September 19, 2017 at 22:24

    How do I make something that if it's not a number that the user puts in then there is an alert or something like that..

  17. Haroon Ali
    September 19, 2017 at 22:24

    Is there any way we can convert currency using this while getting real time currency value changes, like using any API
    Any help will be a appreciated 🙂

  18. Daniel Susanu
    September 19, 2017 at 22:24

    Great tutorial!!
    Homework was done: https://codepen.io/gladiaron/pen/mMRXXz?editors=1000

  19. Damir Rekić
    September 19, 2017 at 22:24

    Hi i try something with my limited knowledge of javascript. I'm not sure how to send a code but i will try with codepen: https://codepen.io/rdamir82/pen/rzxZEv
    Thank you for tutorial 🙂 More like this 🙂 Issue: when change weight type results will change only if you change input… I don't know how to fix this 🙁

  20. Anish Kumar
    September 19, 2017 at 22:24

    That's the Homework , It is an all weight converter, you can select from the list what kind of input weight you want. I have used jQuery.

    https://github.com/kumaranish8888/JS-mini-Projects/tree/allWeightConverter

  21. AJAZ MIAH
    September 19, 2017 at 22:24

    So if do with without e.target it wouldnt update automatically? i will need a button?

  22. AJAZ MIAH
    September 19, 2017 at 22:24

    Hey I would like to know how long it takes you to program or to prepare these type of application? Assuming you prepare them ahead of making the video ?

  23. P Pow
    September 19, 2017 at 22:24

    Where to load the homework script?

  24. AntiSocial Cloud
    September 19, 2017 at 22:24

    this was awesome! keep the content coming!

  25. tntfreeze
    September 19, 2017 at 22:24

    Excellent video Brad. Like the way you explain things. Not a fan of Bootstrap though.
    Here is my homework – https://codepen.io/Sicontis/pen/RZwpmx?editors=0010

  26. Grajdanin
    September 19, 2017 at 22:24

    Traversy Media HELP ME
    How to put an input restriction to 60000 lbs?
    My don't work code bottom 🙁
    *****
    if (isNaN(lbs) || lbs < 1 || lbs > 60000) {
    alert("С такой зарплатой есть особенности. Формулы для вашего дохода находятся в разработке.");
    } else {
    document.getElementById('output').style.visibility = 'hidden'
    document.getElementById('zarp').addEventListener('input', function(e){
    document.getElementById('output').style.visibility = 'visible'
    let lbs = e.target.value;
    document.getElementById('gramsOutput').innerHTML = lbs*0.13 + " руб.";
    document.getElementById('kgOutput').innerHTML = lbs*0.30 + " руб.";
    document.getElementById('kg2Output').innerHTML = ((lbs*0.13)+(lbs*0.30)) + " руб.";
    document.getElementById('ozOutput').innerHTML = ((lbs*0.13)+(lbs*0.30))*12 + " руб.";
    }); ;
    }

  27. mozammil hussain
    September 19, 2017 at 22:24

    how to fix issue on ReactJs when run ur code
    Here the Console Error:
    Uncaught TypeError: Cannot read property 'keys' of undefined
    at Object.n.283.290 (browser.min.js:8)
    at i (browser.min.js:2)
    at browser.min.js:2
    at Object.n.273.283 (browser.min.js:8)
    at Object.n.655.273 (browser.min.js:14)
    at i (browser.min.js:2)
    at browser.min.js:2
    at Object.n.645.634 (browser.min.js:14)
    at i (browser.min.js:2)
    at browser.min.js:2

    so plz help me soon

  28. Gregg Cleland
    September 19, 2017 at 22:24

    This is great; interesting to see you use Bootstrap 4. Hopefully it'll be operational in the foreseeable future.

    Brad, any specific reasons why you use Atom over Visual Studio Code?

  29. Brandon Bahret
    September 19, 2017 at 22:24

    This video inspired me to make a simple weight conversion android app. https://github.com/BrandonBahret/WeightConverter

Leave A Comment

You must be logged in to post a comment.