Simple Weight Converter App With JavaScript & Bootstrap 4
Вставка
- Опубліковано 12 вер 2024
- 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
codepen.io/bra...
BECOME A PATRON: Get special perks
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
FOLLOW TRAVERSY MEDIA:
/ traversymedia
/ traversymedia
/ traversymedia
COURSES & MORE INFO:
www.traversymed...
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.
Thanks a lot! I spent a good couple of minutes trying to figure out what I was doing wrong.
Thanks for the info! I helped my find what I was doing wrong.
thnks for the info! :D
Thank you
tnqs a lot for ur useful command.
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);
thx
Alessandra Souza another way by using math.floor()
thanks, Mayank Singh!
good try but I still get a null value
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.
geez thanks... i thought i was doing something wrong all the way xD
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.
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. :))
And also card-body instead of card-block
Same here..@@gabytzugabytzu16
Thanks man...
@@gabytzugabytzu16yehh when are they going to be consistent all through
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?
Awesome Melanie! Just awesome. Thanks for sharing
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!
Traversy Media thanks for the fun assignment that made practicing JS fun!
i know you.
This will come in handy for weed conversions
LOL!
hahha nice dude
lol!
LOL
Lolllll
By a mile and a half, you are by far the best tutor on UA-cam. Thank you so much for your videos and sharing your knowledge. Awesome stuff! :)
CAN YOU DO A VIDEO ON HOW TO DO A PORTFOLIO FOR BEGINNERS?
This is a great quick tutorial for people to get their practice. Nice Job!!! Love seeing you in the video more!!!
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.
Great Work Brad. Clear, fast and simple. As usual. Keep them coming!
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.
check JavaScript30 out
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
This stuff is really good. Got no money to be a paetron, so here's a thubs up.
Thanks my friend
With current bootstrap 4 cdn version "card card-primary" is now "card bg-primary". for future viewers
thx, i've been challeged with card card-primary but card bg-primary is so helpful!
Thank you!
Short and simple yet so many things to learn. Thanks Brad. 🙌
Vanilla way of programming is ❤
weight converter tools online : calculatorsnew.com/content/weight-converter/104
Thanks @Travery Media! Keep these small projects coming!
Thanks a ton for your content! this stuff has been really helpful. I've been binging on your tutorials!
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.
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!
Do more of these I'm really digging these vanilla JavaScript projects.
check JavaScript30 out
Thank you so much for making this Very Beginner Friendly! I really appreciate your explanations.
Very nice tutorial Brad, thank you.
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.
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;
});
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.
Short and concise video, great explanations. Thanks 👍🏼
card-primary etc. is now bg-primary on bootsrap, for those wondering
Additionally formatting with toFixed and also names on the left and values on the right. I love converter projects :)
Thanks Brad - another dope tutorial where I learned a ton!
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
you make me fall in love with web development
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
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
awesome vid as usual. best 17 minutes i have spent
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
this was awesome! keep the content coming!
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
Add it where exactly? I tried it and it kind of fucked up my code.
Nice Job Mate, easy to follow
Thanks Brad! Love you
finally I made simple app even if its a small one it worked and the bigger to come
thanks alot brad, that was so great and clear
from morroco
Nice one)
I'd add a check for typeof === 'number' and error handling.
You don't need that because you're using a number input.
Good for practicing Js and bootstrap as well.
Here's the homework: i made two versions.
options version:
codepen.io/Al-Yasa/full/OjJVrK
checkbox version:
codepen.io/Al-Yasa/full/GvRJBe
Awesome video man !! Pls do more this type of video
As always, great tutorial
Was in coding spree so picked a new 'coding theme' screensaver. Same like your banner I now see :)
I thought I might mention "e.target.value" returns an error, had to change it to "event.target.value" to get an output.
very nice tutorial ..thanks alot
Thank you, Brad! Nice video!
Excelente video, es el mas sencillo que he econtrado, muchas gracias!
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.
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.
Great informative video. Very helpful.
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)
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
Very informative tutorial Brad, thank you.
*homework submission:* codepen.io/csbrown/full/goaKWX
(the div and values reset after each button click, to minimize confusing UI)
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.
Play the video at 0.75x or 0.5x speed
For the people who are getting stuck at the colors: The bootstrap class has been changed to bg-primary not card-primary.
My code for converting all weights : github.com/Azzam49/weight_convertor
Good video ;)
got some knowledge regarding bootstrap and javascript
This was not a difficult project, but your teaching made it interesting. I'm going to make it in css now.🙂
Thanks a lot gentleman :)
Your videos are great!
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.
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
Awesome, as always! Thanks!! :)
very clear and nice video! thanks
Thank you :)
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 !
Awesome tutorial!!
Very good exampleee, thanx!
Thank you so Much Brad..🥇🥇🥇
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.
Will you make a JS crash course? Didnt see it in your channel, you're a great teacher BTW.
I have a JavaScript Fundamentals video but I will be doing an updated one soon
nice idea of giving homework for community.
Thanks, nice video , informative 👍
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?
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
U did great
Clear and simple
Awesome!
brad you are awesome :)
Thanks brad ,pls make some videos on bootstrap dashboard with some charts and bars in them
thank you sir this is awesome content :)
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.
Thank you!!
BOOTSTRAP 4 UPDATE:
For those who are watching after August 2017:
change bootstrap card-block class to card-body class
wow. Your new intro looks nice.
thank you broooo
amazing video
Emmet is awesome.
Nice Tutorial
Thank you sir!
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
You're awesome man
amazing man
Awesome bro
he makes these shortcuts eg .container and it makes automatically the class with what?? emet?? what is the name?
bg- primary bg-success- bg-danger and instead of card-block: card-header
Nice video!