Simple Weight Converter App With JavaScript & Bootstrap 4

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
ONE TIME DONATIONS:

FOLLOW TRAVERSY MEDIA:

COURSES & MORE INFO:

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

[aleferrira]

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

[jorjlm]

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.

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

[efsmedia]

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

[subvice]

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.

[onecarwood]

This will come in handy for weed conversions

[pickandhoop]

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

[praveenbadigerv]

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

[CodingPhase]

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

[vaibhavmor]

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!

[busyrand]

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

[cesarlara]

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

[cherulast]

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

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

[daviskane]

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

[stevankostadinovic]

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.

[lawrencenkadi]

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

[andreaskaaej]

Short and concise video, great explanations. Thanks 👍🏼