title
Simple Weight Converter App With JavaScript & Bootstrap 4

description
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 https://codepen.io/bradtraversy/pen/jGNWey 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 http://www.twitter.com/traversymedia http://www.instagram.com/traversymedia COURSES & MORE INFO: http://www.traversymedia.com

detail
{'title': 'Simple Weight Converter App With JavaScript & Bootstrap 4', 'heatmap': [{'end': 183.115, 'start': 170.01, 'weight': 0.702}, {'end': 489.317, 'start': 469.013, 'weight': 0.884}, {'end': 561.953, 'start': 496.722, 'weight': 0.702}], 'summary': 'A weight converter app is built using vanilla javascript and bootstrap 4, allowing conversion of pounds to grams, kilograms, and ounces with a reactive ui and number input functionality. the interface is developed with html, bootstrap, and css, emphasizing html markup, bootstrap classes, and efficient development tools, along with the utilization of about 10 lines of javascript for creating a container, grid system, form, output section, and styling. additionally, the chapter covers adding an event listener for input events in javascript, creating a unit conversion script, and building the weight converter application with html and javascript.', 'chapters': [{'end': 87.046, 'segs': [{'end': 60.779, 'src': 'embed', 'start': 28.707, 'weight': 0, 'content': [{'end': 30.007, 'text': 'kilograms and ounces.', 'start': 28.707, 'duration': 1.3}, {'end': 33.509, 'text': "And we'll also be using Bootstrap for for the UI.", 'start': 30.648, 'duration': 2.861}, {'end': 34.63, 'text': 'So this is it right here.', 'start': 33.609, 'duration': 1.021}, {'end': 36.926, 'text': 'We have an HTML5 number input.', 'start': 35.165, 'duration': 1.761}, {'end': 40.868, 'text': 'We can either enter numbers or we can use the arrow keys.', 'start': 36.946, 'duration': 3.922}, {'end': 46.791, 'text': "If I go ahead and I either click the arrows or enter a number, you'll see that we get these cards.", 'start': 41.268, 'duration': 5.523}, {'end': 52.634, 'text': 'These are Bootstrap 4 cards with the equal weight in grams, kilograms, and ounces.', 'start': 46.811, 'duration': 5.823}, {'end': 55.816, 'text': "You'll see each time I click this, it'll change.", 'start': 52.654, 'duration': 3.162}, {'end': 57.397, 'text': "It's very reactive.", 'start': 55.876, 'duration': 1.521}, {'end': 60.779, 'text': "If I go ahead and I type in a number, it'll also do it as well.", 'start': 57.837, 'duration': 2.942}], 'summary': 'Using bootstrap for ui, showing equal weight in grams, kilograms, and ounces with reactive functionality.', 'duration': 32.072, 'max_score': 28.707, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc28707.jpg'}], 'start': 7.475, 'title': 'Building weight converter with vanilla javascript and bootstrap', 'summary': 'Involves building a weight converter using vanilla javascript and html with bootstrap 4, enabling conversion of pounds to grams, kilograms, and ounces, with reactive ui and number input functionality.', 'chapters': [{'end': 87.046, 'start': 7.475, 'title': 'Building weight converter with vanilla javascript and bootstrap', 'summary': 'Involves building a weight converter using vanilla javascript and html with bootstrap 4 for the ui, which can convert pounds to grams, kilograms, and ounces, featuring reactive ui and number input functionality.', 'duration': 79.571, 'highlights': ['The weight converter will take an input of pounds and provide the equivalent in grams, kilograms, and ounces, using Bootstrap 4 for the UI.', 'The UI features HTML5 number input that allows entering numbers or using arrow keys, showcasing its reactivity and functionality.', 'The creator promotes their Patreon page, offering special content, deals on future courses, and email support for YouTube videos and projects.']}], 'duration': 79.571, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc7475.jpg', 'highlights': ['The weight converter will take an input of pounds and provide the equivalent in grams, kilograms, and ounces, using Bootstrap 4 for the UI.', 'The UI features HTML5 number input that allows entering numbers or using arrow keys, showcasing its reactivity and functionality.']}, {'end': 580.038, 'segs': [{'end': 114.316, 'src': 'embed', 'start': 87.066, 'weight': 0, 'content': [{'end': 91.229, 'text': "I think you're going to be surprised when you see how little JavaScript we actually need for this app.", 'start': 87.066, 'duration': 4.163}, {'end': 92.97, 'text': 'We only need about 10 lines or so.', 'start': 91.269, 'duration': 1.701}, {'end': 99.393, 'text': "Most of the markup, most of the code we're writing is going to be HTML markup with bootstrap classes.", 'start': 93.63, 'duration': 5.763}, {'end': 105.037, 'text': "OK, now, I didn't have to use bootstrap, but I figured it's a good opportunity to kind of give you.", 'start': 99.413, 'duration': 5.624}, {'end': 108.879, 'text': 'give you an example of building a very simple UI with bootstrap, for.', 'start': 105.037, 'duration': 3.842}, {'end': 110.555, 'text': "All right, so let's get started.", 'start': 109.474, 'duration': 1.081}, {'end': 114.316, 'text': 'I have a folder called Wait Converter with a blank index HTML file.', 'start': 110.615, 'duration': 3.701}], 'summary': 'Minimal javascript, mostly html and bootstrap classes, only 10 lines needed.', 'duration': 27.25, 'max_score': 87.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc87066.jpg'}, {'end': 167.508, 'src': 'embed', 'start': 124.861, 'weight': 1, 'content': [{'end': 128.382, 'text': "which just opens whatever folder you're in on your local host.", 'start': 124.861, 'duration': 3.521}, {'end': 129.562, 'text': "And of course, you don't need this.", 'start': 128.401, 'duration': 1.161}, {'end': 133.184, 'text': 'You can just open up index HTML on your file system.', 'start': 129.943, 'duration': 3.241}, {'end': 134.925, 'text': "You also don't need to use Atom.", 'start': 133.485, 'duration': 1.44}, {'end': 138.907, 'text': 'You can use Visual Studio Code or Sublime or whatever it is that you like to use.', 'start': 134.945, 'duration': 3.962}, {'end': 141.068, 'text': "All right, so let's go ahead and get started.", 'start': 139.687, 'duration': 1.381}, {'end': 145.331, 'text': "I'm also using a plugin called Emmet, which allows me to use HTML shortcuts.", 'start': 141.108, 'duration': 4.223}, {'end': 153.357, 'text': "For example, I can do an exclamation and then hit Tab and it's going to give me the HTML head and body layout with some meta tags,", 'start': 145.812, 'duration': 7.545}, {'end': 155.179, 'text': 'just kind of a starter boilerplate.', 'start': 153.357, 'duration': 1.822}, {'end': 161.243, 'text': "All right, so for the title here, let's change that to Weight Converter.", 'start': 156.14, 'duration': 5.103}, {'end': 165.387, 'text': "And we're going to be using Bootstrap 4, so I'm going to grab the CDN for that.", 'start': 161.804, 'duration': 3.583}, {'end': 167.508, 'text': 'Search for Bootstrap 4 CDN.', 'start': 166.507, 'duration': 1.001}], 'summary': 'Using various tools, setting up a weight converter webpage with bootstrap 4.', 'duration': 42.647, 'max_score': 124.861, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc124861.jpg'}, {'end': 194.299, 'src': 'heatmap', 'start': 170.01, 'weight': 0.702, 'content': [{'end': 176.993, 'text': "And CDN stands for Content Delivery Network, and it's just a remote version of Bootstrap, so we don't actually have to download it and include it.", 'start': 170.01, 'duration': 6.983}, {'end': 178.513, 'text': 'It should be right here.', 'start': 177.553, 'duration': 0.96}, {'end': 183.115, 'text': "So let's grab that, paste that in.", 'start': 180.334, 'duration': 2.781}, {'end': 186.736, 'text': "It's just a link to the Bootstrap CSS file.", 'start': 183.155, 'duration': 3.581}, {'end': 194.299, 'text': "Currently, Bootstrap 4 is in Alpha 6, so yours may be different depending on when you're watching this,", 'start': 187.456, 'duration': 6.843}], 'summary': 'Cdn is a remote version of bootstrap, currently bootstrap 4 is in alpha 6.', 'duration': 24.289, 'max_score': 170.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc170010.jpg'}, {'end': 221.785, 'src': 'embed', 'start': 194.299, 'weight': 2, 'content': [{'end': 197.8, 'text': 'but it should be the latest version at this URL.', 'start': 194.299, 'duration': 3.501}, {'end': 202.187, 'text': "All right, so now that we did that, let's go ahead and start with our markup.", 'start': 199.124, 'duration': 3.063}, {'end': 206.931, 'text': "So in the body, let's create a container div.", 'start': 203.968, 'duration': 2.963}, {'end': 209.514, 'text': "So I'm going to just do .container tab.", 'start': 206.971, 'duration': 2.543}, {'end': 211.495, 'text': "And that's Emmet working right there.", 'start': 209.974, 'duration': 1.521}, {'end': 215.499, 'text': 'When I say .container tab, it gives me a div with the class of container.', 'start': 211.535, 'duration': 3.964}, {'end': 218.822, 'text': "Of course, if you don't have Emmet, you're going to have to type this out.", 'start': 215.899, 'duration': 2.923}, {'end': 221.785, 'text': "But when you see me do that, that's because I'm using that plugin.", 'start': 218.902, 'duration': 2.883}], 'summary': 'Creating a container div in markup using emmet plugin.', 'duration': 27.486, 'max_score': 194.299, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc194299.jpg'}, {'end': 258.808, 'src': 'embed', 'start': 229.958, 'weight': 6, 'content': [{'end': 237.163, 'text': "So what I'm going to do is use the grid system and I'm going to put everything into a six column grid and then just offset it to the center.", 'start': 229.958, 'duration': 7.205}, {'end': 240.125, 'text': "So let's create a div with the class of row.", 'start': 237.723, 'duration': 2.402}, {'end': 246.326, 'text': "And then we're going to do a div with the class of call MD dash six.", 'start': 240.865, 'duration': 5.461}, {'end': 248.206, 'text': 'Okay So six column div.', 'start': 246.626, 'duration': 1.58}, {'end': 251.187, 'text': "And in here, let's go ahead and put our H1.", 'start': 248.946, 'duration': 2.241}, {'end': 258.808, 'text': "And I'm going to give this H1 actually a class of display dash.", 'start': 251.387, 'duration': 7.421}], 'summary': 'Using a six-column grid system to center content with h1 having a class of display-dash.', 'duration': 28.85, 'max_score': 229.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc229958.jpg'}, {'end': 341.043, 'src': 'embed', 'start': 313.704, 'weight': 3, 'content': [{'end': 317.485, 'text': "All right, and then under the H1, we're going to put our form.", 'start': 313.704, 'duration': 3.781}, {'end': 319.645, 'text': "Okay, so let's put a form.", 'start': 317.745, 'duration': 1.9}, {'end': 322.906, 'text': 'No action attribute or anything like that.', 'start': 320.625, 'duration': 2.281}, {'end': 327.387, 'text': "And then in this form, we're going to have a div with the class of form group.", 'start': 323.606, 'duration': 3.781}, {'end': 329.635, 'text': 'which is a Bootstrap class.', 'start': 328.294, 'duration': 1.341}, {'end': 331.156, 'text': "We're going to have a label.", 'start': 330.115, 'duration': 1.041}, {'end': 333.678, 'text': "We don't need a for attribute.", 'start': 331.176, 'duration': 2.502}, {'end': 336.08, 'text': "Actually, you know what? We don't even need a label.", 'start': 334.659, 'duration': 1.421}, {'end': 337.401, 'text': "Let's just put the input.", 'start': 336.28, 'duration': 1.121}, {'end': 341.043, 'text': 'So input with a type of text.', 'start': 339.282, 'duration': 1.761}], 'summary': 'Creating a form with bootstrap class form group and text input.', 'duration': 27.339, 'max_score': 313.704, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc313704.jpg'}, {'end': 499.523, 'src': 'heatmap', 'start': 469.013, 'weight': 0.884, 'content': [{'end': 471.975, 'text': "Okay, and then we're going to do the same thing for kilograms and ounces.", 'start': 469.013, 'duration': 2.962}, {'end': 480.642, 'text': "So we're going to copy the card here, paste that in once again, and let's change this to kilograms.", 'start': 472.035, 'duration': 8.607}, {'end': 484.945, 'text': "And then we're going to change this to kg output.", 'start': 482.703, 'duration': 2.242}, {'end': 489.317, 'text': 'And then this is going to be ounces.', 'start': 487.256, 'duration': 2.061}, {'end': 493.26, 'text': "And we'll set this to OZ output.", 'start': 489.838, 'duration': 3.422}, {'end': 495.981, 'text': 'And that should be our interface.', 'start': 493.7, 'duration': 2.281}, {'end': 499.523, 'text': 'Now, I do want to give it a dark background.', 'start': 496.722, 'duration': 2.801}], 'summary': 'Creating interface for converting units to kilograms and ounces', 'duration': 30.51, 'max_score': 469.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc469013.jpg'}, {'end': 561.953, 'src': 'heatmap', 'start': 496.722, 'weight': 0.702, 'content': [{'end': 499.523, 'text': 'Now, I do want to give it a dark background.', 'start': 496.722, 'duration': 2.801}, {'end': 504.286, 'text': 'And I also want to give these cards a color for each one to kind of separate them.', 'start': 499.584, 'duration': 4.702}, {'end': 505.887, 'text': "So let's go back up to the style.", 'start': 504.366, 'duration': 1.521}, {'end': 508.609, 'text': "And in the body, we're going to say background.", 'start': 505.967, 'duration': 2.642}, {'end': 511.131, 'text': 'Set it to triple three.', 'start': 509.45, 'duration': 1.681}, {'end': 514.972, 'text': "And we're going to set the color to white.", 'start': 511.151, 'duration': 3.821}, {'end': 519.791, 'text': "Okay, now notice we can't see the text in the cards.", 'start': 516.567, 'duration': 3.224}, {'end': 522.573, 'text': "That's because the background is white.", 'start': 519.811, 'duration': 2.762}, {'end': 527.38, 'text': "So what we're going to do is just add a class to each one of these divs that have the class of card.", 'start': 522.714, 'duration': 4.666}, {'end': 531.345, 'text': "This one's going to be card dash primary.", 'start': 527.72, 'duration': 3.625}, {'end': 532.746, 'text': "That'll make it blue.", 'start': 531.365, 'duration': 1.381}, {'end': 535.83, 'text': 'Actually, I want the first one to be card primary.', 'start': 533.727, 'duration': 2.103}, {'end': 539.876, 'text': "And then the second one, we're going to do card.", 'start': 537.594, 'duration': 2.282}, {'end': 543.038, 'text': 'What did I do for the second one? Success, which will make it green.', 'start': 540.256, 'duration': 2.782}, {'end': 548.483, 'text': 'And then this one will be card-danger, which will make it red.', 'start': 544.219, 'duration': 4.264}, {'end': 549.844, 'text': 'And there we go.', 'start': 549.283, 'duration': 0.561}, {'end': 552.566, 'text': 'Now, I do want a little bit of spacing between these.', 'start': 550.264, 'duration': 2.302}, {'end': 557.27, 'text': "So what I'm going to do is I'm going to use the bootstrap class of mb-2.", 'start': 552.666, 'duration': 4.604}, {'end': 558.991, 'text': "That'll give it a margin bottom.", 'start': 557.65, 'duration': 1.341}, {'end': 561.953, 'text': 'Same thing here, mb2.', 'start': 560.352, 'duration': 1.601}], 'summary': 'Styling cards with dark background, white text, and different colors for separation.', 'duration': 65.231, 'max_score': 496.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc496722.jpg'}], 'start': 87.066, 'title': 'Building weight converter interfaces', 'summary': 'Discusses building a weight converter interface using html, bootstrap, and css with a focus on html markup, bootstrap classes, and efficient development tools. it covers the utilization of only about 10 lines of javascript, along with creating a container, grid system, form, output section, and styling for the interface.', 'chapters': [{'end': 194.299, 'start': 87.066, 'title': 'Building weight converter with bootstrap', 'summary': 'Discusses building a simple app using bootstrap, requiring only about 10 lines of javascript and focusing on html markup with bootstrap classes, along with the utilization of atom live server and emmet plugin for efficient development.', 'duration': 107.233, 'highlights': ['The app requires only about 10 lines of JavaScript, with the majority of the code being HTML markup with Bootstrap classes.', 'The usage of Atom Live Server enables opening the project folder on localhost for development convenience.', 'The discussion includes the utilization of the Emmet plugin for HTML shortcuts, enhancing the efficiency of development.']}, {'end': 580.038, 'start': 194.299, 'title': 'Building weight converter interface', 'summary': 'Demonstrates building a weight converter interface using html, bootstrap, and css, including creating a container, grid system, form, output section, and styling for the interface.', 'duration': 385.739, 'highlights': ['The chapter demonstrates creating a weight converter interface using HTML, Bootstrap, and CSS, including setting up a container, grid system, form, output section, and styling the interface with specific colors and spacing.', 'The chapter discusses using Emmet for efficient HTML code generation, showcasing the creation of a container div, a row div, and a six-column grid div, emphasizing the usage of Bootstrap classes for form and card styling.', 'The chapter highlights the implementation of a narrow app design by utilizing a six-column grid and center offset, showcasing the creation of a narrow app design using a six-column grid and center offset in Bootstrap.', 'The chapter illustrates the use of specific Bootstrap classes such as display and text center for styling elements, including the application of Bootstrap classes like display and text center for styling the H1 element in the weight converter interface.', "The chapter emphasizes the usage of Bootstrap's form control and form group classes, highlighting the utilization of form control and form group classes in Bootstrap to create and style the input field within the form of the weight converter interface."]}], 'duration': 492.972, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc87066.jpg', 'highlights': ['The app requires only about 10 lines of JavaScript, with the majority of the code being HTML markup with Bootstrap classes.', 'The chapter demonstrates creating a weight converter interface using HTML, Bootstrap, and CSS, including setting up a container, grid system, form, output section, and styling the interface with specific colors and spacing.', 'The chapter discusses using Emmet for efficient HTML code generation, showcasing the creation of a container div, a row div, and a six-column grid div, emphasizing the usage of Bootstrap classes for form and card styling.', "The chapter emphasizes the usage of Bootstrap's form control and form group classes, highlighting the utilization of form control and form group classes in Bootstrap to create and style the input field within the form of the weight converter interface.", 'The usage of Atom Live Server enables opening the project folder on localhost for development convenience.', 'The discussion includes the utilization of the Emmet plugin for HTML shortcuts, enhancing the efficiency of development.', 'The chapter highlights the implementation of a narrow app design by utilizing a six-column grid and center offset, showcasing the creation of a narrow app design using a six-column grid and center offset in Bootstrap.', 'The chapter illustrates the use of specific Bootstrap classes such as display and text center for styling elements, including the application of Bootstrap classes like display and text center for styling the H1 element in the weight converter interface.']}, {'end': 1015.849, 'segs': [{'end': 607.566, 'src': 'embed', 'start': 580.038, 'weight': 4, 'content': [{'end': 582.619, 'text': 'now we need to work on the javascript all right.', 'start': 580.038, 'duration': 2.581}, {'end': 590.121, 'text': 'now, when we start to type in here, if we start to type a number or we click the up arrow, we need an event listener for that.', 'start': 582.619, 'duration': 7.502}, {'end': 594.142, 'text': "okay, and the event type we're going to listen for is actually called input.", 'start': 590.121, 'duration': 4.021}, {'end': 599.404, 'text': "so let's go down to right above the body tag and we're going to put in our script tags.", 'start': 594.142, 'duration': 5.262}, {'end': 604.445, 'text': 'all right, and we want to first of all grab.', 'start': 599.404, 'duration': 5.041}, {'end': 607.566, 'text': 'We want to grab the input.', 'start': 605.625, 'duration': 1.941}], 'summary': 'Implement javascript event listener for input and number typing.', 'duration': 27.528, 'max_score': 580.038, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc580038.jpg'}, {'end': 730.922, 'src': 'embed', 'start': 698.217, 'weight': 0, 'content': [{'end': 701.299, 'text': 'Now what we want to do is we want to target these different outputs.', 'start': 698.217, 'duration': 3.082}, {'end': 703.3, 'text': 'For instance, the grams, the kg.', 'start': 701.399, 'duration': 1.901}, {'end': 705.941, 'text': 'And then we want to output the equivalent.', 'start': 703.7, 'duration': 2.241}, {'end': 709.183, 'text': 'And we can do that by selecting them by their ID.', 'start': 706.021, 'duration': 3.162}, {'end': 714.726, 'text': "So let's say document.get element by ID.", 'start': 709.703, 'duration': 5.023}, {'end': 718.188, 'text': 'And we want grams output.', 'start': 715.747, 'duration': 2.441}, {'end': 721.937, 'text': 'And then we just want to set inner HTML.', 'start': 719.676, 'duration': 2.261}, {'end': 730.922, 'text': "So the inner content, we're going to set that equal to, um, actually, you know what, let's change pounds to LBS.", 'start': 722.718, 'duration': 8.204}], 'summary': 'Targeting and converting units of measurement using document.getelementbyid and innerhtml.', 'duration': 32.705, 'max_score': 698.217, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc698217.jpg'}, {'end': 783.547, 'src': 'embed', 'start': 755.509, 'weight': 1, 'content': [{'end': 762.631, 'text': "Every time we fire off that event, it's going to do that translation, and it's going to output it to the grams output.", 'start': 755.509, 'duration': 7.122}, {'end': 766.974, 'text': 'All right, now we just need to do the same thing for kilograms and ounces.', 'start': 763.411, 'duration': 3.563}, {'end': 768.635, 'text': "So we're going to just copy this here.", 'start': 767.054, 'duration': 1.581}, {'end': 773.399, 'text': 'You know what? I need to wrap this so you guys can see the whole frigging thing.', 'start': 770.277, 'duration': 3.122}, {'end': 775.421, 'text': "Let's see.", 'start': 774.58, 'duration': 0.841}, {'end': 776.602, 'text': 'Toggle soft wrap.', 'start': 775.581, 'duration': 1.021}, {'end': 783.547, 'text': 'Why is that not working? Oh, I did have it wrapped.', 'start': 779.084, 'duration': 4.463}], 'summary': 'Developing a translation function for grams, kilograms and ounces.', 'duration': 28.038, 'max_score': 755.509, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc755509.jpg'}, {'end': 864.943, 'src': 'embed', 'start': 809.074, 'weight': 2, 'content': [{'end': 813.817, 'text': "Okay, that's going to give us kilograms.", 'start': 809.074, 'duration': 4.743}, {'end': 818.141, 'text': "And then for the ounces output, let's change this to oz output.", 'start': 814.498, 'duration': 3.643}, {'end': 822.943, 'text': 'And for that, we just need to do pounds times 16.', 'start': 819.082, 'duration': 3.861}, {'end': 826.244, 'text': "All right, so let's save that.", 'start': 822.943, 'duration': 3.301}, {'end': 828.985, 'text': "Let's go ahead and just put a one in here.", 'start': 826.804, 'duration': 2.181}, {'end': 830.125, 'text': 'And there we go.', 'start': 829.525, 'duration': 0.6}, {'end': 832.906, 'text': 'Okay, so one pound is 16 ounces.', 'start': 830.145, 'duration': 2.761}, {'end': 834.447, 'text': 'Most people know that.', 'start': 833.647, 'duration': 0.8}, {'end': 837.868, 'text': 'And then we have the conversion for grams and kilograms.', 'start': 834.867, 'duration': 3.001}, {'end': 838.869, 'text': 'All right.', 'start': 838.649, 'duration': 0.22}, {'end': 841.09, 'text': 'So our application is now working.', 'start': 838.949, 'duration': 2.141}, {'end': 846.933, 'text': "Now, one last thing I want to do is when we first come to the application, I don't want to show these cards here.", 'start': 841.671, 'duration': 5.262}, {'end': 851.716, 'text': 'So remember, we gave it an idea of output wrapped around all the cards.', 'start': 847.614, 'duration': 4.102}, {'end': 864.943, 'text': "What I'm going to do is when we first enter the application, let's go ahead and let's set document dot get element by D of output.", 'start': 852.456, 'duration': 12.487}], 'summary': 'Developed an application for unit conversion, including pounds to ounces and grams to kilograms, and adjusted initial display settings.', 'duration': 55.869, 'max_score': 809.074, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc809074.jpg'}], 'start': 580.038, 'title': 'Javascript event listener, unit conversion script, and weight converter application', 'summary': 'Covers adding event listener for input events in javascript, creating a unit conversion script for pounds to grams, kilograms, and ounces, and building a weight converter application with html and javascript, including additional assignment details.', 'chapters': [{'end': 697.436, 'start': 580.038, 'title': 'Javascript event listener', 'summary': 'Demonstrates adding an event listener for input events in javascript to capture and log user input in the console, enabling the program to respond to user actions, with a focus on grabbing input by id, adding event listeners, and capturing user input.', 'duration': 117.398, 'highlights': ['The chapter demonstrates adding an event listener for input events in JavaScript to capture and log user input in the console.', 'The event type being listened for is called input, and the function is triggered when a number is typed or the up arrow is clicked.', 'The script tags are added above the body tag to grab the input element with the ID of LBS input and add an event listener.', "A variable 'pounds' is created to capture the user input using the event parameter E and log it in the console."]}, {'end': 838.869, 'start': 698.217, 'title': 'Unit conversion script', 'summary': 'Discusses creating a script to convert units like pounds to grams, kilograms, and ounces using javascript, demonstrating the conversion formulas and their output.', 'duration': 140.652, 'highlights': ['The script demonstrates converting pounds to grams, kilograms, and ounces using JavaScript, with conversion formulas of lbs divided by 0.0022046 for grams, lbs divided by 2.2046 for kilograms, and lbs times 16 for ounces, showcasing the equivalent outputs.', 'The event triggers the translation of units, outputting the results to the respective unit outputs, ensuring real-time calculation and display of the converted values.', "The chapter emphasizes the use of IDs like grams output, kg output, and oz output for selecting and outputting the converted values, enhancing the script's efficiency and effectiveness."]}, {'end': 1015.849, 'start': 838.949, 'title': 'Creating weight converter application', 'summary': 'Demonstrates creating a weight converter application using html and javascript, including setting initial visibility, centering the application, and assigning a homework assignment to add additional weight unit conversions.', 'duration': 176.9, 'highlights': ['The chapter demonstrates creating a weight converter application using HTML and JavaScript.', 'The application initially hides the output cards by setting the style to hidden, and then displays the output when an event fires off.', 'Instructions are provided as a homework assignment to transform the application to include additional weight unit conversions like kilograms, grams, and ounces.']}], 'duration': 435.811, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/7l-ZAuU8TXc/pics/7l-ZAuU8TXc580038.jpg', 'highlights': ["The chapter emphasizes the use of IDs like grams output, kg output, and oz output for selecting and outputting the converted values, enhancing the script's efficiency and effectiveness.", 'The event triggers the translation of units, outputting the results to the respective unit outputs, ensuring real-time calculation and display of the converted values.', 'The application initially hides the output cards by setting the style to hidden, and then displays the output when an event fires off.', 'The script demonstrates converting pounds to grams, kilograms, and ounces using JavaScript, with conversion formulas of lbs divided by 0.0022046 for grams, lbs divided by 2.2046 for kilograms, and lbs times 16 for ounces, showcasing the equivalent outputs.', 'The chapter demonstrates adding an event listener for input events in JavaScript to capture and log user input in the console.']}], 'highlights': ['The script demonstrates converting pounds to grams, kilograms, and ounces using JavaScript, with conversion formulas of lbs divided by 0.0022046 for grams, lbs divided by 2.2046 for kilograms, and lbs times 16 for ounces, showcasing the equivalent outputs.', 'The event triggers the translation of units, outputting the results to the respective unit outputs, ensuring real-time calculation and display of the converted values.', "The chapter emphasizes the use of IDs like grams output, kg output, and oz output for selecting and outputting the converted values, enhancing the script's efficiency and effectiveness.", 'The UI features HTML5 number input that allows entering numbers or using arrow keys, showcasing its reactivity and functionality.', 'The weight converter will take an input of pounds and provide the equivalent in grams, kilograms, and ounces, using Bootstrap 4 for the UI.']}