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.
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);
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.
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. :))
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!
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.
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.
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
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.
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
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
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.
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.
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.
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
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
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
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.
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 !
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
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.
