title
Code 15 React Projects - Complete Course

description
Improve your skills with the React JavaScript library by building 15 projects using React. 🔗 Code: https://github.com/john-smilga/react-projects 🔗 React Fundamentals Course: https://www.youtube.com/watch?v=4UZrsTqkcW4 ✏️ Course from John Smilga of the Coding Addict channel. Check out his channel: https://www.youtube.com/codingaddict ⭐️ Course Contents ⭐️ ⌨️ (0:00:00) Intro ⌨️ (0:03:34) Starter Project Setup ⌨️ (0:07:18) 1-Birthday Intro ⌨️ (0:07:54) 1-Birthday Setup ⌨️ (0:13:31) 1-Birthday Complete ⌨️ (0:19:41) 2-Tours Intro ⌨️ (0:20:41) 2-Tours Fetch Data ⌨️ (0:32:04) 2-Tours Display Data ⌨️ (0:37:40) 2-Tours Toggle Button ⌨️ (0:43:17) 2-Tours Remove Tour ⌨️ (0:50:13) 3-Reviews Intro ⌨️ (0:50:36) 3-Reviews Info And React Icons ⌨️ (0:56:46) 3-Reviews Setup ⌨️ (1:05:39) 3-Reviews Prev And Next Person ⌨️ (1:12:14) 3-Reviews Random Person ⌨️ (1:17:22) 4-Accordion Intro ⌨️ (1:17:36) 4-Accordion Complete ⌨️ (1:27:27) 5-Menu Intro ⌨️ (1:28:16) 5-Menu Display Items ⌨️ (1:36:08) 5-Menu Manual Approach ⌨️ (1:40:59) 5-Menu All Button ⌨️ (1:43:34) 5-Menu Dynamic Approach ⌨️ (1:52:06) 6-Tabs Intro ⌨️ (1:52:52) 6-Tabs Setup ⌨️ (2:00:09) 6-Tabs Display First Job ⌨️ (2:06:42) 6-Tabs Buttons ⌨️ (2:13:40) 7-Slider Intro ⌨️ (2:14:07) 7-Slider Setup ⌨️ (2:24:59) 7-Slider Manual Setup ⌨️ (2:32:44) 7-Slider Setup Classes ⌨️ (2:40:12) 7-Slider Prev And Next ⌨️ (2:43:32) 7-Slider First And Last, Autoslide ⌨️ (2:50:53) 8-Lorem-Ipsum Intro ⌨️ (2:52:24) 8-Lorem-Ipsum Structure ⌨️ (3:00:32) 8-Lorem-Ipsum Complete ⌨️ (3:08:49) 9-Color-Generator Intro ⌨️ (3:10:33) 9-Color-Generator Structure ⌨️ (3:19:11) 9-Color-Generator Get Values, Error ⌨️ (3:26:05) 9-Color-Generator Single Color ⌨️ (3:42:34) 9-Color-Generator Copy To Clipboard ⌨️ (3:51:39) 10-Grocery-Bud Intro ⌨️ (3:53:10) 10-Grocery-Bud Structure ⌨️ (4:03:46) 10-Grocery-Bud Add Items ⌨️ (4:13:21) 10-Grocery-Bud Alert ⌨️ (4:23:06) 10-Grocery-Bud Clear List ⌨️ (4:25:18) 10-Grocery-Bud Remove Item ⌨️ (4:29:58) 10-Grocery-Bud Edit Item ⌨️ (4:37:12) 10-Grocery-Bud Local Storage ⌨️ (4:41:27) 11-Navbar Intro ⌨️ (4:42:07) 11-Navbar Structure ⌨️ (4:50:59) 11-Navbar Links Data ⌨️ (5:00:14) 11-Navbar Simple Toggle ⌨️ (5:03:10) 11-Navbar Class Toggle ⌨️ (5:07:20) 11-Navbar UseRef Approach ⌨️ (5:16:22) 12-Sidebar Intro ⌨️ (5:17:13) 12-Sidebar Structure ⌨️ (5:26:15) 12-Sidebar Global Context ⌨️ (5:36:39) 12-Sidebar Complete ⌨️ (5:44:46) 13-Stripe Intro ⌨️ (5:47:06) 13-Stripe Context Boilerplate ⌨️ (5:56:31) 13-Stripe Navbar ⌨️ (6:03:31) 13-Stripe Hero ⌨️ (6:06:18) 13-Stripe Sidebar ⌨️ (6:13:48) 13-Stripe Submenu ⌨️ (6:18:16) 13-Stripe Location ⌨️ (6:28:02) 13-Stripe Submenu Links ⌨️ (6:37:34) 13-Stripe Hide Submenu ⌨️ (6:41:55) 14-Cart Intro ⌨️ (6:42:44) 14-Cart Setup Overview ⌨️ (6:50:25) 14-Cart UseReducer Setup ⌨️ (6:57:16) 14-Cart Clear Cart ⌨️ (7:02:06) 14-Cart Remove Item ⌨️ (7:06:35) 14-Cart Increase ⌨️ (7:11:40) 14-Cart Decrease ⌨️ (7:15:41) 14-Cart Get Totals ⌨️ (7:27:23) 14-Cart Fetch Data ⌨️ (7:32:31) 14-Cart Toggle Functionality ⌨️ (7:39:57) 15-Cocktails Intro ⌨️ (7:41:13) 15-Cocktails Additional Info ⌨️ (7:41:51) 15-Cocktails Setup Overview ⌨️ (7:44:49) 15-Cocktails Router Setup ⌨️ (7:50:15) 15-Cocktails Navbar ⌨️ (7:53:20) 15-Cocktails Error About ⌨️ (7:56:28) 15-Cocktails Context Setup ⌨️ (8:06:54) 15-Cocktails API Overview ⌨️ (8:10:29) 15-Cocktails Fetch Drinks ⌨️ (8:20:51) 15-Cocktails Display List ⌨️ (8:26:17) 15-Cocktails Search Form ⌨️ (8:32:49) 15-Cocktails Single Cocktail Page ⌨️ (8:53:23) Hosting - Drag And Drop ⌨️ (8:58:45) Hosting - Continuous Deployment ⭐️ Special thanks to our Champion supporters! ⭐️ 🏆 Loc Do 🏆 Joseph C 🏆 DeezMaster -- Learn to code for free and get a developer job: https://www.freecodecamp.org Read hundreds of articles on programming: https://freecodecamp.org/news

detail
{'title': 'Code 15 React Projects - Complete Course', 'heatmap': [{'end': 2962.2, 'start': 2628.145, 'weight': 0.923}, {'end': 6576.372, 'start': 6238.552, 'weight': 0.761}, {'end': 15121.424, 'start': 14790.735, 'weight': 1}, {'end': 16450.981, 'start': 16101.83, 'weight': 0.74}, {'end': 20052.55, 'start': 19709.463, 'weight': 0.863}, {'end': 21369.769, 'start': 21034.505, 'weight': 0.754}], 'summary': 'This complete course on react projects consists of 15 projects covering various functionalities, state management, component setup, color manipulation, context usage, usereducer functionality, and deployment on netlify, providing comprehensive coverage of react development.', 'chapters': [{'end': 1126.371, 'segs': [{'end': 279.459, 'src': 'embed', 'start': 251.263, 'weight': 5, 'content': [{'end': 263.011, 'text': 'But download should be somewhat quick, then open up your text, or drag and drop in my case, offset right away, side by side my browser window as well.', 'start': 251.263, 'duration': 11.748}, {'end': 266.213, 'text': "So we're going to go here with a text error.", 'start': 263.832, 'duration': 2.381}, {'end': 268.255, 'text': 'And then we have the browser.', 'start': 266.754, 'duration': 1.501}, {'end': 271.896, 'text': "And then you'll notice that they're going to be projects.", 'start': 268.815, 'duration': 3.081}, {'end': 279.459, 'text': "And for each and every project, there's going to be a setup folder, as well as the final folder.", 'start': 273.037, 'duration': 6.422}], 'summary': 'Quick download, open text, side by side with browser, projects have setup and final folders.', 'duration': 28.196, 'max_score': 251.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo251263.jpg'}, {'end': 627.418, 'src': 'embed', 'start': 579.99, 'weight': 2, 'content': [{'end': 588.718, 'text': 'Now, as far as our project, like I said, all the files already created for you, as well as the imports.', 'start': 579.99, 'duration': 8.728}, {'end': 590.519, 'text': 'And then of course, the CSS.', 'start': 589.018, 'duration': 1.501}, {'end': 594.342, 'text': 'Now, let me open up the localhost on small browser window.', 'start': 591.12, 'duration': 3.222}, {'end': 597.165, 'text': 'And of course, I can close my integrated terminal.', 'start': 594.763, 'duration': 2.402}, {'end': 601.766, 'text': 'And what you should see is reminder project setup.', 'start': 597.865, 'duration': 3.901}, {'end': 609.548, 'text': "If you don't see that, then of course, you need to make sure that you are in correct folder, and that you're running the correct commands.", 'start': 602.306, 'duration': 7.242}, {'end': 613.43, 'text': 'Specifically, this project has data j s.', 'start': 609.989, 'duration': 3.441}, {'end': 617.811, 'text': 'So this is going to be an array with all our people.', 'start': 613.43, 'duration': 4.381}, {'end': 621.332, 'text': 'And each person is going to be represented by the object.', 'start': 618.551, 'duration': 2.781}, {'end': 625.876, 'text': 'Notice here we have the idea we have the name age as well as the image.', 'start': 621.872, 'duration': 4.004}, {'end': 627.418, 'text': "So that's going to be our list.", 'start': 626.336, 'duration': 1.082}], 'summary': 'Project files and css ready, localhost setup with reminder project, data.js with array of people.', 'duration': 47.428, 'max_score': 579.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo579990.jpg'}, {'end': 842.023, 'src': 'embed', 'start': 820.435, 'weight': 7, 'content': [{'end': 828.978, 'text': 'where I would want to set up some kind of state value, then set up our default value with our data, show a list of people and then, of course,', 'start': 820.435, 'duration': 8.543}, {'end': 831.339, 'text': 'pass it into a list, iterate over it.', 'start': 828.978, 'duration': 2.361}, {'end': 839.742, 'text': 'And then eventually also make this button work more at the moment, it is just console logging, you click me.', 'start': 831.939, 'duration': 7.803}, {'end': 842.023, 'text': "I think I'm going to start with state value.", 'start': 840.362, 'duration': 1.661}], 'summary': 'Developing a feature to display a list of people and make a button functional.', 'duration': 21.588, 'max_score': 820.435, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo820435.jpg'}, {'end': 907.063, 'src': 'embed', 'start': 874.012, 'weight': 0, 'content': [{'end': 877.636, 'text': "you'll also notice this syntax where.", 'start': 874.012, 'duration': 3.624}, {'end': 880.359, 'text': 'notice how I did not name this array.', 'start': 877.636, 'duration': 2.723}, {'end': 888.742, 'text': 'Normally, prior to that, we always did something like this, where we have either a function, or some kind of array or object or whatever.', 'start': 880.899, 'duration': 7.843}, {'end': 899.586, 'text': "Either we're going with named export or if we're setting up export default, we do it right after where we go with export default and then of course,", 'start': 890.403, 'duration': 9.183}, {'end': 899.906, 'text': 'the name.', 'start': 899.586, 'duration': 0.32}, {'end': 907.063, 'text': "other way we can do that is by simply writing export default and then whatever we're going to be exporting,", 'start': 900.62, 'duration': 6.443}], 'summary': 'Explains syntax and usage of named and default exports in javascript.', 'duration': 33.051, 'max_score': 874.012, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo874012.jpg'}, {'end': 1126.371, 'src': 'embed', 'start': 1073.578, 'weight': 1, 'content': [{'end': 1075.359, 'text': 'And what I would want is the article.', 'start': 1073.578, 'duration': 1.781}, {'end': 1077.16, 'text': "So I'm returning the article.", 'start': 1075.379, 'duration': 1.781}, {'end': 1079.58, 'text': "And then let's add right away a key.", 'start': 1077.68, 'duration': 1.9}, {'end': 1082.021, 'text': "So this is where we'll use that ID.", 'start': 1079.941, 'duration': 2.08}, {'end': 1084.382, 'text': "Now also, let's add a little bit of styling.", 'start': 1082.482, 'duration': 1.9}, {'end': 1088.044, 'text': 'So add here a person class.', 'start': 1084.862, 'duration': 3.182}, {'end': 1092.245, 'text': "And then inside the article, we're going to go with an image.", 'start': 1088.684, 'duration': 3.561}, {'end': 1097.587, 'text': "Now of course, for the source, I'll use my image property.", 'start': 1092.725, 'duration': 4.862}, {'end': 1101.489, 'text': "Then for the alternative, we're just going to go with name.", 'start': 1098.247, 'duration': 3.242}, {'end': 1108.715, 'text': "And we're going to have another thing, the div, we have the name and the age.", 'start': 1103.03, 'duration': 5.685}, {'end': 1111.217, 'text': "So in here, let's go with heading four.", 'start': 1109.296, 'duration': 1.921}, {'end': 1113.119, 'text': "And we'll type your name.", 'start': 1111.998, 'duration': 1.121}, {'end': 1121.648, 'text': "And then right after that, we're going to have a paragraph with an age with my age property, the years.", 'start': 1113.72, 'duration': 7.928}, {'end': 1126.371, 'text': 'So once we save, this is what we should see on the screen.', 'start': 1122.228, 'duration': 4.143}], 'summary': 'Adding article with image, name, and age using specific properties.', 'duration': 52.793, 'max_score': 1073.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo1073578.jpg'}], 'start': 0.149, 'title': 'React projects and setup', 'summary': 'Introduces 15 react projects with a complimentary video tutorial, emphasizing the need for prior react knowledge, and outlines project setup, including the time-saving benefits of pre-created css and file structures. it also covers setting up front-end styles, components, and exporting data.', 'chapters': [{'end': 331.449, 'start': 0.149, 'title': '15 react projects', 'summary': 'Introduces the 15 react projects video tutorial created as a complimentary video for the complete react tutorial, providing a url for accessing the projects, emphasizing the need for prior react knowledge, and explaining the setup and final folder structure for each project.', 'duration': 331.3, 'highlights': ["The chapter emphasizes the need for prior React knowledge to fully engage in building the apps, directing viewers to a URL for accessing the 15 React projects and providing a GitHub repository link for obtaining the star project to follow along. It also explains the folder structure for each project, including the setup and final folders, and emphasizes the necessity of running 'npm install' for both folders. (Relevance: 5)", "The chapter provides a URL for accessing the 15 React projects, allowing viewers to explore each project by clicking on its card and emphasizes the need for prior React knowledge to engage in building the apps, highlighting the video's focus on app development rather than covering the theory behind 'use state' hook or delving into vanilla JavaScript topics. It also mentions providing a tutorial video link in the description and directs viewers to the 'JavaScript Nuggets' playlist on the Coding Addict channel for detailed explanations of vanilla JavaScript topics. (Relevance: 4)", "The chapter directs viewers to the URL 'react-project.netlify.app' for accessing the 15 React projects and provides a GitHub repository link for obtaining the star project to follow along. It also explains the folder structure for each project, including the setup and final folders, and emphasizes the necessity of running 'npm install' for both folders. (Relevance: 3)"]}, {'end': 679.964, 'start': 331.889, 'title': 'Project setup and overview', 'summary': "Outlines the setup process for a project and emphasizes the time-saving benefits of pre-created css and file structures, while also providing guidance on tutorial completion and a detailed overview of the first project, 'birthday reminder', including its features and setup steps.", 'duration': 348.075, 'highlights': ['The project setup includes pre-created CSS and file structures to save time and enable focus on adding more functionality, emphasizing a time-saving approach and enabling the pursuit of more interesting features.', 'The tutorial provides a structured guideline for project progression, encouraging a comfortable completion of tutorials before undertaking projects, with specific examples of tutorial-topic-based project suggestions.', "The first project, 'birthday reminder', is described in detail, including its features such as displaying a list of birthdays with corresponding images and ages, a clear all button, and the setup process involving navigating to the specific folder, installing dependencies, and spinning up the dev server."]}, {'end': 1126.371, 'start': 680.504, 'title': 'Setting up front-end styles and components', 'summary': 'Covers setting up global styles, adding html elements, iterating over data, and using state values to display a list of people. it also includes details on structuring components and exporting data.', 'duration': 445.867, 'highlights': ['Setting up global styles in index CSS by defining variables and changing background color to customize the visual appearance of the project.', 'Adding HTML elements like main, section with a class of container, heading three for displaying the list size, list component, and a button to clear the list.', 'Using state values to set up default data, iterate over the data, and display a list of people with their images, names, and ages, iterating over each object and using destructuring to access properties.', 'Explanation of exporting data in JavaScript, covering the syntax for default and named exports, and demonstrating the usage of default export with an array of objects.']}], 'duration': 1126.222, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo149.jpg', 'highlights': ['The project setup includes pre-created CSS and file structures to save time and enable focus on adding more functionality, emphasizing a time-saving approach and enabling the pursuit of more interesting features.', "The chapter emphasizes the need for prior React knowledge to fully engage in building the apps, directing viewers to a URL for accessing the 15 React projects and providing a GitHub repository link for obtaining the star project to follow along. It also explains the folder structure for each project, including the setup and final folders, and emphasizes the necessity of running 'npm install' for both folders.", "The chapter provides a URL for accessing the 15 React projects, allowing viewers to explore each project by clicking on its card and emphasizes the need for prior React knowledge to engage in building the apps, highlighting the video's focus on app development rather than covering the theory behind 'use state' hook or delving into vanilla JavaScript topics. It also mentions providing a tutorial video link in the description and directs viewers to the 'JavaScript Nuggets' playlist on the Coding Addict channel for detailed explanations of vanilla JavaScript topics.", "The chapter directs viewers to the URL 'react-project.netlify.app' for accessing the 15 React projects and provides a GitHub repository link for obtaining the star project to follow along. It also explains the folder structure for each project, including the setup and final folders, and emphasizes the necessity of running 'npm install' for both folders.", 'The tutorial provides a structured guideline for project progression, encouraging a comfortable completion of tutorials before undertaking projects, with specific examples of tutorial-topic-based project suggestions.', 'Setting up global styles in index CSS by defining variables and changing background color to customize the visual appearance of the project.', 'Adding HTML elements like main, section with a class of container, heading three for displaying the list size, list component, and a button to clear the list.', 'Using state values to set up default data, iterate over the data, and display a list of people with their images, names, and ages, iterating over each object and using destructuring to access properties.', 'Explanation of exporting data in JavaScript, covering the syntax for default and named exports, and demonstrating the usage of default export with an array of objects.']}, {'end': 2358.454, 'segs': [{'end': 1159.372, 'src': 'embed', 'start': 1126.791, 'weight': 0, 'content': [{'end': 1130.374, 'text': 'So we have five birthdays, that is the length of my list.', 'start': 1126.791, 'duration': 3.583}, {'end': 1139.14, 'text': 'And each and every item is represented with an image with a name, as well as well how old they are.', 'start': 1131.314, 'duration': 7.826}, {'end': 1146.624, 'text': 'And the last thing that I would want to do in this project is to add functionality to my button, where I can clear the list.', 'start': 1139.62, 'duration': 7.004}, {'end': 1151.548, 'text': 'So I have state value, I have set people, it is an array.', 'start': 1147.045, 'duration': 4.503}, {'end': 1159.372, 'text': "So the only thing that I would want in this case, is to go back to my online function, where I'm setting up the on click.", 'start': 1152.088, 'duration': 7.284}], 'summary': 'List contains 5 birthdays with names and ages, aims to add clear button functionality.', 'duration': 32.581, 'max_score': 1126.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo1126791.jpg'}, {'end': 1789.107, 'src': 'embed', 'start': 1762.444, 'weight': 1, 'content': [{'end': 1767.631, 'text': "So once I invoke it, we should see in the console, the array that we're getting back.", 'start': 1762.444, 'duration': 5.187}, {'end': 1771.735, 'text': 'And of course, there is those are my five doors.', 'start': 1767.711, 'duration': 4.024}, {'end': 1783.604, 'text': 'Now, before we set up the tours with set tours function, equal to the tours that we just fetched, we can also place this in try and clutch.', 'start': 1772.336, 'duration': 11.268}, {'end': 1789.107, 'text': 'So that way, if there is some kind of error, at least we can display it again.', 'start': 1784.104, 'duration': 5.003}], 'summary': 'Fetching array data and handling errors for display.', 'duration': 26.663, 'max_score': 1762.444, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo1762444.jpg'}, {'end': 2072.606, 'src': 'embed', 'start': 2046.667, 'weight': 3, 'content': [{'end': 2055.614, 'text': 'And then, in order to speed this up, in order for me to get all the properties that are in the tour, whether that is an ID, name, info,', 'start': 2046.667, 'duration': 8.947}, {'end': 2057.034, 'text': 'image and all that good stuff.', 'start': 2055.614, 'duration': 1.42}, {'end': 2060.638, 'text': "I'm just going to go with object spread operator.", 'start': 2057.594, 'duration': 3.044}, {'end': 2064.3, 'text': 'where I set up the curly braces, dot dot dot and mentor.', 'start': 2061.217, 'duration': 3.083}, {'end': 2072.606, 'text': "And what that means that in the door component, I'll have access to all the properties that are in my object.", 'start': 2064.699, 'duration': 7.907}], 'summary': 'Using object spread operator to access all properties in the tour for faster processing.', 'duration': 25.939, 'max_score': 2046.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo2046667.jpg'}, {'end': 2239.129, 'src': 'embed', 'start': 2211.133, 'weight': 2, 'content': [{'end': 2213.815, 'text': 'So essentially description of my tour.', 'start': 2211.133, 'duration': 2.682}, {'end': 2221.578, 'text': "And then as the last thing, there's going to be a button that allows us to remove the tour from the list.", 'start': 2214.395, 'duration': 7.183}, {'end': 2229.182, 'text': "So for now, we're just going to go with button, I will add the class name of delete, and then hyphen btn.", 'start': 2222.038, 'duration': 7.144}, {'end': 2231.523, 'text': "Now, I won't set up the on click up.", 'start': 2229.682, 'duration': 1.841}, {'end': 2234.024, 'text': "And let's just say not interested.", 'start': 2232.143, 'duration': 1.881}, {'end': 2236.886, 'text': 'is going to be the text, we save it.', 'start': 2235.124, 'duration': 1.762}, {'end': 2238.008, 'text': 'And there it is.', 'start': 2237.447, 'duration': 0.561}, {'end': 2239.129, 'text': 'Now we have everything.', 'start': 2238.288, 'duration': 0.841}], 'summary': "Created a tour description with a 'remove' button and 'not interested' text.", 'duration': 27.996, 'max_score': 2211.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo2211133.jpg'}], 'start': 1126.791, 'title': 'React projects and state management', 'summary': 'Covers the development of two react projects: a birthday reminder and tourist project, along with setting up a custom api, fetching and displaying tour data, and iterating over items in react components for improved user experience and interface functionality.', 'chapters': [{'end': 1363.904, 'start': 1126.791, 'title': 'React project: birthday reminder and tours', 'summary': 'Covers the development of two react projects: a birthday reminder with functionality to clear the list and a tourist project to fetch and display tours, including conditional rendering and fetching data.', 'duration': 237.113, 'highlights': ['The chapter discusses the development of two React projects: a birthday reminder and a tourist project. It covers functionality to clear the list in the birthday reminder project and fetching and displaying tours in the tourist project.', 'The birthday reminder project involves representing five birthdays with images, names, and ages, and adding functionality to clear the list using a button.', 'The tourist project involves fetching and displaying tours with images, tour names, prices, and an option to read more. It also covers conditional rendering and the loading option while fetching data.', 'The setup process for each project involves navigating to the specific setup folder, running npm install and npm start, and setting up state values and fetching data for the tours project.', 'The React projects utilize components like app.js, loading component, tours component, and single tour component to render the tours data.']}, {'end': 1604.25, 'start': 1364.384, 'title': 'Setting up custom api and state values', 'summary': 'Discusses setting up a custom api to ensure consistency, simplifying its structure, and initializing state values for loading and tours, with loading initially set to true and tours as an empty array. it also covers implementing conditional returns to display loading or tours components based on the loading state.', 'duration': 239.866, 'highlights': ['The chapter emphasizes the importance of setting up a custom API to ensure consistency and avoid potential changes, ensuring the API remains constant during recording and viewing, which is crucial in real-world scenarios where APIs often change.', 'It highlights the decision to simplify the structure of the custom API to avoid the nested structure typically associated with external APIs, ensuring that the properties are directly accessible on the object.', 'The transcript details the initialization of state values for loading and tours, setting loading as true by default to display the loading component and initializing tours as an empty array.', 'It explains the implementation of conditional returns based on the loading state, displaying the loading component when loading is true and the tours component when not loading, with corresponding components already prepared for display.']}, {'end': 1973.43, 'start': 1604.85, 'title': 'Fetching and displaying tour data', 'summary': 'Covers the process of fetching tour data using the fetch api, setting loading states, handling errors with try-catch blocks, and displaying the fetched tour data, resulting in the successful retrieval of an array of five tour items and the subsequent display on the screen.', 'duration': 368.58, 'highlights': ['The use of the fetch API to retrieve tour data and the setting of loading states to indicate data fetching, resulting in a successful retrieval of an array of five tour items.', 'The implementation of try-catch blocks to handle potential network errors when fetching tour data, ensuring the display of appropriate error messages if errors occur.', 'The utilization of useEffect to trigger the fetching of tour data on the initial render, leading to the successful display of the fetched tour data on the screen.', 'The association of the fetched tour data with the tour state value and its subsequent utilization in the tourist component for display purposes.']}, {'end': 2358.454, 'start': 1973.891, 'title': 'React component iteration', 'summary': 'Discusses how to iterate over a list of items and display them using the map method in react components, utilizing conditional rendering for toggling information display, and destructuring props for efficient rendering, with a focus on improving user experience and interface functionality.', 'duration': 384.563, 'highlights': ['The chapter demonstrates iterating over a list of items and displaying them using the map method in React components, resulting in the creation of individual tour components for each item, with a clear indication of five single tour components being generated based on the existing list.', "The chapter emphasizes the use of conditional rendering to toggle the display of information, as exemplified by the implementation of a 'read more' button to show full tour info, providing a user-friendly interface and improving the overall user experience.", 'The transcript highlights the efficient use of destructuring props to access and render specific properties such as ID, image, info, price, and name within the tour components, showcasing a practical approach to enhancing rendering performance and code readability.']}], 'duration': 1231.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo1126791.jpg', 'highlights': ['The chapter covers the development of two React projects: a birthday reminder and a tourist project.', 'Setting up a custom API is emphasized to ensure consistency and avoid potential changes.', 'The use of the fetch API to retrieve tour data and the setting of loading states to indicate data fetching.', 'Iterating over a list of items and displaying them using the map method in React components.']}, {'end': 3969.449, 'segs': [{'end': 2385.356, 'src': 'embed', 'start': 2358.995, 'weight': 0, 'content': [{'end': 2364.219, 'text': "And we're going to go with info, and then sub string like so.", 'start': 2358.995, 'duration': 5.224}, {'end': 2369.803, 'text': 'And of course, that is the function that just gets part of the string.', 'start': 2365.32, 'duration': 4.483}, {'end': 2370.784, 'text': 'We start with zero.', 'start': 2369.883, 'duration': 0.901}, {'end': 2376.569, 'text': "So start with index zero, and then comma, and then how much text you don't want to display.", 'start': 2371.064, 'duration': 5.505}, {'end': 2379.531, 'text': 'So in my case, I go with 200.', 'start': 2376.969, 'duration': 2.562}, {'end': 2382.554, 'text': 'But of course, you can choose your own value.', 'start': 2379.531, 'duration': 3.023}, {'end': 2385.356, 'text': "And then in here, let's just add that.", 'start': 2383.054, 'duration': 2.302}], 'summary': 'Using info and substring to get part of the string, starting from index 0 and displaying 200 characters.', 'duration': 26.361, 'max_score': 2358.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo2358995.jpg'}, {'end': 2962.2, 'src': 'heatmap', 'start': 2628.145, 'weight': 0.923, 'content': [{'end': 2629.546, 'text': "The moment we're in the tour.", 'start': 2628.145, 'duration': 1.401}, {'end': 2633.988, 'text': 'Correct But it is sitting in the torch component.', 'start': 2630.627, 'duration': 3.361}, {'end': 2636.83, 'text': 'And then torch is rendered in the app.', 'start': 2634.469, 'duration': 2.361}, {'end': 2642.687, 'text': 'Now, where do I have my tours data, that is, of course, in the objects.', 'start': 2637.765, 'duration': 4.922}, {'end': 2652.732, 'text': "So it would make sense if I would have my function right here, but then where I'm going to call it, well, that is going to be in every tour, right.", 'start': 2643.208, 'duration': 9.524}, {'end': 2664.298, 'text': "So we'll need to figure out how we can pass the function, the remove tour function down to a tour component, because in here, I will need the ID.", 'start': 2653.313, 'duration': 10.985}, {'end': 2671.081, 'text': 'This is why the structure, because my function, of course, is going to be looking for that ID, because I would need to know what,', 'start': 2664.758, 'duration': 6.323}, {'end': 2674.762, 'text': 'which tour I would want to remove from my list.', 'start': 2671.081, 'duration': 3.681}, {'end': 2678.504, 'text': "So let's go with a function remove tour.", 'start': 2675.283, 'duration': 3.221}, {'end': 2681.105, 'text': "Now, like I said, we'll be looking for the ID.", 'start': 2679.024, 'duration': 2.081}, {'end': 2685.167, 'text': 'So as a parameter will pass in the ID.', 'start': 2681.725, 'duration': 3.442}, {'end': 2689.208, 'text': "And as far as the functionality, we're just going to go with const.", 'start': 2686.367, 'duration': 2.841}, {'end': 2691.249, 'text': "I'll name this new tours.", 'start': 2689.709, 'duration': 1.54}, {'end': 2692.95, 'text': 'And that is equal to tours.', 'start': 2691.669, 'duration': 1.281}, {'end': 2695.391, 'text': 'And we just go with filter method.', 'start': 2693.55, 'duration': 1.841}, {'end': 2704.015, 'text': "where I say, if the tour ID doesn't match beautiful is going to be placed in the new tours array.", 'start': 2695.931, 'duration': 8.084}, {'end': 2710.417, 'text': "If the ID matches whatever I'm passing in, well, that means that that is the tour that I would want to remove.", 'start': 2704.575, 'duration': 5.842}, {'end': 2714.579, 'text': "So of course, that's why I will not place it in that new array.", 'start': 2710.717, 'duration': 3.862}, {'end': 2719.682, 'text': 'So say tour ID and then does not match the ID.', 'start': 2715.039, 'duration': 4.643}, {'end': 2726.207, 'text': "So if that is the case, if the tour ID doesn't match the idea that I'm passing in beautiful is going to be returned.", 'start': 2720.043, 'duration': 6.164}, {'end': 2730.631, 'text': "If it does match, then it's not going to be returned in the new tours array.", 'start': 2726.648, 'duration': 3.983}, {'end': 2737.234, 'text': 'And then of course, I will call my set doors and set it equal to my new doors.', 'start': 2731.451, 'duration': 5.783}, {'end': 2746.619, 'text': 'Now the next question is, well, how we can get this function down to a tour component, because this is where I would want to call it.', 'start': 2737.795, 'duration': 8.824}, {'end': 2748.26, 'text': 'Of course, this is where I have the button.', 'start': 2746.639, 'duration': 1.621}, {'end': 2749.881, 'text': 'And this is where I have the ID.', 'start': 2748.6, 'duration': 1.281}, {'end': 2752.802, 'text': 'we simply pass it as a prop.', 'start': 2750.801, 'duration': 2.001}, {'end': 2757.285, 'text': 'So I have my function, I just need to come up with some kind of prop.', 'start': 2753.323, 'duration': 3.962}, {'end': 2760.226, 'text': 'In this case, I will name it exactly the same.', 'start': 2758.185, 'duration': 2.041}, {'end': 2765.269, 'text': 'So remove tour prop is equal to my remove tour function.', 'start': 2760.306, 'duration': 4.963}, {'end': 2768.866, 'text': 'then I would need to destructure it in my tours component.', 'start': 2765.825, 'duration': 3.041}, {'end': 2773.248, 'text': 'So remove tour, and also pass it to a tour component.', 'start': 2769.387, 'duration': 3.861}, {'end': 2777.67, 'text': 'So we can also pass functions as props.', 'start': 2773.909, 'duration': 3.761}, {'end': 2787.394, 'text': "Let's go the same name, remove tour prop is equal to a remove tour function that is coming from objects.", 'start': 2778.691, 'duration': 8.703}, {'end': 2795.899, 'text': 'And then finally, we go for remove tour prop in the tour component.', 'start': 2787.875, 'duration': 8.024}, {'end': 2801.385, 'text': "By the way, this is something called prop drilling, which we're going to cover later in tutorial.", 'start': 2796.32, 'duration': 5.065}, {'end': 2807.871, 'text': "So if you're watching tutorial and then project, tutorial and project, then I just want to tell you that, yes,", 'start': 2801.945, 'duration': 5.926}, {'end': 2813.938, 'text': "there's a way around this where essentially we'll use something called context API.", 'start': 2807.871, 'duration': 6.067}, {'end': 2815.318, 'text': "But for now, we're good.", 'start': 2814.338, 'duration': 0.98}, {'end': 2817.219, 'text': 'We have our remove tour.', 'start': 2815.598, 'duration': 1.621}, {'end': 2819.899, 'text': 'And then finally, in my button.', 'start': 2817.699, 'duration': 2.2}, {'end': 2824.46, 'text': "of course, our just need to call it where I'm going to go with on click.", 'start': 2819.899, 'duration': 4.561}, {'end': 2830.641, 'text': "then I'll set up my inline function, of course, and then I would want to invoke my remove tour.", 'start': 2824.46, 'duration': 6.181}, {'end': 2839.302, 'text': 'But then remember, remove tour was looking for what it was looking for the correct each and every tour has that unique ID.', 'start': 2830.981, 'duration': 8.321}, {'end': 2842.163, 'text': 'So just pass it into a remove tour.', 'start': 2839.763, 'duration': 2.4}, {'end': 2845.584, 'text': "So that way, I know which tour I'm going to be removing.", 'start': 2842.563, 'duration': 3.021}, {'end': 2847.025, 'text': 'So I have my tours.', 'start': 2846.024, 'duration': 1.001}, {'end': 2857.129, 'text': 'And if you want, you can check your array, where once you click on not interested, notice the array got smaller, we already have only four arms.', 'start': 2847.825, 'duration': 9.304}, {'end': 2861.331, 'text': 'And we can keep on going here, a transit said, not interested.', 'start': 2857.889, 'duration': 3.442}, {'end': 2866.733, 'text': 'And finally, once we remove all the tours, we should have the empty array.', 'start': 2861.351, 'duration': 5.382}, {'end': 2871.335, 'text': 'And this will be a good case where we could set up another return.', 'start': 2867.533, 'duration': 3.802}, {'end': 2878.078, 'text': "where if there are no more tours that you can display, why don't we set up a condition.", 'start': 2871.855, 'duration': 6.223}, {'end': 2884.46, 'text': "So I'm going to navigate back to app jazz, I already have my one condition for loading.", 'start': 2878.698, 'duration': 5.762}, {'end': 2886.961, 'text': 'And then second, the default return.', 'start': 2884.88, 'duration': 2.081}, {'end': 2889.122, 'text': 'Now we want to set up another one.', 'start': 2887.521, 'duration': 1.601}, {'end': 2901.353, 'text': "where I'm going to say if I'm checking for tours length, if that is equal to a zero, essentially, if I have no tours in my state,", 'start': 2889.562, 'duration': 11.791}, {'end': 2904.116, 'text': 'value well what I would want to return.', 'start': 2901.353, 'duration': 2.763}, {'end': 2908.981, 'text': "I'm going to go here, we return and we're going to set up our main here.", 'start': 2904.116, 'duration': 4.865}, {'end': 2911.764, 'text': "inside there, we're going to go with div.", 'start': 2910.082, 'duration': 1.682}, {'end': 2913.626, 'text': "And I'm going to add the title.", 'start': 2912.485, 'duration': 1.141}, {'end': 2920.574, 'text': "And then inside the title, let's go with heading to no tours left, like show.", 'start': 2914.267, 'duration': 6.307}, {'end': 2922.576, 'text': "And now let's add a button.", 'start': 2921.195, 'duration': 1.381}, {'end': 2927.342, 'text': 'And this button will simply call the fetch tours.', 'start': 2923.317, 'duration': 4.025}, {'end': 2930.303, 'text': 'essentially the function that fetches the door.', 'start': 2927.882, 'duration': 2.421}, {'end': 2939.369, 'text': "So then of course, we'll set up our state value or towards value back to the array that is coming from the API.", 'start': 2930.724, 'duration': 8.645}, {'end': 2941.41, 'text': 'So we have no doors left.', 'start': 2939.749, 'duration': 1.661}, {'end': 2950.135, 'text': "And then right after that, we're going to go with button, we'll go with on click, that is going to be equal to my online function here.", 'start': 2942.05, 'duration': 8.085}, {'end': 2953.637, 'text': "Let's go with fetch doors like so.", 'start': 2951.035, 'duration': 2.602}, {'end': 2962.2, 'text': "And by the way, in this case, you can also set it up as a reference if you wanted to, since you don't need to invoke it with some kind of argument.", 'start': 2954.218, 'duration': 7.982}], 'summary': 'Passing and using a remove tour function in a tour component to remove tours from a list. implementing a conditional return when there are no tours left.', 'duration': 334.055, 'max_score': 2628.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo2628145.jpg'}, {'end': 3742.89, 'src': 'embed', 'start': 3721.554, 'weight': 1, 'content': [{'end': 3730.259, 'text': "And then inside of this article, we're going to go with div, the class of image container, And let's just showcase that image.", 'start': 3721.554, 'duration': 8.705}, {'end': 3735.243, 'text': "So image for the source, I'm going to use the image that I'm accessing here.", 'start': 3730.519, 'duration': 4.724}, {'end': 3737.245, 'text': "So I'm going to say here image.", 'start': 3735.784, 'duration': 1.461}, {'end': 3741.029, 'text': "Now for the alternative, let's just display the name.", 'start': 3737.846, 'duration': 3.183}, {'end': 3742.89, 'text': 'And that is going to be named.', 'start': 3741.049, 'duration': 1.841}], 'summary': 'Using div with class image container to showcase image and display name.', 'duration': 21.336, 'max_score': 3721.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo3721554.jpg'}], 'start': 2358.995, 'title': 'React component functionalities', 'summary': "Explains using substring method, toggle functionality, 'read more' button, state values and navigation, and building a review component in react, incorporating dynamic changes and array manipulation.", 'chapters': [{'end': 2512.827, 'start': 2358.995, 'title': 'React substring and toggle functionality', 'summary': 'Explains how to use the substring method in react to display a portion of text, and how to implement a toggle functionality for displaying the full text by changing the state value. it also demonstrates setting up a button to toggle the state value and dynamically changing the button text based on the state value.', 'duration': 153.832, 'highlights': ['The chapter explains how to use the substring method in React to display a portion of text, and how to implement a toggle functionality for displaying the full text by changing the state value.', 'It also demonstrates setting up a button to toggle the state value and dynamically changing the button text based on the state value.']}, {'end': 2930.303, 'start': 2513.407, 'title': 'React component state and functionality', 'summary': "Demonstrates the functionality of a 'read more' button and the removal of tour items using react component state and props, with a demonstration of how the array size changes upon removal of tours.", 'duration': 416.896, 'highlights': ["The chapter demonstrates the functionality of a 'read more' button and the removal of tour items using React component state and props, with a demonstration of how the array size changes upon removal of tours.", "The speaker explains how the 'read more' button changes its display based on the state value, toggling between displaying the full information and only part of the text, with the button text also changing accordingly.", 'The process of removing tour items from the list is explained, showcasing the use of a remove tour function that filters the tours array based on unique IDs, resulting in the array size changing upon removal of tours.']}, {'end': 3409.071, 'start': 2930.724, 'title': 'Setting up state values and navigating through projects', 'summary': 'Covers setting up state values, navigating through projects, and using a library called react icons for icons, with an emphasis on alternating between fetching data and using local data in projects.', 'duration': 478.347, 'highlights': ['The chapter covers setting up state values, navigating through projects, and using a library called react icons for icons, with an emphasis on alternating between fetching data and using local data in projects.', 'The chapter emphasizes the use of a library called react icons for icons and showcases how to install it, use specific icons, and add it to a project, providing a detailed explanation of the process.', 'The chapter discusses the approach of alternating between fetching data from an external API and using local data in projects to avoid repetition and redundancy, aiming for a more real-world application scenario.']}, {'end': 3969.449, 'start': 3409.471, 'title': 'Building react review component', 'summary': "Involves building a react review component with functionality to display and switch between different people's reviews from an array, using state values and mapping through the array. it also includes setting up buttons to navigate through the reviews.", 'duration': 559.978, 'highlights': ["The chapter involves setting up a React review component with functionality to display and switch between different people's reviews from an array, using state values and mapping through the array. (Relevance: 5)", "The component uses a state value 'index' to access and display properties of different people from the array, allowing for dynamic rendering of individual reviews. (Relevance: 4)", 'Buttons are added to the component to navigate through the reviews, with functionality to display either the next person in the list or the previous one. (Relevance: 3)']}], 'duration': 1610.454, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo2358995.jpg', 'highlights': ["The chapter involves setting up a React review component with functionality to display and switch between different people's reviews from an array, using state values and mapping through the array. (Relevance: 5)", "The component uses a state value 'index' to access and display properties of different people from the array, allowing for dynamic rendering of individual reviews. (Relevance: 4)", 'Buttons are added to the component to navigate through the reviews, with functionality to display either the next person in the list or the previous one. (Relevance: 3)', 'The chapter covers setting up state values, navigating through projects, and using a library called react icons for icons, with an emphasis on alternating between fetching data and using local data in projects. (Relevance: 2)', 'The chapter explains how to use the substring method in React to display a portion of text, and how to implement a toggle functionality for displaying the full text by changing the state value. (Relevance: 1)']}, {'end': 6796.739, 'segs': [{'end': 4912.712, 'src': 'embed', 'start': 4880.201, 'weight': 0, 'content': [{'end': 4885.604, 'text': "So the array that I'm getting from my data js file, the array of questions.", 'start': 4880.201, 'duration': 5.403}, {'end': 4892.511, 'text': 'And then as far as the return, we go with Then we place our container.', 'start': 4886.245, 'duration': 6.266}, {'end': 4898.279, 'text': "So there for the class of container, inside of the container, we'll go with heading three.", 'start': 4893.092, 'duration': 5.187}, {'end': 4904.588, 'text': 'And that is going to be questions and answers about login.', 'start': 4898.699, 'duration': 5.889}, {'end': 4912.712, 'text': "right next to it, we're gonna have a section with a class of info section.", 'start': 4908.41, 'duration': 4.302}], 'summary': 'Using data array to create a container for login faq with headings and info section.', 'duration': 32.511, 'max_score': 4880.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo4880201.jpg'}, {'end': 5066.807, 'src': 'embed', 'start': 5039.111, 'weight': 2, 'content': [{'end': 5044.293, 'text': "And then inside of the header we're going to have a heading four and then title.", 'start': 5039.111, 'duration': 5.182}, {'end': 5048.975, 'text': "so whatever is going to be the title and eventually we'll also have our toggle button.", 'start': 5044.293, 'duration': 4.682}, {'end': 5056.298, 'text': "So right next to the heading four, let's go with button, we'll add a class name of BTN.", 'start': 5049.395, 'duration': 6.903}, {'end': 5059.76, 'text': 'And eventually there will be icons here.', 'start': 5057.239, 'duration': 2.521}, {'end': 5062.282, 'text': "But for now, let's just say btn.", 'start': 5060.3, 'duration': 1.982}, {'end': 5066.807, 'text': "Let's save it, we should have the title, and then our button.", 'start': 5062.302, 'duration': 4.505}], 'summary': 'The header includes a heading four and title, with a toggle button and a class name of btn.', 'duration': 27.696, 'max_score': 5039.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo5039111.jpg'}, {'end': 5361.232, 'src': 'embed', 'start': 5331.593, 'weight': 1, 'content': [{'end': 5333.875, 'text': 'And now of course, we can navigate to the source.', 'start': 5331.593, 'duration': 2.282}, {'end': 5337.117, 'text': "And the file we're looking for is app jazz.", 'start': 5334.635, 'duration': 2.482}, {'end': 5344.243, 'text': 'So, in the app jazz we import three things we have menu component which will display the list.', 'start': 5337.618, 'duration': 6.625}, {'end': 5350.127, 'text': 'we have categories that will display the buttons, of course, And then we have the items.', 'start': 5344.243, 'duration': 5.884}, {'end': 5353.148, 'text': 'Now the items are coming from data address.', 'start': 5350.627, 'duration': 2.521}, {'end': 5358.551, 'text': 'And again, data js is a file that holds my array.', 'start': 5353.288, 'duration': 5.263}, {'end': 5361.232, 'text': 'And then each and every item is an object.', 'start': 5359.211, 'duration': 2.021}], 'summary': 'In the app jazz file, three components are imported to display the list, buttons, and items from the data array.', 'duration': 29.639, 'max_score': 5331.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo5331593.jpg'}, {'end': 5789.572, 'src': 'embed', 'start': 5761.002, 'weight': 4, 'content': [{'end': 5762.523, 'text': 'So now we have that as well.', 'start': 5761.002, 'duration': 1.521}, {'end': 5765.526, 'text': 'But successfully, we have the list.', 'start': 5763.084, 'duration': 2.442}, {'end': 5770.692, 'text': "And now comes the interesting part, where we'll set up our buttons, nice work.", 'start': 5766.187, 'duration': 4.505}, {'end': 5780.784, 'text': "And once we've got our list, now of course it's time to work on the buttons, where we would want to have buttons for each category,", 'start': 5771.393, 'duration': 9.391}, {'end': 5782.166, 'text': 'plus button for all.', 'start': 5780.784, 'duration': 1.382}, {'end': 5789.572, 'text': 'And then of course, once we click on a button, then we display only the items that match that category.', 'start': 5782.627, 'duration': 6.945}], 'summary': 'Setting up buttons for each category and displaying matching items.', 'duration': 28.57, 'max_score': 5761.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo5761002.jpg'}, {'end': 6235.428, 'src': 'embed', 'start': 6205.824, 'weight': 3, 'content': [{'end': 6211.108, 'text': "I'll always have to manually hop back to the categories and add that button.", 'start': 6205.824, 'duration': 5.284}, {'end': 6212.969, 'text': 'And that is not the best approach.', 'start': 6211.368, 'duration': 1.601}, {'end': 6215.391, 'text': "And we'll fix that in the next video.", 'start': 6213.57, 'duration': 1.821}, {'end': 6218.874, 'text': "Okay, so it's time to make our list and dynamic.", 'start': 6215.751, 'duration': 3.123}, {'end': 6227.221, 'text': "Now, before we start typing away, let me just mention that we're going to do that using the set data structure.", 'start': 6219.534, 'duration': 7.687}, {'end': 6235.428, 'text': "But since it is JavaScript topic, exclusive JavaScript topic, I'm not going to go in huge detail.", 'start': 6227.741, 'duration': 7.687}], 'summary': 'Improving category navigation in the next video, using set data structure for javascript topic.', 'duration': 29.604, 'max_score': 6205.824, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo6205824.jpg'}, {'end': 6576.372, 'src': 'heatmap', 'start': 6238.552, 'weight': 0.761, 'content': [{'end': 6249.385, 'text': "But if you're interested in learning more, just navigate to my playlist, JavaScript nuggets, and then look for unique values, ES six video.", 'start': 6238.552, 'duration': 10.833}, {'end': 6258.634, 'text': 'And in here, of course, I go into greater detail what is happening as far as the code of getting unique values.', 'start': 6249.946, 'duration': 8.688}, {'end': 6262.355, 'text': "So let's start working on our categories.", 'start': 6258.934, 'duration': 3.421}, {'end': 6267.258, 'text': 'And more specifically, I would want to navigate back to address.', 'start': 6263.096, 'duration': 4.162}, {'end': 6272.281, 'text': 'And then in the address, I would want to filter the categories.', 'start': 6268.299, 'duration': 3.982}, {'end': 6275.884, 'text': 'but I also would want to get only the unique ones.', 'start': 6273.021, 'duration': 2.863}, {'end': 6288.995, 'text': 'So that way, if my list changes, I will always have this value for my categories that will filter out only the unique categories.', 'start': 6276.444, 'duration': 12.551}, {'end': 6299.746, 'text': 'So if a month or day later, I add some additional category, for example, dinner, it will also show up in my categories list.', 'start': 6289.435, 'duration': 10.311}, {'end': 6305.992, 'text': 'And then of course, it will also shop as far as the buttons are concerned.', 'start': 6300.446, 'duration': 5.546}, {'end': 6310.389, 'text': 'So we have this categories, which at the moment is just an empty array.', 'start': 6306.468, 'duration': 3.921}, {'end': 6319.712, 'text': 'So now above the component, I would want to set up the functionality where I only get the unique categories from my list.', 'start': 6310.849, 'duration': 8.863}, {'end': 6323.113, 'text': "So I'm going to call them all categories.", 'start': 6320.132, 'duration': 2.981}, {'end': 6326.254, 'text': 'So all categories, like so.', 'start': 6323.273, 'duration': 2.981}, {'end': 6330.137, 'text': 'And that is equal to my items.', 'start': 6326.735, 'duration': 3.402}, {'end': 6331.878, 'text': 'Of course, I would want a map of work.', 'start': 6330.357, 'duration': 1.521}, {'end': 6333.539, 'text': "So I'm going to say item map.", 'start': 6332.238, 'duration': 1.301}, {'end': 6338.642, 'text': "And then what we're looking for is that category property, correct.", 'start': 6334.019, 'duration': 4.623}, {'end': 6344.906, 'text': 'So now we just want to get all the values that I have in the category property.', 'start': 6338.902, 'duration': 6.004}, {'end': 6350.269, 'text': 'whether that is shake, whether that is lunch, and whatever else we had order.', 'start': 6345.146, 'duration': 5.123}, {'end': 6354.571, 'text': "So we have items map, then I'll call this item.", 'start': 6350.809, 'duration': 3.762}, {'end': 6363.236, 'text': "And I'll just say that, you know, as I'm iterating over my list, please return a value for the category.", 'start': 6355.292, 'duration': 7.944}, {'end': 6375.167, 'text': "If we'll console log all categories, Like so, you'll notice that in my console, I should see all the values for the categories.", 'start': 6363.396, 'duration': 11.771}, {'end': 6378.511, 'text': 'Now of course, I have array of nine items.', 'start': 6375.588, 'duration': 2.923}, {'end': 6384.838, 'text': 'So I have breakfast, lunch, shakes, breakfast, lunch, shakes, breakfast, lunch, and shakes.', 'start': 6379.012, 'duration': 5.826}, {'end': 6387.041, 'text': 'So that all is good.', 'start': 6385.519, 'duration': 1.522}, {'end': 6391.227, 'text': 'Problem is, of course, that we have repeating values.', 'start': 6387.662, 'duration': 3.565}, {'end': 6397.236, 'text': "So I don't want three buttons for breakfast, I only want one button for breakfast.", 'start': 6391.828, 'duration': 5.408}, {'end': 6402.243, 'text': 'So if there are some repeating values, I only would want to get the first one.', 'start': 6397.857, 'duration': 4.386}, {'end': 6408.007, 'text': 'So I only would want to enter the unique values, which in my case, should be three.', 'start': 6402.683, 'duration': 5.324}, {'end': 6415.053, 'text': 'Correct So how we can do that, well, this is where the set data structure comes into play.', 'start': 6408.528, 'duration': 6.525}, {'end': 6423.78, 'text': 'So essentially, I can do something like this, where I say, you know what, get me new set, and then pass it in.', 'start': 6415.953, 'duration': 7.827}, {'end': 6430.505, 'text': "Because what's really cool about the set is the fact that it only gets the unique values.", 'start': 6424.3, 'duration': 6.205}, {'end': 6437.231, 'text': 'not my apologies, I deleted the console log categories.', 'start': 6431.366, 'duration': 5.865}, {'end': 6442.456, 'text': 'Like so I just say, now we should get only the unique values.', 'start': 6438.292, 'duration': 4.164}, {'end': 6449.841, 'text': 'Now the problem is that I would want to add all because of course, there also should be a button for all.', 'start': 6443.037, 'duration': 6.804}, {'end': 6452.622, 'text': 'And I also want it as an array.', 'start': 6450.742, 'duration': 1.88}, {'end': 6455.703, 'text': 'The moment as you can see, it is an object.', 'start': 6453.302, 'duration': 2.401}, {'end': 6461.024, 'text': "So this is where we use the spread operator, I say there's going to be a new array.", 'start': 6456.143, 'duration': 4.881}, {'end': 6463.864, 'text': 'So all categories are going to be equal to new array.', 'start': 6461.324, 'duration': 2.54}, {'end': 6466.445, 'text': 'And the first item will be all.', 'start': 6464.484, 'duration': 1.961}, {'end': 6474.086, 'text': "And then I'll just use the spread operator and spread out my set data structure like so.", 'start': 6467.085, 'duration': 7.001}, {'end': 6478.97, 'text': 'So cut it out, copy and paste, remove the semi colon.', 'start': 6474.626, 'duration': 4.344}, {'end': 6485.877, 'text': 'And what you should see as far as all categories is an array of four items.', 'start': 6479.511, 'duration': 6.366}, {'end': 6493.983, 'text': 'So each item just represents that unique category from my list.', 'start': 6486.858, 'duration': 7.125}, {'end': 6499.166, 'text': 'And at this point, what we can do is just pass it as our state value.', 'start': 6494.803, 'duration': 4.363}, {'end': 6501.648, 'text': 'So notice we have categories.', 'start': 6500.107, 'duration': 1.541}, {'end': 6503.749, 'text': 'And of course, that is the state value.', 'start': 6502.408, 'duration': 1.341}, {'end': 6509.373, 'text': 'So now instead of empty array, I pass it in as all categories.', 'start': 6503.769, 'duration': 5.604}, {'end': 6514.238, 'text': 'And now I just need to get those categories down to my categories component.', 'start': 6509.893, 'duration': 4.345}, {'end': 6519.444, 'text': 'So here I go with categories is equal to my categories state value.', 'start': 6514.799, 'duration': 4.645}, {'end': 6524.35, 'text': 'And inside of the categories, of course, we would need to destructure that.', 'start': 6520.105, 'duration': 4.245}, {'end': 6536.937, 'text': 'categories, like so, and then comma, instead of manually adding those buttons, what I would want is to iterate over my categories.', 'start': 6524.99, 'duration': 11.947}, {'end': 6540.499, 'text': 'And then for each category, display this button.', 'start': 6537.417, 'duration': 3.082}, {'end': 6549.384, 'text': 'And of course, also set up the functionality, where I grab the value, the text value from the category, and add it to my filter items.', 'start': 6541, 'duration': 8.384}, {'end': 6555.29, 'text': "So I'll remove my manual buttons, and I'll say categories map.", 'start': 6550.445, 'duration': 4.845}, {'end': 6560.416, 'text': "So we're mapping over and for each item, I would want to return a button.", 'start': 6555.751, 'duration': 4.665}, {'end': 6567.364, 'text': "So in here, I'll call this category that will represent each and every string that I have in my array.", 'start': 6560.897, 'duration': 6.467}, {'end': 6571.128, 'text': "And then also since I have a list, I'm just going to go with index here.", 'start': 6567.784, 'duration': 3.344}, {'end': 6573.65, 'text': 'because we have a simple list.', 'start': 6571.688, 'duration': 1.962}, {'end': 6576.372, 'text': 'So in this case, we can use the index.', 'start': 6573.67, 'duration': 2.702}], 'summary': 'The transcript discusses filtering and displaying unique categories using javascript, resulting in an array of four items.', 'duration': 337.82, 'max_score': 6238.552, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo6238552.jpg'}], 'start': 3969.589, 'title': 'Handling state and dynamic projects', 'summary': 'Covers creating and updating functions, handling array index errors, generating random indexes, and setting up dynamic projects such as an accordion and a menu. it also emphasizes unique category filtering and state management.', 'chapters': [{'end': 4111.886, 'start': 3969.589, 'title': 'Creating functions and updating state', 'summary': "Covers the process of creating and implementing functions, such as 'brief person' and 'next person,' to update the state by changing the index, with a focus on updating the current and previous person based on the index value.", 'duration': 142.297, 'highlights': ["Creating functions 'brief person' and 'next person' for updating state and handling index manipulation.", "Implementing the function 'next person' to change the index by adding one, and using 'set index' to update the state value accordingly.", 'Handling the previous person by adjusting the index value to display the previous item in the array.', "Explanation of the logic behind index manipulation and the potential error when the state value exceeds the last item's index in the array."]}, {'end': 4495.428, 'start': 4112.508, 'title': 'Handling array index and random person', 'summary': 'Discusses handling array index errors by manually checking for the value and creating a function to handle negative and out-of-bound indexes. it also demonstrates generating a random number within the array length and rounding it down for a random person functionality.', 'duration': 382.92, 'highlights': ['Creating a function to handle out-of-bound array index by checking for the value and flipping it to zero if it exceeds the last item in the array', 'Demonstrating the use of a function to handle negative array index by returning the last item in the array if the index is less than zero', "Implementing a random person functionality by generating a random number between zero and the array length, ensuring it's rounded down to avoid exceeding the array length"]}, {'end': 5197.806, 'start': 4496.309, 'title': 'Random index generation and accordion project', 'summary': 'Covers the generation of random indexes for an array, avoiding repetition of indexes, and the setup and iteration of a list of questions for an accordion project in react.', 'duration': 701.497, 'highlights': ['The chapter covers the generation of random indexes for an array, ensuring that they are unique and avoiding repetition by adjusting the index if it matches the current value.', 'The chapter also discusses the setup and iteration over a list of questions for an accordion project in React, including the use of state values for toggling functionality.', 'The process involves setting up a state for toggling purposes and implementing functionality to display the text and change icons based on the state value.']}, {'end': 6205.824, 'start': 5197.986, 'title': 'Dynamic menu project setup', 'summary': 'Covers the setup of a dynamic menu project, including the display of menu items with images and descriptions, the dynamic addition of filter buttons based on the categories of menu items, and the manual setup of filtering functionality, with the demonstration of the downsides of the manual approach.', 'duration': 1007.838, 'highlights': ['The chapter covers the setup of a dynamic menu project, including the display of menu items with images and descriptions, the dynamic addition of filter buttons based on the categories of menu items, and the manual setup of filtering functionality, with the demonstration of the downsides of the manual approach.', 'The buttons for filtering menu items will be added dynamically based on the categories of the menu items, allowing for seamless functionality as the list changes.', 'The menu project involves setting up state values for menu items and categories, as well as creating components to display the list and buttons for filtering, with the demonstration of manually adding buttons and the downsides of this approach.', 'The chapter demonstrates the manual approach to filtering the menu items based on categories, highlighting the need for synchronization with the data and the downsides of manual updates as the original array changes.']}, {'end': 6796.739, 'start': 6205.824, 'title': 'Dynamic list with unique categories', 'summary': 'Discusses creating a dynamic list with unique categories using the set data structure in javascript, allowing for automatic filtering and representation of changes in the app, with a focus on achieving unique values and enabling filtering of items based on categories.', 'duration': 590.915, 'highlights': ['Creating a dynamic list with unique categories using the set data structure in JavaScript, enabling automatic filtering and representation of changes in the app.', 'Utilizing the set data structure to obtain unique values from the list of categories, ensuring that only distinct categories are displayed, resulting in a more efficient and organized user interface.', 'Implementing the functionality to filter items based on categories, allowing for dynamic representation of changes in the list and enabling synchronized display of items that match specific categories.']}], 'duration': 2827.15, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo3969589.jpg', 'highlights': ['Creating a dynamic list with unique categories using the set data structure in JavaScript, enabling automatic filtering and representation of changes in the app.', 'The chapter covers the setup of a dynamic menu project, including the display of menu items with images and descriptions, the dynamic addition of filter buttons based on the categories of menu items, and the manual setup of filtering functionality, with the demonstration of the downsides of the manual approach.', 'The chapter covers the generation of random indexes for an array, ensuring that they are unique and avoiding repetition by adjusting the index if it matches the current value.', 'The chapter also discusses the setup and iteration over a list of questions for an accordion project in React, including the use of state values for toggling functionality.', "Creating functions 'brief person' and 'next person' for updating state and handling index manipulation."]}, {'end': 8145.35, 'segs': [{'end': 6879.315, 'src': 'embed', 'start': 6824.678, 'weight': 7, 'content': [{'end': 6832.063, 'text': "navigate to read me in a setup or final whichever directory you're working on, and just grab this URL.", 'start': 6824.678, 'duration': 7.385}, {'end': 6846.509, 'text': "essentially, you'll navigate to our Gatsby portfolio project, where if you keep on scrolling, notice, we're successfully using this application.", 'start': 6834.504, 'duration': 12.005}, {'end': 6855.772, 'text': "This is just to showcase that when we work on our project doesn't mean that they're just theory, you can use them in practice.", 'start': 6846.869, 'duration': 8.903}, {'end': 6859.534, 'text': "In this case, however, we're using strappy and Gatsby.", 'start': 6856.173, 'duration': 3.361}, {'end': 6867.081, 'text': 'But since of course, the functionality is react and JavaScript, we can use it in this project as well.', 'start': 6860.194, 'duration': 6.887}, {'end': 6869.965, 'text': 'So hopefully, that makes sense.', 'start': 6867.762, 'duration': 2.203}, {'end': 6875.751, 'text': "And now of course, I'm going to navigate back to my setup, moving for the source.", 'start': 6870.805, 'duration': 4.946}, {'end': 6879.315, 'text': "And more specifically, I'm looking for the app js.", 'start': 6876.632, 'duration': 2.683}], 'summary': 'Demonstrating usage of strappy and gatsby in a project with react and javascript.', 'duration': 54.637, 'max_score': 6824.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo6824678.jpg'}, {'end': 7488.513, 'src': 'embed', 'start': 7459.854, 'weight': 5, 'content': [{'end': 7466.038, 'text': "Since in most cases, you would want to list multiple things that you're doing on a job.", 'start': 7459.854, 'duration': 6.184}, {'end': 7470.942, 'text': 'And I also would want to add this little icon here as well.', 'start': 7466.158, 'duration': 4.784}, {'end': 7477.586, 'text': "So right after the paragraph, let's just say duties and then map or mapping over.", 'start': 7471.622, 'duration': 5.964}, {'end': 7480.328, 'text': 'then I need to come up with a variable name.', 'start': 7477.586, 'duration': 2.742}, {'end': 7488.513, 'text': "of course, for my primer I'm going to say duty in here and then the index as well, since I have the list.", 'start': 7480.328, 'duration': 8.185}], 'summary': 'Adding multiple duties and a mapping icon for job descriptions.', 'duration': 28.659, 'max_score': 7459.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo7459854.jpg'}, {'end': 7564.683, 'src': 'embed', 'start': 7511.386, 'weight': 2, 'content': [{'end': 7519.891, 'text': "So that's the one that I imported from the react icons, of course, And then let's add a class name here as well, we're going to go job icon.", 'start': 7511.386, 'duration': 8.505}, {'end': 7526.255, 'text': "And right next to it we're going to go with paragraph, so not inside of it.", 'start': 7520.531, 'duration': 5.724}, {'end': 7531.198, 'text': "right next to it we're going to go with a paragraph with a name of duty we save.", 'start': 7526.255, 'duration': 4.943}, {'end': 7533.359, 'text': 'And this is what we should say.', 'start': 7532.038, 'duration': 1.321}, {'end': 7536.1, 'text': "So that's our first item.", 'start': 7534.019, 'duration': 2.081}, {'end': 7538.642, 'text': 'Now, please be very, very careful.', 'start': 7536.661, 'duration': 1.981}, {'end': 7543.265, 'text': "We're in the beginning, jobs is an empty array.", 'start': 7539.242, 'duration': 4.023}, {'end': 7551.851, 'text': "And we're doing the structuring over here, where essentially, I say, you know what, get me the first item from jobs array.", 'start': 7544.205, 'duration': 7.646}, {'end': 7556.635, 'text': 'And then from that item, get me the properties of company dates, duties, and title.', 'start': 7552.312, 'duration': 4.323}, {'end': 7564.683, 'text': 'However, initially, since it is an empty array, well, there is no item that has these properties.', 'start': 7557.301, 'duration': 7.382}], 'summary': 'Imported react icons, added job icon and paragraph. explained empty jobs array and destructuring.', 'duration': 53.297, 'max_score': 7511.386, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo7511386.jpg'}, {'end': 7722.164, 'src': 'embed', 'start': 7694.015, 'weight': 6, 'content': [{'end': 7699.877, 'text': "And then I'll also check for the index, this is going to be the case where index is going to be important.", 'start': 7694.015, 'duration': 5.862}, {'end': 7706.899, 'text': "So we're going to go here with return, we're returning a button for every item we have in the list.", 'start': 7700.337, 'duration': 6.562}, {'end': 7711.38, 'text': 'And if you just want to see the item, you can choose whichever property you would want.', 'start': 7707.459, 'duration': 3.921}, {'end': 7713.861, 'text': 'In my case, that is going to be a company.', 'start': 7711.82, 'duration': 2.041}, {'end': 7717.062, 'text': 'So in here go with item that represents that object.', 'start': 7714.341, 'duration': 2.721}, {'end': 7722.164, 'text': 'But since we cannot render the object and react, we will need to go with specific property.', 'start': 7717.482, 'duration': 4.682}], 'summary': "Returning a button for every item in the list, choosing a specific property like 'company'.", 'duration': 28.149, 'max_score': 7694.015, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo7694015.jpg'}, {'end': 8061.145, 'src': 'embed', 'start': 8033.178, 'weight': 0, 'content': [{'end': 8036.842, 'text': 'once we click on a pre button, then we can see the previous slide.', 'start': 8033.178, 'duration': 3.664}, {'end': 8042.787, 'text': 'In order to make things interesting, I also added the auto slide option.', 'start': 8037.903, 'duration': 4.884}, {'end': 8050.795, 'text': "So notice, if I don't touch any buttons, after certain amount of time, we'll be able to see the next slide.", 'start': 8043.148, 'duration': 7.647}, {'end': 8053.518, 'text': 'All right and we already know the drill.', 'start': 8051.195, 'duration': 2.323}, {'end': 8054.999, 'text': 'navigate back to our repo.', 'start': 8053.518, 'duration': 1.481}, {'end': 8056.881, 'text': "we're looking for the slider.", 'start': 8054.999, 'duration': 1.882}, {'end': 8058.803, 'text': "I'll open up my integrated terminal.", 'start': 8056.881, 'duration': 1.922}, {'end': 8061.145, 'text': "I'll make sure that I'm in a route.", 'start': 8058.803, 'duration': 2.342}], 'summary': 'Adding pre button allows to see previous slide. auto slide option added for interest.', 'duration': 27.967, 'max_score': 8033.178, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo8033178.jpg'}, {'end': 8118.204, 'src': 'embed', 'start': 8088.595, 'weight': 1, 'content': [{'end': 8093.641, 'text': 'Of course, we have CSS in this project will also use a react icon.', 'start': 8088.595, 'duration': 5.046}, {'end': 8098.626, 'text': 'So of course, they already installed as a dependency and our package JSON.', 'start': 8093.681, 'duration': 4.945}, {'end': 8105.694, 'text': "And two more things that I would like to mention, in a readme, you'll see project in action.", 'start': 8099.607, 'duration': 6.087}, {'end': 8109.177, 'text': 'So let me navigate right now to the URL.', 'start': 8106.555, 'duration': 2.622}, {'end': 8113.401, 'text': "And you'll see that that is one more Gatsby project.", 'start': 8109.798, 'duration': 3.603}, {'end': 8118.204, 'text': 'Now this is Gatsby course specific, where we work with air table.', 'start': 8113.821, 'duration': 4.383}], 'summary': 'Using css and react icons in the gatsby project, which is specific to airtable.', 'duration': 29.609, 'max_score': 8088.595, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo8088595.jpg'}], 'start': 6796.739, 'title': 'Setting up gatsby portfolio project', 'summary': 'Covers setting up a gatsby portfolio project, using strappy and gatsby, fetching jobs from an api, and displaying them as a list of items. it also explains initializing state variables, defining a fetch function, utilizing useeffect, and conditional rendering based on the loading state. additionally, it discusses fetching and displaying job information from an api, accessing properties like company, dates, and duties, and organizing them into a structured layout. lastly, it addresses setting up a job list in react, handling an empty array, displaying job buttons, adding functionality to change job display, and applying dynamic css classes based on user interaction.', 'chapters': [{'end': 6958.109, 'start': 6796.739, 'title': 'Setting up gatsby portfolio project', 'summary': 'Covers setting up a gatsby portfolio project, including using strappy and gatsby, fetching jobs from an api, and displaying them as a list of items.', 'duration': 161.37, 'highlights': ['Setting up a Gatsby portfolio project with strappy and Gatsby, using react and JavaScript functionality (relevance: 5)', 'Fetching jobs from an API and displaying them as a list of items with properties like ID, title, dates, and duties (relevance: 4)', 'Demonstrating practical application by successfully using the application and showcasing its functionality (relevance: 3)', 'Navigating through the setup and looking for specific files like app.js, and setting up fetch functionality and loading state (relevance: 2)']}, {'end': 7196.08, 'start': 6958.569, 'title': 'Setting up job list with api fetch', 'summary': 'Explains the process of setting up a job list using api fetch, including initializing state variables, defining a fetch function, utilizing useeffect, and conditional rendering based on the loading state.', 'duration': 237.511, 'highlights': ['The chapter covers initializing state variables for loading and jobs using useState, with loading set to true by default.', 'It explains the process of defining a fetch function using the traditional built-in fetch API and setting the jobs array and loading state based on the fetched data.', 'The chapter demonstrates the utilization of useEffect to invoke the fetch function on the initial app render and conditional rendering based on the loading state during the return phase.']}, {'end': 7511.066, 'start': 7197.4, 'title': 'Displaying job information', 'summary': 'Discusses fetching and displaying job information from an api, including accessing properties like company, dates, and duties and organizing them into a structured layout.', 'duration': 313.666, 'highlights': ['Fetching job list from API and displaying the first job', 'Accessing and displaying properties of the first job such as company, dates, and duties', 'Organizing the job information into a structured layout with title, company, dates, and duties']}, {'end': 8145.35, 'start': 7511.386, 'title': 'React job list', 'summary': 'Discusses setting up a job list in react, including handling an empty array, displaying job buttons, adding functionality to change job display, and applying dynamic css classes based on user interaction.', 'duration': 633.964, 'highlights': ['Setting up a job list in React, including handling an empty array and displaying job buttons.', 'Adding functionality to change job display and state value upon clicking a button.', 'Applying dynamic CSS classes based on user interaction for the job buttons.']}], 'duration': 1348.611, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo6796739.jpg', 'highlights': ['Setting up a Gatsby portfolio project with strappy and Gatsby, using react and JavaScript functionality (relevance: 5)', 'Fetching jobs from an API and displaying them as a list of items with properties like ID, title, dates, and duties (relevance: 4)', 'Initializing state variables for loading and jobs using useState, with loading set to true by default (relevance: 3)', 'Demonstrating practical application by successfully using the application and showcasing its functionality (relevance: 3)', 'Defining a fetch function using the traditional built-in fetch API and setting the jobs array and loading state based on the fetched data (relevance: 2)', 'Utilizing useEffect to invoke the fetch function on the initial app render and conditional rendering based on the loading state during the return phase (relevance: 2)', 'Accessing and displaying properties of the first job such as company, dates, and duties (relevance: 1)', 'Setting up a job list in React, including handling an empty array and displaying job buttons (relevance: 1)', 'Applying dynamic CSS classes based on user interaction for the job buttons (relevance: 1)']}, {'end': 11017.74, 'segs': [{'end': 8249.312, 'src': 'embed', 'start': 8221.429, 'weight': 0, 'content': [{'end': 8227.932, 'text': 'And then of course, set up the functionality where you pass in the props, or you would want to move something else in the separate component.', 'start': 8221.429, 'duration': 6.503}, {'end': 8235.647, 'text': "I'm not going to tell you which parts you need to place it in separate components, because that is up to you.", 'start': 8228.964, 'duration': 6.683}, {'end': 8242.728, 'text': 'But I think it would be a great challenge for you where you can take a look at the file and you can decide hey listen,', 'start': 8236.166, 'duration': 6.562}, {'end': 8249.312, 'text': 'maybe it makes more sense if this particular piece of component is in its own component.', 'start': 8242.728, 'duration': 6.584}], 'summary': 'Encouraging to separate components based on functionality for better organization.', 'duration': 27.883, 'max_score': 8221.429, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo8221429.jpg'}, {'end': 8295.468, 'src': 'embed', 'start': 8269.445, 'weight': 2, 'content': [{'end': 8276.17, 'text': "And as always, I'm just going to start with my state values, where there's going to be a value for my list,", 'start': 8269.445, 'duration': 6.725}, {'end': 8279.293, 'text': "and I'll name this people and then set people.", 'start': 8276.17, 'duration': 3.123}, {'end': 8284.797, 'text': 'And that is equal to a use state, of course, not use effect, sorry, use state.', 'start': 8279.692, 'duration': 5.105}, {'end': 8287.439, 'text': "And then I'll pass in the data.", 'start': 8285.397, 'duration': 2.042}, {'end': 8292.385, 'text': 'So the array that is coming from my data address again.', 'start': 8287.879, 'duration': 4.506}, {'end': 8295.468, 'text': 'in the data address we just have the array of people.', 'start': 8292.385, 'duration': 3.083}], 'summary': 'Initializing state values for list of people using usestate hook and passing in data array.', 'duration': 26.023, 'max_score': 8269.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo8269445.jpg'}, {'end': 10041.247, 'src': 'embed', 'start': 10015.259, 'weight': 1, 'content': [{'end': 10023.821, 'text': "Now, if I'll be looking right from the get go from the previous one, notice how we nicely again, change the classes, as well as the indexes.", 'start': 10015.259, 'duration': 8.562}, {'end': 10030.883, 'text': 'And I also want to set up right away, the use effect, where we have the auto slide.', 'start': 10024.601, 'duration': 6.282}, {'end': 10035.165, 'text': "Okay, so let's navigate back, we'll set up another use effect.", 'start': 10031.283, 'duration': 3.882}, {'end': 10038.726, 'text': 'Because remember, we can have as many use effects as we would want.', 'start': 10035.205, 'duration': 3.521}, {'end': 10041.247, 'text': "And we'll say here use effect.", 'start': 10039.587, 'duration': 1.66}], 'summary': 'Setting up multiple use effects for auto slide in class and index changes.', 'duration': 25.988, 'max_score': 10015.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo10015259.jpg'}, {'end': 11010.87, 'src': 'embed', 'start': 10980.678, 'weight': 3, 'content': [{'end': 10984.539, 'text': 'I can just check well what is the count value in the state?', 'start': 10980.678, 'duration': 3.861}, {'end': 10991.381, 'text': "So if I log count, you'll see that every time we change the value, and then we click on generator.", 'start': 10984.899, 'duration': 6.482}, {'end': 10993.962, 'text': "Now it says, well, we're getting six.", 'start': 10991.781, 'duration': 2.181}, {'end': 10996.002, 'text': "So now in here, I'm going to go three.", 'start': 10994.442, 'duration': 1.56}, {'end': 10996.722, 'text': 'And there it is.', 'start': 10996.162, 'duration': 0.56}, {'end': 10998.523, 'text': 'Now, of course, I have the three.', 'start': 10996.762, 'duration': 1.761}, {'end': 11006.605, 'text': "Now, one gotcha here is that even though the type is number, essentially, what you're getting back is a string.", 'start': 10999.123, 'duration': 7.482}, {'end': 11010.87, 'text': "So if you don't believe me, you can type here, type of count.", 'start': 11007.185, 'duration': 3.685}], 'summary': 'The count value changes based on user input, displaying as a string.', 'duration': 30.192, 'max_score': 10980.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo10980678.jpg'}], 'start': 8145.81, 'title': 'Building react components', 'summary': 'Emphasizes working with bigger components, setting up sliders, iterating over data, css setup for a slider, react slider functionality, and creating forms and generating text in a react application.', 'chapters': [{'end': 8268.665, 'start': 8145.81, 'title': 'Working with bigger components', 'summary': 'Emphasizes the importance of working with bigger components to prepare for real-world scenarios and challenges, encouraging the reader to decide how to separate single components in a project, providing a hands-on learning experience.', 'duration': 122.855, 'highlights': ['The chapter emphasizes the importance of working with bigger components to prepare for real-world scenarios and challenges, as projects may require handling large component files (quantifiable data: real-world scenarios).', 'Encourages the reader to decide how to separate single components in a project, providing a hands-on learning experience and a challenge (quantifiable data: hands-on learning experience, challenge).', 'Suggests delaying the separation of components until the end of the project to avoid unnecessary bugs (quantifiable data: avoid unnecessary bugs).']}, {'end': 8687.109, 'start': 8269.445, 'title': 'Setting up slider and iterating over data', 'summary': 'Covers setting up state values for a list of people and an index, iterating over the data array to display images, names, titles, and quotes, and adding functionality for buttons in a slider component.', 'duration': 417.664, 'highlights': ['Setting state values for a list of people and an index with useState, initializing the index value to zero.', 'Iterating over the data array to display images, names, titles, and quotes, styling to be covered in the next video.', "Adding functionality for 'prev' and 'next' buttons with icons for slider component."]}, {'end': 9491.64, 'start': 8687.909, 'title': 'Css slider setup and functionality', 'summary': 'Covers the step-by-step css setup for a slider, including the use of flexbox, absolute positioning, and opacity to dynamically change the active and next slides based on index values, and provides insights into the functionality of the slider within a react application.', 'duration': 803.731, 'highlights': ['The setup involves using flexbox to line up the slides in one row and then employing absolute positioning and the transform property to move the active and next slides, while ensuring that the active slide is centered.', 'The opacity is set to zero for all slides by default, and only the active slide has an opacity of one, making it visible, providing a seamless transition between slides based on index values.', "The functionality of the slider involves dynamically adding classes like 'active slide' and 'last slide' to the slides based on index comparisons, ensuring the correct positioning of the slides within the slider.", 'The CSS setup also includes ensuring a set height for the container to accommodate the absolute positioning of the slides, preventing collapse and ensuring the proper functionality of the slider within a React application.']}, {'end': 10484.395, 'start': 9492.2, 'title': 'React slider functionality', 'summary': 'Explains the process of setting up a slider functionality using react, including controlling the state value of the index, handling edge cases, and implementing automatic sliding. it also briefly introduces a lorem ipsum text generator project and its setup.', 'duration': 992.195, 'highlights': ['The chapter explains setting up slider functionality using React, including controlling the state value of the index and adding functionality to navigate between slides based on the index value.', 'The use effect is utilized to handle cases where the index becomes negative or exceeds the maximum index in the array, ensuring the slider functionality works as expected.', 'The chapter introduces a Lorem Ipsum text generator project and its setup, outlining the structure and initial state setup before delving into the functionality in the following video.']}, {'end': 11017.74, 'start': 10485.016, 'title': 'React form and text generation', 'summary': 'Demonstrates the process of creating a form and generating text in a react application, covering topics such as setting state, handling form submission, controlled input, and iterating over arrays to display generated text.', 'duration': 532.724, 'highlights': ['The chapter covers setting up a form and handling form submission, including setting state and controlled input.', 'It demonstrates the process of iterating over an array to display generated text, with a specific example of generating and displaying paragraphs based on the user input count.', 'The transcript provides insights into accessing and utilizing state values within the form submission handling, showcasing the ability to control the number of generated paragraphs based on user input.']}], 'duration': 2871.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo8145810.jpg', 'highlights': ['The chapter emphasizes the importance of working with bigger components to prepare for real-world scenarios and challenges, as projects may require handling large component files (quantifiable data: real-world scenarios).', 'The setup involves using flexbox to line up the slides in one row and then employing absolute positioning and the transform property to move the active and next slides, while ensuring that the active slide is centered.', 'The chapter explains setting up slider functionality using React, including controlling the state value of the index and adding functionality to navigate between slides based on the index value.', 'The chapter covers setting up a form and handling form submission, including setting state and controlled input.', 'Encourages the reader to decide how to separate single components in a project, providing a hands-on learning experience and a challenge (quantifiable data: hands-on learning experience, challenge).']}, {'end': 12585.629, 'segs': [{'end': 11046.108, 'src': 'embed', 'start': 11018.351, 'weight': 4, 'content': [{'end': 11025.575, 'text': "Now, I can honestly say that in this scenario, the functionality we're about to set up, technically doesn't matter.", 'start': 11018.351, 'duration': 7.224}, {'end': 11029.078, 'text': 'But I still want to point it out, this gotcha.', 'start': 11025.996, 'duration': 3.082}, {'end': 11031.779, 'text': "And that's why I'll show you how you would fix it.", 'start': 11029.458, 'duration': 2.321}, {'end': 11040.344, 'text': "If there's going to be some cases where you actually would want it to be a number again, in our case, functionality will work regardless.", 'start': 11032.299, 'duration': 8.045}, {'end': 11046.108, 'text': 'But I thought that it was a important point that I definitely wanted to make.', 'start': 11040.885, 'duration': 5.223}], 'summary': "The functionality setup doesn't matter, but it's important to address the gotcha and demonstrate how to fix it.", 'duration': 27.757, 'max_score': 11018.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11018351.jpg'}, {'end': 11445.457, 'src': 'embed', 'start': 11417.249, 'weight': 0, 'content': [{'end': 11423.25, 'text': "So essentially, you cannot get the actual color from that value, then there's going to be an error.", 'start': 11417.249, 'duration': 6.001}, {'end': 11431.052, 'text': "So if I try to pass in hashtag b six, you'll notice that there is going to be a input red,", 'start': 11423.37, 'duration': 7.682}, {'end': 11436.674, 'text': 'which just means that we cannot generate color from the value that the user passed in.', 'start': 11431.052, 'duration': 5.622}, {'end': 11441.015, 'text': 'drill As always, we navigate back to our repo.', 'start': 11437.294, 'duration': 3.721}, {'end': 11445.457, 'text': 'Last project we work on was lorem ipsum course.', 'start': 11441.636, 'duration': 3.821}], 'summary': 'Inability to generate color from user input may result in errors.', 'duration': 28.208, 'max_score': 11417.249, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11417249.jpg'}, {'end': 11530.3, 'src': 'embed', 'start': 11499.921, 'weight': 12, 'content': [{'end': 11501.862, 'text': 'Again, everything is already installed.', 'start': 11499.921, 'duration': 1.941}, {'end': 11508.026, 'text': 'But just in case you would want to have it for your project, just copy and paste the URL.', 'start': 11502.403, 'duration': 5.623}, {'end': 11511.488, 'text': 'And then of course, you will navigate to the repo.', 'start': 11508.947, 'duration': 2.541}, {'end': 11514.61, 'text': "If you don't install it, you have multiple options.", 'start': 11512.149, 'duration': 2.461}, {'end': 11517.012, 'text': 'Again, in my case, I use npm installed.', 'start': 11514.731, 'duration': 2.281}, {'end': 11519.774, 'text': "That's how I install it for our project.", 'start': 11517.532, 'duration': 2.242}, {'end': 11522.796, 'text': 'But you can also use the CDN option.', 'start': 11520.214, 'duration': 2.582}, {'end': 11530.3, 'text': "I'm not going to spend too much time on a docs because essentially, we're just going to use one method.", 'start': 11523.516, 'duration': 6.784}], 'summary': 'Multiple installation options available, including npm and cdn. documentation available for one method.', 'duration': 30.379, 'max_score': 11499.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11499921.jpg'}, {'end': 11703.815, 'src': 'embed', 'start': 11678.107, 'weight': 8, 'content': [{'end': 11685.983, 'text': "But in my case, I went with some kind of default Now, since we haven't covered the library yet, we'll just start with an empty string.", 'start': 11678.107, 'duration': 7.876}, {'end': 11692.107, 'text': "I'm going to go list, set, list here, and that is equal to use state.", 'start': 11687.564, 'duration': 4.543}, {'end': 11699.992, 'text': "And like I said, we're going to go with empty array, I believe I just said empty string, my apologies, empty array is going to be our default value.", 'start': 11692.147, 'duration': 7.845}, {'end': 11703.815, 'text': "Then eventually, we're going to work on our handle submit.", 'start': 11700.593, 'duration': 3.222}], 'summary': 'Using an empty array as the default value for a list in react state.', 'duration': 25.708, 'max_score': 11678.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11678107.jpg'}, {'end': 11754.848, 'src': 'embed', 'start': 11726.593, 'weight': 6, 'content': [{'end': 11737.019, 'text': "So I'm just gonna say here, hello, And then as far as our return, I'm going to go with section here, and the class name will be container.", 'start': 11726.593, 'duration': 10.426}, {'end': 11738.719, 'text': "Let's do it this way.", 'start': 11737.039, 'duration': 1.68}, {'end': 11743.802, 'text': "So let's say class name, that is equal to a container.", 'start': 11738.739, 'duration': 5.063}, {'end': 11751.186, 'text': "And then inside of this container, I'm going to place of course, my form, that's number one.", 'start': 11743.822, 'duration': 7.364}, {'end': 11754.848, 'text': 'And also, I want to have a section with an article.', 'start': 11751.446, 'duration': 3.402}], 'summary': 'Creating a web page with a container class, form, and article.', 'duration': 28.255, 'max_score': 11726.593, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11726593.jpg'}, {'end': 11879.538, 'src': 'embed', 'start': 11828.847, 'weight': 10, 'content': [{'end': 11833.31, 'text': "And that is the color because again, what we're doing, we're setting up the controlled input.", 'start': 11828.847, 'duration': 4.463}, {'end': 11837.833, 'text': "we're going to be typing something, we'll be changing the value in the state,", 'start': 11833.81, 'duration': 4.023}, {'end': 11847.401, 'text': 'but then the value attribute of our input will also be equal to that state value, something we have covered already, not only tutorial,', 'start': 11837.833, 'duration': 9.568}, {'end': 11850.964, 'text': 'but in our last example as well as far as the project.', 'start': 11847.401, 'duration': 3.563}, {'end': 11857.219, 'text': 'So on change, again, our inline function, and we go here with set color.', 'start': 11851.414, 'duration': 5.805}, {'end': 11865.606, 'text': 'And since I would want access to a event object, I just go with set color and event, target, and then the value.', 'start': 11857.9, 'duration': 7.706}, {'end': 11871.871, 'text': 'So of course, that will be my state value, I will save just to see what we have.', 'start': 11865.826, 'duration': 6.045}, {'end': 11873.573, 'text': 'Okay, not bad, not bad.', 'start': 11871.911, 'duration': 1.662}, {'end': 11875.695, 'text': 'I think I can make it smaller a little bit.', 'start': 11873.593, 'duration': 2.102}, {'end': 11879.538, 'text': 'And what is missing over here is the button.', 'start': 11876.395, 'duration': 3.143}], 'summary': 'Setting up controlled input for color change with state value and event object.', 'duration': 50.691, 'max_score': 11828.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11828847.jpg'}, {'end': 12233.826, 'src': 'embed', 'start': 12204.964, 'weight': 3, 'content': [{'end': 12206.945, 'text': "So I'm trying to set up the color values.", 'start': 12204.964, 'duration': 1.981}, {'end': 12210.387, 'text': "If it doesn't work, then I'm going to go with log here.", 'start': 12207.486, 'duration': 2.901}, {'end': 12213.229, 'text': "And I'm going to go with error.", 'start': 12211.988, 'duration': 1.241}, {'end': 12217.672, 'text': 'And also, of course, I would want to have my set error function.', 'start': 12213.73, 'duration': 3.942}, {'end': 12219.614, 'text': "So I'm going to go with set error.", 'start': 12218.113, 'duration': 1.501}, {'end': 12222.956, 'text': "And of course, we'll set it equal to true.", 'start': 12220.194, 'duration': 2.762}, {'end': 12227.339, 'text': "So let's try one more time, I'm going to navigate to a bigger screen.", 'start': 12223.456, 'duration': 3.883}, {'end': 12230.602, 'text': "we're going to go with some kind of value.", 'start': 12228.34, 'duration': 2.262}, {'end': 12233.826, 'text': "And again, I'm going to go with 222 because that is the faster one.", 'start': 12230.683, 'duration': 3.143}], 'summary': 'Setting color values, using log and error functions, navigating to a bigger screen, setting value to 222.', 'duration': 28.862, 'max_score': 12204.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo12204964.jpg'}, {'end': 12444.548, 'src': 'embed', 'start': 12414.345, 'weight': 5, 'content': [{'end': 12417.227, 'text': "mapping over, I'll look for two things.", 'start': 12414.345, 'duration': 2.882}, {'end': 12424.412, 'text': "I would want to get the color that's the name that I'm giving for every item that I have in my list.", 'start': 12417.227, 'duration': 7.185}, {'end': 12427.194, 'text': 'And also, we will need a index.', 'start': 12424.653, 'duration': 2.541}, {'end': 12434.76, 'text': "Now, as far as the return, I'm going to go with a single color component to single color component.", 'start': 12427.875, 'duration': 6.885}, {'end': 12438.323, 'text': 'And then since there is a list, I still need to have my key.', 'start': 12435.24, 'duration': 3.083}, {'end': 12440.024, 'text': "So I'm going to go with index.", 'start': 12438.863, 'duration': 1.161}, {'end': 12444.548, 'text': 'then remember how we passed in all the properties from the item.', 'start': 12440.644, 'duration': 3.904}], 'summary': 'Mapping function to retrieve color and index from a list.', 'duration': 30.203, 'max_score': 12414.345, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo12414345.jpg'}, {'end': 12564.714, 'src': 'embed', 'start': 12539.434, 'weight': 1, 'content': [{'end': 12544.86, 'text': "And again, we'll talk about these percentages at the very end, because I'll show you with different values.", 'start': 12539.434, 'duration': 5.426}, {'end': 12547.551, 'text': 'So this is going to be displayed the weight.', 'start': 12545.31, 'duration': 2.241}, {'end': 12556.012, 'text': 'And as far as the RGB, well, I also would need it, because I would need to set it up as my background.', 'start': 12548.531, 'duration': 7.481}, {'end': 12558.233, 'text': 'So notice this is the actual color value.', 'start': 12556.493, 'duration': 1.74}, {'end': 12564.714, 'text': "So the reason why I'm looking for this RGB prop that was passed in from the color?", 'start': 12558.773, 'duration': 5.941}], 'summary': 'Discussion on percentages, weight, and rgb values for color display.', 'duration': 25.28, 'max_score': 12539.434, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo12539434.jpg'}], 'start': 11018.351, 'title': 'Javascript string conversion and color generation', 'summary': 'Covers the process of converting a string to a number in javascript using the parse int function, and generating text paragraphs and colors based on user input, including handling edge cases, setting up a color generator app with copy functionality, and integrating a color manipulation library.', 'chapters': [{'end': 11087.718, 'start': 11018.351, 'title': 'Converting string to number in javascript', 'summary': 'Discusses the process of converting a string to a number in javascript, emphasizing the usage of the parse int function to achieve this, highlighting the functionality and demonstration of the process.', 'duration': 69.367, 'highlights': ['The process of converting a string to a number in JavaScript is demonstrated through the use of the parse int function, showcasing the functionality of the conversion. (relevance: 5)', 'The importance of being able to convert a string to a number is emphasized, as it allows for the functionality to work appropriately, with a demonstration provided using the example of changing the color in the console. (relevance: 4)', "The significance of addressing potential issues and 'gotchas' when converting a string to a number is highlighted, with the speaker acknowledging that the functionality being set up technically doesn't matter in the scenario. (relevance: 3)"]}, {'end': 11625.181, 'start': 11088.419, 'title': 'Text and color generation', 'summary': 'Discusses the process of generating and displaying text paragraphs based on user input, using the slice method to select items from an array, handling edge cases for negative and large input values, and setting up a color generator app to derive lighter and darker shades of a given color, with the ability to copy the values to the clipboard and handling error cases. additionally, it covers the setup of the project and the use of an external library for color manipulation.', 'duration': 536.762, 'highlights': ['The chapter discusses the process of generating and displaying text paragraphs based on user input, using the slice method to select items from an array.', 'Handling edge cases for negative and large input values when generating and displaying text paragraphs.', 'Setting up a color generator app to derive lighter and darker shades of a given color, with the ability to copy the values to the clipboard and handling error cases.', 'Covering the setup of the project and the use of an external library for color manipulation.']}, {'end': 12072.766, 'start': 11625.785, 'title': 'Color generator setup and functionality', 'summary': 'Covers the setup of a color generator app, including the default values and the handle submit functionality, as well as the integration of a library to generate shades and tones of a color.', 'duration': 446.981, 'highlights': ['The chapter covers the setup of a color generator app, including the default values and the handle submit functionality, as well as the integration of a library to generate shades and tones of a color.', "The app initially displays a default color upon navigation to provide a preview of the app's functionality.", 'The default value for the color list is an empty array, and the handle submit functionality includes validation for color input.', "The integration of a library allows for the generation of shades and tones of a color, with the 'all' method being used to generate lighter and darker values."]}, {'end': 12585.629, 'start': 12072.766, 'title': 'Handling color values and errors', 'summary': 'Covers handling color values, generating color arrays, and error handling, including passing values, setting errors, and displaying error messages, with a focus on generating color arrays and setting errors.', 'duration': 512.863, 'highlights': ['Generating color arrays by passing in different values and observing the changes in the array with quantifiable data (21 values obtained with a specific input).', 'Setting up error handling to manage invalid color values by wrapping color setting in try-catch, setting error flags, and conditionally adding error classes to the input.', 'Iterating over the color list and passing the color and index to the single color component for further processing.']}], 'duration': 1567.278, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo11018351.jpg', 'highlights': ['The process of converting a string to a number in JavaScript is demonstrated through the use of the parse int function, showcasing the functionality of the conversion. (relevance: 5)', 'The importance of being able to convert a string to a number is emphasized, as it allows for the functionality to work appropriately, with a demonstration provided using the example of changing the color in the console. (relevance: 4)', "The significance of addressing potential issues and 'gotchas' when converting a string to a number is highlighted, with the speaker acknowledging that the functionality being set up technically doesn't matter in the scenario. (relevance: 3)", 'Generating color arrays by passing in different values and observing the changes in the array with quantifiable data (21 values obtained with a specific input).', 'Setting up error handling to manage invalid color values by wrapping color setting in try-catch, setting error flags, and conditionally adding error classes to the input.', 'The chapter covers the setup of a color generator app, including the default values and the handle submit functionality, as well as the integration of a library to generate shades and tones of a color.', 'The chapter discusses the process of generating and displaying text paragraphs based on user input, using the slice method to select items from an array.', 'Handling edge cases for negative and large input values when generating and displaying text paragraphs.', "The app initially displays a default color upon navigation to provide a preview of the app's functionality.", 'The default value for the color list is an empty array, and the handle submit functionality includes validation for color input.', 'Iterating over the color list and passing the color and index to the single color component for further processing.', "The integration of a library allows for the generation of shades and tones of a color, with the 'all' method being used to generate lighter and darker values.", 'Covering the setup of the project and the use of an external library for color manipulation.']}, {'end': 14074.725, 'segs': [{'end': 12795.205, 'src': 'embed', 'start': 12763.909, 'weight': 6, 'content': [{'end': 12765.771, 'text': 'because of course it is a JavaScript value.', 'start': 12763.909, 'duration': 1.862}, {'end': 12773.459, 'text': "So now of course, if I add my favorite color, the orange one, notice, you'll get the squares.", 'start': 12766.211, 'duration': 7.248}, {'end': 12779.26, 'text': 'Again, each and every object has the RGB in the RGB, I have those RGB values.', 'start': 12774.099, 'duration': 5.161}, {'end': 12783.962, 'text': 'And then what I could do is set up inline style.', 'start': 12779.921, 'duration': 4.041}, {'end': 12788.163, 'text': 'So the class name for color is just going to give general styles.', 'start': 12784.602, 'duration': 3.561}, {'end': 12795.205, 'text': "But then that inline standard background color, we'll make sure that each square has that unique color.", 'start': 12788.583, 'duration': 6.622}], 'summary': 'Javascript values are used to set up inline styles for each square with unique colors based on their rgb values.', 'duration': 31.296, 'max_score': 12763.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo12763909.jpg'}, {'end': 13139.526, 'src': 'embed', 'start': 13106.832, 'weight': 5, 'content': [{'end': 13109.573, 'text': "Now I'll leave this for your reference, just in case you need it.", 'start': 13106.832, 'duration': 2.741}, {'end': 13116.476, 'text': 'Just keep in mind that once we have this setup, of course, we can still display the hex color.', 'start': 13109.953, 'duration': 6.523}, {'end': 13117.536, 'text': 'And there it is.', 'start': 13116.936, 'duration': 0.6}, {'end': 13120.157, 'text': "Now, let's keep on going.", 'start': 13118.037, 'duration': 2.12}, {'end': 13129.681, 'text': 'And one thing that I would want before we start working on the alert and before we start copy the value to the clipboard.', 'start': 13120.818, 'duration': 8.863}, {'end': 13139.526, 'text': 'I would also want to change the color value depending on the tent or the, because notice in here I can clearly see my color value.', 'start': 13129.681, 'duration': 9.845}], 'summary': 'Setting up hex color display and changing color value based on the tent.', 'duration': 32.694, 'max_score': 13106.832, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo13106832.jpg'}, {'end': 13279.689, 'src': 'embed', 'start': 13252.365, 'weight': 4, 'content': [{'end': 13258.071, 'text': 'I think from the function, the RGB function, I was getting right away, the color.', 'start': 13252.365, 'duration': 5.706}, {'end': 13259.8, 'text': 'And of course, in here, I have the error.', 'start': 13258.519, 'duration': 1.281}, {'end': 13261.58, 'text': 'So let me submit any I noticed.', 'start': 13259.82, 'duration': 1.76}, {'end': 13268.384, 'text': "So if I'm using that stack overflow function, I right away have the hashtag upfront.", 'start': 13261.961, 'duration': 6.423}, {'end': 13271.425, 'text': "Now, if I'm using that hex color, then I don't.", 'start': 13268.964, 'duration': 2.461}, {'end': 13279.689, 'text': 'So it would be an awesome time to construct a new string over here, because I will need to use that value.', 'start': 13272.085, 'duration': 7.604}], 'summary': 'Discussing differences in color functions and error detection.', 'duration': 27.324, 'max_score': 13252.365, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo13252365.jpg'}, {'end': 13332.217, 'src': 'embed', 'start': 13304.969, 'weight': 0, 'content': [{'end': 13310.331, 'text': 'So once we save, we should see the hashtag course where we have the hex color.', 'start': 13304.969, 'duration': 5.362}, {'end': 13315.432, 'text': "And also what's really cool is that we'll copy this value to the clipboard.", 'start': 13310.931, 'duration': 4.501}, {'end': 13318.853, 'text': 'So right away have that hashtag as well.', 'start': 13315.832, 'duration': 3.021}, {'end': 13324.195, 'text': "Again, if you want with hex, if you want with function, you're right away on the hashtag.", 'start': 13319.053, 'duration': 5.142}, {'end': 13332.217, 'text': "But since I want the library route where I was getting the hex color from the library, that's why we have to do it manually.", 'start': 13324.235, 'duration': 7.982}], 'summary': 'The process allows users to save and copy hex color values to the clipboard.', 'duration': 27.248, 'max_score': 13304.969, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo13304969.jpg'}, {'end': 13637.22, 'src': 'embed', 'start': 13610.999, 'weight': 1, 'content': [{'end': 13617.37, 'text': 'So set timeout is going to be looking for two things for the callback function, as well as in how long it needs to run.', 'start': 13610.999, 'duration': 6.371}, {'end': 13623.12, 'text': 'Now, remember one thing, though, I would want to clear out as well.', 'start': 13617.991, 'duration': 5.129}, {'end': 13630.195, 'text': "And since I have covered that already in plenty of projects as well as tutorial, I'm not going to go into details.", 'start': 13623.63, 'duration': 6.565}, {'end': 13632.717, 'text': "I'll right away just set up my cleanup function.", 'start': 13630.195, 'duration': 2.522}, {'end': 13637.22, 'text': 'So the set timeout will return a value.', 'start': 13633.257, 'duration': 3.963}], 'summary': 'Set timeout function looks for callback function and duration. it returns a value.', 'duration': 26.221, 'max_score': 13610.999, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo13610999.jpg'}, {'end': 13748.042, 'src': 'embed', 'start': 13694.64, 'weight': 3, 'content': [{'end': 13698.843, 'text': 'same here, here, here, here, everywhere you click.', 'start': 13694.64, 'duration': 4.203}, {'end': 13706.589, 'text': 'Now the last thing, what I would want is to go back to the app j s, and set up some kind of default value.', 'start': 13699.464, 'duration': 7.125}, {'end': 13709.871, 'text': 'Because like I said, in my opinion, this is not the best look.', 'start': 13706.749, 'duration': 3.122}, {'end': 13716.035, 'text': "We're basically we have color generator, but we're not suggesting to the user, what actually is happening.", 'start': 13710.211, 'duration': 5.824}, {'end': 13719.258, 'text': "So I'm going to go back to my use state for my list.", 'start': 13716.596, 'duration': 2.662}, {'end': 13726.564, 'text': "And I'm going to say new values, Then remember, we needed to pass in some kind of value.", 'start': 13719.338, 'duration': 7.226}, {'end': 13731.808, 'text': "So in my case, I'm going to go with hard coded value of my orange color.", 'start': 13727.164, 'duration': 4.644}, {'end': 13741.617, 'text': "So I know that you're probably sick of this color already, but I'm going to go with string, and then hashtag F 15025.", 'start': 13732.129, 'duration': 9.488}, {'end': 13746.622, 'text': "And then I'll right away invoke my all, I'll pass in the pen.", 'start': 13741.617, 'duration': 5.005}, {'end': 13748.042, 'text': "So I'll save it.", 'start': 13747.262, 'duration': 0.78}], 'summary': 'Setting default value to orange color #f15025 in app.js for better user suggestion.', 'duration': 53.402, 'max_score': 13694.64, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo13694640.jpg'}, {'end': 13860.642, 'src': 'embed', 'start': 13834.107, 'weight': 2, 'content': [{'end': 13838.81, 'text': 'because I move from value to value by 20%.', 'start': 13834.107, 'duration': 4.703}, {'end': 13849.717, 'text': "So if, for example, I'm going to go with one, that just means that I'm going to have 100 values for the things, because we're dividing 100 by one,", 'start': 13838.81, 'duration': 10.907}, {'end': 13851.839, 'text': 'and then also for the shades.', 'start': 13849.717, 'duration': 2.122}, {'end': 13859.061, 'text': 'Now, if you want, you can set up a application where of course, the user can change this value as well.', 'start': 13852.339, 'duration': 6.722}, {'end': 13860.642, 'text': 'That is definitely an option.', 'start': 13859.562, 'duration': 1.08}], 'summary': 'Values and shades can be adjusted by 20% increments, with the possibility for user customization.', 'duration': 26.535, 'max_score': 13834.107, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo13834107.jpg'}], 'start': 12586.129, 'title': 'Color display and manipulation in react', 'summary': 'Covers setting up a color display using rgb values, converting rgb array to a string, setting inline css for background color, and displaying percentage and hex color values, with the goal of matching color values to rgb and ensuring unique colors for each square. it also demonstrates converting rgb values to hex color using a function and accessing the hex color through different methods. additionally, it discusses changing color values based on index, utilizing clipboard functionality, and local storage in a react application.', 'chapters': [{'end': 12902.382, 'start': 12586.129, 'title': 'Setting up rgb color display', 'summary': 'Covers setting up a color display using rgb values, converting rgb array to a string, setting inline css for background color, and displaying percentage and hex color values, with the goal of matching color values to rgb and ensuring unique colors for each square.', 'duration': 316.253, 'highlights': ['Setting up state value for alert with use state, defaulting to false.', 'Converting RGB array to string using inline CSS to match color values to RGB.', 'Displaying percentage value for weight with styling.', 'Using RGB to hex conversion function to display hex color values.']}, {'end': 13106.356, 'start': 12902.863, 'title': 'Converting rgb to hex color', 'summary': 'Demonstrates the process of converting rgb values to hex color using a function and accessing the hex color through different methods, ultimately achieving the desired result.', 'duration': 203.493, 'highlights': ['The process of converting RGB values to hex color is demonstrated, showcasing the use of a function and accessing hex color through different methods.', 'The function for converting RGB to hex color is imported into the utils.', 'The speaker explores different methods to access the hex color, including using a function and accessing the value provided by the library.']}, {'end': 13304.429, 'start': 13106.832, 'title': 'Changing color values based on index', 'summary': 'Discusses changing color values based on index, where a different class is added for index values greater than 10 to display lighter colors for better visibility, and constructing a new string to include a hashtag for the hex color value.', 'duration': 197.597, 'highlights': ['Adding a different class for index values greater than 10 to display lighter colors for better visibility.', 'Constructing a new string to include a hashtag for the hex color value.', 'Using template strings for constructing the new string with hashtag and hex color.']}, {'end': 14074.725, 'start': 13304.969, 'title': 'Utilizing clipboard functionality and local storage in react', 'summary': 'Demonstrates how to implement the functionality to copy values to the clipboard and utilize local storage in a react application, including setting up the alert to display the copied value, using the navigator object and clipboard property in javascript, and explaining the process of dividing base color values to generate shades and tints.', 'duration': 769.756, 'highlights': ['The chapter demonstrates setting up the functionality to copy values to the clipboard, including displaying an alert when the value is copied and using the navigator object and clipboard property in JavaScript. (Relevance: 5)', 'It explains the process of dividing base color values to generate shades and tints, showcasing the impact of different values on the generated color array. (Relevance: 4)', 'The transcript also showcases the utilization of local storage to persist data between user visits in a React application for managing a grocery list. (Relevance: 3)']}], 'duration': 1488.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo12586129.jpg', 'highlights': ['Setting up state value for alert with use state, defaulting to false.', 'Converting RGB array to string using inline CSS to match color values to RGB.', 'Displaying percentage value for weight with styling.', 'Using RGB to hex conversion function to display hex color values.', 'The process of converting RGB values to hex color is demonstrated, showcasing the use of a function and accessing hex color through different methods.', 'Adding a different class for index values greater than 10 to display lighter colors for better visibility.', 'Constructing a new string to include a hashtag for the hex color value.', 'The chapter demonstrates setting up the functionality to copy values to the clipboard, including displaying an alert when the value is copied and using the navigator object and clipboard property in JavaScript.', 'It explains the process of dividing base color values to generate shades and tints, showcasing the impact of different values on the generated color array.', 'The transcript also showcases the utilization of local storage to persist data between user visits in a React application for managing a grocery list.']}, {'end': 15054.338, 'segs': [{'end': 14222.125, 'src': 'embed', 'start': 14193.495, 'weight': 5, 'content': [{'end': 14197.557, 'text': 'So this is going to be that Boolean, which, by the way, by default will be false.', 'start': 14193.495, 'duration': 4.062}, {'end': 14202.139, 'text': "then the message, what we're going to display inside, and then also the type.", 'start': 14197.557, 'duration': 4.582}, {'end': 14205.78, 'text': "And for a type, there's going to be either success or danger.", 'start': 14203.039, 'duration': 2.741}, {'end': 14210.261, 'text': "Now I borrowed those class names from the bootstrap, there's nothing specific about them.", 'start': 14206.26, 'duration': 4.001}, {'end': 14211.882, 'text': 'Danger is the red one.', 'start': 14210.741, 'duration': 1.141}, {'end': 14215.023, 'text': 'And the success one is the green one.', 'start': 14212.062, 'duration': 2.961}, {'end': 14222.125, 'text': "So of course, if we have the item, then it's success, if we delete it, then we display that we have a danger, we deleted the item.", 'start': 14215.183, 'duration': 6.942}], 'summary': 'A boolean defaulting to false with success or danger message types.', 'duration': 28.63, 'max_score': 14193.495, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo14193495.jpg'}, {'end': 14724.404, 'src': 'embed', 'start': 14696.578, 'weight': 0, 'content': [{'end': 14706.065, 'text': "Now for the edit, it is going to be a little bit different where we're going to go with else if I need to check that name is true.", 'start': 14696.578, 'duration': 9.487}, {'end': 14710.728, 'text': 'So essentially, if there are some values, then I would want to add it.', 'start': 14706.845, 'duration': 3.883}, {'end': 14714.791, 'text': 'And also if he is editing is true.', 'start': 14711.208, 'duration': 3.583}, {'end': 14717.895, 'text': "we're going to go here with is editing.", 'start': 14715.391, 'duration': 2.504}, {'end': 14724.404, 'text': "So that is the case, then we'll deal with deal with edit, like so.", 'start': 14718.235, 'duration': 6.169}], 'summary': 'Editing process requires checking name and adding values, as well as confirming if editing is true.', 'duration': 27.826, 'max_score': 14696.578, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo14696578.jpg'}, {'end': 14776.349, 'src': 'embed', 'start': 14748.923, 'weight': 1, 'content': [{'end': 14752.487, 'text': "So if both of these conditions are met, then we're dealing with it.", 'start': 14748.923, 'duration': 3.564}, {'end': 14758.872, 'text': "here, I'm just saying, you know, if it is empty, then I will display the alert.", 'start': 14753.127, 'duration': 5.745}, {'end': 14762.216, 'text': 'And then lastly, I can also deal with else.', 'start': 14759.373, 'duration': 2.843}, {'end': 14765.799, 'text': 'So this is where I would want to add that item to the list.', 'start': 14762.696, 'duration': 3.103}, {'end': 14770.463, 'text': "And again, I'll add some comments, because of course, there's going to be more functionality.", 'start': 14766.159, 'duration': 4.304}, {'end': 14776.349, 'text': "And I would want to start by show alert, again, something that we're going to do a little bit later.", 'start': 14771.144, 'duration': 5.205}], 'summary': 'Dealing with empty conditions, adding items to the list, and planning for future functionality.', 'duration': 27.426, 'max_score': 14748.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo14748923.jpg'}, {'end': 14827.283, 'src': 'embed', 'start': 14794.917, 'weight': 2, 'content': [{'end': 14796.878, 'text': 'And then remember, we have a list.', 'start': 14794.917, 'duration': 1.961}, {'end': 14801.1, 'text': 'So again, I would need to have those unique ID values correct.', 'start': 14797.078, 'duration': 4.022}, {'end': 14810.669, 'text': "So again, we're going to cheat a little bit where it's going to be ID, new date, then we invoke it, then we have get time again, invoke it.", 'start': 14801.62, 'duration': 9.049}, {'end': 14817.815, 'text': "And then we go to string, just because I don't want to deploy some external library.", 'start': 14811.209, 'duration': 6.606}, {'end': 14819.657, 'text': "Okay, we're just going to cheat a little bit.", 'start': 14817.835, 'duration': 1.822}, {'end': 14821.859, 'text': "And we're going to go with title.", 'start': 14820.257, 'duration': 1.602}, {'end': 14827.283, 'text': 'So that is going to be the only property that I have on the subject, of course, apart from the ID,', 'start': 14822.239, 'duration': 5.044}], 'summary': 'The subject has a list with unique id values and limited properties.', 'duration': 32.366, 'max_score': 14794.917, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo14794917.jpg'}, {'end': 14900.516, 'src': 'embed', 'start': 14843.497, 'weight': 4, 'content': [{'end': 14848.321, 'text': 'So get me the previous values from the state list value.', 'start': 14843.497, 'duration': 4.824}, {'end': 14851.262, 'text': 'And in here, just add a new one.', 'start': 14849.041, 'duration': 2.221}, {'end': 14853.963, 'text': 'So new item over here.', 'start': 14851.782, 'duration': 2.181}, {'end': 14861.147, 'text': 'And I would want to finish it off by saying set name equal to an empty string.', 'start': 14854.664, 'duration': 6.483}, {'end': 14868.51, 'text': 'So if we scroll down a bit, because now I could iterate over the list, correct.', 'start': 14861.787, 'duration': 6.723}, {'end': 14872.893, 'text': "And you know what, sorry, I'm actually going to be passing the items over here.", 'start': 14869.29, 'duration': 3.603}, {'end': 14879.057, 'text': "So let's do it this way, I'm going to say items prop is equal to the list state value.", 'start': 14873.313, 'duration': 5.744}, {'end': 14880.979, 'text': "Now there's going to be a few more props.", 'start': 14879.478, 'duration': 1.501}, {'end': 14888.465, 'text': 'But by design, I would just want to set up in a list, some kind of return.', 'start': 14881.599, 'duration': 6.866}, {'end': 14895.811, 'text': "So what I'm going to do is navigate to my list, I know that I passed in my items prop, so I'll destructure it right away.", 'start': 14889.125, 'duration': 6.686}, {'end': 14900.516, 'text': 'Remember, I just passed in line items that was equal to my list.', 'start': 14896.312, 'duration': 4.204}], 'summary': 'Updating state list with a new item, setting name to empty string, and iterating over the list.', 'duration': 57.019, 'max_score': 14843.497, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo14843497.jpg'}], 'start': 14075.225, 'title': 'Setting up state, components, form, functionality, and list item display in react', 'summary': 'Covers setting up state values like an empty array, isediting flag, editid, and alert object, setting up a form with attributes and functionality, and managing list items in a react application, focusing on event handling, conditional logic, and unique ids.', 'chapters': [{'end': 14312.685, 'start': 14075.225, 'title': 'Setting up state and components', 'summary': 'Explains the process of setting up state values including an empty array, isediting flag, editid, and alert object with boolean and object properties for a form and list components.', 'duration': 237.46, 'highlights': ['Setting up state values including an empty array, isEditing flag, editID, and alert object with boolean and object properties', 'Defining the structure of the alert object with properties such as show, message, and type, where type can be either success or danger', 'Explaining the conditional rendering of the list component based on the presence of items in the list']}, {'end': 14794.857, 'start': 14313.346, 'title': 'Setting up form and functionality', 'summary': 'Covers setting up a form with attributes and functionality for adding items to a list, including handling empty values and editing, with a focus on event handling and conditional logic.', 'duration': 481.511, 'highlights': ['Setting up a form with attributes and functionality for adding items to a list, including handling empty values and editing', 'Using event handling and conditional logic to determine actions based on the form input', 'Adding conditional checks for empty values and editing to display alert messages and handle item addition']}, {'end': 15054.338, 'start': 14794.917, 'title': 'React list item display', 'summary': 'Explains how to display and manage list items in a react application, including setting unique ids, manipulating arrays, and rendering item components with buttons.', 'duration': 259.421, 'highlights': ['The chapter demonstrates setting unique IDs for list items and managing arrays in a React application.', 'It explains the process of rendering item components with buttons for editing and deleting in a React application.', 'The chapter also covers the manipulation of arrays and the use of unique IDs for list items in a React application.']}], 'duration': 979.113, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo14075225.jpg', 'highlights': ['Setting up state values including an empty array, isEditing flag, editID, and alert object with boolean and object properties', 'Setting up a form with attributes and functionality for adding items to a list, including handling empty values and editing', 'Explaining the conditional rendering of the list component based on the presence of items in the list', 'Using event handling and conditional logic to determine actions based on the form input', 'Adding conditional checks for empty values and editing to display alert messages and handle item addition', 'The chapter demonstrates setting unique IDs for list items and managing arrays in a React application.', 'It explains the process of rendering item components with buttons for editing and deleting in a React application.', 'The chapter also covers the manipulation of arrays and the use of unique IDs for list items in a React application.', 'Defining the structure of the alert object with properties such as show, message, and type, where type can be either success or danger']}, {'end': 16849.673, 'segs': [{'end': 15499.877, 'src': 'embed', 'start': 15475.412, 'weight': 1, 'content': [{'end': 15481.573, 'text': "So in this case, what I could do is come up with a function name, and I'll call this show alert.", 'start': 15475.412, 'duration': 6.161}, {'end': 15483.494, 'text': "And it's going to be looking for three things.", 'start': 15481.933, 'duration': 1.561}, {'end': 15488.215, 'text': 'going to be looking for the show for the type and the message.', 'start': 15484.154, 'duration': 4.061}, {'end': 15493.436, 'text': "So essentially, everything that we're passing in, we're just going to set up some nice default as well.", 'start': 15488.495, 'duration': 4.941}, {'end': 15499.877, 'text': "So in here, I'm going to go with show, and I'll set it equal to a false by default.", 'start': 15493.856, 'duration': 6.021}], 'summary': "Creating a function 'showalert' with default parameters for type and message.", 'duration': 24.465, 'max_score': 15475.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo15475412.jpg'}, {'end': 15878.066, 'src': 'embed', 'start': 15805.316, 'weight': 0, 'content': [{'end': 15813.798, 'text': 'So what I could say here, instead of this comment, I can call my show alert, and then what kind of values would want to pass in.', 'start': 15805.316, 'duration': 8.482}, {'end': 15817.359, 'text': 'Well, first, of course, I would want to show the alert.', 'start': 15814.358, 'duration': 3.001}, {'end': 15818.98, 'text': 'So show needs to be true.', 'start': 15817.599, 'duration': 1.381}, {'end': 15820, 'text': 'Got it.', 'start': 15819.66, 'duration': 0.34}, {'end': 15826.402, 'text': "Then we're going to pass in success, since that is going to be our second class that we can display.", 'start': 15820.6, 'duration': 5.802}, {'end': 15828.643, 'text': 'And then we have some kind of text.', 'start': 15826.822, 'duration': 1.821}, {'end': 15835.425, 'text': "As far as the text, I'm going to go with item added to the list to the list.", 'start': 15829.023, 'duration': 6.402}, {'end': 15836.485, 'text': "let's save it.", 'start': 15835.825, 'duration': 0.66}, {'end': 15837.966, 'text': "And let's test it out.", 'start': 15837.186, 'duration': 0.78}, {'end': 15842.348, 'text': "I'm going to type some gibberish, I'm going to press on there is now I have my alert.", 'start': 15837.986, 'duration': 4.362}, {'end': 15845.629, 'text': 'And then in three seconds, it goes away.', 'start': 15842.768, 'duration': 2.861}, {'end': 15850.891, 'text': "Beautiful. Now let's deal with the clear list functionality.", 'start': 15845.929, 'duration': 4.962}, {'end': 15860.716, 'text': 'where I would want to set up a function, say const, and that is equal to a clear, clear list, is our function.', 'start': 15850.891, 'duration': 9.825}, {'end': 15863.117, 'text': "And I'm not gonna be looking for any arguments.", 'start': 15861.496, 'duration': 1.621}, {'end': 15865.018, 'text': "I'm just gonna show alert.", 'start': 15863.677, 'duration': 1.341}, {'end': 15868.58, 'text': "So I'm gonna say, Hey, listen, you are deleting the items.", 'start': 15865.458, 'duration': 3.122}, {'end': 15874.284, 'text': 'So true will be for my show, then the class name will be danger.', 'start': 15868.72, 'duration': 5.564}, {'end': 15878.066, 'text': "And then I'm going to be setting up the text of empty.", 'start': 15874.304, 'duration': 3.762}], 'summary': 'Developed show alert function with success and danger classes for item addition and deletion.', 'duration': 72.75, 'max_score': 15805.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo15805316.jpg'}, {'end': 15939.884, 'src': 'embed', 'start': 15910.059, 'weight': 2, 'content': [{'end': 15911.802, 'text': "And of course, let's add the gibberish.", 'start': 15910.059, 'duration': 1.743}, {'end': 15913.144, 'text': 'And there it is.', 'start': 15912.583, 'duration': 0.561}, {'end': 15914.346, 'text': 'Now we have clear items.', 'start': 15913.264, 'duration': 1.082}, {'end': 15921.137, 'text': 'So what can happen is I can click on now of course, I can empty the list.', 'start': 15914.506, 'duration': 6.631}, {'end': 15928.94, 'text': "And once we can clear the whole list, now let's set up the functionality where we can remove individual items from the list.", 'start': 15921.777, 'duration': 7.163}, {'end': 15931.621, 'text': "We'll start with our function.", 'start': 15929.44, 'duration': 2.181}, {'end': 15939.884, 'text': "So in here, I'm going to say const, and I'll call this a remove item, move item, it is going to be looking for the ID.", 'start': 15932.221, 'duration': 7.663}], 'summary': 'Developing functionality to remove individual items from a list', 'duration': 29.825, 'max_score': 15910.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo15910059.jpg'}, {'end': 16009.223, 'src': 'embed', 'start': 15981.01, 'weight': 9, 'content': [{'end': 15985.071, 'text': "we're going to go with list filter that will always return a new array.", 'start': 15981.01, 'duration': 4.061}, {'end': 15996.216, 'text': "And I'm just gonna say if the item ID matches to whatever idea passed into remove item, when please don't return it from this filter function.", 'start': 15985.491, 'duration': 10.725}, {'end': 16003.12, 'text': "going to say if item ID does not match, then yes, then it's going to be added to my new array.", 'start': 15996.676, 'duration': 6.444}, {'end': 16005.761, 'text': "If it does match, then it won't get returned.", 'start': 16003.44, 'duration': 2.321}, {'end': 16009.223, 'text': "So of course, then it won't be displayed.", 'start': 16006.281, 'duration': 2.942}], 'summary': 'Using list filter to return a new array based on item id matching or not.', 'duration': 28.213, 'max_score': 15981.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo15981010.jpg'}, {'end': 16450.981, 'src': 'heatmap', 'start': 16101.83, 'weight': 0.74, 'content': [{'end': 16107.452, 'text': 'So the problem is that initially, yes, we added so now the component is already rendered.', 'start': 16101.83, 'duration': 5.622}, {'end': 16112.215, 'text': 'So when we clear the items, technically, it is still in a process.', 'start': 16107.472, 'duration': 4.743}, {'end': 16115.877, 'text': 'So at the end, it just removes it when the three seconds are up.', 'start': 16112.415, 'duration': 3.462}, {'end': 16124.065, 'text': 'So it would be nice if we would run this one every time there are some updates to the list.', 'start': 16116.397, 'duration': 7.668}, {'end': 16128.57, 'text': 'So for example, I add the item, and then for three seconds, this one is displayed.', 'start': 16124.546, 'duration': 4.024}, {'end': 16137.319, 'text': 'And once I remove the item, again, I still have those three seconds where the alert for removal also is displayed.', 'start': 16128.95, 'duration': 8.369}, {'end': 16142.482, 'text': 'So what we do in the app, we also pass in the list.', 'start': 16137.939, 'duration': 4.543}, {'end': 16147.285, 'text': "So I'll name this list that is equal to my list state value.", 'start': 16143.022, 'duration': 4.263}, {'end': 16155.67, 'text': "And in the alert, I'm going to destructure it, I'm going to say list, and then I'll add it to my dependency.", 'start': 16147.885, 'duration': 7.785}, {'end': 16164.014, 'text': "Alright, so every time it is going to change, I'll get a new set of timeout.", 'start': 16156.05, 'duration': 7.964}, {'end': 16167.837, 'text': 'So if I add this one, okay, notice now it sits here.', 'start': 16164.515, 'duration': 3.322}, {'end': 16171.861, 'text': "And then once I click, now it's going to sit for three seconds.", 'start': 16168.137, 'duration': 3.724}, {'end': 16173.342, 'text': "Let's try one more time.", 'start': 16172.341, 'duration': 1.001}, {'end': 16175.725, 'text': 'Again, I have gibberish, I wait a little bit.', 'start': 16173.362, 'duration': 2.363}, {'end': 16179.088, 'text': "And once I click, notice, we'll still wait for three seconds.", 'start': 16175.945, 'duration': 3.143}, {'end': 16180.349, 'text': 'Not a big deal.', 'start': 16179.668, 'duration': 0.681}, {'end': 16185.073, 'text': "But in my opinion, it's just a better user experience.", 'start': 16180.869, 'duration': 4.204}, {'end': 16191.442, 'text': 'Again, The only thing we do is just add a list to our dependency array.', 'start': 16185.174, 'duration': 6.268}, {'end': 16197.49, 'text': 'So of course, once something changes on a list, we clear out the old timeout.', 'start': 16192.003, 'duration': 5.487}, {'end': 16199.393, 'text': 'And then we set up a new one.', 'start': 16197.991, 'duration': 1.402}, {'end': 16201.436, 'text': "That's the whole logic behind it.", 'start': 16199.834, 'duration': 1.602}, {'end': 16208.303, 'text': "And last piece of functionality I'd want to add is the ability to edit the item.", 'start': 16202.657, 'duration': 5.646}, {'end': 16213.208, 'text': "probably the hardest one, because there's just going to be few moving pieces.", 'start': 16208.303, 'duration': 4.905}, {'end': 16216.471, 'text': "But I think we're going to be in good shape.", 'start': 16213.709, 'duration': 2.762}, {'end': 16218.373, 'text': "So let's start working on it.", 'start': 16217.012, 'duration': 1.361}, {'end': 16220.816, 'text': "I'm going to go with app JS.", 'start': 16218.393, 'duration': 2.423}, {'end': 16223.419, 'text': 'And then I would want to come up with my function.', 'start': 16221.256, 'duration': 2.163}, {'end': 16226.201, 'text': "So let's scroll up, I have remove item.", 'start': 16224.059, 'duration': 2.142}, {'end': 16231.687, 'text': "And then right after the remove item, we're going to go with const, edit item.", 'start': 16226.682, 'duration': 5.005}, {'end': 16236.331, 'text': "And again, we're going to be looking for the ID, just like with remove item.", 'start': 16232.468, 'duration': 3.863}, {'end': 16243.198, 'text': 'However, in this case, what I would want is to get that specific item whose ID matches.', 'start': 16236.812, 'duration': 6.386}, {'end': 16246.421, 'text': 'So in here, I did not return that item.', 'start': 16243.779, 'duration': 2.642}, {'end': 16250.463, 'text': 'I only returned items whose IDs did not match.', 'start': 16247.162, 'duration': 3.301}, {'end': 16252.883, 'text': 'In this case, I do want to get that item.', 'start': 16250.883, 'duration': 2}, {'end': 16259.065, 'text': "And I'm just going to use a variable here, specific item, and that is equal to a list.", 'start': 16253.403, 'duration': 5.662}, {'end': 16263.566, 'text': "So my state value, and I'll use my find method.", 'start': 16259.665, 'duration': 3.901}, {'end': 16265.866, 'text': 'Again, we iterate over array.', 'start': 16264.046, 'duration': 1.82}, {'end': 16273.488, 'text': 'And I say if the item ID matches, then please return that item.', 'start': 16266.326, 'duration': 7.162}, {'end': 16279.931, 'text': "And then once I have my item, I would want to go with set is editing, I'll set it equal to true.", 'start': 16274.008, 'duration': 5.923}, {'end': 16292.098, 'text': "Then as far as the ID, remember that set edit ID, I'm going to go with set edit ID is equal to the ID that I'm passing in right here.", 'start': 16280.572, 'duration': 11.526}, {'end': 16299.663, 'text': "And then the last thing, if I'm editing, I also want to display well, which item I'm actually editing.", 'start': 16292.599, 'duration': 7.064}, {'end': 16304.744, 'text': 'So I would want to grab that title value and pass it into my name.', 'start': 16300.203, 'duration': 4.541}, {'end': 16307.645, 'text': "So what I'm going to do is set name.", 'start': 16305.325, 'duration': 2.32}, {'end': 16311.946, 'text': "And then I'm going to go with specific item, which of course holds that value.", 'start': 16308.145, 'duration': 3.801}, {'end': 16314.687, 'text': "And then I'll pass in the title.", 'start': 16312.367, 'duration': 2.32}, {'end': 16316.668, 'text': 'So that should do it.', 'start': 16315.367, 'duration': 1.301}, {'end': 16324.51, 'text': "And of course, we can pass it down to our list, same spiel, we're going to call this edit item.", 'start': 16317.068, 'duration': 7.442}, {'end': 16331.434, 'text': "just like with remove, we're going to go with edit item is equal to the edit.", 'start': 16326.053, 'duration': 5.381}, {'end': 16335.595, 'text': 'And then item function, like so we save it.', 'start': 16332.154, 'duration': 3.441}, {'end': 16338.316, 'text': 'And then in the list, I would want to destructure it.', 'start': 16335.855, 'duration': 2.461}, {'end': 16342.877, 'text': "So we're going to go with edit, edit item, like so.", 'start': 16338.976, 'duration': 3.901}, {'end': 16345.277, 'text': 'And then of course, we have our button already.', 'start': 16343.377, 'duration': 1.9}, {'end': 16352.999, 'text': 'So we go on click matter is equal to the edit item, but I need to pass in my one function.', 'start': 16345.377, 'duration': 7.622}, {'end': 16357.923, 'text': 'So edit item, and then I pass in my ID, I save it.', 'start': 16353.539, 'duration': 4.384}, {'end': 16361.927, 'text': "And then of course, we'll have to handle that when we're submitting the form.", 'start': 16358.163, 'duration': 3.764}, {'end': 16364.909, 'text': 'So let me add first item.', 'start': 16362.387, 'duration': 2.522}, {'end': 16369.333, 'text': 'Now, of course, once I click, check it out, I have here the edit.', 'start': 16364.929, 'duration': 4.404}, {'end': 16376.5, 'text': "So I clearly state that we're editing, and then which item I'm actually editing.", 'start': 16369.954, 'duration': 6.546}, {'end': 16380.823, 'text': "of course, we just need to deal with that when we're submitting the form.", 'start': 16377.2, 'duration': 3.623}, {'end': 16382.304, 'text': 'So let me scroll up.', 'start': 16381.363, 'duration': 0.941}, {'end': 16386.467, 'text': "Remember, we have that else if, so if there's some value, then we're editing.", 'start': 16382.724, 'duration': 3.743}, {'end': 16391.211, 'text': "And the reason for that is because I don't want to edit item with an empty value.", 'start': 16386.848, 'duration': 4.363}, {'end': 16393.192, 'text': "So I don't want to do something like this.", 'start': 16391.711, 'duration': 1.481}, {'end': 16395.915, 'text': "I don't want to change this to an empty value.", 'start': 16393.992, 'duration': 1.923}, {'end': 16399.197, 'text': "That's why we have that flag over there.", 'start': 16396.415, 'duration': 2.782}, {'end': 16402.98, 'text': 'But we just need to add a little bit more functionality.', 'start': 16399.636, 'duration': 3.344}, {'end': 16406.422, 'text': "And in fact, it's going to be somewhat simple.", 'start': 16403.76, 'duration': 2.662}, {'end': 16409.265, 'text': "where we're going to go with our list.", 'start': 16407.023, 'duration': 2.242}, {'end': 16414.489, 'text': "And again, just to practice, we'll right away pass it into our setlist.", 'start': 16410.545, 'duration': 3.944}, {'end': 16417.132, 'text': "So I'm going to be setting a list to a new value.", 'start': 16415.029, 'duration': 2.103}, {'end': 16423.937, 'text': "And I'm going to be mapping over my current list, because I know that that will always return a newest correct.", 'start': 16417.732, 'duration': 6.205}, {'end': 16429.042, 'text': "And in here, I'm going to say that I'm going to be accessing the item from my list.", 'start': 16424.598, 'duration': 4.444}, {'end': 16438.028, 'text': "And that if the item ID will match edit ID, well, then I'll do something if not, then I'll just return the item.", 'start': 16429.522, 'duration': 8.506}, {'end': 16450.981, 'text': "So by default I'll always return the item or there's also going to be a flag here where I'm going to say if item, if item ID matches the edit ID.", 'start': 16438.529, 'duration': 12.452}], 'summary': 'The transcript discusses updating and editing items in a list for better user experience.', 'duration': 349.151, 'max_score': 16101.83, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo16101830.jpg'}, {'end': 16180.349, 'src': 'embed', 'start': 16156.05, 'weight': 6, 'content': [{'end': 16164.014, 'text': "Alright, so every time it is going to change, I'll get a new set of timeout.", 'start': 16156.05, 'duration': 7.964}, {'end': 16167.837, 'text': 'So if I add this one, okay, notice now it sits here.', 'start': 16164.515, 'duration': 3.322}, {'end': 16171.861, 'text': "And then once I click, now it's going to sit for three seconds.", 'start': 16168.137, 'duration': 3.724}, {'end': 16173.342, 'text': "Let's try one more time.", 'start': 16172.341, 'duration': 1.001}, {'end': 16175.725, 'text': 'Again, I have gibberish, I wait a little bit.', 'start': 16173.362, 'duration': 2.363}, {'end': 16179.088, 'text': "And once I click, notice, we'll still wait for three seconds.", 'start': 16175.945, 'duration': 3.143}, {'end': 16180.349, 'text': 'Not a big deal.', 'start': 16179.668, 'duration': 0.681}], 'summary': 'Demonstrating a timeout feature setting to 3 seconds for a click action.', 'duration': 24.299, 'max_score': 16156.05, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo16156050.jpg'}, {'end': 16259.065, 'src': 'embed', 'start': 16232.468, 'weight': 4, 'content': [{'end': 16236.331, 'text': "And again, we're going to be looking for the ID, just like with remove item.", 'start': 16232.468, 'duration': 3.863}, {'end': 16243.198, 'text': 'However, in this case, what I would want is to get that specific item whose ID matches.', 'start': 16236.812, 'duration': 6.386}, {'end': 16246.421, 'text': 'So in here, I did not return that item.', 'start': 16243.779, 'duration': 2.642}, {'end': 16250.463, 'text': 'I only returned items whose IDs did not match.', 'start': 16247.162, 'duration': 3.301}, {'end': 16252.883, 'text': 'In this case, I do want to get that item.', 'start': 16250.883, 'duration': 2}, {'end': 16259.065, 'text': "And I'm just going to use a variable here, specific item, and that is equal to a list.", 'start': 16253.403, 'duration': 5.662}], 'summary': 'Searching for specific item by id in code, using a variable specific item and a list', 'duration': 26.597, 'max_score': 16232.468, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo16232468.jpg'}, {'end': 16775.382, 'src': 'embed', 'start': 16746.973, 'weight': 3, 'content': [{'end': 16753.255, 'text': 'The problem is that once I refresh, I still start with a empty value.', 'start': 16746.973, 'duration': 6.282}, {'end': 16760.616, 'text': 'Okay, so how I can fix that, well, I would need to navigate back, I would need to go to my app.', 'start': 16753.275, 'duration': 7.341}, {'end': 16764.177, 'text': "And then notice here, where we're setting this up as an empty array.", 'start': 16761.237, 'duration': 2.94}, {'end': 16766.137, 'text': "I'll change this around.", 'start': 16764.718, 'duration': 1.419}, {'end': 16775.382, 'text': "First, I'm going to come up with a function, we're going to say const, and then get local and storage, like so.", 'start': 16766.738, 'duration': 8.644}], 'summary': 'Issue with starting with empty value after refresh, resolved by navigating and updating array in function', 'duration': 28.409, 'max_score': 16746.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo16746973.jpg'}], 'start': 15054.998, 'title': 'Javascript functionality and es6 features', 'summary': 'Discusses conditional rendering, alert functionality, es6 features, and list editing in javascript, covering aspects like implementing conditional rendering based on list length, setting up alerts, using es6 features, and handling list editing in app js, resulting in improved user experience and data persistence.', 'chapters': [{'end': 15204.14, 'start': 15054.998, 'title': 'Conditional rendering and functionality', 'summary': 'Discusses setting up conditional rendering based on list length in the app js and implementing three conditions for handling different scenarios when adding items to the grocery list.', 'duration': 149.142, 'highlights': ['Setting up conditional rendering in the app JS based on list length, showcasing the grocery container only when the length is greater than zero.', 'Implementing three conditions for handling different scenarios when adding items to the grocery list: displaying an alert for empty value, dealing with edit functionality if the name is present and editing, and creating a new item with two properties (ID and title) and adding it to the list if everything is correct.']}, {'end': 15523.086, 'start': 15204.16, 'title': 'Setting up alerts and alert functionality', 'summary': 'Covers setting up alert functionality by changing state values, passing properties to the alert component, and implementing a function to speed up the alert functionality.', 'duration': 318.926, 'highlights': ['Setting up alert functionality by changing state values and passing properties to the alert component.', 'Implementing a function called show alert to speed up the alert functionality.', 'Using ES6 default parameters to set default values for show, type, and message in the show alert function.']}, {'end': 16208.303, 'start': 15523.506, 'title': 'Es6 features and functionality in javascript', 'summary': 'Discusses implementing es6 features like arrow functions and destructuring, and creating functionality to display, hide, clear, and remove items from an alert in a javascript application.', 'duration': 684.797, 'highlights': ['Implementing ES6 features such as arrow functions and destructuring for efficient coding.', 'Creating functionality to display, hide, clear, and remove items from an alert in a JavaScript application.', 'Utilizing useEffect and useState hooks for managing alerts and list items in a React application.', 'Enhancing user experience by updating timeout functionality based on list changes for a smoother alert display.']}, {'end': 16849.673, 'start': 16208.303, 'title': 'Handling list editing in app js', 'summary': 'Covers the process of handling list editing in app js, including setting up the edit item function, managing state values for editing, and utilizing local storage to persist changes, resulting in improved user experience and data persistence.', 'duration': 641.37, 'highlights': ['Setting up the edit item function and managing state values for editing, including setting isEditing to true and setting edit ID to the passed-in ID.', 'Utilizing local storage to persist the latest values of the list using the setItem method from the browser API, ensuring data persistence and improved user experience.', 'Creating a function to retrieve the list from local storage and handling scenarios where the list exists or does not exist, ensuring the availability of the list even after a page refresh.']}], 'duration': 1794.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo15054998.jpg', 'highlights': ['Utilizing local storage to persist the latest values of the list using the setItem method from the browser API, ensuring data persistence and improved user experience.', 'Enhancing user experience by updating timeout functionality based on list changes for a smoother alert display.', 'Implementing ES6 features such as arrow functions and destructuring for efficient coding.', 'Utilizing useEffect and useState hooks for managing alerts and list items in a React application.', 'Setting up conditional rendering in the app JS based on list length, showcasing the grocery container only when the length is greater than zero.', 'Creating a function to retrieve the list from local storage and handling scenarios where the list exists or does not exist, ensuring the availability of the list even after a page refresh.', 'Implementing three conditions for handling different scenarios when adding items to the grocery list: displaying an alert for empty value, dealing with edit functionality if the name is present and editing, and creating a new item with two properties (ID and title) and adding it to the list if everything is correct.', 'Setting up the edit item function and managing state values for editing, including setting isEditing to true and setting edit ID to the passed-in ID.', 'Setting up alert functionality by changing state values and passing properties to the alert component.', 'Using ES6 default parameters to set default values for show, type, and message in the show alert function.', 'Implementing a function called show alert to speed up the alert functionality.', 'Creating functionality to display, hide, clear, and remove items from an alert in a JavaScript application.']}, {'end': 17989.058, 'segs': [{'end': 16961.068, 'src': 'embed', 'start': 16917.785, 'weight': 0, 'content': [{'end': 16924.295, 'text': "There's a reason why this project, and later when we work on more complex projects,", 'start': 16917.785, 'duration': 6.51}, {'end': 16930.624, 'text': 'we will rely heavily on principles that we will cover in this project.', 'start': 16924.295, 'duration': 6.329}, {'end': 16933.068, 'text': "Beautiful Now let's get to work.", 'start': 16931.245, 'duration': 1.823}, {'end': 16937.491, 'text': "I'll right away open up localhost 3000.", 'start': 16933.749, 'duration': 3.742}, {'end': 16941.234, 'text': 'And then also, I would want to navigate back to my repo.', 'start': 16937.491, 'duration': 3.743}, {'end': 16948.878, 'text': "And of course, I'm looking for the project number 11, the name is number, and more specifically, the setup folder.", 'start': 16941.894, 'duration': 6.984}, {'end': 16951.58, 'text': "So I'll make sure that I'm in the route.", 'start': 16949.359, 'duration': 2.221}, {'end': 16955.302, 'text': "And of course, once I'm there, I'm just going to go with CD.", 'start': 16951.94, 'duration': 3.362}, {'end': 16959.226, 'text': "And then I'm looking for my setup folder.", 'start': 16956.083, 'duration': 3.143}, {'end': 16961.068, 'text': 'There it is now here.', 'start': 16959.787, 'duration': 1.281}], 'summary': 'The project relies heavily on principles covered, navigating to project number 11 setup folder.', 'duration': 43.283, 'max_score': 16917.785, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo16917785.jpg'}, {'end': 17161.314, 'src': 'embed', 'start': 17133.597, 'weight': 3, 'content': [{'end': 17137.119, 'text': "So within nav header, we're going to go with IMG.", 'start': 17133.597, 'duration': 3.522}, {'end': 17142.943, 'text': 'And then as far as the source, remember, we needed to import the file, file name is logo SVG.', 'start': 17137.64, 'duration': 5.303}, {'end': 17145.705, 'text': 'And then I just gave it a name of logo.', 'start': 17143.483, 'duration': 2.222}, {'end': 17148.486, 'text': "So now where I have the source, I'm just going to go with logo.", 'start': 17146.125, 'duration': 2.361}, {'end': 17155.471, 'text': "And as far as the alternative, I don't know, I think I'm going to write a logo that should do it.", 'start': 17149.467, 'duration': 6.004}, {'end': 17157.532, 'text': "And then let's set up our button.", 'start': 17155.971, 'duration': 1.561}, {'end': 17161.314, 'text': "So right next to the logo, we're going to go with button.", 'start': 17157.892, 'duration': 3.422}], 'summary': 'Using img tag for logo, setting up button next to logo.', 'duration': 27.717, 'max_score': 17133.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo17133597.jpg'}, {'end': 17316.43, 'src': 'embed', 'start': 17260.979, 'weight': 2, 'content': [{'end': 17265.082, 'text': "Next one is going to be about when we've got contact.", 'start': 17260.979, 'duration': 4.103}, {'end': 17268.125, 'text': 'And then the last one will be products.', 'start': 17265.743, 'duration': 2.382}, {'end': 17270.141, 'text': 'products like so.', 'start': 17268.82, 'duration': 1.321}, {'end': 17273.502, 'text': 'So we save it, we should see our links.', 'start': 17270.681, 'duration': 2.821}, {'end': 17278.824, 'text': 'And then last thing we need to work on is the social media icons.', 'start': 17273.742, 'duration': 5.082}, {'end': 17283.146, 'text': 'So we go with list item, we have a link here.', 'start': 17279.324, 'duration': 3.822}, {'end': 17291.549, 'text': 'And this one will actually have some kind of URL, because you need to think of these ones as links around our project.', 'start': 17283.806, 'duration': 7.743}, {'end': 17295.251, 'text': 'So from homepage to about to contact, to product.', 'start': 17292.27, 'duration': 2.981}, {'end': 17305.6, 'text': 'And then, unlike the links that navigate around our project when we talk about social media links, of course they navigate somewhere externally.', 'start': 17295.951, 'duration': 9.649}, {'end': 17312.427, 'text': 'So they go to that social media platform, and more specifically, to some kind of specific account.', 'start': 17306.121, 'duration': 6.306}, {'end': 17316.43, 'text': "That's why in here, we're not going to add the hashtag.", 'start': 17312.967, 'duration': 3.463}], 'summary': 'Transcript discusses adding links for homepage, about, contact, and products, as well as social media icons.', 'duration': 55.451, 'max_score': 17260.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo17260979.jpg'}], 'start': 16850.153, 'title': 'React hooks and responsive navigation', 'summary': 'Discusses the use of use state and use ref hooks in react, focusing on building a project relying on these principles, then covers building a responsive navigation bar addressing layout changes, use of react icons, react router, and dynamic links with a data-driven approach for increased scalability.', 'chapters': [{'end': 17111.082, 'start': 16850.153, 'title': 'Use state and use ref hooks in react', 'summary': 'Discusses the use of the use state and use ref hooks in react, including the setup process, rendering a navbar, and working on a basic straightforward return for the navbar component, focusing on building a project that relies heavily on covered principles.', 'duration': 260.929, 'highlights': ['The chapter discusses the use of the use state and use ref hooks in React, including the setup process, rendering a navbar, and working on a basic straightforward return for the navbar component, focusing on building a project that relies heavily on covered principles.', 'The project involves setting up the use state instead of an empty array and invoking get local storage, resulting in default empty array storage.', 'The project also covers building a navbar that adapts to screen size, allowing toggling of links and emphasizes the importance of the project in understanding principles for more complex projects.', 'The process involves navigating to the app.js file, rendering the navbar component, and starting with a basic straightforward return using divs and classes for the nav header, links container, and social icons.']}, {'end': 17436.524, 'start': 17111.583, 'title': 'Building responsive navigation', 'summary': 'Covers building a responsive navigation bar with a logo, toggle button, links, and social media icons, addressing the changes in layout for small and big screens, and the use of react icons and react router for navigation.', 'duration': 324.941, 'highlights': ['The chapter explains the process of setting up a responsive navigation bar with a logo, toggle button, and links, addressing the changes in layout for small and big screens, and the use of react icons and react router for navigation.', 'It demonstrates the use of HTML elements such as IMG, button, list, and link to construct the navigation bar, with specific classes and class names for styling and functionality.', 'The tutorial discusses the temporary use of placeholder links (hashtags) for the project before integrating react router, and the future incorporation of react router DOM links for navigation within the react applications.']}, {'end': 17989.058, 'start': 17437.005, 'title': 'Dynamic links and icons', 'summary': 'Discusses the implementation of dynamic links and icons using a data-driven approach for increased scalability and ease of maintenance, emphasizing the benefits of centralizing data and the use of iteration to achieve consistent updates across multiple instances.', 'duration': 552.053, 'highlights': ['The chapter emphasizes the problem of hard coding values for links and icons, highlighting the need for a more scalable and maintainable approach using data-driven solutions.', 'The speaker introduces the concept of centralizing data in one place to ensure that changes to links or icons automatically reflect across all instances, promoting ease of maintenance and scalability.', 'The implementation of iteration over the data arrays to dynamically generate links and icons is demonstrated, showcasing the practical application of centralizing data for consistent updates across multiple components.']}], 'duration': 1138.905, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo16850153.jpg', 'highlights': ['The chapter discusses the use of the use state and use ref hooks in React, including the setup process and rendering a navbar.', 'The project involves setting up the use state instead of an empty array and invoking get local storage, resulting in default empty array storage.', 'The chapter explains the process of setting up a responsive navigation bar with a logo, toggle button, and links, addressing the changes in layout for small and big screens.', 'The chapter emphasizes the problem of hard coding values for links and icons, highlighting the need for a more scalable and maintainable approach using data-driven solutions.', 'The project also covers building a navbar that adapts to screen size, allowing toggling of links and emphasizes the importance of the project in understanding principles for more complex projects.', 'The implementation of iteration over the data arrays to dynamically generate links and icons is demonstrated, showcasing the practical application of centralizing data for consistent updates across multiple components.']}, {'end': 19810.828, 'segs': [{'end': 18092.031, 'src': 'embed', 'start': 18065.208, 'weight': 0, 'content': [{'end': 18070.15, 'text': "So I'm going to go with cons and then show links, whatever name you'd want.", 'start': 18065.208, 'duration': 4.942}, {'end': 18071.27, 'text': 'set show links.', 'start': 18070.15, 'duration': 1.12}, {'end': 18077.713, 'text': 'set show links is equal to a use state, not use effects or use state.', 'start': 18071.27, 'duration': 6.443}, {'end': 18080.534, 'text': 'And by default, I would want to hide them.', 'start': 18078.253, 'duration': 2.281}, {'end': 18085.626, 'text': 'And then of course, once I have my state value, I can just navigate to my button.', 'start': 18080.882, 'duration': 4.744}, {'end': 18092.031, 'text': "And I'll say on click, I'll pass on my online one.", 'start': 18086.406, 'duration': 5.625}], 'summary': 'Using usestate to set show links to be initially hidden.', 'duration': 26.823, 'max_score': 18065.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo18065208.jpg'}, {'end': 18169.122, 'src': 'embed', 'start': 18140.448, 'weight': 3, 'content': [{'end': 18141.788, 'text': "Let's place it inside.", 'start': 18140.448, 'duration': 1.34}, {'end': 18143.109, 'text': 'And there it is.', 'start': 18141.808, 'duration': 1.301}, {'end': 18144.69, 'text': "Now of course, by default, they're hidden.", 'start': 18143.349, 'duration': 1.341}, {'end': 18146.65, 'text': 'Once we click, we can see the links.', 'start': 18144.93, 'duration': 1.72}, {'end': 18149.772, 'text': 'And technically, this approach works.', 'start': 18147.531, 'duration': 2.241}, {'end': 18157.475, 'text': "But the problem is, if we check the final project, notice how we're doing this smoothly.", 'start': 18150.212, 'duration': 7.263}, {'end': 18159.896, 'text': 'So this happens over time.', 'start': 18158.335, 'duration': 1.561}, {'end': 18163.438, 'text': "And here, yes, we're toggling nicely, everything is beautiful.", 'start': 18160.476, 'duration': 2.962}, {'end': 18169.122, 'text': "But the changes are happening instantly, because essentially, we're mounting the component and then on mounting.", 'start': 18163.919, 'duration': 5.203}], 'summary': 'Toggling links smoothly but changes happen instantly on mounting.', 'duration': 28.674, 'max_score': 18140.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo18140448.jpg'}, {'end': 18465.402, 'src': 'embed', 'start': 18433.462, 'weight': 4, 'content': [{'end': 18436.164, 'text': 'So I still want the change over time.', 'start': 18433.462, 'duration': 2.702}, {'end': 18444.953, 'text': 'But I also would want to somehow check how many links I have, and then create the height for the container, depending on that.', 'start': 18436.525, 'duration': 8.428}, {'end': 18457.519, 'text': 'Okay, so we can see the problem with a class setup where essentially I would need to guess how many links I have and then adjust my height depending on that.', 'start': 18445.794, 'duration': 11.725}, {'end': 18465.402, 'text': "And of course, I would want to make it dynamic, where depending on my links, I'll have the height for my container.", 'start': 18457.539, 'duration': 7.863}], 'summary': 'Need to dynamically adjust container height based on link count.', 'duration': 31.94, 'max_score': 18433.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo18433462.jpg'}, {'end': 19663.551, 'src': 'embed', 'start': 19635.493, 'weight': 2, 'content': [{'end': 19639.356, 'text': 'So in here, again, we could set up some state values, we can come up with functions.', 'start': 19635.493, 'duration': 3.863}, {'end': 19645.96, 'text': 'And then inside of those functions, we will toggle, then we would need to pass the open function down to the home.', 'start': 19640.036, 'duration': 5.924}, {'end': 19650.584, 'text': 'Because of course, this button on this button would need those functions.', 'start': 19646.621, 'duration': 3.963}, {'end': 19657.788, 'text': "online in the model and in the sidebar, where we'd want to close them and where we would want to check for those state values.", 'start': 19651.124, 'duration': 6.664}, {'end': 19663.551, 'text': 'Well, from the app js, we would pass down both things to the model and a sidebar.', 'start': 19657.848, 'duration': 5.703}], 'summary': 'Setting up state values, functions, and passing them down to components.', 'duration': 28.058, 'max_score': 19635.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo19635493.jpg'}, {'end': 19792.398, 'src': 'embed', 'start': 19771.426, 'weight': 1, 'content': [{'end': 19780.471, 'text': "so if we won't say yeah, get me the children prop and then return children inside of our component, then of course we won't be able to see anything.", 'start': 19771.426, 'duration': 9.045}, {'end': 19782.132, 'text': 'I might show you that at the very end.', 'start': 19780.711, 'duration': 1.421}, {'end': 19789.756, 'text': 'And now once I have my component from this component, what I would want is to return app context.', 'start': 19783.173, 'duration': 6.583}, {'end': 19792.398, 'text': 'And then remember, the name was provider.', 'start': 19789.836, 'duration': 2.562}], 'summary': 'Demonstrating how to use the children prop and return app context in the component.', 'duration': 20.972, 'max_score': 19771.426, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo19771426.jpg'}], 'start': 17989.599, 'title': 'Setting up app features in react', 'summary': 'Covers the importance of data setup, toggling in the app for user experience, dynamic link animation in react including toggle approach, dynamic height adjustments, setting up nav toggle with useref hook, and setting up sidebar and modals addressing prop drilling and context usage.', 'chapters': [{'end': 18039.64, 'start': 17989.599, 'title': 'Data setup and toggle in app', 'summary': 'Covers the importance of setting up data separately for long-term benefits, along with demonstrating the process of toggling in the app for a better user experience.', 'duration': 50.041, 'highlights': ['Setting up data separately ensures that any changes made will automatically update all instances, providing long-term benefits.', 'The process of toggling in the app is demonstrated to improve user experience by cleaning up unnecessary elements.', 'Navigating to a bigger screen is necessary for effective display of icons and content.']}, {'end': 18533.456, 'start': 18040.28, 'title': 'Dynamic link animation in react', 'summary': 'Covers setting up dynamic link animation in react, starting with a simple toggle approach using state values, then addressing the need for smooth transitions and dynamic height adjustments based on the number of links, delving into css and use of useref hooks.', 'duration': 493.176, 'highlights': ['Setting up state values to show and hide links using useState hook, demonstrating the use of onClick event and conditional rendering to toggle the visibility of links.', 'Utilizing CSS to control link visibility, implementing dynamic height adjustments based on the number of links, and explaining the limitations of hard-coded values in the CSS for container height.', 'Introduction to useRef hooks for creating references to the container and links, and emphasizing the need for an enclosing container when working with useRef.']}, {'end': 19409.353, 'start': 18534.016, 'title': 'Setting up nav toggle with useref hook', 'summary': 'Discusses setting up the navigation toggle using the useref hook, where the process involves adjusting the height of the links container based on the number of links, ensuring the functionality works on different screen sizes, and explaining the necessity of an enclosing div for accessing the links.', 'duration': 875.337, 'highlights': ["The process involves adjusting the height of the links container based on the number of links, allowing the functionality to work on different screen sizes, ensuring that the height is set to zero when the 'show links' is not true, and manually updating the container's height by checking the links' height and adjusting the container's height accordingly.", 'The necessity of an enclosing div is explained, emphasizing the need for it to access the links inside and showcasing the impact of not having it, where accessing the height value of the links results in zero without the parent div.', 'The chapter also touches upon the development of a project using useContext and context API to build a sidebar and model with toggle functionality, demonstrating the addition of context to the entire application and the setup process for the components and structures of the project.']}, {'end': 19810.828, 'start': 19409.953, 'title': 'Setting up sidebar and modals', 'summary': 'Discusses setting up a sidebar with links and social icons, toggling the sidebar functionality, and addressing issues with prop drilling through components while considering the usage of context for state management.', 'duration': 400.875, 'highlights': ['Setting up a sidebar with links and social icons, including iterating over an array of links and social media icons to display them dynamically.', "Demonstrating the functionality to toggle the sidebar dynamically using a 'show sidebar' class, which can be hidden or added to display or hide the sidebar.", 'Addressing the issue of prop drilling and considering the usage of context for state management to avoid passing props through components unnecessarily.']}], 'duration': 1821.229, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo17989599.jpg', 'highlights': ['Setting up data separately ensures automatic updates for all instances.', 'Setting up state values to show and hide links using useState hook.', 'Demonstrating the functionality to toggle the sidebar dynamically.', 'Utilizing CSS to control link visibility and implementing dynamic height adjustments.', 'Introduction to useRef hooks for creating references to the container and links.']}, {'end': 21629.845, 'segs': [{'end': 19837.888, 'src': 'embed', 'start': 19811.829, 'weight': 0, 'content': [{'end': 19821.496, 'text': "But then, from this component, I would want to export to our one export app context, because use context, we'll be looking for that.", 'start': 19811.829, 'duration': 9.667}, {'end': 19823.277, 'text': 'And then also app provider.', 'start': 19821.956, 'duration': 1.321}, {'end': 19825.099, 'text': "Now I'll show you two ways.", 'start': 19823.798, 'duration': 1.301}, {'end': 19830.462, 'text': 'One is how we can use use context in any of the components.', 'start': 19825.939, 'duration': 4.523}, {'end': 19836.207, 'text': 'And also the second one, how we can set up custom hook that right away returns it.', 'start': 19831.003, 'duration': 5.204}, {'end': 19837.888, 'text': "And you'll see what I mean by second.", 'start': 19836.547, 'duration': 1.341}], 'summary': 'Demonstrating two ways to export to app context and use custom hook.', 'duration': 26.059, 'max_score': 19811.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo19811829.jpg'}, {'end': 19963.876, 'src': 'embed', 'start': 19935.156, 'weight': 1, 'content': [{'end': 19940.88, 'text': "So let's say here custom hook over here, let's save the context just for now.", 'start': 19935.156, 'duration': 5.724}, {'end': 19945.284, 'text': "I'll demonstrate that in the home j s.", 'start': 19942.101, 'duration': 3.183}, {'end': 19957.472, 'text': "So in the home j s, I'm going to go for import, then I would want to import that app context, context, it is coming from the context, like so.", 'start': 19945.284, 'duration': 12.188}, {'end': 19960.314, 'text': 'And then I also would need my use context.', 'start': 19958.192, 'duration': 2.122}, {'end': 19963.876, 'text': 'So we go here with use context.', 'start': 19960.814, 'duration': 3.062}], 'summary': 'Demonstrating use of custom hook and context in home.js.', 'duration': 28.72, 'max_score': 19935.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo19935156.jpg'}, {'end': 20214.651, 'src': 'embed', 'start': 20184.88, 'weight': 3, 'content': [{'end': 20186.181, 'text': 'I should be in good shape.', 'start': 20184.88, 'duration': 1.301}, {'end': 20189.445, 'text': 'So as always, you have few options.', 'start': 20186.741, 'duration': 2.704}, {'end': 20197.035, 'text': "And in my case, I'm gonna stick with that use global context, if you want, of course, you can go this route as well.", 'start': 20190.066, 'duration': 6.969}, {'end': 20203.944, 'text': 'I just think that we can save on few imports along the way if we use this custom hook route.', 'start': 20198.176, 'duration': 5.768}, {'end': 20204.924, 'text': 'Nicely done.', 'start': 20204.424, 'duration': 0.5}, {'end': 20214.651, 'text': "And once we understand how we can share our context throughout our app, I think it's time to tackle the big beast, where, of course,", 'start': 20205.225, 'duration': 9.426}], 'summary': 'Using global context can save on imports, enabling sharing throughout the app.', 'duration': 29.771, 'max_score': 20184.88, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo20184880.jpg'}, {'end': 20359.542, 'src': 'embed', 'start': 20310.394, 'weight': 2, 'content': [{'end': 20317.898, 'text': "And you can probably already guess that if we have a function that closes it, the only thing we're doing is calling it differently.", 'start': 20310.394, 'duration': 7.504}, {'end': 20319.519, 'text': 'So in this case, close sidebar.', 'start': 20318.198, 'duration': 1.321}, {'end': 20321.6, 'text': 'And then of course, we pass in the false.', 'start': 20319.979, 'duration': 1.621}, {'end': 20326.609, 'text': 'So notice, this is not toggling functionality, like we did in previous projects.', 'start': 20322.108, 'duration': 4.501}, {'end': 20332.511, 'text': 'So, in this case, since I have two separate buttons, one inside the sidebar and then one inside of the home,', 'start': 20326.989, 'duration': 5.522}, {'end': 20335.532, 'text': 'of course I need to have two different functionalities.', 'start': 20332.511, 'duration': 3.021}, {'end': 20341.634, 'text': "And I'll copy and paste, we just need to change this around where it's going to be open and close model.", 'start': 20336.252, 'duration': 5.382}, {'end': 20345.976, 'text': "So again, two cursors, and we're looking for modal here.", 'start': 20342.134, 'duration': 3.842}, {'end': 20353.279, 'text': 'And as far as the function, same spiel, but it is going to be a model like this.', 'start': 20345.996, 'duration': 7.283}, {'end': 20359.542, 'text': 'And now what I want in the value instead of Hello, remember, we could pass whatever we want.', 'start': 20354.059, 'duration': 5.483}], 'summary': 'Demonstrating separate functionalities for opening and closing sidebar and modal.', 'duration': 49.148, 'max_score': 20310.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo20310394.jpg'}, {'end': 21369.769, 'src': 'heatmap', 'start': 21034.505, 'weight': 0.754, 'content': [{'end': 21038.447, 'text': 'Now that is equal to my react create context.', 'start': 21034.505, 'duration': 3.942}, {'end': 21043.508, 'text': "we go with create context, then we'll create our provider.", 'start': 21039.707, 'duration': 3.801}, {'end': 21046.79, 'text': 'So const, and then app provider.', 'start': 21043.628, 'duration': 3.162}, {'end': 21049.831, 'text': 'Now that is equal course to my function.', 'start': 21047.25, 'duration': 2.581}, {'end': 21056.593, 'text': "So I'll be setting up my arrow function since I'll wrap my whole app in this app provider, I'm going to go with children.", 'start': 21049.851, 'duration': 6.742}, {'end': 21064.237, 'text': "And I'll right away return from this component, the app context, and then dot provider.", 'start': 21057.053, 'duration': 7.184}, {'end': 21066.098, 'text': "That's what I'm looking for here.", 'start': 21064.897, 'duration': 1.201}, {'end': 21068.339, 'text': 'So dot and then provider.', 'start': 21066.538, 'duration': 1.801}, {'end': 21073.221, 'text': 'And then of course, in here, I would want to render children like so.', 'start': 21068.799, 'duration': 4.422}, {'end': 21078.203, 'text': "And then as far as the value, well, let's set up some state values right away as well.", 'start': 21073.761, 'duration': 4.442}, {'end': 21079.664, 'text': "So we're going to go with const.", 'start': 21078.604, 'duration': 1.06}, {'end': 21083.726, 'text': "And that is sidebar open, that's the one that we're looking for.", 'start': 21079.724, 'duration': 4.002}, {'end': 21088.249, 'text': 'And then set is side bar, and then open.', 'start': 21083.846, 'duration': 4.403}, {'end': 21090.291, 'text': 'Now we want to use use state.', 'start': 21088.889, 'duration': 1.402}, {'end': 21093.215, 'text': "And by default, let's set it to true.", 'start': 21090.952, 'duration': 2.263}, {'end': 21096.88, 'text': "Because we'll use these values when we're setting up the structure.", 'start': 21093.916, 'duration': 2.964}, {'end': 21106.833, 'text': 'So we might as well set it up in a way where we can see what is our model, or maybe, more precisely, what is our sub menu? And what is the sidebar?', 'start': 21097.38, 'duration': 9.453}, {'end': 21108.875, 'text': "Now I'll set up two cursors.", 'start': 21107.413, 'duration': 1.462}, {'end': 21114.841, 'text': "And we'll switch this around to a model again, by default, let's set it up as true.", 'start': 21109.816, 'duration': 5.025}, {'end': 21118.165, 'text': "And then there's going to be two more state values.", 'start': 21115.542, 'duration': 2.623}, {'end': 21120.467, 'text': "And there's going to be four functions.", 'start': 21119.066, 'duration': 1.401}, {'end': 21125.232, 'text': 'Now one function is going to be more complicated, that is going to be for the sub menu.', 'start': 21121.148, 'duration': 4.084}, {'end': 21128.435, 'text': "Because again, there's going to be more moving pieces.", 'start': 21125.632, 'duration': 2.803}, {'end': 21135.099, 'text': "But for the opening, closing sidebar and closing sub menu it's going to be as straightforward as it gets.", 'start': 21129.036, 'duration': 6.063}, {'end': 21138.741, 'text': "we're going to go with open and then sidebar.", 'start': 21135.099, 'duration': 3.642}, {'end': 21141.362, 'text': 'And of course, it is my arrow function.', 'start': 21139.481, 'duration': 1.881}, {'end': 21147.424, 'text': 'And the only thing that I would want to do is set is set is set bar open.', 'start': 21141.882, 'duration': 5.542}, {'end': 21150.045, 'text': 'And I would want to set it to true, like so.', 'start': 21148.124, 'duration': 1.921}, {'end': 21151.366, 'text': 'So set it true.', 'start': 21150.465, 'duration': 0.901}, {'end': 21153.246, 'text': 'So now I can copy and paste.', 'start': 21151.846, 'duration': 1.4}, {'end': 21155.347, 'text': 'And of course, now I just want to close it.', 'start': 21153.727, 'duration': 1.62}, {'end': 21156.988, 'text': "So I'm going to go with close.", 'start': 21155.767, 'duration': 1.221}, {'end': 21159.229, 'text': 'And then false.', 'start': 21158.268, 'duration': 0.961}, {'end': 21161.931, 'text': 'false over here.', 'start': 21159.989, 'duration': 1.942}, {'end': 21165.133, 'text': 'Can we just need to copy and paste these values.', 'start': 21162.311, 'duration': 2.822}, {'end': 21171.298, 'text': "Everywhere we have the sidebar, we're just gonna switch this around to a model.", 'start': 21165.333, 'duration': 5.965}, {'end': 21180.766, 'text': 'Now, like I said, eventually, yes, the opening of the model is going to have more functionality, but for now, can just leave it the way it is.', 'start': 21171.819, 'duration': 8.947}, {'end': 21185.351, 'text': "And then in here where we have the value of beautiful, let's just set up our object.", 'start': 21181.326, 'duration': 4.025}, {'end': 21199.228, 'text': 'And then we have a bunch of state values is modal open is sidebar open, then open model, open sidebar, close model, of course, and then close sidebar.', 'start': 21185.531, 'duration': 13.697}, {'end': 21203.832, 'text': 'Okay, that should do it.', 'start': 21199.808, 'duration': 4.024}, {'end': 21207.975, 'text': "You know what, why don't we call this one actually close.", 'start': 21203.892, 'duration': 4.083}, {'end': 21210.837, 'text': "And I'm going to go with sidebar.", 'start': 21208.936, 'duration': 1.901}, {'end': 21218.463, 'text': "And I'll rename the model to be equal to the sub menu, because I think she's gonna make a bit more sense.", 'start': 21211.498, 'duration': 6.965}, {'end': 21221.686, 'text': 'So my apologies, we go to model.', 'start': 21219.164, 'duration': 2.522}, {'end': 21227.231, 'text': "And everywhere where we have the model, let's rename this to be a sub menu.", 'start': 21222.267, 'duration': 4.964}, {'end': 21230.193, 'text': "So let's delete sub menu.", 'start': 21227.731, 'duration': 2.462}, {'end': 21232.535, 'text': 'And we want to do it over here as well.', 'start': 21231.034, 'duration': 1.501}, {'end': 21242.364, 'text': "So I have not model, I want model, I want open model, close model, it's going to be a sub menu.", 'start': 21232.715, 'duration': 9.649}, {'end': 21244.345, 'text': "Let's just leave it the way it is.", 'start': 21243.064, 'duration': 1.281}, {'end': 21248.569, 'text': 'Think sidebar and sub menu is going to be a good start.', 'start': 21244.966, 'duration': 3.603}, {'end': 21250.687, 'text': 'my apologies, little bit of detour.', 'start': 21248.786, 'duration': 1.901}, {'end': 21252.608, 'text': "But I think we're in good shape.", 'start': 21251.327, 'duration': 1.281}, {'end': 21257.13, 'text': "And then right away, I'd want to set up my custom hook.", 'start': 21253.128, 'duration': 4.002}, {'end': 21264.374, 'text': "So we're going to go with export, then const, and then use again, I'll call this global context.", 'start': 21258.391, 'duration': 5.983}, {'end': 21266.735, 'text': 'And that is equal to my function.', 'start': 21265.074, 'duration': 1.661}, {'end': 21274.039, 'text': "And I would want to return, of course, the use, and then context, and I'll pass in my app context.", 'start': 21266.755, 'duration': 7.284}, {'end': 21279.782, 'text': 'And then eventually, of course, I would also want to export the provider.', 'start': 21274.539, 'duration': 5.243}, {'end': 21287.086, 'text': 'So I could either set it up all the way in the bottom or just so we can change this around a little bit.', 'start': 21280.382, 'duration': 6.704}, {'end': 21289.827, 'text': "I'm going to go with export constant provider.", 'start': 21287.586, 'duration': 2.241}, {'end': 21296.11, 'text': "Awesome Once we have access, and by the way, I didn't change the model.", 'start': 21290.247, 'duration': 5.863}, {'end': 21297.671, 'text': 'My apologies.', 'start': 21296.931, 'duration': 0.74}, {'end': 21298.551, 'text': "That's what happens.", 'start': 21297.731, 'duration': 0.82}, {'end': 21306.073, 'text': 'If you change your name at the very end, sub menu like so, and let me just double check sub menu sidebar.', 'start': 21299.371, 'duration': 6.702}, {'end': 21310.514, 'text': 'sub menu open sidebar close sub menu close sidebar.', 'start': 21306.073, 'duration': 4.441}, {'end': 21311.734, 'text': 'that should do it.', 'start': 21310.514, 'duration': 1.22}, {'end': 21315.655, 'text': 'And of course, we need that index in the index j s.', 'start': 21312.234, 'duration': 3.421}, {'end': 21319.878, 'text': "So we're looking here for the app provider.", 'start': 21316.355, 'duration': 3.523}, {'end': 21322.18, 'text': "And I'm sorry, I just said we need that index and index.", 'start': 21320.038, 'duration': 2.142}, {'end': 21327.143, 'text': 'But I meant we need that app provider that is coming from the context.', 'start': 21322.62, 'duration': 4.523}, {'end': 21334.389, 'text': 'So from the file name is context, Jess, we would want to wrap our whole app again.', 'start': 21327.404, 'duration': 6.985}, {'end': 21338.132, 'text': "So we're just gonna go app provider, we wrap the app.", 'start': 21334.909, 'duration': 3.223}, {'end': 21340.794, 'text': "And then let me just see what I'm getting back.", 'start': 21339.032, 'duration': 1.762}, {'end': 21343.615, 'text': 'So I just wanted to set out whether my functionality works.', 'start': 21341.334, 'duration': 2.281}, {'end': 21347.677, 'text': "And I think I'm going to do that.", 'start': 21344.616, 'duration': 3.061}, {'end': 21348.978, 'text': "I don't know in a hero.", 'start': 21347.697, 'duration': 1.281}, {'end': 21351.299, 'text': "And that's an awesome place.", 'start': 21349.939, 'duration': 1.36}, {'end': 21353.06, 'text': "So we're going to go with import.", 'start': 21351.9, 'duration': 1.16}, {'end': 21356.082, 'text': 'Again, the name for the hook was used global.', 'start': 21353.52, 'duration': 2.562}, {'end': 21361.184, 'text': 'And then context not is coming from and then take a look at the context.', 'start': 21356.762, 'duration': 4.422}, {'end': 21363.806, 'text': 'And I would want to console log my data.', 'start': 21362.085, 'duration': 1.721}, {'end': 21369.769, 'text': "So I'll set up my variable, I'll say data, and that is equal to use global context, I will invoke it.", 'start': 21364.446, 'duration': 5.323}], 'summary': 'Setting up a global context with state values and functions for sidebar and sub menu.', 'duration': 335.264, 'max_score': 21034.505, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo21034505.jpg'}], 'start': 19811.829, 'title': 'Setting up context and managing components in react', 'summary': 'Covers setting up app context and custom hooks, managing sidebar and modal functionality, setting up global context for stripe submenus, app global context setup, and context setup and navbar configuration.', 'chapters': [{'end': 20255.939, 'start': 19811.829, 'title': 'Setting up app context and custom hooks', 'summary': 'Discusses setting up app context to share values throughout the app, using usecontext in components and creating a custom hook for global context access. it also emphasizes the importance of displaying children in the wrapping component and mentions the intention to set up functionality in the app provider by the end of the video.', 'duration': 444.11, 'highlights': ['Setting up app context to share values throughout the app, including accessing values in components using useContext and the ability to display children in the wrapping component.', 'Creating a custom hook for global context access, which reduces the need for multiple imports and allows access to the same context globally.', 'Intention to set up functionality in the app provider by the end of the video, including state values for the model and sidebar.']}, {'end': 20676.194, 'start': 20257.06, 'title': 'Managing sidebar and modal in react', 'summary': 'Explains how to manage the sidebar and modal functionality in react, including setting state values, creating functions to open and close the sidebar and modal, and implementing the functionality with onclick events and context values.', 'duration': 419.134, 'highlights': ['The chapter covers setting state values for sidebar and modal, including using useState to set the initial value of false.', 'Functions for opening and closing the sidebar and modal are created, with the open sidebar function setting isSidebarOpen to true and the close sidebar function setting it to false.', 'The implementation of opening and closing the sidebar and modal using onClick events and context values is detailed, including the use of ternary operators and CSS classes to achieve the desired functionality.']}, {'end': 20924.438, 'start': 20676.694, 'title': 'Setting up global context for stripe sub menus', 'summary': 'Introduces setting up global context for a project to create stripe sub menus, explaining the inspiration behind it and the expected complexities, while emphasizing the need for extra studying and preparation, as well as providing initial steps for the project setup.', 'duration': 247.744, 'highlights': ['The project involves creating stripe sub menus, inspired by the new version of the stripe site, which replaces vertical links with more functional and visually appealing menus.', "Emphasizes the need for extra studying and preparation due to the project's complexity, covering familiar and new concepts, and the expectation of a 'bumpy ride'.", "Provides initial steps for the project setup, including navigating to the project folder, understanding the interchangeable use of 'menu' and 'sub menus', and conducting npm install and npm start in the setup folder."]}, {'end': 21185.351, 'start': 20924.838, 'title': 'Setting up global context for app', 'summary': 'Discusses setting up the global context for an app, including creating a provider, setting state values, and functions for opening and closing sidebar and submenu, as well as the purpose of using the same url for every link.', 'duration': 260.513, 'highlights': ['The chapter discusses setting up the global context for an app, including creating a provider, setting state values, and functions for opening and closing sidebar and submenu.', 'The purpose of using the same URL for every link is explained, with the reasoning that the URL for each sublink would be different, resulting in a more efficient approach.', 'The chapter also covers the deliberate addition of a react fragment for rendering multiple components, including navbar, sidebar, hero, and submenu.']}, {'end': 21629.845, 'start': 21185.531, 'title': 'Context setup and navbar configuration', 'summary': 'Focuses on setting up context for global state management and configuring the navbar, including renaming states and functions, setting up context provider, and configuring the navbar with buttons and logo.', 'duration': 444.314, 'highlights': ["The chapter begins with renaming states and functions, such as changing 'model' to 'sub menu' and setting up a custom hook for global context.", 'The process involves setting up the context provider and configuring the navbar with buttons, functions for opening and closing sidebar and submenu, and adding a logo and toggle button.', 'The configuration also includes making the navbar transparent and ensuring its visibility by rendering a hero component alongside it.']}], 'duration': 1818.016, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo19811829.jpg', 'highlights': ['Setting up app context to share values throughout the app using useContext and displaying children.', 'Creating a custom hook for global context access, reducing the need for multiple imports.', 'Setting state values for sidebar and modal using useState to set the initial value of false.', 'Creating stripe sub menus inspired by the new version of the stripe site.', 'Discussing setting up global context for an app, including creating a provider and functions for opening and closing sidebar and submenu.', 'Configuring the navbar with buttons, functions for opening and closing sidebar and submenu, and adding a logo and toggle button.']}, {'end': 23776.32, 'segs': [{'end': 21763.52, 'src': 'embed', 'start': 21734.252, 'weight': 3, 'content': [{'end': 21737.512, 'text': "So we'll go with button, then let's add a class name.", 'start': 21734.252, 'duration': 3.26}, {'end': 21739.073, 'text': "And we're going to go with btn.", 'start': 21738.133, 'duration': 0.94}, {'end': 21743.534, 'text': 'sign in hyphen BTN.', 'start': 21740.893, 'duration': 2.641}, {'end': 21748.956, 'text': "And then inside of this button, let's just say sign in, we're going to save it.", 'start': 21744.054, 'duration': 4.902}, {'end': 21750.396, 'text': "And I'm almost done.", 'start': 21749.636, 'duration': 0.76}, {'end': 21755.998, 'text': 'But I just need to fix one bug, where I placed all my buttons in the same link.', 'start': 21750.436, 'duration': 5.562}, {'end': 21759.999, 'text': 'That is of course not the setup that I was looking for.', 'start': 21756.978, 'duration': 3.021}, {'end': 21763.52, 'text': "So we'll go here with Li and then copy and paste.", 'start': 21760.519, 'duration': 3.001}], 'summary': "Adding a class name 'btn' to a button and fixing a bug with button placement.", 'duration': 29.268, 'max_score': 21734.252, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo21734252.jpg'}, {'end': 21873.684, 'src': 'embed', 'start': 21844.82, 'weight': 4, 'content': [{'end': 21854.87, 'text': "then of course we just need to set up the return where we're going to go with a section here section it will have a class of hero.", 'start': 21844.82, 'duration': 10.05}, {'end': 21859.634, 'text': 'So class name, now is equal to a hero.', 'start': 21855.49, 'duration': 4.144}, {'end': 21867.402, 'text': "And then inside of the section, let's say, we're gonna have a div with a class of hero center.", 'start': 21860.315, 'duration': 7.087}, {'end': 21873.684, 'text': 'And then also an article with hero info, and then hero images.', 'start': 21868.162, 'duration': 5.522}], 'summary': 'Setting up the return with a section class of hero, div class of hero center, and an article with hero info and images.', 'duration': 28.864, 'max_score': 21844.82, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo21844820.jpg'}, {'end': 22557.811, 'src': 'embed', 'start': 22530.156, 'weight': 1, 'content': [{'end': 22539.54, 'text': 'And then inside, we can just write something because eventually, yes, we will iterate over the data coming from our data jazz.', 'start': 22530.156, 'duration': 9.384}, {'end': 22544.163, 'text': 'But for time being, we just need to deal with this sub menu.', 'start': 22540.041, 'duration': 4.122}, {'end': 22546.264, 'text': "That's the one that we're interested.", 'start': 22544.663, 'duration': 1.601}, {'end': 22552.948, 'text': 'And of course, what we notice is that it is displayed, beautiful.', 'start': 22546.804, 'duration': 6.144}, {'end': 22557.811, 'text': 'If we want to change that value in the global context, then of course, we can do it.', 'start': 22553.268, 'duration': 4.543}], 'summary': 'Iterating over data coming from data jazz to deal with sub menu, which is displayed beautifully.', 'duration': 27.655, 'max_score': 22530.156, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo22530156.jpg'}, {'end': 22853.374, 'src': 'embed', 'start': 22801.807, 'weight': 0, 'content': [{'end': 22809.228, 'text': "So if we go with E, and then target, you'll notice that in the console, by the way, of course, we need to do that in the setup.", 'start': 22801.807, 'duration': 7.421}, {'end': 22811.168, 'text': "Otherwise, it won't make sense.", 'start': 22809.848, 'duration': 1.32}, {'end': 22813.449, 'text': 'This will point to a button.', 'start': 22811.848, 'duration': 1.601}, {'end': 22817.529, 'text': "So as I'm hovering, notice, the value is changing.", 'start': 22813.909, 'duration': 3.62}, {'end': 22820.39, 'text': 'Now sub menu, of course, stays here the way it is.', 'start': 22817.969, 'duration': 2.421}, {'end': 22826.551, 'text': 'But every time my mouse moves on to a button, of course, I can see a different value.', 'start': 22820.89, 'duration': 5.661}, {'end': 22828.973, 'text': "And of course, this is the value that I'm looking for.", 'start': 22827.091, 'duration': 1.882}, {'end': 22831.836, 'text': 'Because from here, I would want to grab the text.', 'start': 22829.453, 'duration': 2.383}, {'end': 22836.14, 'text': 'And I would want to grab also the coordinates for the button.', 'start': 22832.556, 'duration': 3.584}, {'end': 22843.867, 'text': "And then, once I've got those, then of course I'll dynamically change to values in the sub menu,", 'start': 22836.74, 'duration': 7.127}, {'end': 22848.112, 'text': "I'll change which links I'm displaying and also the location.", 'start': 22843.867, 'duration': 4.245}, {'end': 22853.374, 'text': 'So what I would want here is the first setup text.', 'start': 22848.732, 'duration': 4.642}], 'summary': 'Using e and target, dynamically change sub-menu values and display links based on button hover.', 'duration': 51.567, 'max_score': 22801.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo22801807.jpg'}], 'start': 21629.845, 'title': 'Setting up sidebar, navigation, sub menus, and event handling', 'summary': 'Discusses setting up sidebar structure with buttons, navigation bar, sub menus, and dynamic sub menu in react, involving global context, event handling, inline css, and addressing display issues, with default sub menu columns set to two.', 'chapters': [{'end': 21792.076, 'start': 21629.845, 'title': 'Setting up sidebar and buttons', 'summary': 'Discusses setting up the sidebar structure with buttons instead of links, ensuring the button values match the text bars, and addressing the issue of buttons not appearing on the screen.', 'duration': 162.231, 'highlights': ['Setting up the sidebar structure with buttons instead of links', 'Ensuring the button values match the text bars', 'Addressing the issue of buttons not appearing on the screen']}, {'end': 22241.058, 'start': 21792.196, 'title': 'Setting up navigation and components', 'summary': 'Covers setting up a navigation bar, hero component, sidebar, and sub menu, involving the use of global context, class names, and button functionalities with iterations and nested data.', 'duration': 448.862, 'highlights': ['Setting up navigation bar with header, links, and buttons, including sign-in button.', 'Setting up hero component with section, div, article, and images.', 'Implementing sidebar for small screens with close button and sublinks iteration over nested data.']}, {'end': 22588.907, 'start': 22241.898, 'title': 'Creating sub menus and sidebar', 'summary': 'Discusses creating sub menus and a sidebar for a website, using global context and mapping through arrays to display sub links and sub menu components while hovering over buttons.', 'duration': 347.009, 'highlights': ['Using global context to set default values and toggle sub menu display based on hovering over buttons', 'Mapping through arrays to display sub links for each page, pointing to their respective URLs and displaying icons and labels']}, {'end': 22853.374, 'start': 22589.268, 'title': 'Setting up dynamic sub menu', 'summary': 'Discusses setting up a dynamic sub menu by adding a function to display the sub menu upon mouseover of buttons, addressing issues of displaying only relevant links, adjusting width dynamically, and positioning the sub menu in the center of the button.', 'duration': 264.106, 'highlights': ["The function 'display sub menu' is created to handle the event of mouseover on buttons, and it will dynamically change the values in the sub menu to display relevant links and adjust position.", 'The issues addressed include displaying only relevant links belonging to the page, dynamically adjusting the width, and positioning the sub menu in the center of the button upon mouseover.', 'The need to retrieve the text and coordinates of the button upon mouseover in order to dynamically change the sub menu values for displaying relevant links and adjusting the location.']}, {'end': 23095.907, 'start': 22853.834, 'title': 'Javascript event handling', 'summary': 'Explains how to handle events in javascript, including obtaining the text inside a button, determining its location, and passing coordinates to open a submenu.', 'duration': 242.073, 'highlights': ['Obtaining the text inside a button and determining its location using JavaScript event handling.', 'Utilizing getBoundingClientRect to obtain button location coordinates and calculating the center and bottom positions.', 'Using state values and passing coordinates to open a submenu in JavaScript event handling.']}, {'end': 23776.32, 'start': 23096.708, 'title': 'Adding inline css for sub menu in react', 'summary': "Explains the process of adding inline css for a sub menu in react, including utilizing useeffect and useref hooks, dynamically changing the sub menu's position based on mouse movements, and adjusting the number of columns in the sub menu based on the number of links, with the default value set to two columns.", 'duration': 679.612, 'highlights': ["The process of adding inline CSS for a sub menu in React involves utilizing the useEffect hook to run code every time the location value changes, setting up a useRef to access the sub menu container, and dynamically changing the sub menu's position based on mouse movements, with the coordinates of the button being used to update the sub menu's location.", 'The chapter also covers the process of obtaining the correct page value from the button and displaying the corresponding links in the sub menu, using the useState hook to manage the page and links, and implementing the find method to match the page value from the button with the data to determine the correct page.', 'Furthermore, the chapter explains the process of iterating over the links and dynamically changing the amount of columns and the width of the sub menu based on the number of links, with the default value set to two columns and adjustments made using the useState hook and conditional logic.']}], 'duration': 2146.475, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo21629845.jpg', 'highlights': ['Using global context to set default values and toggle sub menu display based on hovering over buttons', "The function 'display sub menu' is created to handle the event of mouseover on buttons, and it will dynamically change the values in the sub menu to display relevant links and adjust position", "The process of adding inline CSS for a sub menu in React involves utilizing the useEffect hook to run code every time the location value changes, setting up a useRef to access the sub menu container, and dynamically changing the sub menu's position based on mouse movements, with the coordinates of the button being used to update the sub menu's location", 'Setting up navigation bar with header, links, and buttons, including sign-in button', 'The chapter also covers the process of obtaining the correct page value from the button and displaying the corresponding links in the sub menu, using the useState hook to manage the page and links, and implementing the find method to match the page value from the button with the data to determine the correct page']}, {'end': 24588.209, 'segs': [{'end': 23880.872, 'src': 'embed', 'start': 23850.933, 'weight': 5, 'content': [{'end': 23855.096, 'text': 'because at the moment, yeah, we hover over the buttons, and then we display them.', 'start': 23850.933, 'duration': 4.163}, {'end': 23859.258, 'text': 'But also at some point, of course, we will want to hide it as well.', 'start': 23855.656, 'duration': 3.602}, {'end': 23860.559, 'text': 'Not bad, not bad.', 'start': 23859.698, 'duration': 0.861}, {'end': 23861.8, 'text': "We're almost there.", 'start': 23860.599, 'duration': 1.201}, {'end': 23867.023, 'text': 'And as far as hiding the sub menu, I want to hide it in two cases.', 'start': 23862.26, 'duration': 4.763}, {'end': 23873.807, 'text': "when we hover over the hero, not when we're hovering over the sub menu, then of course, we were on display.", 'start': 23867.723, 'duration': 6.084}, {'end': 23880.872, 'text': "And also when we're hovering over the navbar, not including the buttons.", 'start': 23874.428, 'duration': 6.444}], 'summary': 'Development progress: hovering over buttons displays/hides them; sub menu hides when hovering over hero or navbar.', 'duration': 29.939, 'max_score': 23850.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo23850933.jpg'}, {'end': 24080.951, 'src': 'embed', 'start': 24048.383, 'weight': 3, 'content': [{'end': 24051.946, 'text': "Now I cannot open it, since I'm right away closing it as well.", 'start': 24048.383, 'duration': 3.563}, {'end': 24062.313, 'text': "So essentially we avoid that if we set up condition, and I'm going to say if event target, then class list, class list.", 'start': 24052.566, 'duration': 9.747}, {'end': 24063.895, 'text': "again we're going back to vanilla.", 'start': 24062.313, 'duration': 1.582}, {'end': 24069.359, 'text': "JavaScript contains, and then the class that I'm looking for is a link btn.", 'start': 24063.895, 'duration': 5.464}, {'end': 24073.482, 'text': 'If that is the case, then I would want to close it.', 'start': 24069.899, 'duration': 3.583}, {'end': 24080.951, 'text': "So essentially, if the target that I'm hovering over does not have the link button, then I would want to close it.", 'start': 24074.002, 'duration': 6.949}], 'summary': 'Using javascript to conditionally close certain elements based on class names.', 'duration': 32.568, 'max_score': 24048.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24048383.jpg'}, {'end': 24120.443, 'src': 'embed', 'start': 24098.949, 'weight': 0, 'content': [{'end': 24107.875, 'text': 'And that was exactly the reason why I lifted up the sub menu three pixels, because now it is actually sitting on a button.', 'start': 24098.949, 'duration': 8.926}, {'end': 24109.315, 'text': 'So that was done on purpose.', 'start': 24108.155, 'duration': 1.16}, {'end': 24114.979, 'text': 'So that way, once I move from button to a sub menu, everything still works.', 'start': 24109.335, 'duration': 5.644}, {'end': 24116.26, 'text': "That's our project.", 'start': 24115.54, 'duration': 0.72}, {'end': 24118.762, 'text': 'Hopefully everyone enjoyed our project.', 'start': 24116.32, 'duration': 2.442}, {'end': 24120.443, 'text': 'And I hope to see you next one.', 'start': 24119.322, 'duration': 1.121}], 'summary': 'Submenu lifted 3 pixels to align with button, ensuring smooth transition. project completed successfully.', 'duration': 21.494, 'max_score': 24098.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24098949.jpg'}, {'end': 24239.46, 'src': 'embed', 'start': 24196.78, 'weight': 1, 'content': [{'end': 24202.543, 'text': 'Now, this particular setup folder is going to be a bit different than the previous ones,', 'start': 24196.78, 'duration': 5.763}, {'end': 24206.565, 'text': 'just because I already prepared somewhat a lot of stuff for you.', 'start': 24202.543, 'duration': 4.022}, {'end': 24215.47, 'text': 'Now, the reason why I did that is because I exclusively wanted to focus on the use reducer.', 'start': 24207.206, 'duration': 8.264}, {'end': 24221.152, 'text': 'how to fetch data, how to set up functionality, and all that stuff.', 'start': 24216.03, 'duration': 5.122}, {'end': 24229.115, 'text': "I didn't see the point of creating everything from scratch, because then of course, we would spend way more time on the project.", 'start': 24221.552, 'duration': 7.563}, {'end': 24232.017, 'text': "And I didn't want this project to be three hours long.", 'start': 24229.295, 'duration': 2.722}, {'end': 24239.46, 'text': "That's why when you spin up the setup, you'll notice that a lot of UI is already prepared for you.", 'start': 24232.537, 'duration': 6.923}], 'summary': 'Prepared setup to focus on use reducer, minimizing project time to avoid being three hours long.', 'duration': 42.68, 'max_score': 24196.78, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24196780.jpg'}, {'end': 24316.077, 'src': 'embed', 'start': 24285.756, 'weight': 7, 'content': [{'end': 24290.238, 'text': "And then of course, I have the value prop, where I'm returning the cart.", 'start': 24285.756, 'duration': 4.482}, {'end': 24295.922, 'text': 'Now at the moment cart is a state value using use state.', 'start': 24290.779, 'duration': 5.143}, {'end': 24298.023, 'text': 'So essentially, it is an array.', 'start': 24296.462, 'duration': 1.561}, {'end': 24302.986, 'text': "And I'm just passing in hard coded items from the file called data.", 'start': 24298.444, 'duration': 4.542}, {'end': 24308.09, 'text': 'And if you take a look at the data, it is just going to be an array of items.', 'start': 24303.547, 'duration': 4.543}, {'end': 24316.077, 'text': "And yes, don't worry, eventually, when we set up user juicer, we will fetch this data from the API.", 'start': 24308.71, 'duration': 7.367}], 'summary': 'Returning cart as array of hard coded items from data file.', 'duration': 30.321, 'max_score': 24285.756, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24285756.jpg'}, {'end': 24414.035, 'src': 'embed', 'start': 24385.677, 'weight': 2, 'content': [{'end': 24390.339, 'text': "And then if we're loading, essentially, if we're fetching data, then of course, we'll display loading.", 'start': 24385.677, 'duration': 4.662}, {'end': 24397.362, 'text': "And then once we've got the data, then of course, we return our app, which is going to be the main element with our two components.", 'start': 24390.699, 'duration': 6.663}, {'end': 24399.443, 'text': 'nav bar and cart container.', 'start': 24397.842, 'duration': 1.601}, {'end': 24400.825, 'text': 'So let me refresh.', 'start': 24399.964, 'duration': 0.861}, {'end': 24405.708, 'text': 'So we can see our current application in a smaller browser window.', 'start': 24401.185, 'duration': 4.523}, {'end': 24414.035, 'text': "And if we take a look at the nav bar, essentially we're going to have some kind of return, which is going to be nav,", 'start': 24406.289, 'duration': 7.746}], 'summary': 'The transcript discusses loading and displaying data components, such as nav bar and cart container.', 'duration': 28.358, 'max_score': 24385.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24385677.jpg'}], 'start': 23776.92, 'title': 'Css layout, submenu handling, and cart project with use context and use reducer', 'summary': 'Discusses setting up css classes for different layouts and submenu handling using javascript events and class checking. it also covers the setup and functionality of a cart project using use context and use reducer, focusing on context, app provider, value prop, app jazz, nav bar, cart container, and cart item components.', 'chapters': [{'end': 24098.468, 'start': 23776.92, 'title': 'Css layout and submenu handling', 'summary': 'Discusses setting up css classes for different layouts based on the number of links, and implementing logic to hide the submenu when hovering over specific elements such as the navbar and hero, using javascript events and class checking.', 'duration': 321.548, 'highlights': ['The chapter covers setting up CSS classes for different layouts based on the number of links, with a four-column layout for links greater than three, a three-column layout for three links, and a two-column layout for two links.', 'It explains the implementation of logic to hide the submenu when hovering over specific elements such as the navbar and hero, using JavaScript events and class checking to ensure the submenu is hidden appropriately.', 'The transcript also details the use of JavaScript to handle the closing of the submenu when hovering over different elements, such as buttons in the navbar, to ensure smooth interaction and display of the submenu.']}, {'end': 24588.209, 'start': 24098.949, 'title': 'Building a cart project with use context and use reducer', 'summary': 'Covers the setup and functionality of a cart project using use context and use reducer, where the ui is pre-prepared and the functionality will be worked on, including fetching data and setting up the global context, with a focus on the use of context, app provider, value prop, app jazz, nav bar, cart container, and cart item components.', 'duration': 489.26, 'highlights': ['The UI for the project is already prepared to focus on functionality, saving time and preventing the project from being excessively long.', 'The context is set up to use global context, app provider, value prop, and app jazz, with the cart as a state value using use state and hard coded items from the data file.', 'The app component includes nav bar and cart container components, with the ability for the amount in the cart to change dynamically and for the cart to display items and total dynamically.', 'The cart container component includes conditional rendering for an empty cart, displaying the cart when items are present, and a clear button functionality.', 'The cart item component iterates over the cart array, displaying the cart items and their details, with the use of properties such as title, price, image, and amount from the data file.']}], 'duration': 811.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo23776920.jpg', 'highlights': ['The chapter covers setting up CSS classes for different layouts based on the number of links, with a four-column layout for links greater than three, a three-column layout for three links, and a two-column layout for two links.', 'The transcript also details the use of JavaScript to handle the closing of the submenu when hovering over different elements, such as buttons in the navbar, to ensure smooth interaction and display of the submenu.', 'The context is set up to use global context, app provider, value prop, and app jazz, with the cart as a state value using use state and hard coded items from the data file.', 'The app component includes nav bar and cart container components, with the ability for the amount in the cart to change dynamically and for the cart to display items and total dynamically.', 'The cart item component iterates over the cart array, displaying the cart items and their details, with the use of properties such as title, price, image, and amount from the data file.', 'The UI for the project is already prepared to focus on functionality, saving time and preventing the project from being excessively long.', 'It explains the implementation of logic to hide the submenu when hovering over specific elements such as the navbar and hero, using JavaScript events and class checking to ensure the submenu is hidden appropriately.', 'The cart container component includes conditional rendering for an empty cart, displaying the cart when items are present, and a clear button functionality.']}, {'end': 26189.796, 'segs': [{'end': 24970.331, 'src': 'embed', 'start': 24941.013, 'weight': 3, 'content': [{'end': 24943.973, 'text': "And then where I have the paragraph, well, let's change it around.", 'start': 24941.013, 'duration': 2.96}, {'end': 24951.257, 'text': "Let's say that we'll be looking for a month again, it is going to be zero, because that is the value that I hardcoded.", 'start': 24944.473, 'duration': 6.784}, {'end': 24953.259, 'text': "Okay, that's an awesome start.", 'start': 24951.277, 'duration': 1.982}, {'end': 24956.301, 'text': "Let's double check, we also have the app.", 'start': 24954.359, 'duration': 1.942}, {'end': 24963.766, 'text': "And then we're checking for the loading, which of course, doesn't make sense right now, because we're not loading anything as far as fetching data.", 'start': 24956.761, 'duration': 7.005}, {'end': 24966.668, 'text': 'But we might as well can uncommon it.', 'start': 24964.206, 'duration': 2.462}, {'end': 24970.331, 'text': 'And then when we do fetch the data, it is going to be already working.', 'start': 24966.848, 'duration': 3.483}], 'summary': 'Modifying hardcoded value to zero for a month, checking loading, and fetching data successfully.', 'duration': 29.318, 'max_score': 24941.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24941013.jpg'}, {'end': 25194.353, 'src': 'embed', 'start': 25168.961, 'weight': 4, 'content': [{'end': 25175.103, 'text': 'And last thing, like I said, is to make sure that we handle that in the reducer.', 'start': 25168.961, 'duration': 6.142}, {'end': 25183.607, 'text': "Now, before we set up the functionality, I just want to mention something that I didn't cover in tutorial when we talked about reducer.", 'start': 25175.763, 'duration': 7.844}, {'end': 25188.57, 'text': 'Some people prefer using the switch statement here instead.', 'start': 25184.168, 'duration': 4.402}, {'end': 25192.892, 'text': 'So in my case, I prefer setting up a bunch of statements.', 'start': 25189.21, 'duration': 3.682}, {'end': 25194.353, 'text': 'That is just my preference.', 'start': 25193.393, 'duration': 0.96}], 'summary': 'Preference for setting up a bunch of statements in the reducer instead of using a switch statement.', 'duration': 25.392, 'max_score': 25168.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo25168961.jpg'}, {'end': 25250.99, 'src': 'embed', 'start': 25220.503, 'weight': 0, 'content': [{'end': 25222.846, 'text': "the type that I'm looking for is clear card.", 'start': 25220.503, 'duration': 2.343}, {'end': 25231.677, 'text': 'So go with if and then action, and then type if that is equal to clear card, what I would want to do.', 'start': 25223.227, 'duration': 8.45}, {'end': 25233.58, 'text': "Well, let's think about it.", 'start': 25232.398, 'duration': 1.182}, {'end': 25235.172, 'text': 'we have our state.', 'start': 25234.031, 'duration': 1.141}, {'end': 25238.456, 'text': 'Now in the state, I have multiple values.', 'start': 25235.853, 'duration': 2.603}, {'end': 25243.642, 'text': 'Not only I have the card, I also have loading, I have total and then the amount.', 'start': 25239.157, 'duration': 4.485}, {'end': 25250.99, 'text': 'And we already know that once we return something from the reducer, that will be our new state.', 'start': 25244.303, 'duration': 6.687}], 'summary': 'Developing a clear card type with multiple values for a new state in a reducer.', 'duration': 30.487, 'max_score': 25220.503, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo25220503.jpg'}], 'start': 24588.209, 'title': 'Implementing usereducer functionality', 'summary': 'Covers setting up usereducer functionality, initializing initial state with loading, cart, total, and amount, setting up the reducer function, handling state in reducer functions, and implementing shopping cart functionality, with detailed explanations and code examples.', 'chapters': [{'end': 24873.018, 'start': 24588.209, 'title': 'Setting up usereducer functionality', 'summary': 'Covers setting up usereducer functionality, including refactoring to use usereducer hook, initializing initial state with loading, cart, total, and amount, setting up the reducer function, and addressing errors in the code.', 'duration': 284.809, 'highlights': ["Initializing initial state with loading, cart, total, and amount, starting with hardcoded values, like 'loading' as false, 'cart' as empty array, 'total' as 0, and 'amount' as 0.", 'Refactoring to use useReducer hook instead of state and changing the state to dispatch, and passing the reducer function and initial state to the hook.', 'Setting up the reducer function by defining the reducer with state and action arguments and returning the state for now, and exporting the reducer function.', "Addressing errors by spreading out the state using '...' and passing the state value as the initial state to useReducer."]}, {'end': 25166.821, 'start': 24873.598, 'title': 'Setting up initial functionality', 'summary': 'Covers the initial setup of use reducer functionality, including spreading out state values, setting up components, and providing context for functionality, with a plan to progress to different functionalities in subsequent videos.', 'duration': 293.223, 'highlights': ['The chapter covers the initial setup of use reducer functionality, including spreading out state values, setting up components, and providing context for functionality, with a plan to progress to different functionalities in subsequent videos.', 'The narrator sets up the initial functionality of use reducer by spreading out all the state values, such as loading, cart, cart items, and total.', 'The chapter also discusses providing context for functionality, with a plan to progress to different functionalities in subsequent videos.', 'The narrator plans to start with the easiest functionality, which is to remove all the items from the cart, and then proceed with other functionalities in subsequent videos.']}, {'end': 25572.101, 'start': 25168.961, 'title': 'Handling state in reducer functions', 'summary': 'Discusses handling state in reducer functions, covering the preference for if statements over switch statements, clearing items from the cart, and removing single items from the cart, with detailed explanations and code examples.', 'duration': 403.14, 'highlights': ['The preference for using if statements over switch statements in reducer functions, with the instructor explaining their personal preference and leaving the choice open to the audience.', "Clearing items from the cart by updating the state to remove all items, with a detailed explanation of the process and its impact on the cart's state and display.", "The process of removing single items from the cart, including dispatching the 'removed' action with the item's ID, and updating the cart state in the reducer function by filtering out the specified item."]}, {'end': 26189.796, 'start': 25572.521, 'title': 'Shopping cart functionality', 'summary': 'Discusses adding functionality to a shopping cart, including increasing and decreasing item amounts, updating totals, and removing items with detailed explanations of the code and logic.', 'duration': 617.275, 'highlights': ['The functionality of increasing and decreasing item amounts in the shopping cart is explained with detailed code examples and logic, providing a comprehensive understanding of the process and its implementation.', 'The process of removing items from the cart when the amount goes below one is detailed, with a clear explanation of the logic and code structure for handling this functionality.', 'The use of the reduce function to update values such as the amount and total in the shopping cart is explained, with a reference to additional learning resources for those unfamiliar with the reduce function.']}], 'duration': 1601.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo24588209.jpg', 'highlights': ['Covers setting up useReducer functionality with detailed explanations and code examples', 'Initializing initial state with loading, cart, total, and amount', 'Refactoring to use useReducer hook instead of state and changing the state to dispatch', 'The functionality of increasing and decreasing item amounts in the shopping cart is explained with detailed code examples and logic', 'Clearing items from the cart by updating the state to remove all items']}, {'end': 27155.857, 'segs': [{'end': 26647.754, 'src': 'embed', 'start': 26595.385, 'weight': 2, 'content': [{'end': 26601.387, 'text': 'And what that simply means is whatever is the value, just add the amount property value.', 'start': 26595.385, 'duration': 6.002}, {'end': 26606.269, 'text': "And now you'll notice that the amount will also change.", 'start': 26601.867, 'duration': 4.402}, {'end': 26607.249, 'text': 'And there it is.', 'start': 26606.769, 'duration': 0.48}, {'end': 26609.65, 'text': 'Now, of course, it is three right away.', 'start': 26607.529, 'duration': 2.121}, {'end': 26619.555, 'text': 'Why? Well, because we right away run the user, correct? And it is counting how many items we have in a cart.', 'start': 26609.75, 'duration': 9.805}, {'end': 26624.278, 'text': 'And more specifically, for every item, we have that amount property.', 'start': 26620.035, 'duration': 4.243}, {'end': 26629.061, 'text': "So as I'm increasing, notice how the amount is also increasing.", 'start': 26624.718, 'duration': 4.343}, {'end': 26637.307, 'text': 'Remember, navbar, we right away structured the amount property coming from the state.', 'start': 26629.621, 'duration': 7.686}, {'end': 26639.268, 'text': "So there's two amount properties.", 'start': 26637.887, 'duration': 1.381}, {'end': 26642.73, 'text': "So there's one that is specific for every item.", 'start': 26639.688, 'duration': 3.042}, {'end': 26647.754, 'text': "And then there's one in the state that just sums up all these values.", 'start': 26643.171, 'duration': 4.583}], 'summary': 'The amount property increases as items are added, reaching a total of three due to the count of items in the cart.', 'duration': 52.369, 'max_score': 26595.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo26595385.jpg'}, {'end': 26787.872, 'src': 'embed', 'start': 26756.352, 'weight': 1, 'content': [{'end': 26759.315, 'text': 'I would want to say total, and then to fix.', 'start': 26756.352, 'duration': 2.963}, {'end': 26766.983, 'text': 'So this is going to limit the amount of numbers after that, but it does return a string.', 'start': 26759.796, 'duration': 7.187}, {'end': 26770.406, 'text': 'So I just need to pass it through the parcel.', 'start': 26767.524, 'duration': 2.882}, {'end': 26776.409, 'text': "And now you'll notice that still functionality works, but you won't get these weird bugs.", 'start': 26771.047, 'duration': 5.362}, {'end': 26781.61, 'text': "Again, we're iterating over the array, we have the car total and then car item.", 'start': 26777.009, 'duration': 4.601}, {'end': 26787.872, 'text': 'As far as the car total, we return an object where we have two properties total and the amount.', 'start': 26782.09, 'duration': 5.782}], 'summary': 'Limit the number of numbers, fix bugs, return object with total and amount.', 'duration': 31.52, 'max_score': 26756.352, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo26756352.jpg'}, {'end': 26977.991, 'src': 'embed', 'start': 26947.336, 'weight': 0, 'content': [{'end': 26949.319, 'text': "So we're loading while we're fetching.", 'start': 26947.336, 'duration': 1.983}, {'end': 26952.58, 'text': "And let's set up the functionality where we go with const.", 'start': 26950.239, 'duration': 2.341}, {'end': 26956.182, 'text': 'And you know what, I forgot to add here a sink.', 'start': 26953.1, 'duration': 3.082}, {'end': 26962.724, 'text': "Since of course, I'm going to use the await functionality, we're gonna go with the response, that one is equal to await.", 'start': 26956.642, 'duration': 6.082}, {'end': 26972.669, 'text': "And then fetch, we pass in the URL, once we've got the response, I can go with const and the cart, that one is equal to response, that JSON.", 'start': 26963.225, 'duration': 9.444}, {'end': 26977.991, 'text': "And then once I've got my cart, now I would want to pass it in to my dispatch.", 'start': 26973.189, 'duration': 4.802}], 'summary': 'Setting up functionality to fetch and process data using await and const.', 'duration': 30.655, 'max_score': 26947.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo26947336.jpg'}], 'start': 26190.336, 'title': 'Using useeffect, cart total calculation, and using use reducer to fetch data', 'summary': "Discusses using useeffect in react to trigger a function when the state changes, setting up the useeffect with a callback function and dependency array, dispatching an action 'get_totals' when the cart state changes, implementing a reducer function to calculate total and amount values for the cart, explaining the process of calculating the total amount and cost of the cart, and using usereducer to fetch data and update the state with fetched items, resulting in a total of four items and the functionality to add, remove, and update items in the cart.", 'chapters': [{'end': 26483.851, 'start': 26190.336, 'title': 'Using useeffect in react', 'summary': "Discusses using useeffect in react to trigger a function when the state changes, including setting up the useeffect with a callback function and dependency array, dispatching an action 'get_totals' when the cart state changes, and implementing a reducer function to calculate total and amount values for the cart.", 'duration': 293.515, 'highlights': ['The chapter discusses using useEffect in React to trigger a function when the state changes, including setting up the useEffect with a callback function and dependency array.', "Dispatching an action 'get_totals' every time the cart state changes to calculate total and amount values for the cart.", 'Implementing a reducer function to calculate total and amount values for the cart.', 'Demonstrating the use of reduce in JavaScript to handle multiple videos and advanced topics.']}, {'end': 26831.963, 'start': 26484.251, 'title': 'Cart total calculation', 'summary': "Explains the process of calculating the total amount of items in a cart and the total cost of the cart by summing up the amount property values for all items and multiplying the amount by price for each item, resulting in a comprehensive understanding of the cart's total amount and cost.", 'duration': 347.712, 'highlights': ['The chapter emphasizes the process of summing up the amount property values for all items in the cart to obtain the total amount, which is essential for understanding the quantity of items in the cart.', "It also highlights the significance of multiplying the amount by the price for each item to calculate the total cost of the cart, ensuring a comprehensive understanding of the cart's total cost.", "The process involves iterating over the items in the cart, adding the amount property values to obtain the total amount, and then multiplying the amount by the price for each item and adding it to the cart's total cost to derive the comprehensive cart total."]}, {'end': 27155.857, 'start': 26831.983, 'title': 'Using use reducer to fetch data', 'summary': 'Explains how to use usereducer to fetch data and update the state with fetched items, resulting in a total of four items and the functionality to add, remove, and update items in the cart.', 'duration': 323.874, 'highlights': ['The functionality works with a total of four items fetched from the API, in addition to the hard-coded three items, demonstrating successful data fetching and integration with the cart state.', 'The use of useReducer and useEffect to fetch and display data, along with the dispatch actions for loading and displaying items, provides a clear understanding of the process for fetching and integrating data into the state.', 'The process involves dispatching loading to indicate data fetching and setting loading to true, followed by displaying the fetched items in the cart and setting loading to false, showcasing a comprehensive approach to updating the state based on data fetching.']}], 'duration': 965.521, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo26190336.jpg', 'highlights': ["Dispatching an action 'get_totals' every time the cart state changes to calculate total and amount values for the cart.", "The process involves iterating over the items in the cart, adding the amount property values to obtain the total amount, and then multiplying the amount by the price for each item and adding it to the cart's total cost to derive the comprehensive cart total.", 'The functionality works with a total of four items fetched from the API, in addition to the hard-coded three items, demonstrating successful data fetching and integration with the cart state.', 'The chapter discusses using useEffect in React to trigger a function when the state changes, including setting up the useEffect with a callback function and dependency array.']}, {'end': 28265.411, 'segs': [{'end': 27186.954, 'src': 'embed', 'start': 27156.537, 'weight': 4, 'content': [{'end': 27159.959, 'text': 'Nice, our application is actually complete.', 'start': 27156.537, 'duration': 3.422}, {'end': 27170.585, 'text': "But I'm fully aware of that there's definitely some people who are very, very upset about the fact that there's somewhat repeating functionality.", 'start': 27160.679, 'duration': 9.906}, {'end': 27176.128, 'text': 'So now I would like to refactor it and set it up as one function.', 'start': 27171.206, 'duration': 4.922}, {'end': 27180.011, 'text': "Again, if you're not interested in that, just move on to the next video.", 'start': 27176.269, 'duration': 3.742}, {'end': 27186.954, 'text': "And also, if you'd like to set it up yourself, So if you would want to have a challenge, definitely do so.", 'start': 27180.551, 'duration': 6.403}], 'summary': 'Application complete, but needs refactoring for repeating functionality. offer challenge for those interested.', 'duration': 30.417, 'max_score': 27156.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo27156537.jpg'}, {'end': 27241.179, 'src': 'embed', 'start': 27204.479, 'weight': 10, 'content': [{'end': 27206.94, 'text': 'So first, I guess I would need to go to the context.', 'start': 27204.479, 'duration': 2.461}, {'end': 27210.441, 'text': 'And I would need to come up with a function here first.', 'start': 27207.66, 'duration': 2.781}, {'end': 27213.823, 'text': "And I'm going to do that after fresh data.", 'start': 27211.421, 'duration': 2.402}, {'end': 27222.087, 'text': "Since again, that is something that we're doing as an extra, and I'm going to say const, and then toggle an amount.", 'start': 27214.643, 'duration': 7.444}, {'end': 27224.609, 'text': "So that is how I'm going to call my function.", 'start': 27222.548, 'duration': 2.061}, {'end': 27227.631, 'text': "Now in this function, I'm going to be looking for two parameters.", 'start': 27225.249, 'duration': 2.382}, {'end': 27230.513, 'text': "I'm going to be looking for the ID.", 'start': 27228.191, 'duration': 2.322}, {'end': 27241.179, 'text': "And then I'm going to be looking at Well, what am I doing? Am I increasing? Or am I decreasing? And then I'm going to say here type, like so.", 'start': 27231.113, 'duration': 10.066}], 'summary': 'Creating a function to toggle an amount using two parameters: id and type.', 'duration': 36.7, 'max_score': 27204.479, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo27204479.jpg'}, {'end': 27475.763, 'src': 'embed', 'start': 27450.002, 'weight': 2, 'content': [{'end': 27454.766, 'text': 'And I say if it is increasing, then I would want to increase amount by one.', 'start': 27450.002, 'duration': 4.764}, {'end': 27460.671, 'text': "So I'll say I and say, or if it is decreasing, then I would want to return something else.", 'start': 27455.346, 'duration': 5.325}, {'end': 27469.839, 'text': "So I'm going to say again, if action, and then dot, and of course, I'm looking for payload and then type is equal to a decreasing one.", 'start': 27461.071, 'duration': 8.768}, {'end': 27471.801, 'text': "And of course, we'll return something else.", 'start': 27470.359, 'duration': 1.442}, {'end': 27475.763, 'text': "In the first case, we'll return everything that currently item has.", 'start': 27472.381, 'duration': 3.382}], 'summary': 'Adjust amount by one based on increase or decrease in payload type.', 'duration': 25.761, 'max_score': 27450.002, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo27450002.jpg'}, {'end': 27612.944, 'src': 'embed', 'start': 27581.208, 'weight': 0, 'content': [{'end': 27587.354, 'text': "So the moment I run this, of course, there's going to be an error that says no matching action type.", 'start': 27581.208, 'duration': 6.146}, {'end': 27588.896, 'text': 'Okay, beautiful.', 'start': 27587.694, 'duration': 1.202}, {'end': 27590.077, 'text': 'And remove it.', 'start': 27589.496, 'duration': 0.581}, {'end': 27592.199, 'text': 'That was just for demonstration purposes.', 'start': 27590.357, 'duration': 1.842}, {'end': 27596.304, 'text': 'If I navigate to the big screen, of course, our functionality works.', 'start': 27593.081, 'duration': 3.223}, {'end': 27598.467, 'text': 'That was our application.', 'start': 27596.965, 'duration': 1.502}, {'end': 27600.329, 'text': 'Hopefully everyone enjoy it.', 'start': 27598.487, 'duration': 1.842}, {'end': 27601.871, 'text': 'And I hope to see you next one.', 'start': 27600.77, 'duration': 1.101}, {'end': 27612.944, 'text': 'And our next project is going to be cocktails DB, where essentially we will use external API to fetch information about the cocktails.', 'start': 27602.681, 'duration': 10.263}], 'summary': 'Demonstrated functionality on big screen; next project: cocktails db with external api', 'duration': 31.736, 'max_score': 27581.208, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo27581208.jpg'}, {'end': 28036.668, 'src': 'embed', 'start': 28006.986, 'weight': 3, 'content': [{'end': 28011.168, 'text': "Okay, just keep in mind that we're just talking about the browser router.", 'start': 28006.986, 'duration': 4.182}, {'end': 28014.77, 'text': "We're not talking about the routes, the switches, or nothing like that.", 'start': 28011.549, 'duration': 3.221}, {'end': 28020.213, 'text': "We're just talking about the router, because that's the one that wraps our whole app.", 'start': 28014.83, 'duration': 5.383}, {'end': 28023.095, 'text': 'In our case, of course, that is going to be the app.', 'start': 28020.693, 'duration': 2.402}, {'end': 28028.864, 'text': 'So here I have imported already everything from the reactor dump.', 'start': 28024.122, 'duration': 4.742}, {'end': 28036.668, 'text': 'we have browser router, we have router which has the alias of router, then we have single route as well as the switch component.', 'start': 28028.864, 'duration': 7.804}], 'summary': 'Discussion on using browser router for wrapping the app.', 'duration': 29.682, 'max_score': 28006.986, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo28006986.jpg'}, {'end': 28265.411, 'src': 'embed', 'start': 28237.19, 'weight': 9, 'content': [{'end': 28240.152, 'text': 'we have here the link coming from reactor or DOM.', 'start': 28237.19, 'duration': 2.962}, {'end': 28245.275, 'text': 'Remember, that was the component that we have to use with reactor or DOM.', 'start': 28240.192, 'duration': 5.083}, {'end': 28247.697, 'text': 'And then we also have the logo.', 'start': 28245.716, 'duration': 1.981}, {'end': 28255.403, 'text': 'And in this case, I want to showcase that we can wrap our images in the links as well.', 'start': 28248.557, 'duration': 6.846}, {'end': 28260.828, 'text': 'And simply, what that means is if I navigate to about page.', 'start': 28255.883, 'duration': 4.945}, {'end': 28265.411, 'text': 'for some reason I would want to navigate back by clicking on the logo.', 'start': 28260.828, 'duration': 4.583}], 'summary': 'Using reactor or dom to link components and showcase image-link wrapping for navigation.', 'duration': 28.221, 'max_score': 28237.19, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo28237190.jpg'}], 'start': 27156.537, 'title': 'Refactoring application code, setting up react router and context api, and setting up react router with pages', 'summary': 'Discusses refactoring the application code to consolidate repeating functionality, setting up react router and context api, and setting up react router with pages, covering topics such as handling state changes, organizing components, and navigation between pages with url parameters and the navbar component.', 'chapters': [{'end': 27471.801, 'start': 27156.537, 'title': 'Refactoring application code', 'summary': 'Discusses refactoring the application code to consolidate repeating functionality into one function, involving setting up a reducer, handling state changes, and mapping through cart items to update quantities.', 'duration': 315.264, 'highlights': ['Refactoring the application code to consolidate repeating functionality into one function', 'Setting up a reducer to handle state changes', 'Mapping through cart items to update quantities']}, {'end': 27860.109, 'start': 27472.381, 'title': 'Setting up react router and context api', 'summary': 'Discusses setting up a project to use react router and context api, focusing on organizing components into separate folders, implementing loading components, and preparing for the use of external apis.', 'duration': 387.728, 'highlights': ['The project involves setting up React Router and Context API to build a bigger project, not just the basic setup (relevance score: 5)', 'Components are organized into separate folders for pages and components, providing clarity and structure to the project (relevance score: 4)', 'The loading component is already implemented, while the rest of the components and pages will be worked on (relevance score: 3)', 'The next project will involve using an external API to fetch information about cocktails, displaying them using cards, implementing search functionality, and a loading component (relevance score: 2)', 'The goal of the project is to demonstrate how to use React Router and Context API together when building a bigger project, without repeating basic setup tutorials (relevance score: 1)']}, {'end': 28265.411, 'start': 27860.789, 'title': 'Setting up react router with pages', 'summary': 'Covers setting up react router with pages, including the homepage, about page, cocktail page, and error page, using react-router-dom version 5.2, and demonstrates the navigation between these pages with url parameters and the navbar component.', 'duration': 404.622, 'highlights': ['The chapter demonstrates setting up React Router with pages such as the homepage, about page, cocktail page, and error page, utilizing react-router-dom version 5.2 for navigation and page rendering.', 'It details the process of using react-router-dom, including installation (npm install react-router-dom), wrapping components with BrowserRouter or Route, setting up routes with URL parameters, and navigating between pages using the navbar component.', 'The transcript also includes instructions for utilizing the Link component from react-router-dom to enable navigation between pages without using the URL bar, as well as showcasing the ability to wrap images within links for navigation purposes.']}], 'duration': 1108.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo27156537.jpg', 'highlights': ['Setting up React Router and Context API to build a bigger project (relevance score: 5)', 'Refactoring the application code to consolidate repeating functionality into one function', 'Setting up a reducer to handle state changes', 'Mapping through cart items to update quantities', 'Components are organized into separate folders for pages and components (relevance score: 4)', 'The loading component is already implemented, while the rest of the components and pages will be worked on (relevance score: 3)', 'The next project will involve using an external API to fetch information about cocktails, displaying them using cards, implementing search functionality, and a loading component (relevance score: 2)', 'The goal of the project is to demonstrate how to use React Router and Context API together when building a bigger project, without repeating basic setup tutorials (relevance score: 1)', 'Setting up React Router with pages such as the homepage, about page, cocktail page, and error page, utilizing react-router-dom version 5.2 for navigation and page rendering', 'Details the process of using react-router-dom, including installation (npm install react-router-dom), wrapping components with BrowserRouter or Route, setting up routes with URL parameters, and navigating between pages using the navbar component', 'Instructions for utilizing the Link component from react-router-dom to enable navigation between pages without using the URL bar, as well as showcasing the ability to wrap images within links for navigation purposes']}, {'end': 29687.242, 'segs': [{'end': 28296.432, 'src': 'embed', 'start': 28265.411, 'weight': 1, 'content': [{'end': 28266.192, 'text': 'I can definitely do it.', 'start': 28265.411, 'duration': 0.781}, {'end': 28269.275, 'text': "Notice, I'm navigating back to the homepage.", 'start': 28266.432, 'duration': 2.843}, {'end': 28276.439, 'text': "So as far as their turn, we go with nav, we'll add a class name, of course, so we'll go with nav.", 'start': 28269.875, 'duration': 6.564}, {'end': 28280.762, 'text': "And then the class name we're looking for is the nav bar.", 'start': 28276.92, 'duration': 3.842}, {'end': 28282.943, 'text': 'No surprises over there.', 'start': 28281.462, 'duration': 1.481}, {'end': 28288.227, 'text': 'And also would want to go with div with the class of nav center.', 'start': 28282.963, 'duration': 5.264}, {'end': 28291.469, 'text': 'And then I would want to go with a link.', 'start': 28288.987, 'duration': 2.482}, {'end': 28296.432, 'text': "So we're going to go here with link to and then the forward slash.", 'start': 28292.109, 'duration': 4.323}], 'summary': "Navigating back to the homepage, adding class name 'nav bar' and 'nav center', and creating a link.", 'duration': 31.021, 'max_score': 28265.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo28265411.jpg'}, {'end': 28568.891, 'src': 'embed', 'start': 28540.2, 'weight': 0, 'content': [{'end': 28544.142, 'text': "Okay And then I don't need to head into anymore.", 'start': 28540.2, 'duration': 3.942}, {'end': 28552.346, 'text': "And right next to the heading one, I'm just going to place my link, which I'm importing from react forward down.", 'start': 28545.063, 'duration': 7.283}, {'end': 28553.966, 'text': 'I have my forward slash.', 'start': 28552.346, 'duration': 1.62}, {'end': 28555.607, 'text': "that means that I'm navigating back home.", 'start': 28553.966, 'duration': 1.641}, {'end': 28561.488, 'text': "Now, of course, if you want to navigate somewhere else, just add different URL, let's add a little bit of styling.", 'start': 28555.987, 'duration': 5.501}, {'end': 28563.969, 'text': "So we're going to go here with btn.", 'start': 28562.069, 'duration': 1.9}, {'end': 28568.891, 'text': 'And then btn, hyphen primary, we save that one.', 'start': 28564.89, 'duration': 4.001}], 'summary': 'Using react to import links and navigate back home, adding styling with btn-primary.', 'duration': 28.691, 'max_score': 28540.2, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo28540200.jpg'}], 'start': 28265.411, 'title': 'Building cocktail search app', 'summary': 'Details the setup of a cocktail search app, including creating search functionality and displaying cocktails using global context. it emphasizes setting up essential values and components, and covers the use of api endpoints for fetching cocktails and managing the loading state during the fetching process.', 'chapters': [{'end': 28451.446, 'start': 28265.411, 'title': 'Creating navigation bar and links', 'summary': 'Covers the creation of a navigation bar with a logo and two links for the homepage and about page, with a focus on easy navigation and minimalistic design.', 'duration': 186.035, 'highlights': ['The chapter demonstrates the creation of a navigation bar with a logo and two links for the homepage and about page, emphasizing easy navigation. (4)', 'The speaker discusses the development process, including adding class names, image source, alternative text, and link paths. (3)', 'The tutorial emphasizes the minimalistic design approach by incorporating only essential navigation elements. (2)', "The presenter plans to cover the completion of the 'about' and 'arrow' pages, highlighting the simplicity and minimal content of these pages. (1)"]}, {'end': 28743.028, 'start': 28452.366, 'title': 'Homepage structure and component setup', 'summary': 'Details the setup of basic structure for easy pages, followed by the implementation of a more complicated homepage structure involving two components: a search form and a list of cocktails, with a mention of future work on a single cocktail page setup.', 'duration': 290.662, 'highlights': ['The chapter covers the setup of basic structure for easy pages, followed by the implementation of a more complicated homepage structure involving two components: a search form and a list of cocktails.', 'Mentions setting up state values, such as loading and search term, in the context for future functionality and component integration.', 'Describes the process of importing and arranging components, including the order of display for the search form and the cocktail list.']}, {'end': 29007.307, 'start': 28743.589, 'title': 'Building cocktail search app', 'summary': 'Discusses setting up a cocktail search app, including creating search functionality and displaying cocktails using global context, with an emphasis on setting up essential values and components.', 'duration': 263.718, 'highlights': ['Setting up search functionality and displaying cocktails using global context', 'Creating essential values for search term and cocktails with default values', 'Accessing context values and invoking functions using global context']}, {'end': 29687.242, 'start': 29007.667, 'title': 'Cocktail search function and api usage', 'summary': "Covers the implementation of a cocktail search function, handling cases when no cocktails are found, and the setup of an api for fetching cocktails from the cocktail db. the api has multiple endpoints, with 'search cocktail by name' and 'look up full cocktail details by id' being the ones used for this project. the function 'fetchdrinks' is set up to fetch cocktails using the api, and the loading state is managed during the fetching process.", 'duration': 679.575, 'highlights': ["The API chosen for this project is the cocktail DB, which offers multiple endpoints, and doesn't require a key for access.", "Two specific endpoints from the API are utilized: 'search cocktail by name' and 'look up full cocktail details by ID', with the former being used to fetch cocktails based on the search term provided by the user.", "The 'fetchDrinks' function is set up to fetch cocktails using the chosen API, and the loading state is managed to reflect the fetching process."]}], 'duration': 1421.831, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo28265411.jpg', 'highlights': ['Setting up search functionality and displaying cocktails using global context', "The API chosen for this project is the cocktail DB, which offers multiple endpoints, and doesn't require a key for access", 'The chapter demonstrates the creation of a navigation bar with a logo and two links for the homepage and about page, emphasizing easy navigation', 'The chapter covers the setup of basic structure for easy pages, followed by the implementation of a more complicated homepage structure involving two components: a search form and a list of cocktails']}, {'end': 30736.125, 'segs': [{'end': 29711.007, 'src': 'embed', 'start': 29687.742, 'weight': 2, 'content': [{'end': 29695.45, 'text': "Now what happens if I type bunch of gibberish here, so I'm going to go with some kind of name that shouldn't return any cocktails.", 'start': 29687.742, 'duration': 7.708}, {'end': 29699.353, 'text': "And of course, doesn't have drinks equal to no.", 'start': 29695.91, 'duration': 3.443}, {'end': 29705.059, 'text': 'So what we could do is set up here a if statement.', 'start': 29700.074, 'duration': 4.985}, {'end': 29707.001, 'text': "So first, I'll destructure drinks.", 'start': 29705.439, 'duration': 1.562}, {'end': 29711.007, 'text': "I'll say Yeah, grab me the drinks property from my data.", 'start': 29707.482, 'duration': 3.525}], 'summary': 'Using an if statement to handle invalid input and destructure the drinks property from the data.', 'duration': 23.265, 'max_score': 29687.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo29687742.jpg'}, {'end': 30093.949, 'src': 'embed', 'start': 30070.068, 'weight': 1, 'content': [{'end': 30077.815, 'text': 'then also would want to have a heading two with a class name of section, title, section hyphen title.', 'start': 30070.068, 'duration': 7.747}, {'end': 30080.837, 'text': "Inside of it, let's type cocktails.", 'start': 30078.355, 'duration': 2.482}, {'end': 30086.022, 'text': "And right next to it, there's going to be a cocktail center.", 'start': 30081.938, 'duration': 4.084}, {'end': 30088.964, 'text': 'So this is where I would want to iterate over my array.', 'start': 30086.582, 'duration': 2.382}, {'end': 30093.949, 'text': 'And for every item, I would want to return a cocktail component.', 'start': 30089.425, 'duration': 4.524}], 'summary': 'Create a heading with a class name and iterate over an array to return a cocktail component.', 'duration': 23.881, 'max_score': 30070.068, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo30070068.jpg'}, {'end': 30280.068, 'src': 'embed', 'start': 30252.316, 'weight': 0, 'content': [{'end': 30254.957, 'text': 'This one was whether it is alcoholic or not.', 'start': 30252.316, 'duration': 2.641}, {'end': 30257.258, 'text': 'Of course, the glass one was the heading for.', 'start': 30255.337, 'duration': 1.921}, {'end': 30259.959, 'text': "And then lastly, let's set up that link.", 'start': 30257.718, 'duration': 2.241}, {'end': 30270.605, 'text': 'Because remember, in the app, where we have our react router, I have a path for forward slash cocktail, and then forward slash, and then the ID.', 'start': 30260.26, 'duration': 10.345}, {'end': 30275.808, 'text': "So now of course, as I'm setting up my link, I want to make it dynamic.", 'start': 30271.145, 'duration': 4.663}, {'end': 30280.068, 'text': 'where yes, it is going to navigate to the same component.', 'start': 30276.365, 'duration': 3.703}], 'summary': 'Setting up dynamic navigation for cocktail ids in react app.', 'duration': 27.752, 'max_score': 30252.316, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo30252316.jpg'}, {'end': 30408.462, 'src': 'embed', 'start': 30381.694, 'weight': 3, 'content': [{'end': 30394.098, 'text': 'Before we start working on the single cocktail page, I want to set up my form, essentially, as the user is typing, we are refetching the cocktails.', 'start': 30381.694, 'duration': 12.404}, {'end': 30397.299, 'text': 'in order to do that, of course, we need to navigate there.', 'start': 30395.198, 'duration': 2.101}, {'end': 30399.78, 'text': "I'll start with my return.", 'start': 30397.799, 'duration': 1.981}, {'end': 30403.361, 'text': 'But like already previously mentioned, we will spice things up.', 'start': 30399.84, 'duration': 3.521}, {'end': 30408.462, 'text': "And instead of controlled input, I'm going to go with uncontrolled input.", 'start': 30404.181, 'duration': 4.281}], 'summary': 'Setting up form for refetching cocktails, switching to uncontrolled input.', 'duration': 26.768, 'max_score': 30381.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo30381694.jpg'}], 'start': 29687.742, 'title': 'Handling data and component setup in javascript', 'summary': 'Discusses handling nonexistent data, setting up cocktails data and component, aiming to create a visually appealing and manageable array of 25 cocktails, and setting up dynamic links and form for a cocktail app.', 'chapters': [{'end': 29732.193, 'start': 29687.742, 'title': 'Handling nonexistent data in javascript', 'summary': "Discusses handling nonexistent data in javascript, using a conditional statement to check for the presence of a 'drinks' property and destructuring the data to handle the case where 'drinks' is either 'no' or an array.", 'duration': 44.451, 'highlights': ["Using a conditional statement to check for the presence of a 'drinks' property", "Destructuring the data to handle the case where 'drinks' is either 'no' or an array", "Explaining that it's not a fetching error, but rather that there is simply no data present"]}, {'end': 29991.711, 'start': 29732.853, 'title': 'Handling cocktails data', 'summary': 'Covers handling cocktails data, including setting cocktails to an empty array if the data is null, mapping over an array, setting loading to false, and iterating over the cocktail list to retrieve specific properties.', 'duration': 258.858, 'highlights': ['Setting cocktails to an empty array if the data is null, and handling loading and error states based on the data received or error encountered, which impacts the display of the cocktail list. (e.g., setting loading to false, displaying a message when no cocktails match the search)', 'Iterating over the cocktail list to retrieve specific properties such as ID, drink name, thumbnail image, alcoholic status, and glass type, and returning a new object with shorter property names for easier handling.']}, {'end': 30252.016, 'start': 29992.351, 'title': 'Cocktail component setup', 'summary': 'Details the setup of a cocktail component, including the iteration process, property handling, and component structure, aiming to create a visually appealing and manageable array of 25 cocktails.', 'duration': 259.665, 'highlights': ['The chapter details the setup of a cocktail component, including the iteration process, property handling, and component structure, aiming to create a visually appealing and manageable array of 25 cocktails.', 'The array of cocktails is being simplified through the use of much simpler property names, resulting in easier management.', 'The process involves iterating over the array to return a cocktail component for each item, utilizing the map method and spreading out the properties, including ID, image, name, and glass, for each cocktail.']}, {'end': 30736.125, 'start': 30252.316, 'title': 'Setting up dynamic links and form for cocktail app', 'summary': 'Covers setting up dynamic links to navigate to different cocktail ids and implementing an uncontrolled input form to fetch cocktails based on user input, with the ability to prevent default behavior on form submission.', 'duration': 483.809, 'highlights': ['Setting up dynamic links to navigate to different cocktail IDs using react router and passing different IDs for each cocktail.', 'Implementing an uncontrolled input form to fetch cocktails based on user input, with the ability to prevent default behavior on form submission.', 'Using useRef to set up uncontrolled input for fetching cocktails, providing a seamless user experience.', 'Utilizing useEffect to set focus on the input when the component renders, enhancing user interaction.']}], 'duration': 1048.383, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo29687742.jpg', 'highlights': ['Setting up dynamic links to navigate to different cocktail IDs using react router and passing different IDs for each cocktail.', 'The chapter details the setup of a cocktail component, including the iteration process, property handling, and component structure, aiming to create a visually appealing and manageable array of 25 cocktails.', "Using a conditional statement to check for the presence of a 'drinks' property.", 'Implementing an uncontrolled input form to fetch cocktails based on user input, with the ability to prevent default behavior on form submission.']}, {'end': 32866.911, 'segs': [{'end': 30934.699, 'src': 'embed', 'start': 30903.281, 'weight': 0, 'content': [{'end': 30905.942, 'text': 'And then of course, we have set loading as well.', 'start': 30903.281, 'duration': 2.661}, {'end': 30913.747, 'text': "And when is equal to my react, and then use state I'll pass in false.", 'start': 30906.542, 'duration': 7.205}, {'end': 30916.811, 'text': 'And also I want to go with const.', 'start': 30915.089, 'duration': 1.722}, {'end': 30919.455, 'text': "And we'll set up cocktail.", 'start': 30917.773, 'duration': 1.682}, {'end': 30924.923, 'text': 'So that is that single cocktail, cocktail, and then set cocktail.', 'start': 30920.056, 'duration': 4.867}, {'end': 30934.699, 'text': "that one is equal to react, and then use state, and we'll pass in now, that is my default value.", 'start': 30926.892, 'duration': 7.807}], 'summary': 'Setting up loading, cocktail, and default value using react and usestate.', 'duration': 31.418, 'max_score': 30903.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo30903281.jpg'}, {'end': 32049.781, 'src': 'embed', 'start': 32022.164, 'weight': 1, 'content': [{'end': 32025.026, 'text': 'In order to follow along, you will need an account.', 'start': 32022.164, 'duration': 2.862}, {'end': 32028.228, 'text': "Now don't worry, sign up is hassle free.", 'start': 32025.446, 'duration': 2.782}, {'end': 32030.569, 'text': "They won't ask you for your credit card.", 'start': 32028.288, 'duration': 2.281}, {'end': 32040.015, 'text': "Effectively, we'll cover two setup options, drag and drop, and then the continuous deployment, where we will implement git as well.", 'start': 32031.149, 'duration': 8.866}, {'end': 32045.098, 'text': "And in the process, I'll talk about few gotchas that you need to be aware of.", 'start': 32040.835, 'duration': 4.263}, {'end': 32049.781, 'text': "So if you don't have the account already, sign up for free account.", 'start': 32045.699, 'duration': 4.082}], 'summary': 'Learn two setup options and implement git for continuous deployment. sign up for a hassle-free account.', 'duration': 27.617, 'max_score': 32022.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo32022164.jpg'}, {'end': 32245.477, 'src': 'embed', 'start': 32218.161, 'weight': 4, 'content': [{'end': 32223.024, 'text': "So if you want, you can change this part, but you won't be able to change the Netlify that up.", 'start': 32218.161, 'duration': 4.863}, {'end': 32227.607, 'text': 'And of course, you need to make sure that the name is not already taken.', 'start': 32223.644, 'duration': 3.963}, {'end': 32233.071, 'text': 'Notice if I go here with react and try to save course that name is already taken.', 'start': 32228.087, 'duration': 4.984}, {'end': 32234.632, 'text': 'So I cannot do that.', 'start': 32233.551, 'duration': 1.081}, {'end': 32239.595, 'text': "So in this case, I'll just call this time one react project.", 'start': 32235.032, 'duration': 4.563}, {'end': 32241.936, 'text': 'Hopefully, that name is not taken.', 'start': 32240.335, 'duration': 1.601}, {'end': 32242.856, 'text': 'There it is.', 'start': 32242.476, 'duration': 0.38}, {'end': 32245.477, 'text': 'Now I have my site ready to go.', 'start': 32243.176, 'duration': 2.301}], 'summary': 'Creating a new site with netlify, ensuring unique name, and confirming site readiness.', 'duration': 27.316, 'max_score': 32218.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo32218161.jpg'}, {'end': 32552.619, 'src': 'embed', 'start': 32524.825, 'weight': 2, 'content': [{'end': 32530.57, 'text': "So in this case, Netlify is running the build, we're not doing that locally.", 'start': 32524.825, 'duration': 5.745}, {'end': 32535.375, 'text': 'And notice how right away it tells us, well, what is going to be the directory.', 'start': 32530.931, 'duration': 4.444}, {'end': 32538.516, 'text': 'again, metal file do all of that for us.', 'start': 32535.675, 'duration': 2.841}, {'end': 32542.377, 'text': 'So we literally just need to click on deploy site.', 'start': 32538.996, 'duration': 3.381}, {'end': 32544.097, 'text': "That's all we have to do.", 'start': 32542.717, 'duration': 1.38}, {'end': 32552.619, 'text': "And what's really cool is that every time we'll have some kind of change, we'll be able to push it to the GitHub.", 'start': 32544.657, 'duration': 7.962}], 'summary': 'Netlify runs the build, simplifying deployment. changes can be easily pushed to github.', 'duration': 27.794, 'max_score': 32524.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo32524825.jpg'}], 'start': 30736.666, 'title': 'React cocktail functionality and netlify deployment', 'summary': 'Explains setting up input and navigating to a single cocktail page in react, developing cocktail functionality, structuring the react cocktail page, and hosting a react project on netlify, including continuous deployment using netlify.', 'chapters': [{'end': 30833.183, 'start': 30736.666, 'title': 'Setting up input and navigating to single cocktail page', 'summary': 'Explains how to set up input and access values using javascript, and then proceeds to discuss navigating to the single cocktail page by using react router and accessing unique values using use params.', 'duration': 96.517, 'highlights': ['Setting up input using controlled input and accessing values in the inputs using JavaScript', 'Navigating to the single cocktail page and accessing unique values using use params provided by react router', 'Displaying information about a specific cocktail and handling the absence of cocktail based on search criteria']}, {'end': 31405.908, 'start': 30833.483, 'title': 'Setting up cocktail functionality', 'summary': 'Covers setting up the functionality to display a specific cocktail using react, including setting state values, using useeffect to fetch cocktail data, handling api response, and structuring cocktail details.', 'duration': 572.425, 'highlights': ["Setting state values for loading and single cocktail, using useState: const loading = false, const [cocktail, set Cocktail] = useState('')", 'Using useEffect to fetch data every time the component renders or ID changes, demonstrating the use of callback function and setting loading to true', 'Handling API response with try-catch block, fetching data, checking existence of drinks property, and setting loading to false if error occurs', 'Structuring cocktail details by de-structuring API response, setting up an array for ingredients, and creating a new cocktail object with name, image, info, and category']}, {'end': 31976.262, 'start': 31407.488, 'title': 'React cocktail page', 'summary': 'Focuses on developing a react cocktail page, including the process of setting up the structure, handling loading conditions, displaying cocktail details, and avoiding infinite loops by using the usecallback hook.', 'duration': 568.774, 'highlights': ['The chapter details the process of setting up the structure and handling loading conditions for a React cocktail page.', 'It explains the method for displaying cocktail details and avoiding infinite loops by using the useCallback hook.', 'The chapter also demonstrates the implementation of the use callback function to prevent infinite loops in the context of changing state values.']}, {'end': 32195.225, 'start': 31977.023, 'title': 'Hosting react project on netlify', 'summary': 'Covers setting up a react project and hosting it on netlify, highlighting the process of building a production-ready project and deploying it on netlify, emphasizing the use of netlify for hosting.', 'duration': 218.202, 'highlights': ['The chapter covers the process of building a production-ready project using npm build, which results in the creation of the production-ready application, emphasizing the importance of this step in preparing the project for deployment on Netlify.', 'The process of deploying the production-ready project on Netlify is described, including options such as drag and drop and continuous deployment using git, with an emphasis on the hassle-free signup process and the absence of credit card requirements.', 'The importance of hosting the project online is highlighted, stressing the significance of sharing the completed projects with the world and the use of Netlify as a preferred hosting platform, with a mention of the hosting options and the need for an account for following along.']}, {'end': 32611.523, 'start': 32195.866, 'title': 'Setting up a react project on netlify', 'summary': 'Covers setting up a react project on netlify, including changing the site name, resolving issues with react router, connecting the project to github, and deploying the site. key points include the process of changing the site name, resolving issues with react router, connecting the project to github, and deploying the site on netlify.', 'duration': 415.657, 'highlights': ["The process of changing the site name and ensuring it's not already taken is demonstrated, with 'time one react project' used as an example.", 'The importance of adding the redirects file in the public folder to make React Router play nicely with Netlify is highlighted, emphasizing the need for this fix to prevent weird bugs.', 'The method of connecting the project to GitHub and automatically pushing updates to Netlify is explained, highlighting the advantages of this approach over manual updates.', 'The steps for deploying the site on Netlify and the seamless process of pushing changes to GitHub, which triggers automatic rebuilds on Netlify, are demonstrated, showcasing the efficiency of this workflow.']}, {'end': 32866.911, 'start': 32611.983, 'title': 'Netlify continuous deployment', 'summary': "Discusses the process of continuous deployment using netlify, highlighting the need to add 'ci=' in front of the build command to avoid errors, and emphasizes how netlify automatically starts a rebuild for every project change, eliminating the need for manual steps.", 'duration': 254.928, 'highlights': ['Netlify automatically starts a rebuild for every project change, eliminating the need for manual steps. For example, after pushing changes to GitHub, Netlify initiates a new build, ensuring that the site is ready to go.', "It is essential to add 'CI=' in front of the build command when using continuous deployment to avoid potential errors, as omitting it may lead to issues during deployment."]}], 'duration': 2130.245, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a_7Z7C_JCyo/pics/a_7Z7C_JCyo30736666.jpg', 'highlights': ["Setting state values for loading and single cocktail, using useState: const loading = false, const [cocktail, set Cocktail] = useState''", 'The process of deploying the production-ready project on Netlify is described, including options such as drag and drop and continuous deployment using git, with an emphasis on the hassle-free signup process and the absence of credit card requirements', 'The steps for deploying the site on Netlify and the seamless process of pushing changes to GitHub, which triggers automatic rebuilds on Netlify, are demonstrated, showcasing the efficiency of this workflow', 'Netlify automatically starts a rebuild for every project change, eliminating the need for manual steps. For example, after pushing changes to GitHub, Netlify initiates a new build, ensuring that the site is ready to go', "The process of changing the site name and ensuring it's not already taken is demonstrated, with 'time one react project' used as an example"]}], 'highlights': ['Setting up React Router and Context API to build a bigger project (relevance score: 5)', 'Setting up a Gatsby portfolio project with strappy and Gatsby, using react and JavaScript functionality (relevance: 5)', 'The process of deploying the production-ready project on Netlify is described, including options such as drag and drop and continuous deployment using git, with an emphasis on the hassle-free signup process and the absence of credit card requirements', "The project involves setting up a React review component with functionality to display and switch between different people's reviews from an array, using state values and mapping through the array. (Relevance: 5)", 'Setting up dynamic links to navigate to different cocktail IDs using react router and passing different IDs for each cocktail.', 'Setting up app context to share values throughout the app using useContext and displaying children.', 'The chapter covers setting up CSS classes for different layouts based on the number of links, with a four-column layout for links greater than three, a three-column layout for three links, and a two-column layout for two links.', 'The chapter discusses the use of the use state and use ref hooks in React, including the setup process and rendering a navbar.', 'The chapter emphasizes the importance of working with bigger components to prepare for real-world scenarios and challenges, as projects may require handling large component files (quantifiable data: real-world scenarios).', 'The process of converting RGB values to hex color is demonstrated, showcasing the use of a function and accessing hex color through different methods.']}