Simple Weight Converter App With JavaScript & Bootstrap 4

[@inponderland]

For people using the newest version of bootstrap, the classes to color the cards are 'bg-primary' , 'bg-success', and 'bg-danger'. They have done away with the 'card-success', etc. variants of the background classes.

[@MrLuke3456]

Thanks a lot! I spent a good couple of minutes trying to figure out what I was doing wrong.

[@MrLuke3456]

Thanks for the info! I helped my find what I was doing wrong.

[@juthisarkeraka6336]

thnks for the info! :D

[@alexraab3022]

Thank you

[@sharifabahar6257]

tnqs a lot for ur useful command.

[@aleferr3ira]

Great tutorial!! For those who want to keep only two decimals: document.getElementById('gramsOutput').innerHTML = (lbs / 0.0022046).toFixed(2); document.getElementById('kgOutput').innerHTML = (lbs / 2.2046).toFixed(2);

[@zmOe1]

thx

[@MayankSingh-lg5wx]

Alessandra Souza another way by using math.floor()

[@aleferr3ira]

thanks, Mayank Singh!

[@caroldanvers265]

good try but I still get a null value

[@jorjlm83]

For those doing this tutorial most recently, I believe there were some naming changes for bootstrap classes, so, the visual end result in some parts might not be the same. This padding on each card (Grams, Kilograms and Ounces) wasn't working, so I tried replacing by class="card-body" instead of "card-block" and it works.

[@kingberz]

geez thanks... i thought i was doing something wrong all the way xD

[@stancedtaco]

For anyone using the latest version of BS4, to get the colored background of the cards to display, change "card-danger" to "bg-danger" same goes with the other cards as well.

[@gabytzugabytzu16]

Thank you, man! You should go to the top with this comment. I scratched my head for like 5 minutes not knowing why tf my cards don't get the colored background. :))

[@balance_andbliss]

And also card-body instead of card-block

[@bhavin7485]

Same here..@@gabytzugabytzu16

[@bhavin7485]

Thanks man...

[@kingberz]

@@gabytzugabytzu16yehh when are they going to be consistent all through

[@efs76media]

By a mile and a half, you are by far the best tutor on KZbin. Thank you so much for your videos and sharing your knowledge. Awesome stuff! :)

[@onecarwood]

This will come in handy for weed conversions

[@TraversyMedia]

LOL!

[@munoha4438]

hahha nice dude

[@aleferr3ira]

lol!

[@raviverma8904]

LOL

[@sk8reality65]

Lolllll

[@tnmando]

Just getting started with JS, but I really like the assignment idea. As a beginner it is great to see the different ways people approached the task.

[@rubenverster250]

check JavaScript30 out

[@subvice2593]

This is a great tutorial. I am starting to build some real fluency with vanilla js concepts after this. Love the homework idea as well, going to try my hand at it for sure. Thanks for all the amazing content, Brad.

[@cherulast7998]

Hey brad u know that thousnds students are using ur tutorials i like ur small projects it gives me some idea how to work practically

[@pickandhoop]

Great Work Brad. Clear, fast and simple. As usual. Keep them coming!

[@m.magdalena]

Homework delivery temperature converter style! codepen.io/m2creates/full/prvqjp/

Melanie awesome work combining two tutorials. :) Can you do with a dropdown list for selecting initial input?

[@TraversyMedia]

Awesome Melanie! Just awesome. Thanks for sharing

[@m.magdalena]

Strahinja Živković I thought about that but couldn't quite figure out how to dynamically fill just two output boxes (and having a drop-down with 6 output boxes seemed silly). Perhaps I'll poke it more today and see what I come up with!

[@m.magdalena]

Traversy Media thanks for the fun assignment that made practicing JS fun!

[@tylerzey1229]

i know you.

[@CodingPhase]

This is a great quick tutorial for people to get their practice. Nice Job!!! Love seeing you in the video more!!!

[@obedientzombie3080]

This stuff is really good. Got no money to be a paetron, so here's a thubs up.

[@TraversyMedia]

Thanks my friend

[@cesarlara3974]

CAN YOU DO A VIDEO ON HOW TO DO A PORTFOLIO FOR BEGINNERS?

[@praveenbadigerv]

Short and simple yet so many things to learn. Thanks Brad. 🙌

[@sangamadhikari8497]

Vanilla way of programming is ❤

[@GAVIGHUMMAN]

With current bootstrap 4 cdn version "card card-primary" is now "card bg-primary". for future viewers

[@ntakirutimanavalens4429]

thx, i've been challeged with card card-primary but card bg-primary is so helpful!

[@brendanmckeown27]

Thank you!

[@vaibhavmor1868]

Thanks @Travery Media! Keep these small projects coming!

[@bardhan.abhirup]

Thanks a ton for your content! this stuff has been really helpful. I've been binging on your tutorials!

[@glennkey3461]

card-primary etc. is now bg-primary on bootsrap, for those wondering

[@jinhoshin7923]

card-primary, card-success and card-danger has changed to bg-primay, bg-success, and bg-danger currently. Also change card-block to "card-body" will look much more like his work.

[@radiclelife]

I went with card-header to make the blocks a little skinnier. The card-body was too fat for me. Either way, it'll work!

[@busyrand]

Thank you so much for making this Very Beginner Friendly! I really appreciate your explanations.

[@stevankostadinovic2250]

I like how you are making app which looks good and not just text output on white background like in many other tutorials. I would like to see tutorial for currency converter with use of external api for getting current conversion rates, so it is always up to date.

[@medi7573]

This is it bro it is alot better now please make all next tutorials same way i mean live reloading and split screnn into two parts like this we can see what is created on the page while you are typing :D

[@FULLUPE1]

Thanks so much it was a great tutorial .. i'm a beginner of js ...have added little to this which is " when lbs == 0 then the output is hidden again " thanks once again

[@M3TALISB3AST]

Do more of these I'm really digging these vanilla JavaScript projects.

[@rubenverster250]

check JavaScript30 out

[@rufus9821]

awesome vid as usual. best 17 minutes i have spent

[@projectDominic]

Great practice changing some of the classes from alpha Bootstrap to 4.1 and of course they were already pointed out in the comments! Also used some mx-auto from Brad's Bootstrap course Leaving background white looks better

[@dndnegy73]

finally I made simple app even if its a small one it worked and the bigger to come

[@lawrencenkadi8926]

That was very helpful for a beginner like me. It was very clear and easy to follow. Yeah! I'm happy with that. Thank you

[@lukkash]

Additionally formatting with toFixed and also names on the left and values on the right. I love converter projects :)

[@daviskane7904]

Thanks Brad - another dope tutorial where I learned a ton!

[@lukkash]

or with any framework you can make a converter (e.g. pounds, grams, ounces, troy ounces) where all other fields recalculate themselves when you input a number into one of them. A Converter is a quite interesting project when you start learning frameworks.

[@ronaldjohnson4470]

Very nice tutorial Brad, thank you.

[@andreaskaaej]

Short and concise video, great explanations. Thanks 👍🏼

[@simplex2168]

For the people who are getting stuck at the colors: The bootstrap class has been changed to bg-primary not card-primary.

[@GilFavor101]

Only thing wrong with this video is that there isn't a link in the description for another video just like this : ) Great video here, thanks for doing this.

[@dineshrout2527]

This was not a difficult project, but your teaching made it interesting. I'm going to make it in css now.🙂

[@MushaGH]

you make me fall in love with web development

[@scottyhall4215]

I do wish you would slow down some for those that cannot type so fast and are trying to learn. Keep in mind you are teaching people and it would be nice to breathe every now and then and take in what has been done. Otherwise I might as well just copy and paste and be done with it.

[@sriramrajagopal134]

Play the video at 0.75x or 0.5x speed

[@rymbouchetara1066]

Cam SB said : "For people using the newest version of bootstrap, the classes to color the cards are 'bg-primary' , 'bg-success', and 'bg-danger'. They have done away with the 'card-success', etc. variants of the background classes." Also for card-block use card-body !

[@brucelee7782]

Hello Sir may I ask what does the method .target do (12:13)? Can I just use e.value instead?

[@Vlusion]

Was in coding spree so picked a new 'coding theme' screensaver. Same like your banner I now see :)

[@sigplayer112]

you can add if(document.getElementById('lbsInput').value.length === 0){ document.getElementById('output').style.visibility = 'hidden'; } to hide it from displaying zeros if input is empty

[@justdarkjazz4020]

Add it where exactly? I tried it and it kind of fucked up my code.

[@lulualmohtarif]

thanks alot brad, that was so great and clear from morroco

[@JBuchmann]

Great tutorial, thanks! I think it would be cool if you could show how to do the same/similar app in multiple technologies... for example Angular, React, and others (this vid is already vanilla js). It would be valuable to see the different approaches to the same problems in each technology.

[@adamklepacz6322]

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

[@haroldw2823]

Nice Job Mate, easy to follow

[@MrDTTV]

this was awesome! keep the content coming!

[@Suneriins234]

Weight Converter Grames Kilogrames Ounces ' document.getElementById('output').style.visibility = 'hidden'; document.getElementById('IbsInput').addEventListener('input', function(e){ document.getElementById('output').style.visibility = 'visible'; let Ibs = e.target.value; document.getElementById('gramsOutput').innerHTML = Ibs/0.0022045; document.getElementById('kgOutput').innerHTML = Ibs/2.2046; document.getElementById('ozOutput').innerHTML = Ibs*16; });

[@CreatingAlong]

I thought I might mention "e.target.value" returns an error, had to change it to "event.target.value" to get an output.

[@phethomberg9669]

Awesome video man !! Pls do more this type of video

[@skrezwan12]

Good for practicing Js and bootstrap as well.

[@pikachu5223]

Thanks Brad! Love you

[@0the0ambient0]

As always, great tutorial

[@sdborn8667]

Thank you, Brad! Nice video!

[@hirephpdevelopers3840]

Very informative tutorial Brad, thank you.

[@americomondragon6973]

Excelente video, es el mas sencillo que he econtrado, muchas gracias!

[@medhamohanty5270]

Great informative video. Very helpful.

[@tudorb.2849]

Anyone can tell me how is the plugin for HTML shortcuts called in visual studio code ? min 2:24.Thank you

[@joydas1685]

Good video ;) got some knowledge regarding bootstrap and javascript

[@dxdMyBroadcast]

Nice one) I'd add a check for typeof === 'number' and error handling.

[@dusski1]

You don't need that because you're using a number input.

[@ThisIsJ0nny]

Hey man, would be great to get your opinion / some tutorials on sails. Keep up the awesome work! (Also love the clicky keyboard, not to loud, not too quiet)

[@TraversyMedia]

Thanks. It is actually one of the quieter ones I could find. I tend to smash the keys when I code. Off video I use a cherry mx red switch mechanical keyboard but it is way too loud for recording

[@FlashMoney-ps8ef]

Great tutorial, I would like to know how to make with cross-references , in order that when I set the value of the ounces (or the kilograms or grams) the program gives me the original pounds value as well... Thanks for this video

[@samshanmukh]

nice idea of giving homework for community.

[@randombiketrips3296]

Is there a reason why you use Atom as opposed to VSC or Sublime? I really like the way you teach because it's really clear and simple, btw.

[@spongebobspongebob24]

wow. Your new intro looks nice.

[@suatarancak7206]

weight converter tools online : calculatorsnew.com/content/weight-converter/104

[@thinsmoke7679]

How do you centralize the input pounds in the middle. Something has changed with bootstrap since you released this. The box covers the entire webpage

[@nagahumanbeingzooofparticl8836]

Thank you so Much Brad..🥇🥇🥇

[@nikolap99]

I know I'm late, but how would this be done in React? I'm just starting to learn and want to learn by making these little projects, so should I make just a Card component etc. or should this be done different way?

[@jimdart8219]

I love Brads Tutorials. But now that boostrap 4 is stable, what a pain trying to get even the HTML to work right. Even had VSCode give me errors on the tags for the link to Bootstrap saying they were special and had to be escaped. Could not get the H1 to center and the form-control-lg, well that was md at best. Oh well on to bigger and better. Thanks Brad your the best.

[@galbalazs87]

Awesome, as always! Thanks!! :)

[@kaktotak547]

Your videos are great!

[@ajazmiah]

If I do the homework and change the style a little...will I be able to use it as my own project ND show it to employers?

[@matteolinux9467]

very clear and nice video! thanks

[@TraversyMedia]

Thank you :)

[@Princess_kitty14]

why getElementById and not querySelector? also, is not easier to store the dom in a var? it can save a little typing

[@amitgogna2701]

Thanks brad ,pls make some videos on bootstrap dashboard with some charts and bars in them

[@bryanbolanos6557]

Awesome tutorial!!

[@TheNanoWeb]

If you enter 0, then it shows the result. We need to add some statement for that also.

[@caroldanvers265]

Nice project, but it will only calculate grams to lbs and nothing more. Line 66 comes out null for some reason. document.getElementById('output').innerHTML = lbs/2.2046; document.getElementById('output').innerHTML = lbs*16;

[@mrgreggles998]

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?

[@TraversyMedia]

Honestly Gregg, I love both and I am torn. What I have been doing lately is using Atom for frontend html/css/vanilla ES5. And vscode for anything I use the terminal with. I LOVE the integrated terminal with Git Bash. I am thinking about moving completely away from Atom

[@RABWA333]

Thanks, nice video , informative 👍

[@ghnanax]

Hello Brad. Would you recommend windows over mac? I know Mac is the most sort after due to Linux etc. However, since you are knowledgeable in a number of languages what's your take on this? Thank you.

[@moycs777]

Very good exampleee, thanx!

[@rajatexplains]

Very nice video Brad..however, I'm having a hard time bringing in colors on my cards. It seems like classes- "card-primary" and others are ineffective

[@rajatexplains]

Thanks :)

[@brokiama]

Will you make a JS crash course? Didnt see it in your channel, you're a great teacher BTW.

[@TraversyMedia]

I have a JavaScript Fundamentals video but I will be doing an updated one soon

[@saurabhvavekar4394]

Please add series of small pure javascript projects

[@DEEPANKUMAR2]

Hi Mr.brad... Please create a playlist or a short video to set up web assembly in windows. I tried my all possibilities I thnk so, ending up with same error : CMake invocation failed due to exception! Please help me

[@obelix7349]

How to take two different elements from two different IDs and create a common function using both inputs? 1st element would be number input and second input would be selection drop down? Can someone help me?

[@pallavigondane5977]

Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLInputElement. i am getting this error in the last line of my code in the script part

[@harissaleem8688]

Can you please make a video on this concept recently i learned java, But in javascript it is difficult for me to understand that suppose we have let a = "Brad".length; then console .log(a) result will be 4 ; so, how we are accessing the dot length thing or maybe like let a = "Brad".toUpperCase(); how this function we are calling because " Brad " it is not a reference variable because in java we use the reference variable them put dot to call any thing inside the object of that class in javascript where is this coming from ???? Please make a video that will be all for me ane it will others also to build concept .

[@ajazmiah]

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

[@azizatawfiq828]

very nice tutorial ..thanks alot

[@MLievens]

bg- primary bg-success- bg-danger and instead of card-block: card-header

[@duke4279]

thank you sir this is awesome content :)

[@dndnegy73]

I don`t know why the`re sticking to the left of the page not in the middle even after offset?

[@TheFallinforyou]

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

[@siro8472]

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

[@mendisterenfeld2668]

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