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
Melanie E Magdalena
Homework delivery temperature converter style! https://codepen.io/bermudaquest/full/prvqjp/
Gabriel Pozo
How would you do this with a click event instead of real time results?
Bryan Lopez
Awesome tutorial!!
Rakesh Debnath
@input…
placeholder="Enter Pounds…" does not show up when set the type="number"!
Rufus
awesome vid as usual. best 17 minutes i have spent
sd Born
Thank you, Brad! Nice video!
Mark
why is col-md-6 automatically centered. shouldnt there be an offset class?
Mark
he makes these shortcuts eg .container and it makes automatically the class with what?? emet?? what is the name?
saeid rahmani
Hi Brad,
I did the height converter instead 🙂 https://github.com/saeid78/height-convertor-
Elite Fox
check out mine! I redesigned the UI and change a few things. http://www.heave.cf
Adam Klekot
BOOTSTRAP 4 UPDATE:
For those who are watching after August 2017:
change bootstrap card-block class to card-body class
Luis Manzanero
Here's my homework 🙂
https://luisfromdp.github.io/weightconverter/
Thanks Traversy Media!!
kingwindie
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
Adebayo Ishola
My attempt >> https://github.com/bayoishola20/converter
Quite late. :grins:
0the0ambient0
As always, great tutorial
Mendi Sterenfeld
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..
Haroon Ali
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 🙂
Daniel Susanu
Great tutorial!!
Homework was done: https://codepen.io/gladiaron/pen/mMRXXz?editors=1000
Damir Rekić
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 🙁
Anish Kumar
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
AJAZ MIAH
So if do with without e.target it wouldnt update automatically? i will need a button?
AJAZ MIAH
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 ?
P Pow
Where to load the homework script?
AntiSocial Cloud
this was awesome! keep the content coming!
tntfreeze
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
Grajdanin
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 + " руб.";
}); ;
}
mozammil hussain
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
Gregg Cleland
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?
Brandon Bahret
This video inspired me to make a simple weight conversion android app. https://github.com/BrandonBahret/WeightConverter