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
Tweets by traversymedia
http://www.instagram.com/traversymedia
COURSES & MORE INFO:
http://www.traversymedia.com
Original source
29 responses to “Simple Weight Converter App With JavaScript & Bootstrap 4”
Homework delivery temperature converter style! https://codepen.io/bermudaquest/full/prvqjp/
How would you do this with a click event instead of real time results?
Awesome tutorial!!
@input…
placeholder="Enter Pounds…" does not show up when set the type="number"!
awesome vid as usual. best 17 minutes i have spent
Thank you, Brad! Nice video!
why is col-md-6 automatically centered. shouldnt there be an offset class?
he makes these shortcuts eg .container and it makes automatically the class with what?? emet?? what is the name?
Hi Brad,
I did the height converter instead 🙂 https://github.com/saeid78/height-convertor-
check out mine! I redesigned the UI and change a few things. http://www.heave.cf
BOOTSTRAP 4 UPDATE:
For those who are watching after August 2017:
change bootstrap card-block class to card-body class
Here's my homework 🙂
https://luisfromdp.github.io/weightconverter/
Thanks Traversy Media!!
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
My attempt >> https://github.com/bayoishola20/converter
Quite late. :grins:
As always, great tutorial
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..
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 🙂
Great tutorial!!
Homework was done: https://codepen.io/gladiaron/pen/mMRXXz?editors=1000
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 🙁
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
So if do with without e.target it wouldnt update automatically? i will need a button?
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 ?
Where to load the homework script?
this was awesome! keep the content coming!
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
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 + " руб.";
}); ;
}
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
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?
This video inspired me to make a simple weight conversion android app. https://github.com/BrandonBahret/WeightConverter