title
Build a Calculator with Vue.js

description
In this tutorial, you will learn to use Vue.js to create a basic calculator component inside a web browser. 💻Code: https://github.com/codyseibert/vue-calculator 🔗Check out Cody Seibert's main channel: https://www.youtube.com/channel/UCsrVDPJBYeXItETFHG0qzyw -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://medium.freecodecamp.org

detail
{'title': 'Build a Calculator with Vue.js', 'heatmap': [{'end': 95.4, 'start': 40.359, 'weight': 0.965}, {'end': 395.324, 'start': 380.161, 'weight': 0.728}, {'end': 611.293, 'start': 528.214, 'weight': 0.759}, {'end': 803.397, 'start': 783.46, 'weight': 0.805}, {'end': 1007.019, 'start': 991.058, 'weight': 0.945}, {'end': 1105.48, 'start': 1067.108, 'weight': 1}, {'end': 1213.894, 'start': 1179.934, 'weight': 0.746}], 'summary': "Tutorial series 'build a calculator with vue.js' covers creating a vue.js calculator app replicating mac calculator's layout, implementing css grid, styling, logic, and operator functions, resulting in a functional calculator app with remaining bugs and room for further development.", 'chapters': [{'end': 35.497, 'segs': [{'end': 35.497, 'src': 'embed', 'start': 0.229, 'weight': 0, 'content': [{'end': 7.491, 'text': "hey coders, i'm cody sybert and welcome to another tutorial where i'm going to show you how to build a calculator app using vue js.", 'start': 0.229, 'duration': 7.262}, {'end': 9.831, 'text': "so, to start off, let's just go ahead and show you what we're building.", 'start': 7.491, 'duration': 2.34}, {'end': 16.833, 'text': "so i'm just going to load up the mac calculator, which has a kind of a grid i guess this is like a 4x5 grid that has buttons,", 'start': 9.831, 'duration': 7.002}, {'end': 21.254, 'text': 'you have different operands and operators and, of course, you have a display section up here.', 'start': 16.833, 'duration': 4.421}, {'end': 27.895, 'text': "so that's what we're going to try to emulate, And I don't know if it's gonna work 100%, as this app does, but we're gonna try to get close.", 'start': 21.254, 'duration': 6.641}, {'end': 30.736, 'text': "So moving on, I'm kind of going to skip the setup.", 'start': 28.475, 'duration': 2.261}, {'end': 35.497, 'text': 'I basically use VCLI to set up this project here.', 'start': 31.496, 'duration': 4.001}], 'summary': 'Cody sybert demonstrates building a calculator app using vue.js, emulating a 4x5 grid with operands, operators, and a display section.', 'duration': 35.268, 'max_score': 0.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s229.jpg'}], 'start': 0.229, 'title': 'Building a vue.js calculator app', 'summary': 'Focuses on creating a calculator app with vue.js, replicating the 4x5 grid layout of the mac calculator, incorporating various operands, operators, and a display section.', 'chapters': [{'end': 35.497, 'start': 0.229, 'title': 'Build a calculator app with vue.js', 'summary': "Demonstrates building a calculator app using vue.js, aiming to emulate the mac calculator's 4x5 grid layout with different operands, operators, and a display section.", 'duration': 35.268, 'highlights': ["The tutorial is about building a calculator app using Vue.js, aiming to emulate the Mac calculator's layout with a 4x5 grid, operands, operators, and a display section.", 'The tutorial skips the setup process and uses VCLI to set up the project.']}], 'duration': 35.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s229.jpg', 'highlights': ["The tutorial is about building a calculator app using Vue.js, aiming to emulate the Mac calculator's layout with a 4x5 grid, operands, operators, and a display section.", 'The tutorial skips the setup process and uses VCLI to set up the project.']}, {'end': 266.674, 'segs': [{'end': 98.582, 'src': 'heatmap', 'start': 35.597, 'weight': 4, 'content': [{'end': 40.019, 'text': "And what we're going to do is just kind of modify what's already there to build out our calculator app.", 'start': 35.597, 'duration': 4.422}, {'end': 42.64, 'text': "So to start off, let's go into the app dot view file.", 'start': 40.359, 'duration': 2.281}, {'end': 47.082, 'text': "Let's just go ahead and clean some of this up so that we only display our calculator.", 'start': 43.38, 'duration': 3.702}, {'end': 48.122, 'text': "So I'm gonna get rid of this image.", 'start': 47.142, 'duration': 0.98}, {'end': 54.988, 'text': "And I'm also going to get rid of this hello world, but instead of just deleting it, I'm just going to go ahead and rename it to calculator.", 'start': 49.906, 'duration': 5.082}, {'end': 58.849, 'text': "And then anywhere I'm importing it, just change out the calculator.", 'start': 55.008, 'duration': 3.841}, {'end': 62.03, 'text': "So I'll save that.", 'start': 61.31, 'duration': 0.72}, {'end': 65.071, 'text': "That's going to crash because obviously we haven't created the calculator component.", 'start': 62.19, 'duration': 2.881}, {'end': 69.172, 'text': "So if I go back to my components folder, I'm just going to rename hello world to calculator.", 'start': 65.211, 'duration': 3.961}, {'end': 77.284, 'text': 'Open that up and just go ahead and gut basically everything we have so we can start fresh.', 'start': 72.358, 'duration': 4.926}, {'end': 82.591, 'text': "And just to verify that this is working, I'll leave a little hello world message in here and save that.", 'start': 78.305, 'duration': 4.286}, {'end': 90.821, 'text': 'Go ahead and gut the styles, gut the source, save that, and we are good to go at this point.', 'start': 84.753, 'duration': 6.068}, {'end': 95.4, 'text': "We don't need to touch any of the other files that I that I'm aware of.", 'start': 92.958, 'duration': 2.442}, {'end': 98.582, 'text': "So let's go ahead and talk about what we need to do.", 'start': 96.1, 'duration': 2.482}], 'summary': 'Modifying app to build calculator app, cleaning up code, renaming components, and verifying functionality.', 'duration': 62.985, 'max_score': 35.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s35597.jpg'}, {'end': 95.4, 'src': 'embed', 'start': 65.211, 'weight': 5, 'content': [{'end': 69.172, 'text': "So if I go back to my components folder, I'm just going to rename hello world to calculator.", 'start': 65.211, 'duration': 3.961}, {'end': 77.284, 'text': 'Open that up and just go ahead and gut basically everything we have so we can start fresh.', 'start': 72.358, 'duration': 4.926}, {'end': 82.591, 'text': "And just to verify that this is working, I'll leave a little hello world message in here and save that.", 'start': 78.305, 'duration': 4.286}, {'end': 90.821, 'text': 'Go ahead and gut the styles, gut the source, save that, and we are good to go at this point.', 'start': 84.753, 'duration': 6.068}, {'end': 95.4, 'text': "We don't need to touch any of the other files that I that I'm aware of.", 'start': 92.958, 'duration': 2.442}], 'summary': "Renamed 'hello world' to 'calculator', gutted components folder, and verified working with 'hello world' message.", 'duration': 30.189, 'max_score': 65.211, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s65211.jpg'}, {'end': 153.318, 'src': 'embed', 'start': 111.491, 'weight': 1, 'content': [{'end': 116.955, 'text': "Then inside our styles, I'm going to define a new calculator class.", 'start': 111.491, 'duration': 5.464}, {'end': 120.946, 'text': 'which we can use CSS grid.', 'start': 119.366, 'duration': 1.58}, {'end': 123.547, 'text': "So I'm going to say grid template columns.", 'start': 120.966, 'duration': 2.581}, {'end': 131.149, 'text': "I'm going to say there's going to be four columns, and I'm going to repeat them with equal width.", 'start': 123.567, 'duration': 7.582}, {'end': 132.949, 'text': 'So this is a way to do percentages.', 'start': 131.389, 'duration': 1.56}, {'end': 135.51, 'text': 'So each one has the same equal percentage of each other.', 'start': 133.029, 'duration': 2.481}, {'end': 141.991, 'text': 'And then for the rows, this will kind of make sense in a second when we visualize it.', 'start': 138.731, 'duration': 3.26}, {'end': 144.512, 'text': "For the rows, I'm just going to give it a grid auto rows.", 'start': 142.151, 'duration': 2.361}, {'end': 150.057, 'text': "And that's going to put some spacing automatically between all of our rows.", 'start': 147.076, 'duration': 2.981}, {'end': 152.377, 'text': 'So each one should at least be 50 in height.', 'start': 150.097, 'duration': 2.28}, {'end': 153.318, 'text': "So I'm going to save this.", 'start': 152.537, 'duration': 0.781}], 'summary': 'Defines a new css grid with four equal-width columns and automatic row spacing, each at least 50px in height.', 'duration': 41.827, 'max_score': 111.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s111491.jpg'}, {'end': 225.12, 'src': 'embed', 'start': 193.774, 'weight': 0, 'content': [{'end': 196.676, 'text': 'That tells the component that it needs to be a grid, a CSS grid.', 'start': 193.774, 'duration': 2.902}, {'end': 203.6, 'text': "So if you notice here, as I keep pasting new components, we're getting a four column by infinity amount of rows grid.", 'start': 197.216, 'duration': 6.384}, {'end': 205.621, 'text': "So that's kind of a step in the right direction.", 'start': 204.08, 'duration': 1.541}, {'end': 214.013, 'text': "And what do we need for our calculator? Well, first of all, we needed a display, I'm gonna say class display.", 'start': 205.661, 'duration': 8.352}, {'end': 217.355, 'text': "And I'll just type in some random number here.", 'start': 214.033, 'duration': 3.322}, {'end': 225.12, 'text': 'And what we need to do is we need to make this display span the entire top four columns.', 'start': 217.375, 'duration': 7.745}], 'summary': 'Using css grid to create a 4-column infinite rows grid for a calculator display.', 'duration': 31.346, 'max_score': 193.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s193774.jpg'}], 'start': 35.597, 'title': 'Building and styling calculator app with css grid', 'summary': 'Covers modifying and building a calculator app, implementing css grid, and building a css grid for the calculator component. it emphasizes code modifications, app development, and specific css grid implementations for the calculator.', 'chapters': [{'end': 90.821, 'start': 35.597, 'title': 'Building calculator app', 'summary': 'Outlines the steps to modify and build a calculator app, including cleaning up the view file, renaming components, and verifying the functionality, with an emphasis on code modifications and app development.', 'duration': 55.224, 'highlights': ["The chapter starts by modifying the app dot view file to only display the calculator, including removing unnecessary elements like an image and renaming 'hello world' to 'calculator'.", "The next step involves renaming the 'hello world' component to 'calculator' in the components folder, clearing out the existing content, and adding a test message to verify functionality.", "The process continues by gutting the styles and source of the 'calculator' component to start fresh and ensure proper functionality."]}, {'end': 153.318, 'start': 92.958, 'title': 'Implementing css grid for calculator', 'summary': 'Discusses implementing css grid for a calculator, defining a new calculator class with grid template columns having four equal-width columns, and grid auto rows with automatic spacing of at least 50 in height.', 'duration': 60.36, 'highlights': ['Defining a new calculator class with grid template columns having four equal-width columns', 'Grid auto rows with automatic spacing of at least 50 in height']}, {'end': 266.674, 'start': 154.698, 'title': 'Building css grid for calculator component', 'summary': 'Demonstrates how to use css grid to create a four-column by infinity rows grid for a calculator component, and how to style and position specific elements within the grid.', 'duration': 111.976, 'highlights': ['Using CSS grid to create a four-column by infinity rows grid for calculator component The chapter demonstrates how to use CSS grid to create a versatile layout for the calculator component, allowing for a flexible arrangement of child elements.', 'Styling and positioning specific elements within the grid The chapter illustrates how to style and position specific elements within the grid, such as the display element, by specifying the grid columns they should occupy and applying visual attributes like color and font size.']}], 'duration': 231.077, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s35597.jpg', 'highlights': ['Using CSS grid to create a four-column by infinity rows grid for calculator component', 'Styling and positioning specific elements within the grid', 'Defining a new calculator class with grid template columns having four equal-width columns', 'Grid auto rows with automatic spacing of at least 50 in height', "Modifying the app dot view file to only display the calculator, including removing unnecessary elements like an image and renaming 'hello world' to 'calculator'", "Renaming the 'hello world' component to 'calculator' in the components folder, clearing out the existing content, and adding a test message to verify functionality", "Gutting the styles and source of the 'calculator' component to start fresh and ensure proper functionality"]}, {'end': 509.843, 'segs': [{'end': 433.531, 'src': 'heatmap', 'start': 380.161, 'weight': 0, 'content': [{'end': 381.461, 'text': 'Obviously, I could just give them buttons.', 'start': 380.161, 'duration': 1.3}, {'end': 385.902, 'text': "Just to keep it simple, though, I'm just going to give it class equals button.", 'start': 382.361, 'duration': 3.541}, {'end': 391.443, 'text': 'Go ahead and fix that zero.', 'start': 390.023, 'duration': 1.42}, {'end': 395.324, 'text': "Go down here and I'll make a new button style.", 'start': 393.524, 'duration': 1.8}, {'end': 398.505, 'text': 'So background color.', 'start': 395.384, 'duration': 3.121}, {'end': 407.585, 'text': 'is equal to an E for now order one pixel solid.', 'start': 401.86, 'duration': 5.725}, {'end': 412.669, 'text': "Alright, so we're making a little bit of progress.", 'start': 407.605, 'duration': 5.064}, {'end': 418.073, 'text': 'So, going back to the calculator, notice that this whole row here,', 'start': 413.83, 'duration': 4.243}, {'end': 423.658, 'text': 'or column I mean as kind of like an orange text for the orange color in the background.', 'start': 418.073, 'duration': 5.585}, {'end': 427.821, 'text': "So what I'm gonna do here is define a new class called operator.", 'start': 423.678, 'duration': 4.143}, {'end': 433.531, 'text': "I'll give it a background color of orange and then a text color of white.", 'start': 430.188, 'duration': 3.343}], 'summary': 'Creating button styles with class equals button and defining new class called operator for orange background and white text.', 'duration': 166.837, 'max_score': 380.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s380161.jpg'}, {'end': 512.765, 'src': 'embed', 'start': 487.622, 'weight': 4, 'content': [{'end': 493.504, 'text': "And of course, if you don't want the columns to be so large, what you could do is just set a width to our calculator.", 'start': 487.622, 'duration': 5.882}, {'end': 497.145, 'text': "So I'll give it a width of like 400 pixels.", 'start': 493.524, 'duration': 3.621}, {'end': 501.927, 'text': 'And then a margin 0 auto to make it centered here.', 'start': 498.666, 'duration': 3.261}, {'end': 506.482, 'text': 'OK, so our calculator is looking a little bit more like this calculator here.', 'start': 503.16, 'duration': 3.322}, {'end': 509.843, 'text': "I'm not going to spend too much time making it look exactly as is.", 'start': 506.642, 'duration': 3.201}, {'end': 512.765, 'text': "I don't need to text align this right or whatnot.", 'start': 511.044, 'duration': 1.721}], 'summary': 'Setting calculator width to 400 pixels and centering it with margin 0 auto.', 'duration': 25.143, 'max_score': 487.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s487622.jpg'}], 'start': 266.694, 'title': 'Creating and styling a calculator', 'summary': 'Covers creating rows for a calculator with ac, plus/minus, percent, divide, numbers, and symbols, along with styling the layout using grid column classes, specific button styles, operator classes, and width adjustments.', 'chapters': [{'end': 345.275, 'start': 266.694, 'title': 'Creating calculator rows', 'summary': 'Discusses creating rows for a calculator, including adding ac, plus/minus, percent, divide, and various numbers and symbols, with a minor mistake in adding a plus sign to zero.', 'duration': 78.581, 'highlights': ['Creating rows for a calculator, including AC, plus/minus, percent, divide, and various numbers and symbols.', 'A minor mistake in adding a plus sign to zero.']}, {'end': 509.843, 'start': 346.817, 'title': 'Styling a calculator layout', 'summary': 'Demonstrates how to style a calculator layout by using grid column classes, creating specific button styles, defining classes for operators, and adjusting the width of the calculator to achieve the desired appearance.', 'duration': 163.026, 'highlights': ["By using grid column class, the '0' is set to take up two columns with a style of grid column of 1/3, resulting in a visually appealing layout.", "A new class called 'button' is assigned to all buttons, and a specific button style with background color and border is created to enhance the appearance of the buttons.", "A class 'operator' with a background color of orange and white text color is defined for the operator buttons (divide, times, minus, plus, and equals) to distinguish them visually.", 'Adjusting the width of the calculator to 400 pixels and centering it with margin 0 auto contributes to achieving a layout similar to the desired calculator.']}], 'duration': 243.149, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s266694.jpg', 'highlights': ['Creating rows for a calculator, including AC, plus/minus, percent, divide, and various numbers and symbols.', "By using grid column class, the '0' is set to take up two columns with a style of grid column of 1/3, resulting in a visually appealing layout.", "A new class called 'button' is assigned to all buttons, and a specific button style with background color and border is created to enhance the appearance of the buttons.", "A class 'operator' with a background color of orange and white text color is defined for the operator buttons (divide, times, minus, plus, and equals) to distinguish them visually.", 'Adjusting the width of the calculator to 400 pixels and centering it with margin 0 auto contributes to achieving a layout similar to the desired calculator.', 'A minor mistake in adding a plus sign to zero.']}, {'end': 921.626, 'segs': [{'end': 542.539, 'src': 'embed', 'start': 511.044, 'weight': 0, 'content': [{'end': 512.765, 'text': "I don't need to text align this right or whatnot.", 'start': 511.044, 'duration': 1.721}, {'end': 520.068, 'text': 'But anyway, the next fun steps is we need to declare the logic and the bindings to our different buttons and display.', 'start': 513.525, 'duration': 6.543}, {'end': 525.411, 'text': 'The first thing I see here is we could probably abstract this into a view.', 'start': 521.729, 'duration': 3.682}, {'end': 528.114, 'text': 'data property here.', 'start': 526.653, 'duration': 1.461}, {'end': 538.638, 'text': "So let's go to our view component and declare a data function, which returns something that has a display or a current set equal to an empty string.", 'start': 528.214, 'duration': 10.424}, {'end': 542.539, 'text': "And then up here, I'm going to just interpolate that here and say current.", 'start': 539.498, 'duration': 3.041}], 'summary': 'Declare logic and bindings for buttons and display, abstract into view component with data function returning empty string.', 'duration': 31.495, 'max_score': 511.044, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s511044.jpg'}, {'end': 611.293, 'src': 'heatmap', 'start': 528.214, 'weight': 0.759, 'content': [{'end': 538.638, 'text': "So let's go to our view component and declare a data function, which returns something that has a display or a current set equal to an empty string.", 'start': 528.214, 'duration': 10.424}, {'end': 542.539, 'text': "And then up here, I'm going to just interpolate that here and say current.", 'start': 539.498, 'duration': 3.041}, {'end': 545.68, 'text': "So that's going to render whatever the current data value is.", 'start': 542.619, 'duration': 3.061}, {'end': 552.943, 'text': "So for instance, if I say one, two, three, that's going to render out one, two, three, or if I type hello world, that's going to type out the string.", 'start': 545.74, 'duration': 7.203}, {'end': 555.559, 'text': "But for now, we're going to keep that blank.", 'start': 554.258, 'duration': 1.301}, {'end': 559.841, 'text': "And then we're just going to fall back on a zero if it's not defined.", 'start': 556.099, 'duration': 3.742}, {'end': 565.484, 'text': 'And then we can kind of just go through these buttons and one by one add whatever functionality we need to it.', 'start': 560.741, 'duration': 4.743}, {'end': 570.627, 'text': "So to start off, let's just do a click callback on the clear button.", 'start': 566.284, 'duration': 4.343}, {'end': 572.368, 'text': "And we're going to call a function called clear.", 'start': 570.867, 'duration': 1.501}, {'end': 581.653, 'text': 'And to define functions on your view component, and notice that this is a view component, all you need to do is add a methods attribute.', 'start': 574.369, 'duration': 7.284}, {'end': 584.717, 'text': 'and then define the method that you want.', 'start': 582.836, 'duration': 1.881}, {'end': 586.238, 'text': "So I'm going to say clear as a method.", 'start': 584.737, 'duration': 1.501}, {'end': 591.101, 'text': "And what it's going to do, it's going to reset current back to the empty string here.", 'start': 586.718, 'duration': 4.383}, {'end': 596.684, 'text': 'So if we were to have something typed in there and we clicked on the C, notice that it goes back to zero.', 'start': 591.921, 'duration': 4.763}, {'end': 604.909, 'text': "So moving right along, let's go ahead and try to implement the next method, which is sign.", 'start': 600.186, 'duration': 4.723}, {'end': 611.293, 'text': "So again, I'm just going to add a click listener to this and call a sign method.", 'start': 605.85, 'duration': 5.443}], 'summary': 'Creating a view component with data functions and methods for click callbacks and functionality implementation.', 'duration': 83.079, 'max_score': 528.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s528214.jpg'}, {'end': 755.479, 'src': 'embed', 'start': 714.281, 'weight': 1, 'content': [{'end': 717.883, 'text': "So to kind of show that, let's just make current equal to like 600.", 'start': 714.281, 'duration': 3.602}, {'end': 722.747, 'text': 'And then if I click on that percentage, notice that it becomes six.', 'start': 717.883, 'duration': 4.864}, {'end': 726.269, 'text': 'I click it again, it should become 0.06.', 'start': 724.728, 'duration': 1.541}, {'end': 729.231, 'text': 'Okay, so that is working fine.', 'start': 726.269, 'duration': 2.962}, {'end': 736.636, 'text': 'Awesome At this point, you should kind of see how easy it is to like write out your functionality.', 'start': 730.392, 'duration': 6.244}, {'end': 741.239, 'text': "Your calculator has a particular state and we're modifying the state as we click the different methods here.", 'start': 736.676, 'duration': 4.563}, {'end': 747.416, 'text': "All right, so let's move along to the different numbers at this point.", 'start': 743.055, 'duration': 4.361}, {'end': 751.538, 'text': "I think we'll leave the operators for once we have the numbers implemented.", 'start': 747.436, 'duration': 4.102}, {'end': 753.618, 'text': 'So, to implement the numbers.', 'start': 752.418, 'duration': 1.2}, {'end': 755.479, 'text': 'basically, we need to think what do we need to do?', 'start': 753.618, 'duration': 1.861}], 'summary': 'Demonstrating calculator functionality by modifying state with clicks, implementing numbers next.', 'duration': 41.198, 'max_score': 714.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s714281.jpg'}, {'end': 812.023, 'src': 'heatmap', 'start': 783.46, 'weight': 0.805, 'content': [{'end': 788.743, 'text': "So I'm going to do this.current concatenated with number.", 'start': 783.46, 'duration': 5.283}, {'end': 791.445, 'text': "So it's more explicit that we're just joining two strings together.", 'start': 789.004, 'duration': 2.441}, {'end': 796.289, 'text': 'So now we can actually use this method we just created.', 'start': 794.107, 'duration': 2.182}, {'end': 803.397, 'text': "If we go up to here, And for any time we have a number, I'm just going to go ahead and use that click callback.", 'start': 796.429, 'duration': 6.968}, {'end': 806.619, 'text': "I'm gonna say at click is equal to append.", 'start': 804.778, 'duration': 1.841}, {'end': 812.023, 'text': "And then for each one, let's just go ahead and put in the string that we want to append.", 'start': 806.639, 'duration': 5.384}], 'summary': 'Demonstrating string concatenation method for joining strings in code.', 'duration': 28.563, 'max_score': 783.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s783460.jpg'}, {'end': 907.637, 'src': 'embed', 'start': 876.141, 'weight': 3, 'content': [{'end': 880.985, 'text': "What we're going to do is very similar to append, but we only want to append the dot if it doesn't already exist.", 'start': 876.141, 'duration': 4.844}, {'end': 883.287, 'text': "So I'm going to say this dot current.", 'start': 881.946, 'duration': 1.341}, {'end': 896.709, 'text': "If sorry, if this dot current dot index of the dot is not equal to negative one, then we don't need to append it.", 'start': 886.102, 'duration': 10.607}, {'end': 900.032, 'text': "In fact, I'm just going to say make sure that the dot doesn't exist.", 'start': 897.65, 'duration': 2.382}, {'end': 907.637, 'text': "And if it doesn't exist, we can just say this dot append, and then append the dot.", 'start': 900.212, 'duration': 7.425}], 'summary': 'The code checks if a dot exists and appends it if not.', 'duration': 31.496, 'max_score': 876.141, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s876141.jpg'}], 'start': 511.044, 'title': 'Implementing button logic and building calculator application', 'summary': 'Explains how to declare logic and bindings for different buttons and display in a view component, including implementing functions such as clear and sign to manipulate the displayed data. it also covers the process of building a calculator application, including adding, dividing, and appending numbers, and ensuring that the dot is only added once, showcasing the ease of writing out functionality.', 'chapters': [{'end': 662.807, 'start': 511.044, 'title': 'Implementing button logic in view component', 'summary': 'Explains how to declare logic and bindings for different buttons and display in a view component, including implementing functions such as clear and sign to manipulate the displayed data.', 'duration': 151.763, 'highlights': ['The chapter explains how to declare logic and bindings for different buttons and display in a view component, including implementing functions such as clear and sign to manipulate the displayed data. This includes declaring a data function to return a display with an empty string, interpolating the current data value, and defining methods for functionalities like clearing the display and manipulating the displayed data when the user clicks on plus or minus buttons.', 'The chapter demonstrates how to declare a data function in a view component, returning a display with an empty string, and then interpolating the current data value to render the displayed data. It also covers defining methods for functionalities like clearing the display and manipulating the displayed data when the user clicks on plus or minus buttons.', 'The chapter details the implementation of functions like clear and sign in a view component, where clear resets the current display to an empty string when the clear button is clicked, and sign appends or removes a minus sign in front of the displayed data based on user interaction with the plus or minus buttons.']}, {'end': 921.626, 'start': 663.227, 'title': 'Building a calculator application', 'summary': 'Covers the process of building a calculator application, including adding, dividing, and appending numbers, and ensuring that the dot is only added once, showcasing the ease of writing out functionality.', 'duration': 258.399, 'highlights': ['The chapter covers the process of building a calculator application. It details the step-by-step process of creating a calculator application, including adding different functionalities and methods.', 'Showcasing the ease of writing out functionality for the application. The demonstration illustrates how easy it is to write out the functionality for the calculator application, emphasizing the simplicity of the process.', 'Dividing numbers by 100 to display as a percentage. The code demonstrates the functionality of dividing any given number by 100 to display it as a percentage, exemplified by converting 600 to 6 and then to 0.06 when the percentage is clicked.', 'Appending numbers to the existing string when a number is clicked. The process of appending numbers to the end of the existing string is explained, showcasing the straightforward method of adding numbers to the calculator application.', 'Ensuring that the dot is only added once. The code ensures that the dot is only added once by checking if it already exists in the current string, and if not, appends the dot accordingly.']}], 'duration': 410.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s511044.jpg', 'highlights': ['The chapter explains how to declare logic and bindings for different buttons and display in a view component, including implementing functions such as clear and sign to manipulate the displayed data.', 'The chapter covers the process of building a calculator application, including adding different functionalities and methods.', 'Dividing numbers by 100 to display as a percentage.', 'Ensuring that the dot is only added once.', 'Showcasing the ease of writing out functionality for the application.']}, {'end': 1355.086, 'segs': [{'end': 950.043, 'src': 'embed', 'start': 922.526, 'weight': 0, 'content': [{'end': 929.867, 'text': "All right, we're making some really good progress now to the more difficult part of building a calculator app, which is the operators.", 'start': 922.526, 'duration': 7.341}, {'end': 935.828, 'text': 'So for each of these operators, we want to call a different kind of click callback.', 'start': 930.027, 'duration': 5.801}, {'end': 939.429, 'text': "So for this one, I'm going to say divide.", 'start': 937.109, 'duration': 2.32}, {'end': 943.09, 'text': "For times, I'm just going to say times.", 'start': 941.27, 'duration': 1.82}, {'end': 946.201, 'text': "I'll say minus.", 'start': 945.421, 'duration': 0.78}, {'end': 950.043, 'text': "And then for this one, I'll say add.", 'start': 948.483, 'duration': 1.56}], 'summary': 'Making progress on building a calculator app with different operator callbacks.', 'duration': 27.517, 'max_score': 922.526, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s922526.jpg'}, {'end': 1008.64, 'src': 'heatmap', 'start': 979.209, 'weight': 1, 'content': [{'end': 985.674, 'text': 'we want to kind of set inside of our internal component state what our operator is going to be when we click the equal button.', 'start': 979.209, 'duration': 6.465}, {'end': 989.797, 'text': "So up here, I'm going to make a new data called operator.", 'start': 985.914, 'duration': 3.883}, {'end': 992.119, 'text': "And I'll set it to null for now.", 'start': 991.058, 'duration': 1.061}, {'end': 999.104, 'text': "And basically, whenever we click one of these, we're just going to define the operator as a new callback function.", 'start': 993.24, 'duration': 5.864}, {'end': 1007.019, 'text': "For each of these, it's going to take a and b, and it's going to return some type of math that is happening between those two.", 'start': 1000.674, 'duration': 6.345}, {'end': 1008.64, 'text': 'So in this case, divide will be this.', 'start': 1007.199, 'duration': 1.441}], 'summary': 'Setting operator in component state for math operations.', 'duration': 29.431, 'max_score': 979.209, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s979209.jpg'}, {'end': 1105.48, 'src': 'heatmap', 'start': 1067.108, 'weight': 1, 'content': [{'end': 1075.213, 'text': "So some additional logic we need to do is I'm going to say make another one called previous, which is set to null.", 'start': 1067.108, 'duration': 8.105}, {'end': 1080.816, 'text': 'And then I also want to add a Boolean called operator clicked, which is going to be false.', 'start': 1076.273, 'duration': 4.543}, {'end': 1086.159, 'text': 'So anytime we click one of these operators, we just basically want to do operator clicked.', 'start': 1081.816, 'duration': 4.343}, {'end': 1089.16, 'text': 'is equal to true.', 'start': 1088.399, 'duration': 0.761}, {'end': 1093.726, 'text': 'And then we want to set the previous equal to the current.', 'start': 1091.283, 'duration': 2.443}, {'end': 1105.48, 'text': "And I could probably abstract this into a helper function since it's very, very similar logic between all of these.", 'start': 1101.475, 'duration': 4.005}], 'summary': "Code logic includes setting 'previous' to null, adding 'operator clicked' boolean, and abstracting logic into a helper function.", 'duration': 38.372, 'max_score': 1067.108, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s1067108.jpg'}, {'end': 1213.894, 'src': 'heatmap', 'start': 1179.934, 'weight': 0.746, 'content': [{'end': 1184.518, 'text': 'And of course, we can just continuously append to the current after we set it equal to empty string.', 'start': 1179.934, 'duration': 4.584}, {'end': 1189.863, 'text': "Let's try this again, we just say one plus two.", 'start': 1185.779, 'duration': 4.084}, {'end': 1194.868, 'text': 'Notice that previous is one and current is set to two here.', 'start': 1191.885, 'duration': 2.983}, {'end': 1202.147, 'text': 'Now the last step is when we click equal, we want to run that operator against the previous in the current.', 'start': 1196.343, 'duration': 5.804}, {'end': 1213.894, 'text': 'So what I can say is this dot current is equal to this dot operator, this dot current and this dot previous.', 'start': 1204.308, 'duration': 9.586}], 'summary': 'Implementing a calculator function with continuous appending and operator execution.', 'duration': 33.96, 'max_score': 1179.934, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s1179934.jpg'}, {'end': 1342.938, 'src': 'embed', 'start': 1317.889, 'weight': 2, 'content': [{'end': 1323.012, 'text': 'I just wanted to show you a really quick overview of building out a calculator app using Vue.js.', 'start': 1317.889, 'duration': 5.123}, {'end': 1325.274, 'text': "And honestly, it didn't take any time at all.", 'start': 1323.633, 'duration': 1.641}, {'end': 1326.294, 'text': "It's pretty straightforward.", 'start': 1325.314, 'duration': 0.98}, {'end': 1332.678, 'text': 'If you want to try to fix those bugs, feel free to do so on my Git repo and post a pull request.', 'start': 1326.314, 'duration': 6.364}, {'end': 1338.555, 'text': 'But for now, I think this is a good ending point for this tutorial.', 'start': 1334.753, 'duration': 3.802}, {'end': 1342.938, 'text': 'So if you have any questions or comments or concerns, feel free to leave some in the comment section below.', 'start': 1338.595, 'duration': 4.343}], 'summary': 'Quickly built a calculator app using vue.js, low effort, and open for bug fixes on git repo.', 'duration': 25.049, 'max_score': 1317.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s1317889.jpg'}], 'start': 922.526, 'title': 'Building a calculator app', 'summary': "Discusses creating operator functions for a calculator app, including divide, times, minus, and add, and setting the internal component state to define the operator's functionality when the equal button is clicked. it also details the process of building a calculator app using vue.js, including the logic for handling user input, operator selection, and mathematical operations, resulting in a functional calculator with a few remaining bugs and an invitation for further development.", 'chapters': [{'end': 1024.09, 'start': 922.526, 'title': 'Building a calculator app - operator functions', 'summary': "Discusses creating operator functions for a calculator app, including divide, times, minus, and add, and setting the internal component state to define the operator's functionality when the equal button is clicked.", 'duration': 101.564, 'highlights': ['The chapter focuses on creating operator functions for a calculator app, including divide, times, minus, and add.', "The internal component state is set to define the operator's functionality when the equal button is clicked.", 'The divide function is defined as a callback function that takes two inputs and returns the result of dividing them.', 'The times function is defined as a callback function that takes two inputs and returns the result of multiplying them.', 'The minus function is defined as a callback function that takes two inputs and returns the result of subtracting them.', 'The add function is defined as a callback function that takes two inputs and returns the result of adding them.']}, {'end': 1355.086, 'start': 1024.191, 'title': 'Building a calculator app using vue.js', 'summary': 'Details the process of building a calculator app using vue.js, including the logic for handling user input, operator selection, and mathematical operations, resulting in a functional calculator with a few remaining bugs and an invitation for further development.', 'duration': 330.895, 'highlights': ['The chapter details the process of building a calculator app using Vue.js, including the logic for handling user input, operator selection, and mathematical operations, resulting in a functional calculator with a few remaining bugs and an invitation for further development.', 'The app allows users to perform basic mathematical operations such as addition, subtraction, multiplication, division, and negation, with examples provided to demonstrate its functionality.', 'The tutorial concludes with an invitation for viewers to attempt bug fixes and contribute to the project on the Git repo, encouraging community involvement and collaboration in further development.']}], 'duration': 432.56, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/m1_ih43p24s/pics/m1_ih43p24s922526.jpg', 'highlights': ['The chapter focuses on creating operator functions for a calculator app, including divide, times, minus, and add.', "The internal component state is set to define the operator's functionality when the equal button is clicked.", 'The chapter details the process of building a calculator app using Vue.js, including the logic for handling user input, operator selection, and mathematical operations, resulting in a functional calculator with a few remaining bugs and an invitation for further development.']}], 'highlights': ["The tutorial is about building a calculator app using Vue.js, aiming to emulate the Mac calculator's layout with a 4x5 grid, operands, operators, and a display section.", 'Using CSS grid to create a four-column by infinity rows grid for calculator component', 'Creating rows for a calculator, including AC, plus/minus, percent, divide, and various numbers and symbols.', 'The chapter explains how to declare logic and bindings for different buttons and display in a view component, including implementing functions such as clear and sign to manipulate the displayed data.', 'The chapter focuses on creating operator functions for a calculator app, including divide, times, minus, and add.']}