title
JavaScript Project Tutorial: Shopping Cart

description
Create a shopping cart using JavaScript. This project tutorial shows how to add all the basic functionality of a shopping cart into a website. 💻Source files: https://github.com/john-smilga/js-cart-setup Tutorial from Coding Addict. Check out the Coding Addict YouTube channel: https://www.youtube.com/codingaddict -- 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': 'JavaScript Project Tutorial: Shopping Cart', 'heatmap': [{'end': 426.647, 'start': 387.783, 'weight': 0.891}, {'end': 2100.803, 'start': 2062.962, 'weight': 0.945}, {'end': 2203.498, 'start': 2159.668, 'weight': 0.748}, {'end': 2301.598, 'start': 2258.962, 'weight': 0.729}, {'end': 2398.889, 'start': 2354.832, 'weight': 1}, {'end': 2526.694, 'start': 2487.049, 'weight': 0.749}], 'summary': 'This tutorial covers adding javascript functionality to a shopping cart project, including displaying the cart, adding items with a total of 4 items and $20.49, event handling, image manipulation, price extraction, and implementing cart functionality to display total money and items added.', 'chapters': [{'end': 207.959, 'segs': [{'end': 55.745, 'src': 'embed', 'start': 0.429, 'weight': 0, 'content': [{'end': 7.394, 'text': "In the shopping cart project, we're going to look at how we can add a JavaScript functionality to add items to the cart.", 'start': 0.429, 'duration': 6.965}, {'end': 12.017, 'text': 'As you can see, first we have the button that will show the cart.', 'start': 7.954, 'duration': 4.063}, {'end': 15.819, 'text': "So we're going to add first the functionality to show the cart itself.", 'start': 12.417, 'duration': 3.402}, {'end': 20.583, 'text': 'And here you can see that we have hard-coded items, and here would be a total.', 'start': 16.379, 'duration': 4.204}, {'end': 22.024, 'text': 'So notice what we have.', 'start': 21.003, 'duration': 1.021}, {'end': 27.447, 'text': 'We have two items and $10.49, again hard-coded, and then we would have $10.00.', 'start': 22.044, 'duration': 5.403}, {'end': 30.089, 'text': "which obviously doesn't match the items that we have.", 'start': 27.447, 'duration': 2.642}, {'end': 37.613, 'text': "now. if we're going to scroll down and we're going to see the items, then we're going to have the little icon that's going to be showing up when,", 'start': 30.089, 'duration': 7.524}, {'end': 44.237, 'text': "once we're going to click the cart icon, we're going to have a alert that's going to say the item has added to the cart.", 'start': 37.613, 'duration': 6.624}, {'end': 48.299, 'text': "now let's add one more, just so we can see that it's for sure working.", 'start': 44.237, 'duration': 4.062}, {'end': 55.745, 'text': "so again, we have a item added to the cart And if we're going to scroll up first, you're going to notice that we'll have four items right now,", 'start': 48.299, 'duration': 7.446}], 'summary': 'Add javascript functionality to shopping cart project, displaying items and total cost.', 'duration': 55.316, 'max_score': 0.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I429.jpg'}, {'end': 105.952, 'src': 'embed', 'start': 79.622, 'weight': 3, 'content': [{'end': 89.034, 'text': "the project setup files are located on my github, so you can either go directly and just find by the project's name,", 'start': 79.622, 'duration': 9.412}, {'end': 93.7, 'text': 'or you can follow the link that i have left in the description of the video.', 'start': 89.034, 'duration': 4.666}, {'end': 101.608, 'text': 'once we get a hold of the source files, we have the folder, And within the folder, as always, we have all the images,', 'start': 93.7, 'duration': 7.908}, {'end': 105.952, 'text': "the CSS that's necessary for the bootstrap and also the font awesome.", 'start': 101.608, 'duration': 4.344}], 'summary': 'Project setup files on github for easy access.', 'duration': 26.33, 'max_score': 79.622, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I79622.jpg'}, {'end': 153.172, 'src': 'embed', 'start': 129.532, 'weight': 4, 'content': [{'end': 137.358, 'text': "and as you can see that I'm sitting in my index.html now, I'm not going to show right now each and every ID or class that we're looking for,", 'start': 129.532, 'duration': 7.826}, {'end': 140.161, 'text': "because there's going to be quite a few of them.", 'start': 137.358, 'duration': 2.803}, {'end': 149.609, 'text': "so as we're going along, I'm just going to switch back and forth and I'm going to show you where exactly I'm finding the either ID or the class.", 'start': 140.161, 'duration': 9.448}, {'end': 153.172, 'text': "so now let's right away switch to app.js.", 'start': 150.049, 'duration': 3.123}], 'summary': 'Demonstrating the process of identifying ids and classes in html and switching to app.js.', 'duration': 23.64, 'max_score': 129.532, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I129532.jpg'}, {'end': 196.195, 'src': 'embed', 'start': 169.225, 'weight': 5, 'content': [{'end': 175.688, 'text': "So first we're going to work in our first immediately invoked function expression, where we're going to deal with the card,", 'start': 169.225, 'duration': 6.463}, {'end': 180.85, 'text': "and then we're going to create another one which is going to hold the items added to the card.", 'start': 175.688, 'duration': 5.162}, {'end': 186.072, 'text': "So we're going to make sure that we're not sharing the global scope with our variables.", 'start': 181.39, 'duration': 4.682}, {'end': 191.014, 'text': "So let's start with declaring a immediately invoked function expression.", 'start': 186.572, 'duration': 4.442}, {'end': 196.195, 'text': 'which is going to have the syntax of parentheses, then the function keyword,', 'start': 191.654, 'duration': 4.541}], 'summary': 'Working with immediately invoked function expressions to avoid global scope.', 'duration': 26.97, 'max_score': 169.225, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I169225.jpg'}], 'start': 0.429, 'title': 'Javascript shopping cart project', 'summary': 'Covers adding javascript functionality to a shopping cart project, displaying the cart, adding items, and alert notifications, incorporating 4 items and $20.49, with hard-coded items and real-time additions.', 'chapters': [{'end': 78.962, 'start': 0.429, 'title': 'Javascript shopping cart project', 'summary': 'Covers the addition of javascript functionality to a shopping cart project, including the display of the cart, adding items, and alert notifications, with a total of 4 items and $20.49, including hard-coded items and real-time additions.', 'duration': 78.533, 'highlights': ['The project involves adding JavaScript functionality to display the cart, show a notification when items are added, and update the total amount.', 'A hard-coded total of two items and $10.49 is present, while real-time additions result in a total of 4 items and $20.49.', 'Upon clicking the cart icon, an alert notifies that the item has been added to the cart.']}, {'end': 207.959, 'start': 79.622, 'title': 'Setting up project files and adding functionality', 'summary': 'Covers setting up project files from github, examining the index.html and app.js files, and adding functionality to show and add items to the cart using immediately invoked function expressions.', 'duration': 128.337, 'highlights': ["Setting up project files on github The project setup files are located on my github, allowing direct access by project's name or through a provided link.", 'Examining index.html and app.js files The chapter involves checking the contents of the index.html file and app.js file to identify classes and IDs for functionality implementation.', 'Adding functionality using immediately invoked function expressions The process of adding functionality involves using immediately invoked function expressions to separate issues and avoid sharing global scope with variables.']}], 'duration': 207.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I429.jpg', 'highlights': ['Real-time additions result in a total of 4 items and $20.49.', 'The project involves adding JavaScript functionality to display the cart and show a notification when items are added.', 'Upon clicking the cart icon, an alert notifies that the item has been added to the cart.', "Setting up project files on github allows direct access by project's name or through a provided link.", 'The chapter involves checking the contents of the index.html file and app.js file to identify classes and IDs for functionality implementation.', 'Adding functionality involves using immediately invoked function expressions to separate issues and avoid sharing global scope with variables.']}, {'end': 741.882, 'segs': [{'end': 255.786, 'src': 'embed', 'start': 229.407, 'weight': 1, 'content': [{'end': 235.333, 'text': "And if we type cart info, we're going to see that we're looking for the ID of cart info.", 'start': 229.407, 'duration': 5.926}, {'end': 238.136, 'text': 'So this would be the button which we would want to target.', 'start': 235.793, 'duration': 2.343}, {'end': 240.578, 'text': 'Now I cannot see this in a smaller screen.', 'start': 238.556, 'duration': 2.022}, {'end': 245.303, 'text': "This is why during this tutorial we're going to switch back and forth to a bigger screen.", 'start': 241.059, 'duration': 4.244}, {'end': 248.304, 'text': 'and also we would want to show the card.', 'start': 245.923, 'duration': 2.381}, {'end': 250.525, 'text': 'so the card itself is right here.', 'start': 248.304, 'duration': 2.221}, {'end': 255.786, 'text': 'so this is below the header and here the card is sitting.', 'start': 250.525, 'duration': 5.261}], 'summary': 'Tutorial covers targeting cart info button, switching to bigger screen, and displaying the card.', 'duration': 26.379, 'max_score': 229.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I229407.jpg'}, {'end': 296.165, 'src': 'embed', 'start': 269.491, 'weight': 0, 'content': [{'end': 275.694, 'text': "Because if you notice we have for the card, for the actual card that we're going to be showing, the width right now is zero.", 'start': 269.491, 'duration': 6.203}, {'end': 282.397, 'text': "And once we click the button, we're going to add this class of show card to the card and then we're going to be showing.", 'start': 276.414, 'duration': 5.983}, {'end': 287.64, 'text': 'because notice that with the show of card class, the width is 18 REMs.', 'start': 282.837, 'duration': 4.803}, {'end': 290.442, 'text': 'So right now the width is zero and overflow is hidden.', 'start': 288.06, 'duration': 2.382}, {'end': 293.003, 'text': 'This is why we cannot see the card also.', 'start': 290.882, 'duration': 2.121}, {'end': 296.165, 'text': "And then we're going to attach this class with a JavaScript.", 'start': 293.484, 'duration': 2.681}], 'summary': "Javascript adds class 'show card' to display card with width of 18 rems", 'duration': 26.674, 'max_score': 269.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I269491.jpg'}, {'end': 377.535, 'src': 'embed', 'start': 354.936, 'weight': 5, 'content': [{'end': 362.563, 'text': "we can use the method of add event listener and the first parameter we are expecting what kind of event we're listening to,", 'start': 354.936, 'duration': 7.627}, {'end': 370.99, 'text': 'which is going to be the click event, and the second one is going to be the callback function, which will be executed once the event fires.', 'start': 362.563, 'duration': 8.427}, {'end': 377.535, 'text': "and, like i said, we're going to do a very simple thing we're going to select the cart that we have targeted before,", 'start': 370.99, 'duration': 6.545}], 'summary': 'Using addeventlistener to handle click event for cart selection.', 'duration': 22.599, 'max_score': 354.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I354936.jpg'}, {'end': 426.647, 'src': 'heatmap', 'start': 387.783, 'weight': 0.891, 'content': [{'end': 395.931, 'text': "so instead of checking whether the cart has the class of show cart or doesn't have, we have an option of using a toggle.", 'start': 387.783, 'duration': 8.148}, {'end': 397.132, 'text': 'now for the toggle,', 'start': 395.931, 'duration': 1.201}, {'end': 406.46, 'text': "we're going to have to write what class we are looking for and then javascript is going to decide if the cart has the class of show cart,", 'start': 397.132, 'duration': 9.328}, {'end': 413.004, 'text': "then we're going to remove the class once we're clicking the icon, And then if it's the opposite, then obviously we're going to be hiding it.", 'start': 406.46, 'duration': 6.544}, {'end': 420.306, 'text': "So once we save it and once we're going to go again to the binger screen, because this is where we're going to be able to see this once I click it.", 'start': 413.464, 'duration': 6.842}, {'end': 423.867, 'text': "notice, now the cart is showing and now we're hiding the cart.", 'start': 420.306, 'duration': 3.561}, {'end': 426.647, 'text': 'Now I added a few things in the CSS.', 'start': 424.347, 'duration': 2.3}], 'summary': 'Using a toggle to show/hide cart, updating css.', 'duration': 38.864, 'max_score': 387.783, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I387783.jpg'}, {'end': 615.505, 'src': 'embed', 'start': 589.629, 'weight': 2, 'content': [{'end': 594.692, 'text': "And since we're going to be traversing a DOM a lot, we will going to be using console.log today a lot.", 'start': 589.629, 'duration': 5.063}, {'end': 602.737, 'text': 'Now, before we start typing all the functionality, I just want to let you know right away that, in general, there is a way,', 'start': 595.133, 'duration': 7.604}, {'end': 605.879, 'text': 'better way how to do this than what we were going to do it.', 'start': 602.737, 'duration': 3.142}, {'end': 609.962, 'text': 'And the reason for this is this is a JavaScript DOM project.', 'start': 606.359, 'duration': 3.603}, {'end': 615.505, 'text': "So, therefore, we're going to be traversing a DOM more than we would want to, just so we can get a practice.", 'start': 610.542, 'duration': 4.963}], 'summary': 'The javascript dom project involves traversing the dom frequently for practice.', 'duration': 25.876, 'max_score': 589.629, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I589629.jpg'}, {'end': 676.23, 'src': 'embed', 'start': 651.48, 'weight': 3, 'content': [{'end': 658.103, 'text': 'now, like i said, for the card button, we would want to add a for each, because we are getting back a node list.', 'start': 651.48, 'duration': 6.623}, {'end': 661.764, 'text': 'so we would want to attach this event listener to all of them.', 'start': 658.103, 'duration': 3.661}, {'end': 663.105, 'text': "so we're going to do for each.", 'start': 661.764, 'duration': 1.341}, {'end': 669.607, 'text': "so we're going to loop through all of them, and here, for each and one of them, we're going to have a callback function, whereas a parameter,", 'start': 663.105, 'duration': 6.502}, {'end': 676.23, 'text': "we're passing the button that we're looping through, so each and every element of this card button node list.", 'start': 669.607, 'duration': 6.623}], 'summary': 'To attach event listener to all card buttons, loop through node list using a for each loop.', 'duration': 24.75, 'max_score': 651.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I651480.jpg'}], 'start': 208.519, 'title': 'Selecting cart info and dom event handling', 'summary': 'Explains targeting cart info button and cart, using event listeners to show the cart with a width of 18 rems, and attaching event listeners to elements in a javascript dom project with the use of console.log for debugging.', 'chapters': [{'end': 290.442, 'start': 208.519, 'title': 'Selecting cart info and showing cart', 'summary': 'Discusses targeting the cart info button and the actual cart, using event listeners to show the card with a width of 18 rems, and switching back and forth to a bigger screen for better visibility.', 'duration': 81.923, 'highlights': ['Using event listeners to show the card with a width of 18 REMs', 'Targeting the cart info button and the actual cart', 'Switching back and forth to a bigger screen for better visibility']}, {'end': 741.882, 'start': 290.882, 'title': 'Js dom event handling', 'summary': 'Demonstrates how to attach event listeners to elements in a javascript dom project, explaining the process of targeting elements, adding event listeners, and using callback functions, while highlighting the use of console.log for debugging.', 'duration': 451, 'highlights': ['The chapter explains the process of targeting elements using document.getElementById and document.querySelector, along with using console.log for debugging.', 'It demonstrates the use of event listeners, specifically the click event, and the method of addEventListener to attach the event to selected elements.', 'The transcript includes the practice of looping through a node list using forEach to attach event listeners to multiple elements, showcasing practical implementation in a JavaScript DOM project.', 'It mentions the potential inefficiency of traversing the DOM for a JavaScript DOM project, emphasizing a more efficient approach involving attributes and database querying.', 'The chapter provides insights into using console.log for debugging and understanding the event object and its properties for DOM traversal.']}], 'duration': 533.363, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I208519.jpg', 'highlights': ['Using event listeners to show the card with a width of 18 REMs', 'Targeting the cart info button and the actual cart', 'The chapter explains the process of targeting elements using document.getElementById and document.querySelector, along with using console.log for debugging', 'The transcript includes the practice of looping through a node list using forEach to attach event listeners to multiple elements, showcasing practical implementation in a JavaScript DOM project', 'The chapter provides insights into using console.log for debugging and understanding the event object and its properties for DOM traversal', 'Demonstrates the use of event listeners, specifically the click event, and the method of addEventListener to attach the event to selected elements', 'Switching back and forth to a bigger screen for better visibility', 'Mentions the potential inefficiency of traversing the DOM for a JavaScript DOM project, emphasizing a more efficient approach involving attributes and database querying']}, {'end': 1094.43, 'segs': [{'end': 772.197, 'src': 'embed', 'start': 742.422, 'weight': 0, 'content': [{'end': 746.784, 'text': "Now the property of target is going to let us know what element we're clicking on.", 'start': 742.422, 'duration': 4.362}, {'end': 756.228, 'text': "So once I save it and once I'm going to go back in a smaller screen notice, if I click it, you see that I'm clicking on the eye,", 'start': 747.204, 'duration': 9.024}, {'end': 757.809, 'text': 'which would be the Font Awesome icon.', 'start': 756.228, 'duration': 1.581}, {'end': 764.412, 'text': 'however, I also have the option of clicking on the span of the store item icon,', 'start': 758.329, 'duration': 6.083}, {'end': 772.197, 'text': "and what we would want to do is we would want to set up that we are reading only when we're clicking on the actual icon,", 'start': 764.412, 'duration': 7.785}], 'summary': 'The property of target will determine the element clicked on, with focus on reading only the actual icon.', 'duration': 29.775, 'max_score': 742.422, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I742422.jpg'}, {'end': 1048.554, 'src': 'embed', 'start': 1021.426, 'weight': 1, 'content': [{'end': 1025.547, 'text': 'so once i open it up, notice, i have the image and i have the span.', 'start': 1021.426, 'duration': 4.121}, {'end': 1029.508, 'text': 'now i know how to get to the span using event target parent element.', 'start': 1025.547, 'duration': 3.961}, {'end': 1033.589, 'text': 'now i would need to decide how i can get to this image and grab the source.', 'start': 1029.508, 'duration': 4.081}, {'end': 1038.41, 'text': "so let's do a previous element, sibling, which would be another property.", 'start': 1033.589, 'duration': 4.821}, {'end': 1040.951, 'text': 'so previous, previous.', 'start': 1038.41, 'duration': 2.541}, {'end': 1048.554, 'text': "let me make sure that I'm actually spelling this correctly, because this is not going to work if it's not written correctly.", 'start': 1040.951, 'duration': 7.603}], 'summary': 'Exploring methods to access image and span elements using event target parent element and previous element sibling.', 'duration': 27.128, 'max_score': 1021.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1021426.jpg'}, {'end': 1083.787, 'src': 'embed', 'start': 1059.42, 'weight': 2, 'content': [{'end': 1066.463, 'text': 'before we do the source, let me just check that this property is written correctly and once we click it, We have.', 'start': 1059.42, 'duration': 7.043}, {'end': 1067.523, 'text': 'you see, we have the image.', 'start': 1066.463, 'duration': 1.06}, {'end': 1069.744, 'text': 'So this would be previous element sibling.', 'start': 1067.904, 'duration': 1.84}, {'end': 1072.725, 'text': 'Now, like I said, I would be interested in the source.', 'start': 1070.104, 'duration': 2.621}, {'end': 1076.886, 'text': 'So let me click a source and I should be getting back the source.', 'start': 1073.185, 'duration': 3.701}, {'end': 1083.787, 'text': 'So once we click it, we should have the undefined because obviously, again, very clever from my part.', 'start': 1077.366, 'duration': 6.421}], 'summary': 'Checking property, accessing image, and retrieving source unsuccessfully.', 'duration': 24.367, 'max_score': 1059.42, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1059420.jpg'}], 'start': 742.422, 'title': 'Event handling in javascript', 'summary': 'Explains utilizing event target property for identifying clicked element and traversing dom, with examples on troubleshooting event handling errors, leading to successful retrieval of target elements. it also clarifies accessing parent and sibling elements, correcting misspelled properties, and identifying correct element properties.', 'chapters': [{'end': 957.479, 'start': 742.422, 'title': 'Event target and dom traversal', 'summary': 'Explains how to utilize the event target property to identify the element being clicked on and then traverse the dom to access the source of an image, ensuring the event only fires when clicking on the icon.', 'duration': 215.057, 'highlights': ['Utilizing event target property to identify the element being clicked Explains how to use the event target property to determine the element being clicked, ensuring that the event only fires when clicking on the font awesome icon.', 'Traversing the DOM to access the source of an image Discusses the process of traversing the DOM to locate the source of an image by finding the parent element and then the previous sibling element, providing a step-by-step explanation of the DOM structure and traversal.', 'Implementing a console log to aid in understanding DOM traversal Demonstrates the use of a console log to visually track the process of accessing the parent element and previous sibling element, enabling a clearer understanding of the DOM traversal process.']}, {'end': 1094.43, 'start': 957.479, 'title': 'Troubleshooting js event handling', 'summary': 'Demonstrates troubleshooting javascript event handling, including identifying and correcting errors in accessing parent and sibling elements, with examples of correcting misspelled properties and identifying the correct element properties, leading to successful retrieval of the target element and its source.', 'duration': 136.951, 'highlights': ["Correcting misspelled property names and ensuring proper syntax is essential for successful JavaScript event handling. The speaker encounters errors due to misspelled properties such as 'class list' and 'contains', emphasizing the importance of correct syntax for successful event handling.", "Successfully accessing the parent and sibling elements through event target properties, enabling the retrieval of the targeted elements. The speaker successfully retrieves the parent and sibling elements of the target element using 'parentElement' and 'previousElementSibling', enabling the identification and retrieval of the desired elements.", "Demonstrating the successful retrieval of the source property of an image element through correct syntax and property access. The speaker demonstrates the successful retrieval of the 'source' property of an image element, highlighting the importance of correct property access and syntax for retrieving specific element properties."]}], 'duration': 352.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I742422.jpg', 'highlights': ['Utilizing event target property to identify the element being clicked Ensures event only fires when clicking on font awesome icon.', 'Successfully accessing the parent and sibling elements through event target properties Enables retrieval of targeted elements.', 'Demonstrating successful retrieval of source property of an image element through correct syntax and property access.']}, {'end': 1809.05, 'segs': [{'end': 1162.381, 'src': 'embed', 'start': 1136.745, 'weight': 5, 'content': [{'end': 1141.287, 'text': "there's no point for me to grab this massive image and place it in the cart.", 'start': 1136.745, 'duration': 4.542}, {'end': 1143.829, 'text': 'so i have two sets of images.', 'start': 1141.707, 'duration': 2.122}, {'end': 1151.234, 'text': "one is going to be the big image that's showing within my items and the second one is the small one that's displayed in the card.", 'start': 1143.829, 'duration': 7.405}, {'end': 1155.777, 'text': 'so this full path right now is not good enough for me.', 'start': 1151.234, 'duration': 4.543}, {'end': 1162.381, 'text': "i would need only the part where it says what kind of image it is in here, because i'm going to change this first part.", 'start': 1155.777, 'duration': 6.604}], 'summary': 'Need to differentiate between big and small images for items in cart.', 'duration': 25.636, 'max_score': 1136.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1136745.jpg'}, {'end': 1203.849, 'src': 'embed', 'start': 1177.891, 'weight': 0, 'content': [{'end': 1185.296, 'text': "and now I'm going to use the variable that I have for the full path and I'm going to find the position of the image of this string of image.", 'start': 1177.891, 'duration': 7.405}, {'end': 1194.002, 'text': "So we're going to have a full path, this would be the name of my string, Then I'm going to use the index of a method.", 'start': 1185.676, 'duration': 8.326}, {'end': 1199.066, 'text': 'And this method is going to help me to find what is the position of the image.', 'start': 1194.422, 'duration': 4.644}, {'end': 1203.849, 'text': "So if I'm going to go back and if I'm going to say image, now I should be getting back the image.", 'start': 1199.466, 'duration': 4.383}], 'summary': "Using the variable, find position of 'image' in full path string.", 'duration': 25.958, 'max_score': 1177.891, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1177891.jpg'}, {'end': 1253.578, 'src': 'embed', 'start': 1222.64, 'weight': 1, 'content': [{'end': 1226.501, 'text': "Now I'm going to use another method, which would be slice.", 'start': 1222.64, 'duration': 3.861}, {'end': 1230.863, 'text': "So here we're going to use the image that we're getting back, and we would be slicing.", 'start': 1226.962, 'duration': 3.901}, {'end': 1240.529, 'text': 'however, before we slice, the idea is that i would want to take off all the text that is including the image and before the image,', 'start': 1231.583, 'duration': 8.946}, {'end': 1246.993, 'text': "because if you remember the full path and maybe again let's comment this out just so it's a little bit easier to see.", 'start': 1240.529, 'duration': 6.464}, {'end': 1253.578, 'text': "so if we're going to go back, refresh the page and once i click it, you notice I would want to do a slice,", 'start': 1246.993, 'duration': 6.585}], 'summary': 'Using the slice method to remove text before an image.', 'duration': 30.938, 'max_score': 1222.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1222640.jpg'}, {'end': 1324.877, 'src': 'embed', 'start': 1302.367, 'weight': 2, 'content': [{'end': 1311.631, 'text': "so i'm adding them over here and once we have the position now let's do the slice method and we're gonna have the slice method of partial path.", 'start': 1302.367, 'duration': 9.264}, {'end': 1318.954, 'text': "so i'm going to name another variable, so partial path, and we're going to set it equal to, again a full path.", 'start': 1312.211, 'duration': 6.743}, {'end': 1324.877, 'text': "this time, then we're going to use the slice and the slice would need a index.", 'start': 1318.954, 'duration': 5.923}], 'summary': 'Adding partial path using slice method from full path.', 'duration': 22.51, 'max_score': 1302.367, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1302367.jpg'}, {'end': 1459.624, 'src': 'embed', 'start': 1430.17, 'weight': 4, 'content': [{'end': 1433.371, 'text': "So I'm going to set up an object that's going to hold all these values.", 'start': 1430.17, 'duration': 3.201}, {'end': 1438.372, 'text': "So first let's just call this item, and we're going to set it up to an empty object.", 'start': 1433.891, 'duration': 4.481}, {'end': 1442.974, 'text': 'So the object literal syntax would be just a curly braces.', 'start': 1439.292, 'duration': 3.682}, {'end': 1450.476, 'text': "And once we create an object with an object literal, we're just going to add a properties to it.", 'start': 1443.534, 'duration': 6.942}, {'end': 1459.624, 'text': 'now. obviously we can then write the properties right away, as we are making this object literal, but since there is no right or wrong way of doing it,', 'start': 1451.016, 'duration': 8.608}], 'summary': 'Setting up an empty object to hold properties.', 'duration': 29.454, 'max_score': 1430.17, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1430170.jpg'}, {'end': 1690.752, 'src': 'embed', 'start': 1657.926, 'weight': 3, 'content': [{'end': 1661.666, 'text': 'but again, this is a project on javascript dom.', 'start': 1657.926, 'duration': 3.74}, {'end': 1664.067, 'text': "so we'll have to traverse the dom.", 'start': 1661.666, 'duration': 2.401}, {'end': 1667.268, 'text': 'so, like i said, now we have next element, sibling.', 'start': 1664.067, 'duration': 3.201}, {'end': 1669.248, 'text': "then we're going to be looking for a children.", 'start': 1667.268, 'duration': 1.98}, {'end': 1676.156, 'text': 'now children is going to return, in our case array, and i know that this is going to be the first child.', 'start': 1669.788, 'duration': 6.368}, {'end': 1678.138, 'text': 'well, in fact this is going to be the only child.', 'start': 1676.156, 'duration': 1.982}, {'end': 1680.481, 'text': "we're still going to have a node list.", 'start': 1678.138, 'duration': 2.343}, {'end': 1682.603, 'text': "so in this case let's do zero.", 'start': 1680.481, 'duration': 2.122}, {'end': 1690.752, 'text': "so now we're selecting the card text and then, since this card text also has a child, we're looking for a first child.", 'start': 1682.603, 'duration': 8.149}], 'summary': 'Project involves traversing javascript dom, selecting elements and working with child nodes.', 'duration': 32.826, 'max_score': 1657.926, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1657926.jpg'}], 'start': 1094.89, 'title': 'Image manipulation and dom traversal in javascript', 'summary': 'Discusses manipulating image paths in javascript, covering variable setup, finding image positions, using string methods, and switching folder paths. it also explains dom traversal, slice method usage, and object setup for shopping cart data.', 'chapters': [{'end': 1286.64, 'start': 1094.89, 'title': 'Image manipulation in javascript', 'summary': 'Discusses manipulating image paths in javascript, including variable setup, finding image positions, and using string methods like slice and index, to optimize images for display in a cart. it also touches on switching folder paths for different image sizes.', 'duration': 191.75, 'highlights': ["Setting up a variable 'full path' to store the image source and manipulating it using string methods like slice and index to optimize the images for display in a cart variable 'full path', string methods like slice and index", 'Explaining the need for two sets of images - one for display in items and another for display in the cart - and the rationale behind it two sets of images, smaller images of size 50 by 50', 'Demonstrating the use of the slice method to remove unwanted text from the image path and switching folder paths for different image sizes use of the slice method, switching folder paths']}, {'end': 1809.05, 'start': 1287.06, 'title': 'Dom traversal and object setup', 'summary': 'Explains the process of dom traversal to locate specific elements, using the slice method to manipulate strings, and setting up an object to hold image, name, and price data for a shopping cart.', 'duration': 521.99, 'highlights': ['Demonstration of using the slice method to manipulate strings and remove characters from a path. The speaker demonstrates using the slice method to remove characters from a path, emphasizing the ability to specify the starting index and the number of characters to remove from a string.', 'Explanation of DOM traversal to locate specific elements and retrieve their text content. The explanation provides a detailed walkthrough of using DOM traversal to locate specific elements, such as traversing parent and sibling elements, accessing children elements, and retrieving text content from the targeted elements.', 'Initial setup of an object to hold image, name, and price data for a shopping cart. The transcript details the initial setup of an object to store image, name, and price data for a shopping cart, with a focus on using object literal syntax to create an empty object and gradually adding properties to it.']}], 'duration': 714.16, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1094890.jpg', 'highlights': ["Setting up a variable 'full path' to store the image source and manipulating it using string methods like slice and index to optimize the images for display in a cart variable 'full path', string methods like slice and index", 'Demonstrating the use of the slice method to remove unwanted text from the image path and switching folder paths for different image sizes use of the slice method, switching folder paths', 'Demonstration of using the slice method to manipulate strings and remove characters from a path. The speaker demonstrates using the slice method to remove characters from a path, emphasizing the ability to specify the starting index and the number of characters to remove from a string.', 'Explanation of DOM traversal to locate specific elements and retrieve their text content. The explanation provides a detailed walkthrough of using DOM traversal to locate specific elements, such as traversing parent and sibling elements, accessing children elements, and retrieving text content from the targeted elements.', 'Initial setup of an object to hold image, name, and price data for a shopping cart. The transcript details the initial setup of an object to store image, name, and price data for a shopping cart, with a focus on using object literal syntax to create an empty object and gradually adding properties to it.', 'Explaining the need for two sets of images - one for display in items and another for display in the cart - and the rationale behind it two sets of images, smaller images of size 50 by 50']}, {'end': 2214.646, 'segs': [{'end': 1856.324, 'src': 'embed', 'start': 1825.936, 'weight': 4, 'content': [{'end': 1829.038, 'text': "And let's do again a console.log just so we can see what's happening.", 'start': 1825.936, 'duration': 3.102}, {'end': 1830.979, 'text': "And let's console.log the price.", 'start': 1829.578, 'duration': 1.401}, {'end': 1834.721, 'text': 'So again, scroll down maybe to a different item.', 'start': 1831.699, 'duration': 3.022}, {'end': 1836.562, 'text': "And let's see what we have so far.", 'start': 1835.261, 'duration': 1.301}, {'end': 1840.787, 'text': "So as I click it, now I'm getting back the value of 15.", 'start': 1837.262, 'duration': 3.525}, {'end': 1845.933, 'text': "So if I'm going to go somewhere where it's 10, again, let's click, and here we're going to have a 10.", 'start': 1840.787, 'duration': 5.146}, {'end': 1847.335, 'text': 'So we know that everything is working.', 'start': 1845.933, 'duration': 1.402}, {'end': 1849.678, 'text': 'However, we have this dollar sign over here.', 'start': 1847.856, 'duration': 1.822}, {'end': 1851.841, 'text': 'And also, you notice that I have the space.', 'start': 1850.099, 'duration': 1.742}, {'end': 1856.324, 'text': "Now I don't want a space and I wouldn't want a dollar sign.", 'start': 1852.862, 'duration': 3.462}], 'summary': 'Console logs show item prices, values of 15 and 10, with formatting issues.', 'duration': 30.388, 'max_score': 1825.936, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1825936.jpg'}, {'end': 1896.465, 'src': 'embed', 'start': 1870.551, 'weight': 3, 'content': [{'end': 1875.354, 'text': 'And this is going to be equal again to a few methods we can use on a strings.', 'start': 1870.551, 'duration': 4.803}, {'end': 1877.395, 'text': "Well, first we're going to be selecting the string.", 'start': 1875.714, 'duration': 1.681}, {'end': 1880.076, 'text': 'So what string we would want? Well, we would want a price string.', 'start': 1877.475, 'duration': 2.601}, {'end': 1883.518, 'text': 'where we have the value of $15 or $10 in our case.', 'start': 1880.456, 'duration': 3.062}, {'end': 1886.159, 'text': "Then we're going to do again the slice.", 'start': 1884.158, 'duration': 2.001}, {'end': 1887.74, 'text': "So now we're going to be slicing.", 'start': 1886.679, 'duration': 1.061}, {'end': 1896.465, 'text': 'Now, since I know that a dollar sign is going to be the character of zero, then the space over here is going to be the character of one.', 'start': 1888.26, 'duration': 8.205}], 'summary': 'Demonstrating string methods to extract price values using slice method.', 'duration': 25.914, 'max_score': 1870.551, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1870551.jpg'}, {'end': 2100.803, 'src': 'heatmap', 'start': 2040.24, 'weight': 0, 'content': [{'end': 2044.064, 'text': "now we're going to be using a template string, so we don't have to recreate everything.", 'start': 2040.24, 'duration': 3.824}, {'end': 2048.87, 'text': "that's the good thing of coding this in the html that now, with the template strings,", 'start': 2044.064, 'duration': 4.806}, {'end': 2052.592, 'text': 'we can just reuse a lot of things and just change the values over here.', 'start': 2048.87, 'duration': 3.722}, {'end': 2055.275, 'text': 'But I would first need to create that div.', 'start': 2053.152, 'duration': 2.123}, {'end': 2059.879, 'text': 'So let me go back in the app.js and let me first create a div.', 'start': 2055.675, 'duration': 4.204}, {'end': 2062.741, 'text': "So const, then we're going to have cart item.", 'start': 2060.279, 'duration': 2.462}, {'end': 2065.484, 'text': 'So this would be the name of our item.', 'start': 2062.962, 'duration': 2.522}, {'end': 2068.065, 'text': "And we're going to do a document div.", 'start': 2065.844, 'duration': 2.221}, {'end': 2069.947, 'text': 'create element.', 'start': 2068.505, 'duration': 1.442}, {'end': 2073.507, 'text': "so we're going to be creating an element and we're going to be creating a div.", 'start': 2069.947, 'duration': 3.56}, {'end': 2079.21, 'text': 'now, since you notice that within a div i have what, i have a few of the classes over here.', 'start': 2073.507, 'duration': 5.703}, {'end': 2084.472, 'text': 'so first let me just grab this whole div with a whole comments and everything.', 'start': 2079.21, 'duration': 5.262}, {'end': 2090.114, 'text': "now we're going to be deleting them later, but for now we should just have it, and here let's do a template string.", 'start': 2084.472, 'duration': 5.642}, {'end': 2095.917, 'text': "so let's set it up over here like a template string and then let me just copy and paste this, Because we will going to be reusing this.", 'start': 2090.114, 'duration': 5.803}, {'end': 2097.88, 'text': 'So now, like I said, I have the div.', 'start': 2096.398, 'duration': 1.482}, {'end': 2100.803, 'text': "I'm going to be creating a class list.", 'start': 2098.641, 'duration': 2.162}], 'summary': 'Using template strings to create reusable html elements and classes in app.js', 'duration': 44.232, 'max_score': 2040.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2040240.jpg'}, {'end': 2203.498, 'src': 'heatmap', 'start': 2159.668, 'weight': 0.748, 'content': [{'end': 2165.13, 'text': 'and now I can just use an innerHtml, and I can set this to the innerHtml.', 'start': 2159.668, 'duration': 5.462}, {'end': 2173.214, 'text': 'So first let me close this, and now I can say that I would want for the cart item and I would want to set it to innerHtml.', 'start': 2165.571, 'duration': 7.643}, {'end': 2178.978, 'text': "so we're going to have the dot of innerHtml and we're going to set it equal to the same template string.", 'start': 2173.214, 'duration': 5.764}, {'end': 2184.522, 'text': "so again, maybe let me just save this so that way it's going to be a little bit better formatted.", 'start': 2178.978, 'duration': 5.544}, {'end': 2187.725, 'text': 'so notice, now i created a card item.', 'start': 2184.522, 'duration': 3.203}, {'end': 2190.328, 'text': 'i added all the classes that i had in my div.', 'start': 2187.725, 'duration': 2.603}, {'end': 2203.498, 'text': 'they already hard coded in my html and next i just use the inner html and everything that was already in my html i just applied in my app.js.', 'start': 2190.328, 'duration': 13.17}], 'summary': 'Using innerhtml to apply existing html classes to cart item in app.js.', 'duration': 43.83, 'max_score': 2159.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2159668.jpg'}], 'start': 1809.05, 'title': 'Price extraction and html manipulation', 'summary': 'Involves extracting prices from strings using javascript methods like slice, and manipulating html elements such as adding classes and template strings for a shopping cart feature.', 'chapters': [{'end': 1911.311, 'start': 1809.05, 'title': 'Extracting price from string and formatting', 'summary': 'Involves extracting the price from a string and formatting it by removing the dollar sign and space, using javascript methods like slice, and verifying its functionality with different values such as 15 and 10.', 'duration': 102.261, 'highlights': ['Extracting the price from a string and formatting it by removing the dollar sign and space using JavaScript methods like slice. Using JavaScript methods like slice to remove dollar sign and space from the price string.', 'Verifying the functionality by obtaining different values such as 15 and 10. Testing and confirming the functionality of the code with different values like 15 and 10.']}, {'end': 2214.646, 'start': 1911.311, 'title': 'Javascript: manipulating html elements', 'summary': 'Covers the manipulation of html elements using javascript, including adding classes and template strings, to dynamically create and update elements for a shopping cart feature.', 'duration': 303.335, 'highlights': ['The chapter covers the manipulation of HTML elements using JavaScript, including adding classes and template strings, to dynamically create and update elements for a shopping cart feature. Describes the process of manipulating HTML elements using JavaScript, including adding classes and using template strings to create and update elements for a shopping cart feature.', 'Creating a div element and adding classes for a shopping cart item. Demonstrates the creation of a div element and the addition of classes for a shopping cart item using JavaScript.', 'Using innerHTML to dynamically update the content of a div element. Illustrates the use of innerHTML to dynamically update the content of a div element in JavaScript.']}], 'duration': 405.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I1809050.jpg', 'highlights': ['Describes the process of manipulating HTML elements using JavaScript, including adding classes and using template strings to create and update elements for a shopping cart feature.', 'Illustrates the use of innerHTML to dynamically update the content of a div element in JavaScript.', 'Demonstrates the creation of a div element and the addition of classes for a shopping cart item using JavaScript.', 'Extracting the price from a string and formatting it by removing the dollar sign and space using JavaScript methods like slice.', 'Testing and confirming the functionality of the code with different values like 15 and 10.', 'Using JavaScript methods like slice to remove dollar sign and space from the price string.']}, {'end': 2849.802, 'segs': [{'end': 2301.598, 'src': 'heatmap', 'start': 2258.962, 'weight': 0.729, 'content': [{'end': 2263.106, 'text': 'so now we have created this cart item.', 'start': 2258.962, 'duration': 4.144}, {'end': 2267.029, 'text': "now the last thing that's left is to target the cart.", 'start': 2263.106, 'duration': 3.923}, {'end': 2273.375, 'text': 'remember, we have the cart, so the items are sitting within the cart and then i would want to insert this in the cart.', 'start': 2267.029, 'duration': 6.346}, {'end': 2276.237, 'text': "However, we're not going to do the append.", 'start': 2273.915, 'duration': 2.322}, {'end': 2280.982, 'text': 'And the reason for that is, notice I have the item, I have the item, and then I have the total.', 'start': 2276.658, 'duration': 4.324}, {'end': 2288.048, 'text': "So if we're going to use the method of appending the child, then these items are going to be somewhere here in the bottom.", 'start': 2281.442, 'duration': 6.606}, {'end': 2291.611, 'text': 'So instead, we need to use the insert before.', 'start': 2288.488, 'duration': 3.123}, {'end': 2293.253, 'text': "So let's go back again.", 'start': 2292.292, 'duration': 0.961}, {'end': 2296.035, 'text': "and let's figure out what we have.", 'start': 2294.253, 'duration': 1.782}, {'end': 2301.598, 'text': 'so we have the app.js and, like i said, we have the inner html.', 'start': 2296.035, 'duration': 5.563}], 'summary': 'Creating cart item and targeting cart using insert before instead of append.', 'duration': 42.636, 'max_score': 2258.962, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2258962.jpg'}, {'end': 2324.646, 'src': 'embed', 'start': 2301.598, 'weight': 0, 'content': [{'end': 2310.383, 'text': "now, once we're done with the inner html, maybe let's do a comma where we have a select cart and now we would want to select the cart.", 'start': 2301.598, 'duration': 8.785}, {'end': 2313.119, 'text': "so let's create a variable.", 'start': 2311.658, 'duration': 1.461}, {'end': 2318.442, 'text': 'this is going to be cart, document, get element by id.', 'start': 2313.119, 'duration': 5.323}, {'end': 2320.544, 'text': 'the id is going to be the cart.', 'start': 2318.442, 'duration': 2.102}, {'end': 2324.646, 'text': "then we're going to have another variable with a name of total.", 'start': 2320.544, 'duration': 4.102}], 'summary': 'Using javascript to select cart elements and create variables.', 'duration': 23.048, 'max_score': 2301.598, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2301598.jpg'}, {'end': 2398.889, 'src': 'heatmap', 'start': 2354.832, 'weight': 1, 'content': [{'end': 2360.596, 'text': "since we're selecting the cart, then the method name is going to be insert before.", 'start': 2354.832, 'duration': 5.764}, {'end': 2363.437, 'text': "so let's go down and let's use insert before.", 'start': 2360.596, 'duration': 2.841}, {'end': 2366.359, 'text': 'now, insert before is going to use two parameters.', 'start': 2363.437, 'duration': 2.922}, {'end': 2369.42, 'text': 'first is going to be what item we would want to insert.', 'start': 2366.359, 'duration': 3.061}, {'end': 2376.204, 'text': 'so we would want to insert the cart item and then we would want to say where we would want to insert before which item.', 'start': 2369.42, 'duration': 6.784}, {'end': 2377.385, 'text': "so here we're going to use the total.", 'start': 2376.204, 'duration': 1.181}, {'end': 2381.146, 'text': "now let me save this and let me show you where i'm getting back to total.", 'start': 2377.825, 'duration': 3.321}, {'end': 2384.526, 'text': "now, if i'm going to go down, we have the card item, card item.", 'start': 2381.146, 'duration': 3.38}, {'end': 2386.327, 'text': 'now, notice, we have the cart total.', 'start': 2384.526, 'duration': 1.801}, {'end': 2389.847, 'text': 'so the point of this i want to insert before the cart oil total.', 'start': 2386.327, 'duration': 3.52}, {'end': 2392.528, 'text': 'so the cart total is going to be all the way in the bottom.', 'start': 2389.847, 'duration': 2.681}, {'end': 2398.889, 'text': 'now maybe the last thing, just to show the customer that everything has happened correctly.', 'start': 2392.528, 'duration': 6.361}], 'summary': 'Using insert before method to add item before cart total.', 'duration': 44.057, 'max_score': 2354.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2354832.jpg'}, {'end': 2550.991, 'src': 'heatmap', 'start': 2487.049, 'weight': 1, 'content': [{'end': 2494.313, 'text': "so we know for sure what we're getting back, because we can do all this code and then start scrambling for the answers where is an issue.", 'start': 2487.049, 'duration': 7.264}, {'end': 2495.474, 'text': 'so again, my apologies.', 'start': 2494.313, 'duration': 1.161}, {'end': 2502.217, 'text': "I should have added a method of add And then here the parameters are all the classes that we're adding to the cart item.", 'start': 2495.474, 'duration': 6.743}, {'end': 2503.338, 'text': "So let's go back.", 'start': 2502.578, 'duration': 0.76}, {'end': 2504.759, 'text': "Let's refresh.", 'start': 2503.778, 'duration': 0.981}, {'end': 2506.98, 'text': 'And hopefully everything works fine this time.', 'start': 2505.239, 'duration': 1.741}, {'end': 2510.802, 'text': 'So once I click it, it says the item has been added to the cart.', 'start': 2507.4, 'duration': 3.402}, {'end': 2512.283, 'text': "Again, let's scroll down.", 'start': 2511.262, 'duration': 1.021}, {'end': 2513.863, 'text': "Let's maybe do the suites.", 'start': 2512.303, 'duration': 1.56}, {'end': 2515.064, 'text': "Again, let's click it.", 'start': 2514.264, 'duration': 0.8}, {'end': 2516.705, 'text': "It says that it's added to the cart.", 'start': 2515.344, 'duration': 1.361}, {'end': 2519.527, 'text': "Now let's go up and the moment of truth.", 'start': 2517.245, 'duration': 2.282}, {'end': 2523.431, 'text': 'Sure enough, we have the sweet item, which was five bucks.', 'start': 2520.288, 'duration': 3.143}, {'end': 2526.694, 'text': 'And then we have the another sweet item, which was 15.', 'start': 2523.631, 'duration': 3.063}, {'end': 2528.256, 'text': "Well, that'd be a little bit suspicious.", 'start': 2526.694, 'duration': 1.562}, {'end': 2530.478, 'text': "So again, maybe let's do a cake.", 'start': 2528.296, 'duration': 2.182}, {'end': 2533.301, 'text': "Maybe let's do another cake.", 'start': 2531.219, 'duration': 2.082}, {'end': 2534.782, 'text': "Maybe let's do a donut this time.", 'start': 2533.341, 'duration': 1.441}, {'end': 2536.684, 'text': 'So now I have all these items.', 'start': 2535.403, 'duration': 1.281}, {'end': 2539.387, 'text': "So let's go up and everything is working fine.", 'start': 2537.164, 'duration': 2.223}, {'end': 2545.249, 'text': "So once we have figured out how to work within items, there's one more thing that we would want.", 'start': 2539.927, 'duration': 5.322}, {'end': 2550.991, 'text': 'And we would want to display what is the total, so the money total that we have.', 'start': 2545.689, 'duration': 5.302}], 'summary': 'Testing and adding items to cart, verifying successful addition and total money display.', 'duration': 43.591, 'max_score': 2487.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2487049.jpg'}, {'end': 2625.395, 'src': 'embed', 'start': 2599.178, 'weight': 3, 'content': [{'end': 2605.982, 'text': "let's say it as a function, then show totals and let's just console log, and just for sure we know that everything is working,", 'start': 2599.178, 'duration': 6.804}, {'end': 2612.366, 'text': "because again we don't want to spend another 10 minutes writing something and then scrambling for the answers.", 'start': 2605.982, 'duration': 6.384}, {'end': 2617.429, 'text': 'so hello, and once we save it, if everything is correct, we should have a console log of hello.', 'start': 2612.366, 'duration': 5.063}, {'end': 2622.012, 'text': 'so once we open it up and it says the alert, you see, the alert runs.', 'start': 2618.169, 'duration': 3.843}, {'end': 2625.395, 'text': "we're adding item to the card and here would be to hello.", 'start': 2622.012, 'duration': 3.383}], 'summary': "Function displays 'hello' on console log and alert when opened.", 'duration': 26.217, 'max_score': 2599.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2599178.jpg'}, {'end': 2664.987, 'src': 'embed', 'start': 2638.385, 'weight': 4, 'content': [{'end': 2642.909, 'text': "well, we're going to set up again a query selector, all.", 'start': 2638.385, 'duration': 4.524}, {'end': 2645.251, 'text': "so i'm going to be looking for all these prices.", 'start': 2642.909, 'duration': 2.342}, {'end': 2648.213, 'text': 'you notice, i have the price price and all these prices.', 'start': 2645.251, 'duration': 2.962}, {'end': 2653.577, 'text': 'now we will going to be still counting whatever we hardcoded over here, because this just makes sense now.', 'start': 2648.213, 'duration': 5.364}, {'end': 2658.942, 'text': 'obviously, if you want, you can just go ahead and delete them for now, since you already have all the items.', 'start': 2653.577, 'duration': 5.365}, {'end': 2662.825, 'text': "you have all the structure and everything, but we're going to be still counting them.", 'start': 2658.942, 'duration': 3.883}, {'end': 2664.987, 'text': "so each and every time we're going to be still counting them.", 'start': 2662.825, 'duration': 2.162}], 'summary': 'Setting up a query selector to count prices and remove hardcoded items.', 'duration': 26.602, 'max_score': 2638.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2638385.jpg'}, {'end': 2786.489, 'src': 'embed', 'start': 2762.999, 'weight': 5, 'content': [{'end': 2770.208, 'text': 'so the array that we have and we can use the push method and we can add the item text content.', 'start': 2762.999, 'duration': 7.209}, {'end': 2772.07, 'text': "now why we're getting the text content?", 'start': 2770.208, 'duration': 1.862}, {'end': 2774.654, 'text': 'because the text content is going to be holding the value now.', 'start': 2772.07, 'duration': 2.584}, {'end': 2779.44, 'text': "obviously this is the hard-coded value, as we're inserting them with our own javascript.", 'start': 2774.654, 'duration': 4.786}, {'end': 2783.045, 'text': 'this is happening dynamically, so i cannot show you right now.', 'start': 2779.44, 'duration': 3.605}, {'end': 2784.547, 'text': 'you can just see it here.', 'start': 2783.045, 'duration': 1.502}, {'end': 2786.489, 'text': "so this is what we're looking for.", 'start': 2784.547, 'duration': 1.942}], 'summary': 'Using push method to add item text content to array dynamically.', 'duration': 23.49, 'max_score': 2762.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2762999.jpg'}], 'start': 2214.646, 'title': 'Implementing cart functionality and displaying totals', 'summary': 'Details implementing cart functionality in javascript, including targeting and manipulating elements, using insertbefore method, and handling errors through console logs. it also involves creating a function to display the total money and the number of items added to a cart by adding up the prices of items and converting them to numbers for accurate totals.', 'chapters': [{'end': 2528.256, 'start': 2214.646, 'title': 'Implementing cart functionality in javascript', 'summary': 'Details the process of creating a cart functionality in javascript, including targeting and manipulating elements, using insertbefore method, and handling errors through console logs, resulting in successful addition of items to the cart.', 'duration': 313.61, 'highlights': ['The chapter details the process of creating a cart functionality in JavaScript The transcript discusses the step-by-step process of implementing a cart functionality in JavaScript, providing a comprehensive overview of the entire procedure.', 'Resulting in successful addition of items to the cart The implementation of the cart functionality ultimately leads to successful addition of items to the cart, as demonstrated through the alert messages and verification of added items.', 'Handling errors through console logs The transcript emphasizes the importance of using console logs to identify and rectify errors, ensuring smooth execution of the code and troubleshooting any issues that may arise during the implementation process.']}, {'end': 2849.802, 'start': 2528.296, 'title': 'Creating a function to display totals', 'summary': 'Involves creating a function to display the total money and the number of items added to a cart. it explains the process of adding up the prices of items and converting them to numbers for accurate totals.', 'duration': 321.506, 'highlights': ['Explaining the process of adding up the prices of items and converting them to numbers for accurate totals The transcript explains the process of creating an array to hold the total prices of items, selecting all the prices using querySelector, looping through them to add to an array, and using the parse float method to convert string values to numbers.', 'Demonstrating the use of querySelector to select all the prices of items The speaker demonstrates the use of querySelector all to select multiple price elements, ensuring the accurate retrieval of prices for calculating the total.', 'Utilizing the push method to add item prices to an array and explaining the need to use textContent for retrieving the values The transcript emphasizes the use of the push method to add item prices to an array and the necessity of using textContent to retrieve the values, which are then converted to numbers using parse float for accurate calculation of totals.']}], 'duration': 635.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2214646.jpg', 'highlights': ['The chapter details the process of creating a cart functionality in JavaScript', 'Explaining the process of adding up the prices of items and converting them to numbers for accurate totals', 'Resulting in successful addition of items to the cart', 'Handling errors through console logs', 'Demonstrating the use of querySelector to select all the prices of items', 'Utilizing the push method to add item prices to an array and explaining the need to use textContent for retrieving the values']}, {'end': 3276.646, 'segs': [{'end': 2902.284, 'src': 'embed', 'start': 2873.318, 'weight': 0, 'content': [{'end': 2874.779, 'text': 'now for the total money.', 'start': 2873.318, 'duration': 1.461}, {'end': 2877.141, 'text': 'this is going to be equal to a total.', 'start': 2874.779, 'duration': 2.362}, {'end': 2886.809, 'text': "so the name of our array and we're going to have it as a total reduce and we're going to use the reduce function Now for the I'm sorry method.", 'start': 2877.141, 'duration': 9.668}, {'end': 2891.554, 'text': 'So for the reduce method, we are looking for a callback function.', 'start': 2887.129, 'duration': 4.425}, {'end': 2892.755, 'text': 'This is going to be called.', 'start': 2891.914, 'duration': 0.841}, {'end': 2899.101, 'text': 'However, the reduce method callback function requires two parameters.', 'start': 2893.155, 'duration': 5.946}, {'end': 2902.284, 'text': 'So the first one is going to be the total or accumulator.', 'start': 2899.461, 'duration': 2.823}], 'summary': 'Using reduce method to calculate total money in array.', 'duration': 28.966, 'max_score': 2873.318, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2873318.jpg'}, {'end': 2990.819, 'src': 'embed', 'start': 2960.138, 'weight': 2, 'content': [{'end': 2965.242, 'text': 'And then once we have the total money, again, we can just find out what is happening.', 'start': 2960.138, 'duration': 5.104}, {'end': 2967.964, 'text': "So in our case, let's do a console log.", 'start': 2965.622, 'duration': 2.342}, {'end': 2975.268, 'text': "And let's call this total money since this is a name of our variable.", 'start': 2968.684, 'duration': 6.584}, {'end': 2977.35, 'text': 'And notice that something is wrong.', 'start': 2975.849, 'duration': 1.501}, {'end': 2980.772, 'text': 'I have money, not money.', 'start': 2977.37, 'duration': 3.402}, {'end': 2981.953, 'text': "So let's save this.", 'start': 2981.252, 'duration': 0.701}, {'end': 2989.298, 'text': "and if everything is working correctly, let's add one value and let's add another value.", 'start': 2982.974, 'duration': 6.324}, {'end': 2990.819, 'text': "i'm getting the totals.", 'start': 2989.298, 'duration': 1.521}], 'summary': 'Troubleshooting code to calculate and log total money.', 'duration': 30.681, 'max_score': 2960.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2960138.jpg'}, {'end': 3062.526, 'src': 'embed', 'start': 3028.692, 'weight': 1, 'content': [{'end': 3030.073, 'text': 'So the variable that we have right now.', 'start': 3028.692, 'duration': 1.381}, {'end': 3031.834, 'text': "And we're going to use another method.", 'start': 3030.473, 'duration': 1.361}, {'end': 3034.496, 'text': 'And the method is going to be two fixed.', 'start': 3032.134, 'duration': 2.362}, {'end': 3036.997, 'text': 'Now for the fixed, we need to pass the parameter.', 'start': 3034.956, 'duration': 2.041}, {'end': 3039.579, 'text': 'So how many numbers after the dot.', 'start': 3037.357, 'duration': 2.222}, {'end': 3041.4, 'text': "So in my case, I'm going to use two.", 'start': 3039.979, 'duration': 1.421}, {'end': 3046.663, 'text': "And then we just can do, instead of total money, let's have it as a final money.", 'start': 3041.92, 'duration': 4.743}, {'end': 3052.464, 'text': "money. let's save this and now let's add again a few items over here.", 'start': 3047.563, 'duration': 4.901}, {'end': 3062.526, 'text': "let's add one to the cart and notice i have 3198 instead of these ridiculous 10 numbers behind the dot and now we have 36.", 'start': 3052.464, 'duration': 10.062}], 'summary': "Using the method 'two fixed' with 2 decimal places resulted in 3198 instead of 10 numbers, and 36.", 'duration': 33.834, 'max_score': 3028.692, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I3028692.jpg'}, {'end': 3121.238, 'src': 'embed', 'start': 3097.828, 'weight': 3, 'content': [{'end': 3105.111, 'text': "let's do a document and there's going to be document by id, document query selector and another id.", 'start': 3097.828, 'duration': 7.283}, {'end': 3110.553, 'text': "so that's last thing document, get element by id.", 'start': 3105.111, 'duration': 5.442}, {'end': 3114.134, 'text': "now i'm looking for the cart total and i'm going to show you all these values.", 'start': 3110.553, 'duration': 3.581}, {'end': 3117.155, 'text': "right now let's just type them first and then we're going to see where they are.", 'start': 3114.134, 'duration': 3.021}, {'end': 3121.238, 'text': 'so text content is going to be equal to a final money.', 'start': 3117.595, 'duration': 3.643}], 'summary': 'Creating a document with various elements, including cart total and displaying values.', 'duration': 23.41, 'max_score': 3097.828, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I3097828.jpg'}, {'end': 3274.684, 'src': 'embed', 'start': 3246.283, 'weight': 5, 'content': [{'end': 3251.789, 'text': "Now let's scroll down, and again, let's maybe add like six items just so we know that everything is working correct.", 'start': 3246.283, 'duration': 5.506}, {'end': 3259.237, 'text': "Another this guy, another this guy, and let's do another this guy.", 'start': 3252.59, 'duration': 6.647}, {'end': 3261.912, 'text': 'Now everything is working fine.', 'start': 3260.45, 'duration': 1.462}, {'end': 3262.933, 'text': "Let's go up.", 'start': 3262.452, 'duration': 0.481}, {'end': 3265.795, 'text': 'And sure enough, we have the value of 56.', 'start': 3263.193, 'duration': 2.602}, {'end': 3267.457, 'text': 'Do we have six items? Yes, we do.', 'start': 3265.795, 'duration': 1.662}, {'end': 3269.439, 'text': 'So one, two, three, four, five, six.', 'start': 3267.517, 'duration': 1.922}, {'end': 3274.684, 'text': "And I'm not going to take my calculator out, but I think that this should be a correct value.", 'start': 3269.88, 'duration': 4.804}], 'summary': 'Tested system with six items, resulting in value of 56, confirming correct functionality.', 'duration': 28.401, 'max_score': 3246.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I3246283.jpg'}], 'start': 2849.802, 'title': 'Money calculation and cart display', 'summary': 'Covers calculating total money in an array using the reduce method and fixing cart display, inserting values, and targeting elements by id and class.', 'chapters': [{'end': 2990.819, 'start': 2849.802, 'title': 'Calculating total money in array', 'summary': 'Discusses the process of calculating the total money in an array using the reduce method and how to ensure proper accumulation of values, resulting in the correct total money value.', 'duration': 141.017, 'highlights': ['Explaining the reduce method and its callback function The chapter explains the use of the reduce method and its callback function to calculate the total money in an array, emphasizing the parameters required and the necessity of an initial value.', 'Demonstrating the accumulation process in the reduce method It emphasizes the process of accumulating the total money value in the reduce method by adding each item to the total, ensuring the correct calculation of the total money.', 'Identifying and correcting errors in the code It highlights the identification and correction of errors in the code, such as the naming discrepancy for the total money variable, ensuring the proper functioning of the code.']}, {'end': 3276.646, 'start': 2990.819, 'title': 'Fixing cart display and inserting values', 'summary': 'Outlines fixing the display of ridiculous numbers in a cart, inserting calculated values, and targeting elements by id and class for the cart total, item count, and item total.', 'duration': 285.827, 'highlights': ['Using toFixed method to limit decimal places in the final money variable to two, resulting in a correct display of values in the cart. The toFixed method is used to limit the decimal places in the final money variable to two, ensuring a correct display of values in the cart.', 'Targeting elements by ID and class to insert the final money and item count values, ensuring the correct display of calculated values in the cart. The process involves targeting elements by ID and class to correctly insert the final money and item count values, ensuring the display of accurate calculated values in the cart.', 'Testing the functionality by adding multiple items and confirming the correct display of the total value and item count in the cart. The functionality is tested by adding multiple items to confirm the correct display of the total value and item count in the cart.']}], 'duration': 426.844, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/q_TZhCWbS3I/pics/q_TZhCWbS3I2849802.jpg', 'highlights': ['Explaining the reduce method and its callback function to calculate total money in an array', 'Using toFixed method to limit decimal places in the final money variable to two', 'Identifying and correcting errors in the code for proper functioning', 'Targeting elements by ID and class to insert final money and item count values', 'Demonstrating the accumulation process in the reduce method for correct total money calculation', 'Testing functionality by adding multiple items and confirming correct display in the cart']}], 'highlights': ['Real-time additions result in a total of 4 items and $20.49.', 'The project involves adding JavaScript functionality to display the cart and show a notification when items are added.', 'Using event listeners to show the card with a width of 18 REMs', 'Utilizing event target property to identify the element being clicked Ensures event only fires when clicking on font awesome icon.', "Setting up a variable 'full path' to store the image source and manipulating it using string methods like slice and index to optimize the images for display in a cart variable 'full path', string methods like slice and index", 'Describes the process of manipulating HTML elements using JavaScript, including adding classes and using template strings to create and update elements for a shopping cart feature.', 'The chapter details the process of creating a cart functionality in JavaScript', 'Explaining the reduce method and its callback function to calculate total money in an array']}