title
🔴 Build a COVID-19 Tracker with REACT JS for Beginners (React Hooks and Material UI)
description
🚀 Learn React JS for FREE: https://www.cleverprogrammer.com/free?utm_source=youtube&utm_medium=yt-description&utm_campaign=fem-all-day&utm_content=20-jul-20-covid-19-tracker
Do you want to master React JS & learn how to make an income with your new skills? 👉 Click here & enroll NOW 🔥 https://www.cleverprogrammer.com/pwj?ref=https://www.cleverprogrammer.com/a/30476/isBQm8G8&utm_source=youtube&utm_medium=yt-description&utm_content=20-july-live-sonny-naz-covid-19-tracker&utm_campaign=live-everyday&utm_term=warm&utm_affiliate_link=true&course_name=REACT
REACT COVID Tracker Code:
https://github.com/CleverProgrammers/react-covid-tracker
In this FREE LIVE training, Sonny and Naz will show you how to build a COVID-19 Tracker with REACT JS 🚀
#reactjs #covid19 #app Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships
detail
{'title': '🔴 Build a COVID-19 Tracker with REACT JS for Beginners (React Hooks and Material UI)', 'heatmap': [{'end': 1807.897, 'start': 1639.462, 'weight': 0.804}, {'end': 3777.974, 'start': 3604.232, 'weight': 0.726}, {'end': 4267.722, 'start': 4099.412, 'weight': 0.75}, {'end': 5259.726, 'start': 5079.948, 'weight': 0.797}, {'end': 7716.232, 'start': 7542.239, 'weight': 0.704}, {'end': 8529.208, 'start': 8198.349, 'weight': 0.878}, {'end': 9677.803, 'start': 9339.118, 'weight': 0.754}, {'end': 10496.551, 'start': 10329.525, 'weight': 0.703}, {'end': 10827.913, 'start': 10659.144, 'weight': 0.74}, {'end': 11319.815, 'start': 10988.114, 'weight': 0.879}, {'end': 11974.494, 'start': 11804.868, 'weight': 0.999}, {'end': 12634.861, 'start': 12299.151, 'weight': 0.718}], 'summary': "Nas and sunny conduct a live call with 600+ viewers, building a covid-19 tracker app in react.js with map visualization and dynamic data rendering. the chapters cover using 'disease.sh' api with 20 billion open disease data, implementing material ui, react hooks, async functions, line graph, responsive table, and conditional styling. the series also includes zoom data analysis, firebase deployment, and live coding session with 200 viewers for 5 hours and 985 thumbs up.", 'chapters': [{'end': 735.22, 'segs': [{'end': 293.832, 'src': 'embed', 'start': 264.513, 'weight': 1, 'content': [{'end': 265.594, 'text': "Where is that one? I'm going to put it up.", 'start': 264.513, 'duration': 1.081}, {'end': 265.854, 'text': 'Hold on.', 'start': 265.654, 'duration': 0.2}, {'end': 270.397, 'text': 'Where is it? Oh, man.', 'start': 265.874, 'duration': 4.523}, {'end': 272.459, 'text': 'These comments are coming in so fast.', 'start': 270.897, 'duration': 1.562}, {'end': 274.54, 'text': 'I cannot even keep up.', 'start': 272.519, 'duration': 2.021}, {'end': 275.441, 'text': 'Holy crap.', 'start': 274.62, 'duration': 0.821}, {'end': 278.303, 'text': 'Dude, the chat is going insane right now.', 'start': 275.981, 'duration': 2.322}, {'end': 279.444, 'text': "It's Nas right now.", 'start': 278.603, 'duration': 0.841}, {'end': 281.325, 'text': 'Guys, 600 watching.', 'start': 279.604, 'duration': 1.721}, {'end': 283.066, 'text': "Joe, Nas, let's start dancing.", 'start': 281.365, 'duration': 1.701}, {'end': 283.566, 'text': 'Yes, Joe.', 'start': 283.106, 'duration': 0.46}, {'end': 284.127, 'text': 'I agree.', 'start': 283.727, 'duration': 0.4}, {'end': 285.148, 'text': "Let's all start dancing.", 'start': 284.247, 'duration': 0.901}, {'end': 289.05, 'text': "Let's see.", 'start': 288.67, 'duration': 0.38}, {'end': 292.151, 'text': 'It says he gets soft when he backs away from his mic.', 'start': 289.07, 'duration': 3.081}, {'end': 293.832, 'text': "So yeah, just make sure you're close to the mic.", 'start': 292.171, 'duration': 1.661}], 'summary': 'Nas is performing, with 600 viewers in an energetic chat, prompting close mic use.', 'duration': 29.319, 'max_score': 264.513, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM264513.jpg'}, {'end': 459.201, 'src': 'embed', 'start': 428.989, 'weight': 5, 'content': [{'end': 430.889, 'text': 'This is oh wait, hold on you guys can see it Hold on.', 'start': 428.989, 'duration': 1.9}, {'end': 431.189, 'text': 'Hold on.', 'start': 430.929, 'duration': 0.26}, {'end': 431.989, 'text': 'Give me a second.', 'start': 431.229, 'duration': 0.76}, {'end': 432.249, 'text': 'Hold on.', 'start': 432.009, 'duration': 0.24}, {'end': 433.33, 'text': 'I got I got I got it.', 'start': 432.449, 'duration': 0.881}, {'end': 435.91, 'text': 'All right Oh, there we go.', 'start': 434.11, 'duration': 1.8}, {'end': 437.51, 'text': 'So this is the app check this out.', 'start': 435.93, 'duration': 1.58}, {'end': 444.392, 'text': "This is the application that you guys are going to be building How epic is this? So here's what you can do on this app.", 'start': 437.55, 'duration': 6.842}, {'end': 448.693, 'text': "Here's what you can do You can for one you can select, you know recovered deaths.", 'start': 444.412, 'duration': 4.281}, {'end': 449.373, 'text': 'So, basically you.', 'start': 448.733, 'duration': 0.64}, {'end': 451.194, 'text': "So here's kind of the round down.", 'start': 449.773, 'duration': 1.421}, {'end': 451.955, 'text': 'what you got right?', 'start': 451.194, 'duration': 0.761}, {'end': 456.579, 'text': 'What you got is you have the number of new cases right?', 'start': 453.096, 'duration': 3.483}, {'end': 459.201, 'text': 'Number of new recovered cases, number of new deaths.', 'start': 457.019, 'duration': 2.182}], 'summary': 'App demonstration of building an app for tracking covid-19 cases and deaths.', 'duration': 30.212, 'max_score': 428.989, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM428989.jpg'}, {'end': 567.967, 'src': 'embed', 'start': 541.958, 'weight': 0, 'content': [{'end': 546.701, 'text': 'hey, look at that, the map, the chart changes too like.', 'start': 541.958, 'duration': 4.743}, {'end': 548.562, 'text': 'yeah, even the text is changing.', 'start': 546.701, 'duration': 1.861}, {'end': 549.402, 'text': "everything's changing.", 'start': 548.562, 'duration': 0.84}, {'end': 550.843, 'text': "it's so good.", 'start': 549.402, 'duration': 1.441}, {'end': 554.285, 'text': 'you guys, this is too good like like.', 'start': 550.843, 'duration': 3.442}, {'end': 554.965, 'text': "it's too good like.", 'start': 554.285, 'duration': 0.68}, {'end': 557.827, 'text': 'i mean, tell me, is there a better cover tracker out there right now?', 'start': 554.965, 'duration': 2.862}, {'end': 558.487, 'text': "i don't think there is one.", 'start': 557.827, 'duration': 0.66}, {'end': 559.857, 'text': "No, I don't think so.", 'start': 559.116, 'duration': 0.741}, {'end': 561.92, 'text': "I think this is the cleanest thing that I've seen right now.", 'start': 559.877, 'duration': 2.043}, {'end': 567.967, 'text': 'Yeah, So guys, if you are so like actually we got a lot of people like this is.', 'start': 561.94, 'duration': 6.027}], 'summary': 'Positive feedback on tracker tool with clean interface and real-time updates.', 'duration': 26.009, 'max_score': 541.958, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM541958.jpg'}, {'end': 621.237, 'src': 'embed', 'start': 594.703, 'weight': 2, 'content': [{'end': 600.286, 'text': 'I think, yes, we did use chart JS and we will teach you guys how to use that very shortly.', 'start': 594.703, 'duration': 5.583}, {'end': 601.923, 'text': 'Exactly, exactly.', 'start': 600.862, 'duration': 1.061}, {'end': 604.805, 'text': 'Is backend Flask? No, the backend is not Flask.', 'start': 602.323, 'duration': 2.482}, {'end': 608.568, 'text': "But guess what? Stick around and you'll see what the backend is.", 'start': 604.945, 'duration': 3.623}, {'end': 614.152, 'text': "So let's see.", 'start': 613.331, 'duration': 0.821}, {'end': 618.595, 'text': 'Somebody asked, can we add a dark and light background mode? That would be cool actually at some point.', 'start': 614.752, 'duration': 3.843}, {'end': 620.016, 'text': "Maybe not now, but that's cool.", 'start': 618.795, 'duration': 1.221}, {'end': 621.237, 'text': "That's cool.", 'start': 620.737, 'duration': 0.5}], 'summary': 'Use of chart js will be taught shortly, backend not flask, possibility of adding dark and light background mode.', 'duration': 26.534, 'max_score': 594.703, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM594703.jpg'}], 'start': 0.109, 'title': 'Live call: building covid-19 tracker in react.js', 'summary': 'Features a live call where nas and sunny build a covid-19 tracker app in react.js with 600+ viewers and interactive features like map visualization and dynamic data rendering. the call also includes multiple call-to-action prompts.', 'chapters': [{'end': 292.151, 'start': 0.109, 'title': 'Live call: building covid-19 tracker in react.js', 'summary': 'Features a live call where nas and sunny are building a covid-19 tracker app in react.js, with enthusiastic engagement from over 600 viewers and multiple call-to-action prompts to like, subscribe, and share the stream.', 'duration': 292.042, 'highlights': ['Enthusiastic engagement with over 600 viewers and multiple call-to-action prompts to like, subscribe, and share the stream.', 'Building a COVID-19 tracker app in React.js with Nas and Sunny, showcasing a sneak peek and receiving positive feedback and requests from viewers.', "Interactive participation from viewers and positive comments, with mentions of React.js with Firebase and praise for Sunny's skills."]}, {'end': 735.22, 'start': 292.171, 'title': 'Building covid-19 tracker app', 'summary': 'Covers the live call where 711 people joined to build a beginner-friendly covid-19 tracker app in react, with interactive features like map visualization and dynamic data rendering.', 'duration': 443.049, 'highlights': ['The live call gathered 711 participants to build a COVID-19 tracker app in React. The chapter mentions that 711 people joined the live call to build the COVID-19 tracker app, demonstrating significant interest and participation.', 'Interactive features include map visualization and dynamic data rendering. The app offers interactive features such as map visualization, dynamic data rendering, and the ability to select specific countries, providing a user-friendly and engaging experience.', "The app enables users to select new cases, recovered cases, and deaths, with daily and total statistics available. Users can select new cases, recovered cases, and deaths, with daily and total statistics available, enhancing the app's functionality and providing comprehensive information on COVID-19."]}], 'duration': 735.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM109.jpg', 'highlights': ['Enthusiastic engagement with over 600 viewers and multiple call-to-action prompts to like, subscribe, and share the stream.', 'The live call gathered 711 participants to build a COVID-19 tracker app in React.', 'Interactive features include map visualization and dynamic data rendering.', 'Building a COVID-19 tracker app in React.js with Nas and Sunny, showcasing a sneak peek and receiving positive feedback and requests from viewers.', 'The app enables users to select new cases, recovered cases, and deaths, with daily and total statistics available.', "Interactive participation from viewers and positive comments, with mentions of React.js with Firebase and praise for Sunny's skills."]}, {'end': 1574.768, 'segs': [{'end': 779.828, 'src': 'embed', 'start': 752.274, 'weight': 2, 'content': [{'end': 757.218, 'text': "yeah, so a lot of great stuff and, and sunny, what's the last thing about this thing?", 'start': 752.274, 'duration': 4.944}, {'end': 759.652, 'text': 'Go on.', 'start': 759.332, 'duration': 0.32}, {'end': 761.054, 'text': 'We are going to.', 'start': 760.053, 'duration': 1.001}, {'end': 763.017, 'text': "Oh, it's responsive, guys.", 'start': 761.054, 'duration': 1.963}, {'end': 765.86, 'text': 'So watch what happens when Nod shrinks down the screen.', 'start': 763.277, 'duration': 2.583}, {'end': 767.482, 'text': 'Look at that.', 'start': 765.92, 'duration': 1.562}, {'end': 769.585, 'text': 'Hey Hey, look at that.', 'start': 767.722, 'duration': 1.863}, {'end': 771.087, 'text': "It's just responsive.", 'start': 769.645, 'duration': 1.442}, {'end': 774.871, 'text': 'So this can work on mobile and tablet at the same time.', 'start': 771.607, 'duration': 3.264}, {'end': 777.214, 'text': 'Guys, this is too good.', 'start': 775.172, 'duration': 2.042}, {'end': 779.087, 'text': "It's still good, guys.", 'start': 778.447, 'duration': 0.64}, {'end': 779.828, 'text': "That's it, guys.", 'start': 779.107, 'duration': 0.721}], 'summary': 'The website is responsive, working on mobile and tablet simultaneously.', 'duration': 27.554, 'max_score': 752.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM752274.jpg'}, {'end': 1099.291, 'src': 'embed', 'start': 1072.199, 'weight': 6, 'content': [{'end': 1077.5, 'text': 'So even when we resize, showing the container getting to the correct layout so that way we can move forward with the build.', 'start': 1072.199, 'duration': 5.301}, {'end': 1078.721, 'text': 'Exactly Exactly.', 'start': 1077.901, 'duration': 0.82}, {'end': 1083.002, 'text': "So that's part four, then part five, going to create the header, which is what she saw right there.", 'start': 1078.741, 'duration': 4.261}, {'end': 1088.003, 'text': "Then we're going to create the info boxes, which is, you know which are these info boxes right here, right?", 'start': 1083.302, 'duration': 4.701}, {'end': 1093.827, 'text': "After that point, you're going to go ahead and create the table, which is this part right here.", 'start': 1088.403, 'duration': 5.424}, {'end': 1096.83, 'text': "And then finally, let's see, let's keep going.", 'start': 1094.768, 'duration': 2.062}, {'end': 1099.291, 'text': "Eight, create a chart, which you've seen that as well.", 'start': 1097.05, 'duration': 2.241}], 'summary': 'Resizing container, creating header, info boxes, table, and chart for the build.', 'duration': 27.092, 'max_score': 1072.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1072199.jpg'}, {'end': 1182.65, 'src': 'embed', 'start': 1126.807, 'weight': 1, 'content': [{'end': 1128.808, 'text': 'So if you guys are pumped about that, let us know.', 'start': 1126.807, 'duration': 2.001}, {'end': 1130.069, 'text': 'Exactly Exactly.', 'start': 1129.208, 'duration': 0.861}, {'end': 1136.232, 'text': "And then finally, finally, what we are going to do is we're going to do some styling, right? Obviously you'll, you'll need it as well.", 'start': 1130.349, 'duration': 5.883}, {'end': 1141.315, 'text': "Um, so let's go ahead actually, uh, Oh shit.", 'start': 1136.792, 'duration': 4.523}, {'end': 1141.535, 'text': 'Hold on.', 'start': 1141.395, 'duration': 0.14}, {'end': 1146.171, 'text': "yep, so, guys, what we're going to be doing after that is doing some styling.", 'start': 1143.69, 'duration': 2.481}, {'end': 1151.092, 'text': "um, today we are going to be using material ui, so we're really pumped to show you guys about that.", 'start': 1146.171, 'duration': 4.921}, {'end': 1158.054, 'text': "so we've done that in a couple of projects, but we will be using material ui to get that up and running and then we will be.", 'start': 1151.092, 'duration': 6.962}, {'end': 1159.654, 'text': "finally, what's the final step?", 'start': 1158.054, 'duration': 1.6}, {'end': 1160.554, 'text': "now is that we're going to be doing.", 'start': 1159.654, 'duration': 0.9}, {'end': 1163.015, 'text': 'the final step is going to be is the?', 'start': 1160.554, 'duration': 2.461}, {'end': 1169.824, 'text': "So we're actually going to deploy this application fully like literally fully, guys, which is going to be crazy.", 'start': 1163.575, 'duration': 6.249}, {'end': 1177.415, 'text': "And you guys will be able to use it live and we'll be able to actually show it and put it on your portfolio and show it to others and use it on your own.", 'start': 1170.184, 'duration': 7.231}, {'end': 1179.598, 'text': 'That is amazing and epic.', 'start': 1177.495, 'duration': 2.103}, {'end': 1182.65, 'text': 'exactly sweet, sweet, sweet.', 'start': 1180.689, 'duration': 1.961}], 'summary': 'Using material ui, deploying application fully, enabling live usage and portfolio showcase.', 'duration': 55.843, 'max_score': 1126.807, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1126807.jpg'}, {'end': 1287.776, 'src': 'embed', 'start': 1258.257, 'weight': 0, 'content': [{'end': 1260.779, 'text': "Exactly So let's really jump in straight into it guys.", 'start': 1258.257, 'duration': 2.522}, {'end': 1266.344, 'text': "So the first thing that we need to do is let's go literally back to the beginning, part one, which is going to be what.", 'start': 1261, 'duration': 5.344}, {'end': 1266.645, 'text': 'what is.', 'start': 1266.344, 'duration': 0.301}, {'end': 1267.545, 'text': 'what is part one, guys?', 'start': 1266.645, 'duration': 0.9}, {'end': 1268.486, 'text': 'You guys know what this is?', 'start': 1267.565, 'duration': 0.921}, {'end': 1269.527, 'text': 'Drop in the comments below.', 'start': 1268.506, 'duration': 1.021}, {'end': 1272.03, 'text': 'It is going to be create the wireframe.', 'start': 1269.888, 'duration': 2.142}, {'end': 1274.211, 'text': "Now let's go ahead and actually create the wireframe.", 'start': 1272.09, 'duration': 2.121}, {'end': 1279.549, 'text': "And what are we going to use Sunny for this one? So we are going to use, I think we're going to use draw IO, right? Yeah.", 'start': 1274.231, 'duration': 5.318}, {'end': 1281.371, 'text': "We're going to use the most epic.", 'start': 1279.869, 'duration': 1.502}, {'end': 1287.776, 'text': "Okay Maybe it's not the most epic, but it's a pretty, it's a pretty cool, it's a pretty cool tool that you should all be using guys.", 'start': 1281.451, 'duration': 6.325}], 'summary': 'Create wireframe using draw io for part one of the project.', 'duration': 29.519, 'max_score': 1258.257, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1258257.jpg'}], 'start': 735.22, 'title': 'Building covid-19 tracker with external api', 'summary': "Covers building a covid-19 tracker using the 'disease.sh' api with 20 billion open disease data, including wireframe creation, project setup using 'create react app', component creation, and live deployment. it also discusses creating wireframes using draw.io to visualize app changes and client requirements.", 'chapters': [{'end': 1258.217, 'start': 735.22, 'title': 'Building covid-19 tracker with external api', 'summary': "Covers the process of building a covid-19 tracker using an external api, 'disease.sh', with a total of 20 billion open disease data, including creating wireframes, utilizing 'create react app' for setting up the project, structuring the application, creating components such as header, info boxes, table, chart, and map, styling using material ui, and finally deploying the application live.", 'duration': 522.997, 'highlights': ["The chapter covers the process of building a COVID-19 tracker using an external API, 'disease.sh', with a total of 20 billion open disease data The speaker mentions using an external API called 'disease.sh' to pull in live stats from COVID-19, highlighting a total of 20 billion open disease data.", "Utilizing 'Create React App' for setting up the project They explain the use of 'Create React App', a tool built by Facebook, to set up the entire app with just one command line, providing a quick start for the first React project.", 'Creating wireframes for visualization and planning The importance of creating wireframes is emphasized as it provides a top-level design and clear overview for development, aiding in faster and efficient project building.', 'Structuring the application and creating components such as header, info boxes, table, chart, and map The step-by-step process of structuring the COVID-19 tracker application and creating essential components such as header, info boxes, table, chart, and map is highlighted.', 'Styling using Material UI and deploying the application live The use of Material UI for styling and the plan to deploy the application live is mentioned, showcasing the complete process of building and presenting the COVID-19 tracker.']}, {'end': 1574.768, 'start': 1258.257, 'title': 'Creating wireframes for covid-19 tracker', 'summary': 'Covers the process of creating wireframes using draw.io, emphasizing the importance of wireframes in visualizing app changes and meeting client requirements, with a focus on creating a background, header, and select drop-down field.', 'duration': 316.511, 'highlights': ['The chapter emphasizes the importance of wireframes in visualizing app changes and meeting client requirements. The wireframe serves as a high-level overview of what the client wants, allowing for a visual representation of how the app will change from desktop to mobile view.', 'The process of creating wireframes using draw.io is explained, highlighting the creation of a background, header, and select drop-down field for the COVID-19 tracker. The speaker demonstrates the steps for creating a background using a round rectangle, adding a header for the COVID-19 tracker, and explaining the creation of a select drop-down field with options like UK, worldwide, and Indonesia.', 'The speaker demonstrates the use of draw.io for creating wireframes, providing practical guidance on resizing and styling elements like text and shapes. Practical guidance is provided on using draw.io, including resizing elements like a round rectangle, styling text, and creating a select drop-down field for country options.']}], 'duration': 839.548, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM735220.jpg', 'highlights': ["Building a COVID-19 tracker using 'disease.sh' API with 20 billion open disease data", "Utilizing 'Create React App' for quick project setup", 'Emphasizing the importance of wireframes for visualization and planning', 'Step-by-step process of structuring the application and creating essential components', 'Styling using Material UI and deploying the application live', 'Emphasizing the importance of wireframes in visualizing app changes and meeting client requirements', 'Explaining the process of creating wireframes using draw.io', 'Practical guidance on resizing and styling elements using draw.io']}, {'end': 3308.496, 'segs': [{'end': 1807.897, 'src': 'heatmap', 'start': 1639.462, 'weight': 0.804, 'content': [{'end': 1640.022, 'text': 'You click it.', 'start': 1639.462, 'duration': 0.56}, {'end': 1640.963, 'text': 'Well, hold on.', 'start': 1640.062, 'duration': 0.901}, {'end': 1642.524, 'text': 'Command click actually.', 'start': 1641.443, 'duration': 1.081}, {'end': 1645.527, 'text': "It's command click and I think it's option click on Windows.", 'start': 1642.604, 'duration': 2.923}, {'end': 1648.288, 'text': 'And that will actually copy the text.', 'start': 1646.167, 'duration': 2.121}, {'end': 1652.65, 'text': "And then let's say this is going to be plus, you know, plus what? 2000 plus 2000 plus 2000.", 'start': 1648.668, 'duration': 3.982}, {'end': 1657.732, 'text': "And then, and then I'm going to say command click and drag again.", 'start': 1652.65, 'duration': 5.082}, {'end': 1663.014, 'text': "And this is going to be 1.2 million total, right? So that's going to be the total.", 'start': 1657.752, 'duration': 5.262}, {'end': 1671.383, 'text': 'And that gives us just a basic idea of what we want to build, of what this is going to look like.', 'start': 1664.094, 'duration': 7.289}, {'end': 1673.066, 'text': 'Beautiful All right.', 'start': 1672.064, 'duration': 1.002}, {'end': 1676.75, 'text': "And the next thing we want to do is what we're going to want to go ahead and duplicate this stuff.", 'start': 1673.166, 'duration': 3.584}, {'end': 1680.655, 'text': "So I'm going to say command, command, click, command, click, command, click.", 'start': 1676.77, 'duration': 3.885}, {'end': 1682.237, 'text': "And I'm going to let's see.", 'start': 1680.675, 'duration': 1.562}, {'end': 1683.999, 'text': 'i do like that.', 'start': 1683.158, 'duration': 0.841}, {'end': 1686.02, 'text': 'yeah, i can do it like that.', 'start': 1683.999, 'duration': 2.021}, {'end': 1692.966, 'text': 'uh, so hard sometimes there we go command, click, command, click, command, click, and then, when i command and then drag,', 'start': 1686.02, 'duration': 6.946}, {'end': 1694.687, 'text': 'and that will duplicate all of everything.', 'start': 1692.966, 'duration': 1.721}, {'end': 1701.312, 'text': 'you see, just that drag and that will duplicate everything like that, beautiful, right there, just like that.', 'start': 1694.687, 'duration': 6.625}, {'end': 1708.768, 'text': "yeah, i'm gonna put it here sweet, sweet, sweet, sweet, and this is going to be recovered And this is going to be deaths.", 'start': 1701.312, 'duration': 7.456}, {'end': 1710.069, 'text': 'All right.', 'start': 1709.728, 'duration': 0.341}, {'end': 1710.849, 'text': 'All right.', 'start': 1710.629, 'duration': 0.22}, {'end': 1713.892, 'text': 'Obviously, you know, not to scale up, but you guys get the point.', 'start': 1711.29, 'duration': 2.602}, {'end': 1714.192, 'text': 'All right.', 'start': 1713.912, 'duration': 0.28}, {'end': 1715.293, 'text': 'You guys get the point.', 'start': 1714.652, 'duration': 0.641}, {'end': 1716.734, 'text': "So we've done the cards.", 'start': 1715.353, 'duration': 1.381}, {'end': 1719.096, 'text': "What's next, guys? What is next? Let us know in the comments below.", 'start': 1716.814, 'duration': 2.282}, {'end': 1721.078, 'text': 'What is next? What should we build next? Tell me, Sonny.', 'start': 1719.156, 'duration': 1.922}, {'end': 1729.13, 'text': "So let's have the map underneath and then we're going to have the table and everything else on the right.", 'start': 1723.668, 'duration': 5.462}, {'end': 1732.651, 'text': 'So the first thing we want to do is drag and drop a rectangle underneath.', 'start': 1729.19, 'duration': 3.461}, {'end': 1735.552, 'text': 'And this is going to resemble the map guys.', 'start': 1733.071, 'duration': 2.481}, {'end': 1739.894, 'text': 'So this is going to be pretty much where we have that map that we saw with all the circles on it.', 'start': 1735.752, 'duration': 4.142}, {'end': 1741.875, 'text': 'everything will render inside of it.', 'start': 1740.294, 'duration': 1.581}, {'end': 1745.837, 'text': "You can already see now that it's starting to shape up like the app that we saw earlier.", 'start': 1742.215, 'duration': 3.622}, {'end': 1749.76, 'text': 'You should always do this before, and it gives you a very clear indicator,', 'start': 1746.318, 'duration': 3.442}, {'end': 1752.961, 'text': "especially when you're considering how to build a website in a responsive way.", 'start': 1749.76, 'duration': 3.201}, {'end': 1758.705, 'text': "It's going to give you a clear indicator as to where to begin and how to add the containers in their appropriate places.", 'start': 1753.342, 'duration': 5.363}, {'end': 1761.399, 'text': "Exactly And I'm trying to find here a map.", 'start': 1759.958, 'duration': 1.441}, {'end': 1764.482, 'text': "I'm like, I think I'll just do like this, like this, just like, like that.", 'start': 1761.419, 'duration': 3.063}, {'end': 1765.262, 'text': 'Just like a map.', 'start': 1764.662, 'duration': 0.6}, {'end': 1767.624, 'text': "I don't see a better way to do it right now.", 'start': 1765.983, 'duration': 1.641}, {'end': 1771.307, 'text': 'But you can see, I just simply put in a rectangle, right? I put a rectangle guys.', 'start': 1768.064, 'duration': 3.243}, {'end': 1774.81, 'text': "And now, now it's, now we know there's a map in there.", 'start': 1771.927, 'duration': 2.883}, {'end': 1776.05, 'text': "Okay So that's the most important part.", 'start': 1774.83, 'duration': 1.22}, {'end': 1781.515, 'text': 'Okay Next up, next up is going to be what? Next up is going to be the following.', 'start': 1776.091, 'duration': 5.424}, {'end': 1787.946, 'text': "So that's going to be what? What is next, Sonny? So now we're gonna have a table on the right.", 'start': 1781.535, 'duration': 6.411}, {'end': 1795.45, 'text': "So a table, and this table is gonna have a list of pretty much all of the live cases by country, and they're gonna be ranked.", 'start': 1788.046, 'duration': 7.404}, {'end': 1800.933, 'text': "So you're gonna have like USA, Brazil, India, Russia, South Africa, and they're basically gonna go in.", 'start': 1795.47, 'duration': 5.463}, {'end': 1802.414, 'text': 'I always forget the ascending, descending,', 'start': 1800.933, 'duration': 1.481}, {'end': 1807.897, 'text': "but you're basically gonna have the most highest number of cases at the top and then it's gonna basically have a scrollable list.", 'start': 1802.414, 'duration': 5.483}], 'summary': 'The transcript discusses creating a design layout with specific commands and elements, like duplicating and placing a map and table for a website.', 'duration': 168.435, 'max_score': 1639.462, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1639462.jpg'}, {'end': 1922.293, 'src': 'embed', 'start': 1892.131, 'weight': 10, 'content': [{'end': 1892.691, 'text': 'There we go.', 'start': 1892.131, 'duration': 0.56}, {'end': 1898.735, 'text': "Also, guys, I see a lot of people asking about what we're going to be using for the maps.", 'start': 1893.272, 'duration': 5.463}, {'end': 1900.596, 'text': "It's not actually going to be Google Maps, guys.", 'start': 1899.076, 'duration': 1.52}, {'end': 1901.837, 'text': "It's something it's called.", 'start': 1900.697, 'duration': 1.14}, {'end': 1904.159, 'text': 'What is it called? Leaflet, guys.', 'start': 1901.857, 'duration': 2.302}, {'end': 1905.86, 'text': 'Yeah, Leaflet.', 'start': 1904.759, 'duration': 1.101}, {'end': 1909.522, 'text': 'And guys, the difference with this one is no messing around with API keys.', 'start': 1905.9, 'duration': 3.622}, {'end': 1910.563, 'text': "It's open source.", 'start': 1909.642, 'duration': 0.921}, {'end': 1919.711, 'text': 'So if you are literally following this right now, when we actually get to building, You guys can follow along with us without having to get API keys.', 'start': 1910.903, 'duration': 8.808}, {'end': 1922.293, 'text': 'After going through all that headache, it will just work.', 'start': 1919.971, 'duration': 2.322}], 'summary': 'We will be using leaflet for maps, an open-source alternative to google maps, which eliminates the need for api keys.', 'duration': 30.162, 'max_score': 1892.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1892131.jpg'}, {'end': 2003.21, 'src': 'embed', 'start': 1973.442, 'weight': 14, 'content': [{'end': 1974.062, 'text': "What's next, Sonny??", 'start': 1973.442, 'duration': 0.62}, {'end': 1975.463, 'text': 'Build it.', 'start': 1974.142, 'duration': 1.321}, {'end': 1977.183, 'text': 'You just simply build it, guys.', 'start': 1975.703, 'duration': 1.48}, {'end': 1978.843, 'text': "And that's pretty much it.", 'start': 1977.283, 'duration': 1.56}, {'end': 1980.604, 'text': "So, literally, let's go ahead.", 'start': 1979.184, 'duration': 1.42}, {'end': 1983.545, 'text': 'What I want you to do is I want you to take a screenshot of what this is right now.', 'start': 1980.804, 'duration': 2.741}, {'end': 1984.745, 'text': 'Literally take a screenshot.', 'start': 1983.565, 'duration': 1.18}, {'end': 1991.487, 'text': 'And, you know, actually, what I want you to do that would be really cool is go ahead and make a wireframe of your own as well.', 'start': 1985.365, 'duration': 6.122}, {'end': 1993.607, 'text': 'And when you do make one, share it with us.', 'start': 1991.867, 'duration': 1.74}, {'end': 1994.988, 'text': 'Share it with us on Instagram.', 'start': 1993.907, 'duration': 1.081}, {'end': 1995.808, 'text': 'I want to see it.', 'start': 1995.068, 'duration': 0.74}, {'end': 1998.464, 'text': "Seriously That's a good idea, yeah.", 'start': 1995.868, 'duration': 2.596}, {'end': 2003.21, 'text': 'Exactly Guys, yeah, remember, tag me and Naz in, and then that way we can see your Instagram.', 'start': 1998.644, 'duration': 4.566}], 'summary': 'Encouraging audience to build and share wireframes on instagram.', 'duration': 29.768, 'max_score': 1973.442, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1973442.jpg'}, {'end': 2050.462, 'src': 'embed', 'start': 2025.215, 'weight': 13, 'content': [{'end': 2030.141, 'text': "So trust me, go ahead, take it out, tag us in there, and then we'll be happy to speak with you guys.", 'start': 2025.215, 'duration': 4.926}, {'end': 2032.343, 'text': 'Exactly, exactly, awesome.', 'start': 2031.001, 'duration': 1.342}, {'end': 2036.776, 'text': 'so, with that said, with that said, sunny, what do we do in this case?', 'start': 2032.634, 'duration': 4.142}, {'end': 2040.818, 'text': 'now, which is we go ahead and build this thing.', 'start': 2036.776, 'duration': 4.042}, {'end': 2042.058, 'text': "dude, let's build it.", 'start': 2040.818, 'duration': 1.24}, {'end': 2042.679, 'text': "who's ready?", 'start': 2042.058, 'duration': 0.621}, {'end': 2043.379, 'text': "who's pumped?", 'start': 2042.679, 'duration': 0.7}, {'end': 2044.439, 'text': 'give us some fire emojis.', 'start': 2043.379, 'duration': 1.06}, {'end': 2046.04, 'text': 'give us some rocket emojis.', 'start': 2044.439, 'duration': 1.601}, {'end': 2049.922, 'text': "let's go ahead, and you want to make sure, get your water ready.", 'start': 2046.04, 'duration': 3.882}, {'end': 2050.462, 'text': "that's it.", 'start': 2049.922, 'duration': 0.54}], 'summary': 'Encouraging audience participation and enthusiasm for building with emojis and water.', 'duration': 25.247, 'max_score': 2025.215, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2025215.jpg'}, {'end': 2370.533, 'src': 'embed', 'start': 2341.269, 'weight': 1, 'content': [{'end': 2342.57, 'text': "so that's what you're gonna have to do.", 'start': 2341.269, 'duration': 1.301}, {'end': 2343.591, 'text': 'yeah, sam.', 'start': 2342.57, 'duration': 1.021}, {'end': 2348.314, 'text': "so number one thing is npm, and the way you guys get npm is from no, so this is, that's node, right.", 'start': 2343.591, 'duration': 4.723}, {'end': 2351.557, 'text': 'so the first thing you want to download is really node.js.', 'start': 2348.314, 'duration': 3.243}, {'end': 2354.439, 'text': 'right, so node.js, which is that right here.', 'start': 2351.557, 'duration': 2.882}, {'end': 2357.582, 'text': 'so go ahead and click download node.js if you do not have it.', 'start': 2354.439, 'duration': 3.143}, {'end': 2364.428, 'text': 'and then, once you have node.js, what you want is you want to open up terminal and then and then select and then type in npm,', 'start': 2357.582, 'duration': 6.846}, {'end': 2369.212, 'text': 'install dash g npx and that will install npx for you.', 'start': 2364.428, 'duration': 4.784}, {'end': 2370.533, 'text': 'you guys got that.', 'start': 2369.212, 'duration': 1.321}], 'summary': 'Download node.js and install npx using npm in the terminal.', 'duration': 29.264, 'max_score': 2341.269, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2341269.jpg'}, {'end': 2411.399, 'src': 'embed', 'start': 2385.319, 'weight': 15, 'content': [{'end': 2392.401, 'text': "Okay, yeah, so now you guys can see in the terminal it says uh, it's all pretty much wrapped up for us.", 'start': 2385.319, 'duration': 7.082}, {'end': 2394.803, 'text': 'so what you need to do now is very important, guys,', 'start': 2392.401, 'duration': 2.402}, {'end': 2399.087, 'text': "because i see a lot of you guys trying to run npm start here and it's not going to work in the terminal.", 'start': 2394.803, 'duration': 4.284}, {'end': 2404.713, 'text': "now you need to do cd to go, basically go into the folder and you say cv, covid or whatever you've called it.", 'start': 2399.087, 'duration': 5.626}, {'end': 2411.399, 'text': "in this case i'm going to do cd cover 19 track and i just hit tab to do auto, complete, Enter, and now you can see I'm in the correct folder.", 'start': 2404.713, 'duration': 6.686}], 'summary': 'Need to use cd command to navigate to the folder, not npm start.', 'duration': 26.08, 'max_score': 2385.319, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2385319.jpg'}, {'end': 2613.458, 'src': 'embed', 'start': 2582.794, 'weight': 11, 'content': [{'end': 2586.496, 'text': 'And then you want to go ahead and delete the setup test.js as well.', 'start': 2582.794, 'duration': 3.702}, {'end': 2590.041, 'text': "because that's, again, another test file, which we don't really care about right now.", 'start': 2587.176, 'duration': 2.865}, {'end': 2590.902, 'text': 'Got it.', 'start': 2590.061, 'duration': 0.841}, {'end': 2595.33, 'text': 'And then what I do is delete the logo.svg, which was that little spinning icon.', 'start': 2591.043, 'duration': 4.287}, {'end': 2596.692, 'text': 'And that was a cool logo, man.', 'start': 2595.41, 'duration': 1.282}, {'end': 2597.574, 'text': 'I love that logo.', 'start': 2596.752, 'duration': 0.822}, {'end': 2602.811, 'text': "Yeah We have to get rid of that one, and then it's going to freak out.", 'start': 2598.615, 'duration': 4.196}, {'end': 2604.732, 'text': "It's like, whoa, whoa, whoa, everything's broken.", 'start': 2602.831, 'duration': 1.901}, {'end': 2608.915, 'text': "You're going to go over to app.js, and there's a few things that we need to delete now.", 'start': 2604.952, 'duration': 3.963}, {'end': 2613.458, 'text': "So inside of app.js, we're going to go ahead and get rid of the top line because we no longer have the logo.", 'start': 2608.995, 'duration': 4.463}], 'summary': 'Deleting test.js, logo.svg, and code in app.js to remove unnecessary files and references.', 'duration': 30.664, 'max_score': 2582.794, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2582794.jpg'}, {'end': 2647.464, 'src': 'embed', 'start': 2618.562, 'weight': 6, 'content': [{'end': 2625.687, 'text': "And pretty much what I do is I change this to a lowercase a because we're going to use something called a BEM naming convention.", 'start': 2618.562, 'duration': 7.125}, {'end': 2627.768, 'text': 'So BEM naming convention.', 'start': 2626.147, 'duration': 1.621}, {'end': 2637.311, 'text': "We'll go through what that means soon, but We'll change that to lowercase a, and then here I just do H1 and I say so right now what we're doing?", 'start': 2628.269, 'duration': 9.042}, {'end': 2646.683, 'text': "we are building, so let's build a COVID-19 tracker of programmers.", 'start': 2637.311, 'duration': 9.372}, {'end': 2647.464, 'text': 'There we go.', 'start': 2646.984, 'duration': 0.48}], 'summary': 'Changing to lowercase a for bem naming convention, building a covid-19 tracker of programmers.', 'duration': 28.902, 'max_score': 2618.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2618562.jpg'}, {'end': 2768.891, 'src': 'embed', 'start': 2729.712, 'weight': 0, 'content': [{'end': 2731.113, 'text': 'guys, all right, got it.', 'start': 2729.712, 'duration': 1.401}, {'end': 2732.334, 'text': 'give me a thumbs up if you guys got it.', 'start': 2731.113, 'duration': 1.221}, {'end': 2735.671, 'text': 'if you guys got it, give me a thumbs up in the comments, Amazing.', 'start': 2732.334, 'duration': 3.337}, {'end': 2739.814, 'text': 'And guys, you guys are being amazing with these comments right now.', 'start': 2737.393, 'duration': 2.421}, {'end': 2743.097, 'text': 'I can see like so many people are being like positive and encouraging.', 'start': 2739.834, 'duration': 3.263}, {'end': 2744.037, 'text': 'So keep that up, guys.', 'start': 2743.137, 'duration': 0.9}, {'end': 2745.839, 'text': 'We like to see that.', 'start': 2744.057, 'duration': 1.782}, {'end': 2747.66, 'text': 'So carrying on.', 'start': 2746.659, 'duration': 1.001}, {'end': 2754.205, 'text': "So what you guys, you know, is there's also like what I don't really like this, but it's an annoying thing that we always have to account for.", 'start': 2747.82, 'duration': 6.385}, {'end': 2755.766, 'text': "So there's one more step here.", 'start': 2754.265, 'duration': 1.501}, {'end': 2757.547, 'text': "So let's go over to app.css.", 'start': 2755.786, 'duration': 1.761}, {'end': 2760.289, 'text': 'Okay And what I like to do is.', 'start': 2758.308, 'duration': 1.981}, {'end': 2766.649, 'text': 'In web development, you typically get these imaginary margins that pop up.', 'start': 2762.185, 'duration': 4.464}, {'end': 2768.891, 'text': 'Firstly, we want to get rid of all of this CSS.', 'start': 2767.169, 'duration': 1.722}], 'summary': 'Encouraging positive comments. removing imaginary margins in css.', 'duration': 39.179, 'max_score': 2729.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2729712.jpg'}, {'end': 2859.003, 'src': 'embed', 'start': 2830.377, 'weight': 8, 'content': [{'end': 2833.639, 'text': "let's do it, dude, let's do it, bro.", 'start': 2830.377, 'duration': 3.262}, {'end': 2840.206, 'text': 'so well, the way i go about this, guys, is if, uh, now, if you just go ahead and follow me in vs code, Okay, gotcha.', 'start': 2833.639, 'duration': 6.567}, {'end': 2848.373, 'text': 'So if you go to the live share tab, and then you just click on perfect.', 'start': 2841.287, 'duration': 7.086}, {'end': 2853.578, 'text': 'And that means that Nas will now be following any sort of movement that I do inside the app.', 'start': 2848.954, 'duration': 4.624}, {'end': 2859.003, 'text': 'Perfect So guys, what we want to do, right, is I like to just do like markers before I start coding.', 'start': 2853.778, 'duration': 5.225}], 'summary': 'Using vs code live share, they coordinate to follow movement for coding.', 'duration': 28.626, 'max_score': 2830.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM2830377.jpg'}], 'start': 1574.768, 'title': 'App development techniques', 'summary': 'Covers creating information boxes for coronavirus statistics, wireframing and visualizing an app, setting up a react app for covid-19 tracker, and web development tips with javascript course promotion.', 'chapters': [{'end': 1701.312, 'start': 1574.768, 'title': 'Creating information boxes for coronavirus statistics', 'summary': 'Demonstrates the process of creating information boxes for coronavirus statistics, including the use of text and duplication to display the number of cases and total figures.', 'duration': 126.544, 'highlights': ['The process of creating information boxes for coronavirus statistics is demonstrated, including the use of text and duplication to display the number of cases and total figures.', 'The speaker explains the steps to create the info boxes for displaying coronavirus statistics, such as adding text for cases, adjusting text size, and duplicating the information for different values.', 'The demonstration involves left-aligning the text, adjusting the font size to 10 points, and using the command-click function to duplicate text and values for coronavirus cases and total figures.', 'The tutorial includes practical instructions on duplicating the information boxes by using the command-click function and dragging, allowing for efficient replication of the displayed statistics.']}, {'end': 2088.806, 'start': 1701.312, 'title': 'App wireframing and visualization', 'summary': 'Discusses the process of wireframing and visualizing an app, including creating a map, table, and graph components, using leaflet for maps, and emphasizing the importance of wireframing in guiding the development process.', 'duration': 387.494, 'highlights': ['The chapter discusses the process of wireframing and visualizing an app, including creating a map, table, and graph components.', 'Leaflet is recommended for creating maps as it does not require API keys and is open source, making it easier for developers to follow along without additional setup.', 'The importance of wireframing in guiding the development process is emphasized, providing a clear visualization of the data and the subsequent building process.', 'The chapter encourages audience participation by sharing their wireframes on Instagram for feedback and improvement, fostering a collaborative learning environment.']}, {'end': 2747.66, 'start': 2088.967, 'title': 'React app setup and firebase deployment', 'summary': 'Details the setup process for a react app, including using mpx to create a covid-19 tracker and setting up firebase for deployment, while also cleaning up the project by deleting unnecessary files and modifying app.js.', 'duration': 658.693, 'highlights': ["Setting up a React app using MPX to create a COVID-19 tracker The speaker demonstrates using MPX to create a React app named 'COVID-19 tracker', highlighting the simplicity of the process and the convenience of getting everything set up and running smoothly.", "Setting up Firebase for deployment and project creation The speaker guides the audience through setting up Firebase by creating a new project named 'COVID-19 tracker', emphasizing the ease of use and the fact that it is free, while explaining its suite of tools by Google and its functionality for authentication, deployments, hosting, database storage, etc.", "Cleaning up the project by deleting unnecessary files and modifying app.js The speaker advises on the cleanup process for a React project, deleting test files and logo.svg, and modifying app.js by removing the top line and changing the header to a lowercase 'a' using a BEM naming convention, ultimately updating the content to reflect building a COVID-19 tracker."]}, {'end': 3308.496, 'start': 2747.82, 'title': 'Web development tips & profit with javascript course', 'summary': 'Covers the process of cleaning up css, structuring the covid tracker app, and promoting a javascript course, emphasizing its benefits, mentorship, and success stories.', 'duration': 560.676, 'highlights': ['The chapter covers the process of cleaning up CSS, including setting margins to zero to eliminate imaginary margins, and finishing the cleaning up process. The speaker explains the importance of removing CSS margins and the benefit of having code represent what is seen visually.', 'The chapter discusses the structure of the COVID tracker app, detailing the components to be built, such as a header, info boxes, map, table, and graph, emphasizing the reusability of React components and the value of learning about components, state, and props. The speaker outlines the components to be included in the app, emphasizing the reusability of React components and the value of learning about components, state, and props.', "The chapter promotes the 'Profit with JavaScript' course, highlighting its content, including JavaScript, React, and Node.js training modules, weekly training calls, Slack community, and personalized video feedback, and emphasizes the course's focus on teaching coding skills and how to make money with them, with over 1300 students and successful outcomes. The speaker emphasizes the content and benefits of the 'Profit with JavaScript' course, including the training modules, personalized feedback, and success stories of students making money and getting jobs."]}], 'duration': 1733.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM1574768.jpg', 'highlights': ['The tutorial includes practical instructions on duplicating the information boxes by using the command-click function and dragging, allowing for efficient replication of the displayed statistics.', 'The process of creating information boxes for coronavirus statistics is demonstrated, including the use of text and duplication to display the number of cases and total figures.', 'The demonstration involves left-aligning the text, adjusting the font size to 10 points, and using the command-click function to duplicate text and values for coronavirus cases and total figures.', 'The speaker explains the steps to create the info boxes for displaying coronavirus statistics, such as adding text for cases, adjusting text size, and duplicating the information for different values.', 'The chapter discusses the process of wireframing and visualizing an app, including creating a map, table, and graph components.', 'The importance of wireframing in guiding the development process is emphasized, providing a clear visualization of the data and the subsequent building process.', 'Leaflet is recommended for creating maps as it does not require API keys and is open source, making it easier for developers to follow along without additional setup.', 'The chapter encourages audience participation by sharing their wireframes on Instagram for feedback and improvement, fostering a collaborative learning environment.', "Setting up a React app using MPX to create a COVID-19 tracker The speaker demonstrates using MPX to create a React app named 'COVID-19 tracker', highlighting the simplicity of the process and the convenience of getting everything set up and running smoothly.", "Setting up Firebase for deployment and project creation The speaker guides the audience through setting up Firebase by creating a new project named 'COVID-19 tracker', emphasizing the ease of use and the fact that it is free, while explaining its suite of tools by Google and its functionality for authentication, deployments, hosting, database storage, etc.", "Cleaning up the project by deleting unnecessary files and modifying app.js The speaker advises on the cleanup process for a React project, deleting test files and logo.svg, and modifying app.js by removing the top line and changing the header to a lowercase 'a' using a BEM naming convention, ultimately updating the content to reflect building a COVID-19 tracker.", 'The chapter covers the process of cleaning up CSS, including setting margins to zero to eliminate imaginary margins, and finishing the cleaning up process. The speaker explains the importance of removing CSS margins and the benefit of having code represent what is seen visually.', 'The chapter discusses the structure of the COVID tracker app, detailing the components to be built, such as a header, info boxes, map, table, and graph, emphasizing the reusability of React components and the value of learning about components, state, and props.', 'The speaker outlines the components to be included in the app, emphasizing the reusability of React components and the value of learning about components, state, and props.', "The chapter promotes the 'Profit with JavaScript' course, highlighting its content, including JavaScript, React, and Node.js training modules, weekly training calls, Slack community, and personalized video feedback, and emphasizes the course's focus on teaching coding skills and how to make money with them, with over 1300 students and successful outcomes.", "The speaker emphasizes the content and benefits of the 'Profit with JavaScript' course, including the training modules, personalized feedback, and success stories of students making money and getting jobs."]}, {'end': 4370.33, 'segs': [{'end': 3370.043, 'src': 'embed', 'start': 3343.476, 'weight': 5, 'content': [{'end': 3348.982, 'text': "so, guys, the first thing we're going to be doing right is building out that header section.", 'start': 3343.476, 'duration': 5.506}, {'end': 3356.41, 'text': "so the top thing that we saw we saw earlier on and what we're going to be doing is we're going to be using something called material ui.", 'start': 3348.982, 'duration': 7.428}, {'end': 3363.918, 'text': 'so the first thing we need to do is go over to chrome and type in material ui, because we need to install the dependencies inside the project.', 'start': 3356.41, 'duration': 7.508}, {'end': 3370.043, 'text': 'So Material UI is a design framework built and maintained by Google, I believe.', 'start': 3364.358, 'duration': 5.685}], 'summary': 'Building header section using material ui framework in project.', 'duration': 26.567, 'max_score': 3343.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM3343476.jpg'}, {'end': 3522.445, 'src': 'embed', 'start': 3490.856, 'weight': 2, 'content': [{'end': 3494.539, 'text': "So to get that working, guys, what we need to do here is I'm going to go back to the code.", 'start': 3490.856, 'duration': 3.683}, {'end': 3498.163, 'text': 'So we are back in the code now.', 'start': 3497.082, 'duration': 1.081}, {'end': 3499.744, 'text': "And let's go ahead and close the terminal.", 'start': 3498.203, 'duration': 1.541}, {'end': 3500.505, 'text': 'So with Command-J.', 'start': 3499.864, 'duration': 0.641}, {'end': 3513.839, 'text': "Then we're basically going to go here and I'm going to change this to say COVID-19 tracker.", 'start': 3504.113, 'duration': 9.726}, {'end': 3522.445, 'text': "The next thing we're going to do, guys, is we're going to use something from the Material UI library and it's called Form Control.", 'start': 3515.421, 'duration': 7.024}], 'summary': "Updating code to include covid-19 tracker and using material ui library's form control.", 'duration': 31.589, 'max_score': 3490.856, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM3490856.jpg'}, {'end': 3556.784, 'src': 'embed', 'start': 3531.004, 'weight': 7, 'content': [{'end': 3537.03, 'text': "this one's going to be called app underscore, underscore, drop down, and if you guys are wondering why i'm naming it like this, it's called bem.", 'start': 3531.004, 'duration': 6.026}, {'end': 3542.115, 'text': "so it's a naming convention called bem, where the first part is pretty much the component that we're talking about.", 'start': 3537.03, 'duration': 5.085}, {'end': 3543.896, 'text': 'so in this case the app component.', 'start': 3542.115, 'duration': 1.781}, {'end': 3545.358, 'text': 'the second thing is the element.', 'start': 3543.896, 'duration': 1.462}, {'end': 3548.221, 'text': "so in this case it's the drop down that we're using right.", 'start': 3545.358, 'duration': 2.863}, {'end': 3552.122, 'text': 'so, and then inside of that, we want to have the actual drop-down.', 'start': 3548.221, 'duration': 3.901}, {'end': 3553.083, 'text': 'We want to have that click.', 'start': 3552.182, 'duration': 0.901}, {'end': 3556.784, 'text': 'When you click it, it shows a drop-down and gives you a bunch of things.', 'start': 3553.123, 'duration': 3.661}], 'summary': 'Using bem naming convention for app component and drop down element.', 'duration': 25.78, 'max_score': 3531.004, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM3531004.jpg'}, {'end': 3777.974, 'src': 'heatmap', 'start': 3604.232, 'weight': 0.726, 'content': [{'end': 3609.578, 'text': 'And here, each one would have its own value and it would have some text that would show when you click that dropdown.', 'start': 3604.232, 'duration': 5.346}, {'end': 3614.916, 'text': 'so, if we go ahead and i need to do now, is i just need to import all of these things from material ui?', 'start': 3610.146, 'duration': 4.77}, {'end': 3616.779, 'text': "so i'm going to go up to the top.", 'start': 3614.916, 'duration': 1.863}, {'end': 3617.661, 'text': 'importing from where?', 'start': 3616.779, 'duration': 0.882}, {'end': 3618.362, 'text': 'importing from where?', 'start': 3617.661, 'duration': 0.701}, {'end': 3620.567, 'text': 'So yeah, good question.', 'start': 3619.286, 'duration': 1.281}, {'end': 3626.69, 'text': 'So here we just installed, we did MPMI and we did install Material UI Core.', 'start': 3620.587, 'duration': 6.103}, {'end': 3629.472, 'text': "So now we have access to all of Material UI's dependencies.", 'start': 3626.71, 'duration': 2.762}, {'end': 3631.593, 'text': 'So at the top, we can do something like this.', 'start': 3629.532, 'duration': 2.061}, {'end': 3636.776, 'text': 'We can say import, and then I can actually just pull in a bunch of different, like a bunch of things from it.', 'start': 3631.633, 'duration': 5.143}, {'end': 3638.277, 'text': "So we're going to use these three at the moment.", 'start': 3636.796, 'duration': 1.481}, {'end': 3642.219, 'text': "And then here I'm pulling from those dependencies that we installed.", 'start': 3638.817, 'duration': 3.402}, {'end': 3645.141, 'text': 'So this is all that Google code that we talked about earlier that we pulled in.', 'start': 3642.439, 'duration': 2.702}, {'end': 3647.562, 'text': "And these are the three things that we're using from it.", 'start': 3645.661, 'duration': 1.901}, {'end': 3653.751, 'text': 'so now what we should have is a drop down with four different things on and here, just to test it,', 'start': 3648.248, 'duration': 5.503}, {'end': 3663.297, 'text': "i'm going to say this is going to be option two and this is going to be option three, and this one's going to be yo, let's just like exaggerate.", 'start': 3653.751, 'duration': 9.546}, {'end': 3665.138, 'text': 'so we can see a bunch of different options.', 'start': 3663.297, 'duration': 1.841}, {'end': 3674.543, 'text': "so if we go ahead and save now, if we go over to our local host on the right, so let's get the local host up hold on.", 'start': 3665.138, 'duration': 9.405}, {'end': 3676.324, 'text': 'sorry, i was working on some comment stuff.', 'start': 3674.543, 'duration': 1.781}, {'end': 3679.733, 'text': 'all right, cool, Sweet.', 'start': 3676.324, 'duration': 3.409}, {'end': 3680.153, 'text': 'All right.', 'start': 3679.833, 'duration': 0.32}, {'end': 3681.695, 'text': 'Okay Yep.', 'start': 3680.253, 'duration': 1.442}, {'end': 3684.418, 'text': "So now can you see that? There's a drop down box.", 'start': 3681.975, 'duration': 2.443}, {'end': 3684.918, 'text': 'Yeah, right there.', 'start': 3684.498, 'duration': 0.42}, {'end': 3686.22, 'text': "So there's a drop down box right here.", 'start': 3684.938, 'duration': 1.282}, {'end': 3687.601, 'text': 'You guys see that right there, right there.', 'start': 3686.26, 'duration': 1.341}, {'end': 3695.11, 'text': 'And look at that guys, you get a nice drop down and look, that was very easy to get that working is super smooth and it works really nice.', 'start': 3688.562, 'duration': 6.548}, {'end': 3702.571, 'text': "So that's our beginning point right now, right? So we have the title and we have the drop down.", 'start': 3696.066, 'duration': 6.505}, {'end': 3708.496, 'text': 'But what we like to do at this point is before you carry on and you start running ahead and things like that.', 'start': 3702.672, 'duration': 5.824}, {'end': 3712.999, 'text': 'what we want to do, guys, is we want to kind of get this containerized.', 'start': 3708.496, 'duration': 4.503}, {'end': 3716.081, 'text': 'At this point, we need it to look a certain way.', 'start': 3713.039, 'duration': 3.042}, {'end': 3717.281, 'text': 'We want it to be in a row.', 'start': 3716.101, 'duration': 1.18}, {'end': 3724.025, 'text': "What I typically tend to do is, let's just get this set up so we have half the screen as the app and then half the screen as the code.", 'start': 3717.701, 'duration': 6.324}, {'end': 3728.647, 'text': 'Because I think everyone loves it when they can see as we code and it hot reloads, it pops in.', 'start': 3724.045, 'duration': 4.602}, {'end': 3730.528, 'text': 'Yeah, you got it.', 'start': 3728.667, 'duration': 1.861}, {'end': 3731.088, 'text': 'We got it.', 'start': 3730.588, 'duration': 0.5}, {'end': 3735.17, 'text': "Yeah Now what we're going to do, that's it.", 'start': 3731.849, 'duration': 3.321}, {'end': 3735.691, 'text': 'There we go.', 'start': 3735.21, 'duration': 0.481}, {'end': 3737.2, 'text': 'Nice Perfect.', 'start': 3735.771, 'duration': 1.429}, {'end': 3742.284, 'text': "So now what we're going to do is here we have the, um, what we're going to do now is, yeah.", 'start': 3737.22, 'duration': 5.064}, {'end': 3744.025, 'text': 'So, guys, we have this stuff right here, right?', 'start': 3742.444, 'duration': 1.581}, {'end': 3749.289, 'text': "In order to start this in a way that it's in a role, what we're going to do is we're actually going to create a div.", 'start': 3744.325, 'duration': 4.964}, {'end': 3751.471, 'text': "So I'm going to use something called Emmett here, which is really nice.", 'start': 3749.449, 'duration': 2.022}, {'end': 3755.734, 'text': "I would say div dot app header, because remember we're building out the header right now.", 'start': 3751.491, 'duration': 4.243}, {'end': 3757.515, 'text': 'As soon as I hit enter, boom.', 'start': 3755.994, 'duration': 1.521}, {'end': 3757.935, 'text': 'Oh wow.', 'start': 3757.575, 'duration': 0.36}, {'end': 3758.716, 'text': "That's cool.", 'start': 3758.356, 'duration': 0.36}, {'end': 3760.684, 'text': "That's cool, right? Yeah.", 'start': 3759.824, 'duration': 0.86}, {'end': 3765.927, 'text': "It's called MS. Very handy way of building, writing HTML and CSS very fast.", 'start': 3760.704, 'duration': 5.223}, {'end': 3771.891, 'text': 'If you guys want us to actually drop a tutorial on that, let us know because I see a lot of people get excited when they see that feature.', 'start': 3766.207, 'duration': 5.684}, {'end': 3777.974, 'text': 'Yeah, And guys, the reason why Sonny said as you keep going, the reason why Sonny said containerize right?', 'start': 3771.951, 'duration': 6.023}], 'summary': 'Imported material ui core to access dependencies and created a dropdown with multiple options. also, containerized the code and demonstrated emmett for fast html and css writing.', 'duration': 173.742, 'max_score': 3604.232, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM3604232.jpg'}, {'end': 3674.543, 'src': 'embed', 'start': 3648.248, 'weight': 1, 'content': [{'end': 3653.751, 'text': 'so now what we should have is a drop down with four different things on and here, just to test it,', 'start': 3648.248, 'duration': 5.503}, {'end': 3663.297, 'text': "i'm going to say this is going to be option two and this is going to be option three, and this one's going to be yo, let's just like exaggerate.", 'start': 3653.751, 'duration': 9.546}, {'end': 3665.138, 'text': 'so we can see a bunch of different options.', 'start': 3663.297, 'duration': 1.841}, {'end': 3674.543, 'text': "so if we go ahead and save now, if we go over to our local host on the right, so let's get the local host up hold on.", 'start': 3665.138, 'duration': 9.405}], 'summary': 'Testing a drop-down with four options for local host display.', 'duration': 26.295, 'max_score': 3648.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM3648248.jpg'}, {'end': 4267.722, 'src': 'heatmap', 'start': 4099.412, 'weight': 0.75, 'content': [{'end': 4101.194, 'text': 'which is what we use to change that value.', 'start': 4099.412, 'duration': 1.782}, {'end': 4105.078, 'text': 'And then we say useState.', 'start': 4101.897, 'duration': 3.181}, {'end': 4107.241, 'text': 'And then here we give it an initial value.', 'start': 4105.22, 'duration': 2.021}, {'end': 4110.764, 'text': 'So the initial value in this case is going to be an empty array.', 'start': 4107.661, 'duration': 3.103}, {'end': 4112.125, 'text': "So here I'm going to do empty array.", 'start': 4110.783, 'duration': 1.342}, {'end': 4113.305, 'text': 'Just like that.', 'start': 4112.785, 'duration': 0.52}, {'end': 4119.85, 'text': "So that's the default value that basically gets initialized to that variable, guys.", 'start': 4114.807, 'duration': 5.043}, {'end': 4121.863, 'text': 'Exactly Yeah.', 'start': 4120.862, 'duration': 1.001}, {'end': 4124.145, 'text': "So in the beginning it's just going to be an empty array.", 'start': 4121.883, 'duration': 2.262}, {'end': 4125.265, 'text': "So that's perfect.", 'start': 4124.444, 'duration': 0.821}, {'end': 4133.392, 'text': "And then what we want to do is now imagine, like, if I had a bunch of this like these countries here, why could essentially do is, let's just say,", 'start': 4125.786, 'duration': 7.606}, {'end': 4134.453, 'text': 'we had a few countries in it.', 'start': 4133.392, 'duration': 1.061}, {'end': 4138.756, 'text': 'So I had like USA, I had UK, right? Uh, UK.', 'start': 4134.473, 'duration': 4.283}, {'end': 4140.278, 'text': 'And then I had India for example.', 'start': 4138.817, 'duration': 1.461}, {'end': 4142.819, 'text': 'So I had three countries in there.', 'start': 4141.38, 'duration': 1.439}, {'end': 4145.621, 'text': 'Now what I could do is, I could say something like this.', 'start': 4143.241, 'duration': 2.38}, {'end': 4149.063, 'text': 'I could say, and notice how I can write JavaScript in here.', 'start': 4145.72, 'duration': 3.343}, {'end': 4153.243, 'text': "So if we just scroll a little bit down, I think it's not yet, there we go.", 'start': 4149.082, 'duration': 4.161}, {'end': 4156.024, 'text': "So now you can see here where I've got.", 'start': 4153.624, 'duration': 2.4}, {'end': 4162.652, 'text': "What I can do is I can actually have these curly brackets, and that allows me to write JavaScript inside of my HTML, and that's called JSX.", 'start': 4156.625, 'duration': 6.027}, {'end': 4168.959, 'text': 'Because in React, we use JSX, which basically allows us to combine HTML with JavaScript, which is really cool.', 'start': 4163.093, 'duration': 5.866}, {'end': 4171.702, 'text': 'So here we say countries.map.', 'start': 4169.72, 'duration': 1.982}, {'end': 4181.274, 'text': "i'm going to say for every country this is a es6 syntax i'm using here, saying for every country return, and what am i returning here?", 'start': 4173.072, 'duration': 8.202}, {'end': 4183.856, 'text': 'i want to return a menu item.', 'start': 4181.274, 'duration': 2.582}, {'end': 4190.679, 'text': "so in this case i'm returning a menu item, but instead of this i just want to have the country name.", 'start': 4183.856, 'duration': 6.823}, {'end': 4195.941, 'text': 'so the u, usa, uk, india and even here i want the value to be the country itself.', 'start': 4190.679, 'duration': 5.262}, {'end': 4197.202, 'text': 'and now i save this.', 'start': 4195.941, 'duration': 1.261}, {'end': 4199.817, 'text': 'it says use state is not defined.', 'start': 4198.417, 'duration': 1.4}, {'end': 4202.298, 'text': 'yes, a very good point, because we actually need to import you state.', 'start': 4199.817, 'duration': 2.481}, {'end': 4208.52, 'text': 'so at the top we go here and we do use state, use state like this.', 'start': 4202.298, 'duration': 6.222}, {'end': 4212.881, 'text': 'and now, if you go ahead and click that drop down nas, we should say usa.', 'start': 4208.52, 'duration': 4.361}, {'end': 4215.481, 'text': 'hey, look at that.', 'start': 4212.881, 'duration': 2.6}, {'end': 4218.662, 'text': 'hey, i even have applause for you.', 'start': 4215.481, 'duration': 3.181}, {'end': 4220.423, 'text': 'let me put the sound effects on hold on.', 'start': 4218.662, 'duration': 1.761}, {'end': 4227.428, 'text': 'there we go.', 'start': 4225.147, 'duration': 2.281}, {'end': 4228.95, 'text': 'nice. so there we go.', 'start': 4227.428, 'duration': 1.522}, {'end': 4233.033, 'text': 'we have our first piece of state hooked up to the app right.', 'start': 4228.95, 'duration': 4.083}, {'end': 4235.755, 'text': 'so it says USA, UK, India.', 'start': 4233.033, 'duration': 2.722}, {'end': 4241.22, 'text': "now, obviously I don't want to manually list out all of the countries in on the earth,", 'start': 4235.755, 'duration': 5.465}, {'end': 4245.504, 'text': "like it's gonna take me crazy long and it's not gonna be what I'm trying to do here.", 'start': 4241.22, 'duration': 4.284}, {'end': 4248.105, 'text': 'so I, How can we do this in a really nice way?', 'start': 4245.504, 'duration': 2.601}, {'end': 4253.99, 'text': "And the way that we're going to do it is we're going to use, so we're going to actually show you how to make an API call.", 'start': 4248.125, 'duration': 5.865}, {'end': 4257.913, 'text': 'So remember, guys, earlier we showed you a website called disease.sh.', 'start': 4254.15, 'duration': 3.763}, {'end': 4267.722, 'text': 'right?. Now, disease.sh is basically a service that is hosted online and it allows you to essentially have,', 'start': 4257.913, 'duration': 9.809}], 'summary': 'Using usestate to manage state in react and integrating jsx to display dynamic country menu items.', 'duration': 168.31, 'max_score': 4099.412, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM4099412.jpg'}, {'end': 4181.274, 'src': 'embed', 'start': 4145.72, 'weight': 0, 'content': [{'end': 4149.063, 'text': 'I could say, and notice how I can write JavaScript in here.', 'start': 4145.72, 'duration': 3.343}, {'end': 4153.243, 'text': "So if we just scroll a little bit down, I think it's not yet, there we go.", 'start': 4149.082, 'duration': 4.161}, {'end': 4156.024, 'text': "So now you can see here where I've got.", 'start': 4153.624, 'duration': 2.4}, {'end': 4162.652, 'text': "What I can do is I can actually have these curly brackets, and that allows me to write JavaScript inside of my HTML, and that's called JSX.", 'start': 4156.625, 'duration': 6.027}, {'end': 4168.959, 'text': 'Because in React, we use JSX, which basically allows us to combine HTML with JavaScript, which is really cool.', 'start': 4163.093, 'duration': 5.866}, {'end': 4171.702, 'text': 'So here we say countries.map.', 'start': 4169.72, 'duration': 1.982}, {'end': 4181.274, 'text': "i'm going to say for every country this is a es6 syntax i'm using here, saying for every country return, and what am i returning here?", 'start': 4173.072, 'duration': 8.202}], 'summary': 'Introduction to writing javascript inside html using jsx in react.', 'duration': 35.554, 'max_score': 4145.72, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM4145720.jpg'}], 'start': 3308.836, 'title': "Developer's daily routine and ui implementation", 'summary': "Highlights a developer's daily routine including one-to-one calls with students and promoting a developer course. it also covers setting up material ui, implementing a dropdown, and styling with flexbox.", 'chapters': [{'end': 3383.015, 'start': 3308.836, 'title': 'One-on-one developer course call', 'summary': "Highlights a developer's day-to-day routine, including one-to-one calls with students, promoting a developer course, and using material ui for project development.", 'duration': 74.179, 'highlights': ['The speaker engages in frequent one-to-one calls with students as part of their day-to-day routine.', 'The speaker promotes a developer course by encouraging viewers to check the link in the description for further information.', 'Material UI, a design framework maintained by Google, is recommended for project development, emphasizing its clean and Google-like appearance.']}, {'end': 3765.927, 'start': 3383.035, 'title': 'Material ui setup and dropdown implementation', 'summary': 'Covers setting up material ui and implementing a dropdown, including using form control, styling with material ui library, and creating a dropdown with menu items.', 'duration': 382.892, 'highlights': ['Implementing Material UI dropdown with menu items Describes the process of implementing a dropdown using Form Control and creating menu items with values and text.', 'Setting up Material UI and styling with class names Explains the setup of Material UI, including importing necessary components and using class names for styling in the BEM naming convention.', 'Creating a div for the header and using Emmett for fast HTML and CSS writing Shows the process of creating a div for the header and using Emmett for quick HTML and CSS writing.']}, {'end': 4370.33, 'start': 3766.207, 'title': 'Understanding html containers and styling with flexbox', 'summary': 'Highlights the importance of understanding html containers and demonstrates styling with flexbox, including the use of state to create a dropdown list of countries fetched from an api.', 'duration': 604.123, 'highlights': ['The chapter emphasizes the concept of HTML containers and the use of containerization to structure HTML elements. The speaker explains that everything created in HTML is contained within containers, using the COVID tracker as an example, where various elements are contained within row and div containers.', 'The demonstration of styling with Flexbox, including the use of display flex and flex direction properties, is showcased to manipulate the layout of HTML elements. The speaker explains the use of Flexbox properties like display flex and flex direction to control the positioning and layout of HTML elements, providing a visual demonstration of the effects of these properties.', 'The use of state in React to create a dropdown list of countries fetched from an API is illustrated, emphasizing the concept of state as a short-term memory for React applications. The speaker demonstrates the use of state in React to store and update the list of countries fetched from an API, explaining the initialization and manipulation of state variables to dynamically populate the dropdown list.']}], 'duration': 1061.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM3308836.jpg', 'highlights': ['The speaker engages in frequent one-to-one calls with students as part of their day-to-day routine.', 'The speaker promotes a developer course by encouraging viewers to check the link in the description for further information.', 'Material UI, a design framework maintained by Google, is recommended for project development, emphasizing its clean and Google-like appearance.', 'Implementing Material UI dropdown with menu items Describes the process of implementing a dropdown using Form Control and creating menu items with values and text.', 'Setting up Material UI and styling with class names Explains the setup of Material UI, including importing necessary components and using class names for styling in the BEM naming convention.', 'The chapter emphasizes the concept of HTML containers and the use of containerization to structure HTML elements. The speaker explains that everything created in HTML is contained within containers, using the COVID tracker as an example, where various elements are contained within row and div containers.', 'The demonstration of styling with Flexbox, including the use of display flex and flex direction properties, is showcased to manipulate the layout of HTML elements. The speaker explains the use of Flexbox properties like display flex and flex direction to control the positioning and layout of HTML elements, providing a visual demonstration of the effects of these properties.', 'The use of state in React to create a dropdown list of countries fetched from an API is illustrated, emphasizing the concept of state as a short-term memory for React applications. The speaker demonstrates the use of state in React to store and update the list of countries fetched from an API, explaining the initialization and manipulation of state variables to dynamically populate the dropdown list.']}, {'end': 5670.534, 'segs': [{'end': 4396.383, 'src': 'embed', 'start': 4370.37, 'weight': 5, 'content': [{'end': 4375.892, 'text': "Now what we're going to do is in order to make a call to this API, what we need to do is we use something called a useEffect.", 'start': 4370.37, 'duration': 5.522}, {'end': 4382.836, 'text': "Now a useEffect is essentially, so I'm going to go ahead and leave that one up there, but a useEffect is a very powerful hook in React.", 'start': 4376.293, 'duration': 6.543}, {'end': 4393.822, 'text': 'Basically what it does is it runs a piece of code based on a given condition.', 'start': 4382.876, 'duration': 10.946}, {'end': 4396.383, 'text': 'This will make a lot of sense in a second.', 'start': 4393.862, 'duration': 2.521}], 'summary': 'In react, a useeffect hook runs code based on a given condition.', 'duration': 26.013, 'max_score': 4370.37, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM4370370.jpg'}, {'end': 4589.996, 'src': 'embed', 'start': 4565.175, 'weight': 3, 'content': [{'end': 4575.781, 'text': "So we're saying, when it comes back with the response, i want to first get the entire response and just take the json from it right.", 'start': 4565.175, 'duration': 10.606}, {'end': 4581.086, 'text': 'so i want to basically take, get the response and i want basically, i just want that big thing that you see on the right,', 'start': 4575.781, 'duration': 5.305}, {'end': 4583.529, 'text': 'i just want that response right.', 'start': 4581.086, 'duration': 2.443}, {'end': 4589.996, 'text': "then i'm going to say so once i've got that response, which is basically going to be resembled as our data essentially,", 'start': 4583.529, 'duration': 6.467}], 'summary': 'Extract the json response from the entire response data.', 'duration': 24.821, 'max_score': 4565.175, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM4565175.jpg'}, {'end': 4651.702, 'src': 'embed', 'start': 4624.604, 'weight': 6, 'content': [{'end': 4629.907, 'text': 'So, guys, just to clear everything up, once the app component loads, so once this component loads on the screen,', 'start': 4624.604, 'duration': 5.303}, {'end': 4634.15, 'text': 'a use effect is essentially saying fire off this piece of code.', 'start': 4629.907, 'duration': 4.243}, {'end': 4641.094, 'text': "So fire off this piece of code, and these little brackets here are saying, fire it off once, and then don't fire it off again.", 'start': 4634.35, 'duration': 6.744}, {'end': 4649.3, 'text': 'Now, if I put something like countries in here every single time countries changes or any variables in here, so I can have another variable anytime,', 'start': 4641.634, 'duration': 7.666}, {'end': 4651.702, 'text': 'either of these changes, it will refire this code.', 'start': 4649.3, 'duration': 2.402}], 'summary': 'Use effect fires code once on app component load.', 'duration': 27.098, 'max_score': 4624.604, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM4624604.jpg'}, {'end': 5259.726, 'src': 'heatmap', 'start': 5079.948, 'weight': 0.797, 'content': [{'end': 5085.734, 'text': "So I'm saying the value is going to be worldwide and the text for it is going to be capital W worldwide.", 'start': 5079.948, 'duration': 5.786}, {'end': 5091.921, 'text': 'Okay Now the reason why I want this is that we can, so that we can have a worldwide also option.', 'start': 5085.895, 'duration': 6.026}, {'end': 5095.305, 'text': "So I'm going to basically manually add this and why we have this will make sense later.", 'start': 5092.101, 'duration': 3.204}, {'end': 5099.347, 'text': 'Yeah Also guys, yes.', 'start': 5096.806, 'duration': 2.541}, {'end': 5101.909, 'text': 'Now what we need to do is these options are here.', 'start': 5099.788, 'duration': 2.121}, {'end': 5103.09, 'text': "That's the first step.", 'start': 5102.029, 'duration': 1.061}, {'end': 5108.733, 'text': "We've got them on the screen, but we need to basically keep track of what we actually selected.", 'start': 5103.15, 'duration': 5.583}, {'end': 5112.095, 'text': 'How do we remember which option we selected? Here I go const.', 'start': 5108.773, 'duration': 3.322}, {'end': 5113.976, 'text': "I'm going to create one called country.", 'start': 5112.595, 'duration': 1.381}, {'end': 5119.36, 'text': 'I need to do set country and then I need to do use state.', 'start': 5113.996, 'duration': 5.364}, {'end': 5127.987, 'text': "Here, the country that I'm going to basically set it to by default is going to be worldwide, because I want it to, by default, be on the first option,", 'start': 5120.041, 'duration': 7.946}, {'end': 5128.787, 'text': 'which was worldwide.', 'start': 5127.987, 'duration': 0.8}, {'end': 5131.009, 'text': "Here, I'm going to do this and I'm going to set it to worldwide.", 'start': 5128.807, 'duration': 2.202}, {'end': 5135.982, 'text': 'Then to map this to our dropdown, you need to go along to here.', 'start': 5131.678, 'duration': 4.304}, {'end': 5138.744, 'text': 'So where we have the select field, this is where we have the dropdown.', 'start': 5136.022, 'duration': 2.722}, {'end': 5144.488, 'text': "So select, and I'm going to go here, add some JSX and say country.", 'start': 5139.224, 'duration': 5.264}, {'end': 5154.556, 'text': "Now we've essentially mapped our dropdown to the piece of state, but we need to add something which is going to listen.", 'start': 5145.269, 'duration': 9.287}, {'end': 5158.84, 'text': 'So imagine if you go ahead and actually click on the dropdown right now.', 'start': 5154.837, 'duration': 4.003}, {'end': 5162.862, 'text': "So if we go ahead and save that, And let's go- Oh, look at that.", 'start': 5158.92, 'duration': 3.942}, {'end': 5167.966, 'text': 'You see what just changed right there? So now we have the default state for menu item, which is worldwide.', 'start': 5162.882, 'duration': 5.084}, {'end': 5171.808, 'text': "Worldwide. that's the default one you selected from here, right?", 'start': 5168.286, 'duration': 3.522}, {'end': 5176.851, 'text': 'So because Sunny selected worldwide as the default value for this country, right?', 'start': 5172.248, 'duration': 4.603}, {'end': 5180.933, 'text': 'That goes down to here as a selected item.', 'start': 5177.231, 'duration': 3.702}, {'end': 5183.735, 'text': "And so that's why, when I click on this, then what happens, Sunny?", 'start': 5181.114, 'duration': 2.621}, {'end': 5187.878, 'text': "If you click that, we're gonna have a bunch of things that pop up right?", 'start': 5185.056, 'duration': 2.822}, {'end': 5191.605, 'text': 'But if you click on one of these things, look what happens.', 'start': 5189.154, 'duration': 2.451}, {'end': 5196.777, 'text': 'Oh Oh, see, you see that? Nothing happens.', 'start': 5193.312, 'duration': 3.465}, {'end': 5198.538, 'text': 'Nothing happened right?', 'start': 5197.517, 'duration': 1.021}, {'end': 5207.722, 'text': "So like remember, guys, we're mapping it to the state, but we always have to remember that we need something to listen to if anything changes.", 'start': 5198.758, 'duration': 8.964}, {'end': 5212.784, 'text': 'For example, if like Nas just showed there, he went in, he clicked it, right? We need to capture that.', 'start': 5207.842, 'duration': 4.942}, {'end': 5214.484, 'text': 'We need to know what to do there.', 'start': 5212.804, 'duration': 1.68}, {'end': 5218.426, 'text': 'So what we need to account for is an on change, right? Okay.', 'start': 5214.925, 'duration': 3.501}, {'end': 5222.668, 'text': "So here, what we do is we go here and I'm going to add something called an on change.", 'start': 5218.446, 'duration': 4.222}, {'end': 5224.668, 'text': 'Right So here on change.', 'start': 5223.508, 'duration': 1.16}, {'end': 5226.189, 'text': 'And here you can do two things.', 'start': 5225.088, 'duration': 1.101}, {'end': 5231.35, 'text': "You can either create a function outside or in this case, I'm going to go ahead and create a function outside.", 'start': 5226.229, 'duration': 5.121}, {'end': 5232.991, 'text': "And I'm going to say on country change.", 'start': 5231.37, 'duration': 1.621}, {'end': 5237.552, 'text': "Right And this is what's going to be called every time we change the thing.", 'start': 5233.551, 'duration': 4.001}, {'end': 5238.932, 'text': "So I'm going to go ahead and write that.", 'start': 5237.572, 'duration': 1.36}, {'end': 5241.233, 'text': "So I'm going to say const on country change.", 'start': 5238.952, 'duration': 2.281}, {'end': 5246.014, 'text': "And it takes a so it's an asynchronous because we're going to be making a call later on.", 'start': 5241.773, 'duration': 4.241}, {'end': 5253.262, 'text': 'takes an event, so whenever you have an on change or anything, it usually passes an event along with it.', 'start': 5246.698, 'duration': 6.564}, {'end': 5259.726, 'text': 'Basically every time that Nas clicks that drop-down and click something inside of it where, basically,', 'start': 5254.843, 'duration': 4.883}], 'summary': 'The transcript discusses adding a worldwide option to a dropdown menu and handling the selection change using react.', 'duration': 179.778, 'max_score': 5079.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM5079948.jpg'}, {'end': 5187.878, 'src': 'embed', 'start': 5162.882, 'weight': 4, 'content': [{'end': 5167.966, 'text': 'You see what just changed right there? So now we have the default state for menu item, which is worldwide.', 'start': 5162.882, 'duration': 5.084}, {'end': 5171.808, 'text': "Worldwide. that's the default one you selected from here, right?", 'start': 5168.286, 'duration': 3.522}, {'end': 5176.851, 'text': 'So because Sunny selected worldwide as the default value for this country, right?', 'start': 5172.248, 'duration': 4.603}, {'end': 5180.933, 'text': 'That goes down to here as a selected item.', 'start': 5177.231, 'duration': 3.702}, {'end': 5183.735, 'text': "And so that's why, when I click on this, then what happens, Sunny?", 'start': 5181.114, 'duration': 2.621}, {'end': 5187.878, 'text': "If you click that, we're gonna have a bunch of things that pop up right?", 'start': 5185.056, 'duration': 2.822}], 'summary': 'Default menu item is set to worldwide for country selection.', 'duration': 24.996, 'max_score': 5162.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM5162882.jpg'}, {'end': 5593.921, 'src': 'embed', 'start': 5565.62, 'weight': 10, 'content': [{'end': 5568.941, 'text': "I because we name these things with capitals, because they're components.", 'start': 5565.62, 'duration': 3.321}, {'end': 5570.382, 'text': 'Like this? Yep.', 'start': 5569.041, 'duration': 1.341}, {'end': 5571.983, 'text': 'InfoBox.js Okay.', 'start': 5570.502, 'duration': 1.481}, {'end': 5575.715, 'text': 'Yep Now, this is going to be a new component, guys.', 'start': 5572.143, 'duration': 3.572}, {'end': 5581.277, 'text': 'I think you might need to follow me again because whenever you create something, for some reason, it unfollows.', 'start': 5576.215, 'duration': 5.062}, {'end': 5583.057, 'text': "Yeah Oh, no, it didn't.", 'start': 5581.297, 'duration': 1.76}, {'end': 5584.438, 'text': 'All right.', 'start': 5583.217, 'duration': 1.221}, {'end': 5586.518, 'text': "Guys, we're going to show you a nifty little trick here.", 'start': 5584.458, 'duration': 2.06}, {'end': 5593.921, 'text': "What we're going to do here is there's a very handy extension called ES7 snippets.", 'start': 5586.538, 'duration': 7.383}], 'summary': 'Creating new component using es7 snippets extension.', 'duration': 28.301, 'max_score': 5565.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM5565620.jpg'}, {'end': 5670.534, 'src': 'embed', 'start': 5611.18, 'weight': 0, 'content': [{'end': 5619.522, 'text': "It's really amazing and it's going to change your speed in React because it's a very quick way of writing functional components and even class-based components.", 'start': 5611.18, 'duration': 8.342}, {'end': 5620.803, 'text': 'Somebody just asked.', 'start': 5619.882, 'duration': 0.921}, {'end': 5622.063, 'text': 'Alex M asked is this live??', 'start': 5620.803, 'duration': 1.26}, {'end': 5629.245, 'text': 'Yes, this is live right now, but the recording will be up for you guys afterwards, so you can watch it and do it at your own pace.', 'start': 5622.203, 'duration': 7.042}, {'end': 5631.026, 'text': 'Exactly, guys, exactly.', 'start': 5629.906, 'duration': 1.12}, {'end': 5635.251, 'text': "So now we go, let's go ahead and close that extension.", 'start': 5632.29, 'duration': 2.961}, {'end': 5639.131, 'text': "So now what we're going to do is open up infobox.js.", 'start': 5636.191, 'duration': 2.94}, {'end': 5641.812, 'text': 'Okay, hold on.', 'start': 5640.772, 'duration': 1.04}, {'end': 5642.612, 'text': 'Oh, info.', 'start': 5641.992, 'duration': 0.62}, {'end': 5644.213, 'text': "Okay Let's go back to here.", 'start': 5642.732, 'duration': 1.481}, {'end': 5646.753, 'text': 'Infobox.js, which is down right there.', 'start': 5644.773, 'duration': 1.98}, {'end': 5647.873, 'text': 'Beautiful Yeah.', 'start': 5646.913, 'duration': 0.96}, {'end': 5653.795, 'text': "And now what I'm going to do is I'm going to type in RFCE, which stands for React Functional Component with an export.", 'start': 5648.293, 'duration': 5.502}, {'end': 5655.415, 'text': 'Boom There you go.', 'start': 5654.215, 'duration': 1.2}, {'end': 5658.564, 'text': 'It creates all of the bootstraps and the code for us.', 'start': 5656.218, 'duration': 2.346}, {'end': 5661.331, 'text': "That's crazy, right? And it even has the correct file name.", 'start': 5659.105, 'duration': 2.226}, {'end': 5662.474, 'text': 'That was easy.', 'start': 5661.852, 'duration': 0.622}, {'end': 5663.577, 'text': 'That was too easy.', 'start': 5662.995, 'duration': 0.582}, {'end': 5663.958, 'text': "That's crazy.", 'start': 5663.597, 'duration': 0.361}, {'end': 5665.712, 'text': "Yeah, it's insane.", 'start': 5664.892, 'duration': 0.82}, {'end': 5670.534, 'text': 'Like it really does like make a difference and it helps you guys out in terms of building these things very quickly.', 'start': 5665.732, 'duration': 4.802}], 'summary': 'Using rfce in react helps create components quickly and efficiently.', 'duration': 59.354, 'max_score': 5611.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM5611180.jpg'}], 'start': 4370.37, 'title': 'React hooks and async functions', 'summary': "Covers the use of useeffect hook in react, including running code based on conditions and formatting json in api responses, making asynchronous api requests in react using useeffect, restructuring data with the map function, populating select lists, adding a 'worldwide' option to a dropdown menu, mapping dropdowns to state, capturing selected values, and using async functions in javascript for api requests and reusable react components.", 'chapters': [{'end': 4487.819, 'start': 4370.37, 'title': 'Using useeffect in react', 'summary': 'Discusses the use of useeffect, a powerful hook in react, to run a piece of code based on conditions, such as running once when the component loads and again when a specific variable changes, as well as the format of json in api responses.', 'duration': 117.449, 'highlights': ['The chapter explains the concept of useEffect in React, which runs a piece of code based on a given condition, such as running once when the component loads and again when a specific variable changes.', 'It highlights the significance of the JSON format in API responses, which stands for JavaScript Object Notation, as a way of representing an object and was referred to as the response format by Naza.', 'It emphasizes the use of useEffect with empty square brackets to make the code run once when the component loads and not again after, and the use of a specific variable inside the square brackets to run the code whenever that variable changes.']}, {'end': 5062.448, 'start': 4488.837, 'title': 'Asynchronous api request in react', 'summary': 'Discusses making an asynchronous api request in react using the useeffect hook, explaining the use of the map function to restructure data, and populating a select list with the retrieved data, all in react using async/await.', 'duration': 573.611, 'highlights': ['The chapter discusses making an asynchronous API request in React using the useEffect hook. It explains how to use the useEffect hook to run a piece of code once when the component loads, emphasizing the asynchronous nature of the code due to pinging off to a server and sending a request.', 'The explanation of the map function to restructure the data is provided. It details the usage of the map function to loop through an array and return objects in a specific shape, clarifying the purpose of the map function and how it transforms the array.', 'Populating a select list with the retrieved data is demonstrated. It shows how to populate a select list with the data retrieved from the API request using the set countries function and explains the process of handling asynchronous calls inside the useEffect hook.']}, {'end': 5334.68, 'start': 5062.848, 'title': 'Dropdown country selection', 'summary': "Explains how to add a 'worldwide' option to a dropdown menu, map the dropdown to a piece of state, and create a function to capture the selected value, using console.log to display the country code selected.", 'duration': 271.832, 'highlights': ["The chapter explains how to add a 'worldwide' option to a dropdown menu. Adding a 'worldwide' option to the dropdown menu for countries.", "Map the dropdown to a piece of state to set the default value as 'worldwide'. Mapping the dropdown to a piece of state and setting the default value as 'worldwide'.", 'Creating a function to capture the selected country code using console.log. Creating a function to capture the selected country code and using console.log to display it.']}, {'end': 5670.534, 'start': 5334.68, 'title': 'Using async function in javascript', 'summary': 'Discusses the use of async functions in javascript, focusing on setting up an async function, making api requests, and creating reusable components in react.', 'duration': 335.854, 'highlights': ['Setting up async function without await The speaker mentions setting up an async function in JavaScript without using await initially, to be added later when needed.', 'Making API request for country information The chapter emphasizes making an API request to retrieve and store country information for later use in the application.', 'Creating reusable component in React with props The process of creating a reusable component in React is discussed, emphasizing the use of props to differentiate components and enhance reusability.']}], 'duration': 1300.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM4370370.jpg', 'highlights': ['The chapter explains the concept of useEffect in React, running code based on conditions.', 'The significance of the JSON format in API responses, representing an object.', 'Making an asynchronous API request in React using the useEffect hook.', 'Using the map function to restructure data by looping through an array.', 'Populating a select list with retrieved data using the set countries function.', "Adding a 'worldwide' option to a dropdown menu for countries.", "Mapping the dropdown to a piece of state and setting the default value as 'worldwide'.", 'Creating a function to capture the selected country code and using console.log to display it.', 'Setting up async function in JavaScript without using await initially.', 'Emphasizing making an API request to retrieve and store country information.', 'Discussing the process of creating a reusable component in React with props.']}, {'end': 8406.094, 'segs': [{'end': 5743.618, 'src': 'embed', 'start': 5718.573, 'weight': 4, 'content': [{'end': 5727.038, 'text': 'You can see it had a title, it had a number of cases, and it had the total, which is 1.2 million, for example.', 'start': 5718.573, 'duration': 8.465}, {'end': 5729.253, 'text': 'All right.', 'start': 5729.053, 'duration': 0.2}, {'end': 5733.234, 'text': 'And guys, you will be removed from the video if you carry on spamming.', 'start': 5729.793, 'duration': 3.441}, {'end': 5734.475, 'text': "So please, please don't do that.", 'start': 5733.274, 'duration': 1.201}, {'end': 5736.376, 'text': 'Yeah So here you go.', 'start': 5735.695, 'duration': 0.681}, {'end': 5737.756, 'text': "You have three props that we're passing in.", 'start': 5736.396, 'duration': 1.36}, {'end': 5739.317, 'text': 'So title cases and total.', 'start': 5737.796, 'duration': 1.521}, {'end': 5743.618, 'text': "So now what we're going to be doing is essentially we just pretty much want to render it.", 'start': 5739.777, 'duration': 3.841}], 'summary': 'Transcript discusses a total of 1.2 million cases and the process of rendering props.', 'duration': 25.045, 'max_score': 5718.573, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM5718573.jpg'}, {'end': 6201.571, 'src': 'embed', 'start': 6171.371, 'weight': 1, 'content': [{'end': 6173.012, 'text': "So I'm going to go here, app stats.", 'start': 6171.371, 'duration': 1.641}, {'end': 6175.454, 'text': "I'm going to say display flex.", 'start': 6173.072, 'duration': 2.382}, {'end': 6177.095, 'text': 'And now check this out.', 'start': 6175.814, 'duration': 1.281}, {'end': 6178.682, 'text': "It's going to go into a row.", 'start': 6177.722, 'duration': 0.96}, {'end': 6181.003, 'text': 'Oh, darn.', 'start': 6179.443, 'duration': 1.56}, {'end': 6182.044, 'text': 'Darn, man.', 'start': 6181.343, 'duration': 0.701}, {'end': 6184.044, 'text': "Nice, right? That's the power of flex, guys.", 'start': 6182.064, 'duration': 1.98}, {'end': 6185.505, 'text': 'So there you go.', 'start': 6184.084, 'duration': 1.421}, {'end': 6187.026, 'text': 'That is the power of flex box.', 'start': 6185.545, 'duration': 1.481}, {'end': 6189.887, 'text': 'You can get everything starting to look the way it needs to look.', 'start': 6187.206, 'duration': 2.681}, {'end': 6198.51, 'text': 'Now, remember, Nas mentioned that the background of the app should have been a certain kind of gray, right? Yeah.', 'start': 6191.747, 'duration': 6.763}, {'end': 6199.47, 'text': 'Like a little kind of gray.', 'start': 6198.71, 'duration': 0.76}, {'end': 6201.571, 'text': "So here, I'm actually going to go ahead and add that.", 'start': 6199.49, 'duration': 2.081}], 'summary': "Demonstrating the power of flexbox by creating a row layout and adjusting the app's background color as requested.", 'duration': 30.2, 'max_score': 6171.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM6171371.jpg'}, {'end': 7416.461, 'src': 'embed', 'start': 7386.369, 'weight': 2, 'content': [{'end': 7388.01, 'text': "So I'm going to put this part of the string in.", 'start': 7386.369, 'duration': 1.641}, {'end': 7391.892, 'text': "But the forward slash, I'm actually going to go ahead and insert some JavaScript.", 'start': 7388.53, 'duration': 3.362}, {'end': 7397.376, 'text': "So guys, if you're watching this, make sure that you notice that these are not regular quote quotes.", 'start': 7391.912, 'duration': 5.464}, {'end': 7398.437, 'text': "They're backticks.", 'start': 7397.436, 'duration': 1.001}, {'end': 7400.898, 'text': 'So on your keyboard, there is a backtick.', 'start': 7399.177, 'duration': 1.721}, {'end': 7402.699, 'text': 'And that allows you to have some JavaScript.', 'start': 7401.238, 'duration': 1.461}, {'end': 7406.262, 'text': "So here I'm going to go ahead and I'm going to make that on a new line so everyone can see it.", 'start': 7402.719, 'duration': 3.543}, {'end': 7413.379, 'text': 'Beautiful How far is Sunday going? I know, I went way off the screen.', 'start': 7407.823, 'duration': 5.556}, {'end': 7416.461, 'text': 'Country code, and there we go.', 'start': 7415.06, 'duration': 1.401}], 'summary': 'Instructions on using backticks to insert javascript in a string.', 'duration': 30.092, 'max_score': 7386.369, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM7386369.jpg'}, {'end': 7716.232, 'src': 'heatmap', 'start': 7542.239, 'weight': 0.704, 'content': [{'end': 7544.601, 'text': 'This one is essentially going to update the input field.', 'start': 7542.239, 'duration': 2.362}, {'end': 7549.604, 'text': "This one is going to store the response of the country's information into a variable.", 'start': 7545.001, 'duration': 4.603}, {'end': 7550.985, 'text': 'They each do two separate things.', 'start': 7549.764, 'duration': 1.221}, {'end': 7554.527, 'text': "Oh, so we're storing the whole country data in there.", 'start': 7551.565, 'duration': 2.962}, {'end': 7555.348, 'text': 'Okay I got it.', 'start': 7554.648, 'duration': 0.7}, {'end': 7555.588, 'text': 'Got it.', 'start': 7555.368, 'duration': 0.22}, {'end': 7555.829, 'text': 'Got it.', 'start': 7555.608, 'duration': 0.221}, {'end': 7561.113, 'text': "So we're not just storing like the, just the, those specific pieces, like the total case, but we're actually storing the whole data.", 'start': 7555.849, 'duration': 5.264}, {'end': 7563.615, 'text': "And just so you guys know the data we're storing, guys right?", 'start': 7561.153, 'duration': 2.462}, {'end': 7566.817, 'text': "If you think about, if you're talking about the countries, for example, country code, right?", 'start': 7563.635, 'duration': 3.182}, {'end': 7569.239, 'text': 'If you look at the query, which is this country code.', 'start': 7567.178, 'duration': 2.061}, {'end': 7572.422, 'text': "And if you, for example, let's say we do try it out right?", 'start': 7569.7, 'duration': 2.722}, {'end': 7579.345, 'text': "and let's say we specify in the query we put in us usa i think usa, i think, is the query actually.", 'start': 7572.842, 'duration': 6.503}, {'end': 7585.028, 'text': 'and then, when you click, execute right, this will actually get us the country data about usa.', 'start': 7579.345, 'duration': 5.683}, {'end': 7587.69, 'text': 'right, this is exactly what we just put in right inside.', 'start': 7585.028, 'duration': 2.662}, {'end': 7592.952, 'text': 'is, instead of except, instead of usa, we actually have a variable called country code.', 'start': 7587.69, 'duration': 5.262}, {'end': 7596.134, 'text': 'right now, when we execute it, this is data we get.', 'start': 7592.952, 'duration': 3.182}, {'end': 7597.074, 'text': 'so check this out, guys.', 'start': 7596.134, 'duration': 0.94}, {'end': 7598.215, 'text': 'right, what do we get?', 'start': 7597.074, 'duration': 1.141}, {'end': 7603.497, 'text': 'we get an object this is called a dictionary object and that gets us all the data about the country.', 'start': 7598.215, 'duration': 5.282}, {'end': 7607.319, 'text': 'like cases today, cases deaths, right, all that stuff.', 'start': 7603.497, 'duration': 3.822}, {'end': 7609.06, 'text': 'and so what are we going to do with that?', 'start': 7607.319, 'duration': 1.741}, {'end': 7611.601, 'text': 'guys, drop it in the comment below.', 'start': 7609.06, 'duration': 2.541}, {'end': 7612.962, 'text': 'we are going to do what.', 'start': 7611.601, 'duration': 1.361}, {'end': 7620.505, 'text': "we are going to use that to display the data in the cards, and let's continue and do that exactly.", 'start': 7612.962, 'duration': 7.543}, {'end': 7624.316, 'text': "so Yeah, we're going to use that information.", 'start': 7620.505, 'duration': 3.811}, {'end': 7626.338, 'text': "I saw somebody said, you don't need an await here.", 'start': 7624.336, 'duration': 2.002}, {'end': 7629.781, 'text': 'Guys, honestly, in this case, I would put it there just to be sure.', 'start': 7626.678, 'duration': 3.103}, {'end': 7635.988, 'text': "But there's a lot of practice situations where, truthfully, you may not need the await there.", 'start': 7630.422, 'duration': 5.566}, {'end': 7642.034, 'text': 'But in most cases, if you need to wait for it and store it into a variable, in this case const a, then you would need it.', 'start': 7636.008, 'duration': 6.026}, {'end': 7644.777, 'text': 'But I like to just be extra safe and have the await.', 'start': 7642.474, 'duration': 2.303}, {'end': 7648.179, 'text': "So in this case, yeah, that's what we do.", 'start': 7646.258, 'duration': 1.921}, {'end': 7654.404, 'text': "And now basically we have set the country and then we are storing all of the data from the country's response into this variable here.", 'start': 7648.3, 'duration': 6.104}, {'end': 7662.669, 'text': "Now, what does that actually give us, right? So if I'm going to right now, I'm going to go ahead and console log and say country info.", 'start': 7654.904, 'duration': 7.765}, {'end': 7664.631, 'text': "And here I'm going to say.", 'start': 7663.61, 'duration': 1.021}, {'end': 7666.89, 'text': 'country info.', 'start': 7665.569, 'duration': 1.321}, {'end': 7671.915, 'text': 'so now, what we should see in the console is that in the beginning it should be an empty object.', 'start': 7666.89, 'duration': 5.025}, {'end': 7678.001, 'text': "so it should be an empty object in the beginning, right, so it's just a country info and it should just be empty.", 'start': 7671.915, 'duration': 6.086}, {'end': 7681.344, 'text': "so uh, i think it's because if you're there, it's not right there.", 'start': 7678.001, 'duration': 3.343}, {'end': 7683.106, 'text': "right there it's nothing right.", 'start': 7681.344, 'duration': 1.762}, {'end': 7690.126, 'text': 'so now, if you go to the drop down, If you go to the drop down and you select something, this is where it gets really cool.', 'start': 7683.106, 'duration': 7.02}, {'end': 7693.169, 'text': 'Albania And look at that.', 'start': 7690.566, 'duration': 2.603}, {'end': 7695.231, 'text': 'Look at that.', 'start': 7694.31, 'duration': 0.921}, {'end': 7700.658, 'text': 'It went and found Albania and it got that response and it stored it inside of country info.', 'start': 7695.412, 'duration': 5.246}, {'end': 7703.741, 'text': 'Now, notice the shape.', 'start': 7701.278, 'duration': 2.463}, {'end': 7708.445, 'text': "Notice the keys of the information that we're about to use are very important.", 'start': 7703.801, 'duration': 4.644}, {'end': 7716.232, 'text': "There's two things, either some services offer like what Nara showed before, a really useful tool that gives you a breakdown of what's returned.", 'start': 7708.925, 'duration': 7.307}], 'summary': 'Updating input field to store country data for display.', 'duration': 173.993, 'max_score': 7542.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM7542239.jpg'}, {'end': 7845.501, 'src': 'embed', 'start': 7812.501, 'weight': 0, 'content': [{'end': 7817.884, 'text': 'so in this case we had the country info dot.', 'start': 7812.501, 'duration': 5.383}, {'end': 7824.928, 'text': 'it was cases, and in this case it was country info dot today.', 'start': 7817.884, 'duration': 7.044}, {'end': 7825.728, 'text': "no, it wasn't.", 'start': 7824.928, 'duration': 0.8}, {'end': 7826.749, 'text': 'today it was recovered.', 'start': 7825.728, 'duration': 1.021}, {'end': 7827.809, 'text': 'sorry, total recovered.', 'start': 7826.749, 'duration': 1.06}, {'end': 7828.93, 'text': 'so this one recovered.', 'start': 7827.809, 'duration': 1.121}, {'end': 7834.933, 'text': 'and then the last one is total dot deaths, Beautiful.', 'start': 7828.93, 'duration': 6.003}, {'end': 7835.614, 'text': 'There we go.', 'start': 7835.154, 'duration': 0.46}, {'end': 7844.28, 'text': "If I save that now, we should see in our own app that now it's actually going to pull in the real numbers.", 'start': 7835.834, 'duration': 8.446}, {'end': 7845.501, 'text': "Something didn't work.", 'start': 7844.4, 'duration': 1.101}], 'summary': 'Total recovered cases and deaths updated in app.', 'duration': 33, 'max_score': 7812.501, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM7812501.jpg'}], 'start': 5671.115, 'title': 'Implementing ui and data fetching in react', 'summary': 'Covers using material ui for rendering a card element and styling info boxes for displaying covid-19 statistics, implementing flexbox for layout and containers, and fetching data in react, with a total of 1.2 million cases and visual demonstrations of 2,000, 3,000, and 4,000 cases.', 'chapters': [{'end': 5820.379, 'start': 5671.115, 'title': 'Material ui card element tutorial', 'summary': 'Covers using material ui to render a card element with title, number of cases, and total, with a total of 1.2 million, and using destructuring in es6 to pass props.', 'duration': 149.264, 'highlights': ['Using Material UI to render a card element with title, number of cases, and total, with a total of 1.2 million The tutorial explains how to utilize Material UI to display a card element with a title, number of cases, and total, where the total is illustrated as 1.2 million.', 'Using destructuring in ES6 to pass props The tutorial demonstrates the utilization of destructuring in ES6 to pass props efficiently, enhancing code readability and maintainability.']}, {'end': 6210.595, 'start': 5820.539, 'title': 'Styling and rendering info boxes', 'summary': 'Covers using typography and styling in vs code to create info boxes for displaying coronavirus statistics, including cases, recovered, and deaths, with a visual demonstration of 2,000, 3,000, and 4,000 cases.', 'duration': 390.056, 'highlights': ['Using typography and styling in VS Code to create info boxes for displaying coronavirus statistics The chapter demonstrates the use of typography and styling in VS Code to create info boxes for displaying coronavirus statistics.', 'Visual demonstration of 2,000, 3,000, and 4,000 cases A visual demonstration is provided with different numbers (2,000, 3,000, and 4,000) to display cases in the info boxes.', 'Utilizing Material UI components for info boxes, card, and styling The chapter emphasizes the use of Material UI components for info boxes, card, and styling, providing a direct reference to Material UI.']}, {'end': 6673.11, 'start': 6210.595, 'title': 'Implementing flexbox and structuring containers', 'summary': 'Discusses implementing flexbox for spacing between elements, creating a map component, and structuring containers for a mobile responsive design, all within a covid-19 tracker app.', 'duration': 462.515, 'highlights': ['Implementing Flexbox for spacing between elements The speaker demonstrates using Flexbox to create space between elements, showcasing the automatic determination and distribution of space between child elements.', 'Creating a map component The speaker creates a new file for a map component, sets up the structure following BEM methodology, and imports the map component into the project.', 'Structuring containers for a mobile responsive design The speaker discusses structuring containers for a mobile responsive design, emphasizing the division of content into left and right containers, and the organization of elements within these containers.']}, {'end': 7204.694, 'start': 6673.811, 'title': 'Implementing flexbox for layout', 'summary': "Focuses on implementing flexbox to create a responsive layout, using the 'display: flex' property to align containers side by side and adjusting the layout to a column when the screen size is reduced using media queries, resulting in a 90% width for the left container.", 'duration': 530.883, 'highlights': ["The use of 'display: flex' property to align containers side by side and 'justify-content: space-evenly' to evenly space the containers provides a responsive layout, automatically adjusting for different screen sizes.", "Implementing a media query with 'max-width' to change the layout to a column when the screen size is reduced to ensure a responsive design, allowing the containers to snap into a column layout for tablet or mobile view.", "Setting the left container to take up 90% of the screen width using the 'flex' property ensures that the left side of the layout remains prominent, providing a neat and responsive design for various screen sizes."]}, {'end': 8406.094, 'start': 7205.924, 'title': 'Using material ui and fetching data in react', 'summary': "Demonstrates using material ui's grid system, merging components with flex rules, and fetching data in react, including making calls to a service, using ternary operators, setting up state management, and displaying fetched data in tables.", 'duration': 1200.17, 'highlights': ["Using Material UI's grid system and merging components with flex rules Demonstrates using Material UI's grid system and merging components with flex rules.", 'Fetching data in React and making calls to a service Demonstrates fetching data in React and making calls to a service to pull in information.', 'Using ternary operators to conditionally set the URL for fetching data Demonstrates using ternary operators to conditionally set the URL for fetching data based on the selected country code.', 'Setting up state management and using useEffect to fetch data on component load Demonstrates setting up state management, including using useEffect to fetch data on component load.', 'Displaying fetched data in tables and using Emmett for faster coding Demonstrates displaying fetched data in tables and using Emmett for faster coding.']}], 'duration': 2734.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM5671115.jpg', 'highlights': ['Using Material UI to render a card element with title, number of cases, and total, with a total of 1.2 million', 'Visual demonstration of 2,000, 3,000, and 4,000 cases', "Implementing a media query with 'max-width' to change the layout to a column when the screen size is reduced to ensure a responsive design", "Using Material UI's grid system and merging components with flex rules", 'Fetching data in React and making calls to a service']}, {'end': 9219.297, 'segs': [{'end': 8529.208, 'src': 'embed', 'start': 8484.102, 'weight': 1, 'content': [{'end': 8486.023, 'text': 'This country is going to be in country and so forth.', 'start': 8484.102, 'duration': 1.921}, {'end': 8487.564, 'text': "And it's going to keep going and going and going.", 'start': 8486.043, 'duration': 1.521}, {'end': 8489.345, 'text': "That's the really cool part about that.", 'start': 8487.944, 'duration': 1.401}, {'end': 8491.087, 'text': 'Anyways Yeah, exactly.', 'start': 8489.686, 'duration': 1.401}, {'end': 8495.91, 'text': "This needs to be inside of JSX, otherwise it's literally just saying cases.", 'start': 8491.847, 'duration': 4.063}, {'end': 8502.135, 'text': "Nice Now, that will actually go ahead and loop through and it'll create a table for us, which is nice.", 'start': 8496.01, 'duration': 6.125}, {'end': 8504.676, 'text': 'We go back into app.js and we save.', 'start': 8502.155, 'duration': 2.521}, {'end': 8507.779, 'text': "Now it's saying table is not defined, so I need to import.", 'start': 8505.377, 'duration': 2.402}, {'end': 8510.781, 'text': "What I'm going to do is go ahead and write this piece of code.", 'start': 8507.799, 'duration': 2.982}, {'end': 8514.565, 'text': 'import table from table, save the file.', 'start': 8511.441, 'duration': 3.124}, {'end': 8519.09, 'text': 'And if we go back, you can see now, whoa, we have a long table.', 'start': 8514.745, 'duration': 4.345}, {'end': 8521.192, 'text': "Oh man, that's a lot of data.", 'start': 8519.49, 'duration': 1.702}, {'end': 8523.054, 'text': 'That is a ton of data.', 'start': 8521.472, 'duration': 1.582}, {'end': 8529.208, 'text': "So we have a lot of data there, right? One, it's not sorted, right? We need to sort that out.", 'start': 8523.783, 'duration': 5.425}], 'summary': 'Importing and looping through data to create a table in jsx, with a need for sorting.', 'duration': 45.106, 'max_score': 8484.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM8484102.jpg'}, {'end': 8576.385, 'src': 'embed', 'start': 8550.38, 'weight': 0, 'content': [{'end': 8554.762, 'text': "I'm going to go ahead and create another file called table.css.", 'start': 8550.38, 'duration': 4.382}, {'end': 8556.683, 'text': "I'm going to be popping into that now.", 'start': 8554.782, 'duration': 1.901}, {'end': 8557.443, 'text': 'There we go.', 'start': 8556.703, 'duration': 0.74}, {'end': 8558.444, 'text': 'Got it.', 'start': 8558.084, 'duration': 0.36}, {'end': 8558.744, 'text': 'See it.', 'start': 8558.484, 'duration': 0.26}, {'end': 8562.566, 'text': "What we're going to do now is we're going to go and style the table.", 'start': 8559.604, 'duration': 2.962}, {'end': 8569.028, 'text': "I'm going to say for that table, I want it to have a margin top because right now it's touching the top.", 'start': 8562.686, 'duration': 6.342}, {'end': 8571.189, 'text': 'I want it to have 20 pixels margin top.', 'start': 8569.089, 'duration': 2.1}, {'end': 8574.331, 'text': 'As I do this, guys, I will save so you can see the difference on the right.', 'start': 8571.229, 'duration': 3.102}, {'end': 8576.385, 'text': "So boom, we've got a margin top.", 'start': 8575.023, 'duration': 1.362}], 'summary': 'Created table.css file and added 20px margin top to the table.', 'duration': 26.005, 'max_score': 8550.38, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM8550380.jpg'}], 'start': 8406.094, 'title': 'Mapping, styling, responsive table, and sorting in react', 'summary': 'Covers mapping through country data, creating a styled table in jsx with css, implementing a responsive table with flex properties, and optimizing the sorting process in a react application using the sort method.', 'chapters': [{'end': 8675.079, 'start': 8406.094, 'title': 'Mapping and styling data in jsx', 'summary': 'Explains how to map through country data, split and access object properties, create a table in jsx, import and style the table using css, including setting margins, overflow, height, text and background colors.', 'duration': 268.985, 'highlights': ['Explaining how to create a table in JSX and import and style it using CSS. The chapter explains how to create a table in JSX, import and style it using CSS, including setting margins, overflow, height, text and background colors.', 'Demonstrating the mapping through country data and accessing object properties. It explains mapping through the country data, splitting and accessing object properties, such as accessing the country and cases.', 'Teaching the concept of destructuring and its application in the code. The chapter introduces the concept of destructuring and its application in the code, allowing for easier access to object properties.']}, {'end': 9219.297, 'start': 8675.079, 'title': 'Creating responsive table and implementing sorting', 'summary': 'Discusses creating a responsive table using display flex and justify content properties to distribute spacing evenly, and implementing a sorting function in react application using the sort method, with a detailed explanation of the comparison logic and a discussion on optimizing the sorting process.', 'duration': 544.218, 'highlights': ['Implementing sorting function using sort method The chapter discusses implementing a sorting function in a React application using the sort method, showcasing a detailed explanation of the comparison logic and optimizing the sorting process.', 'Creating a responsive table using display flex and justify content properties The chapter explains the creation of a responsive table using display flex and justify content properties to evenly distribute spacing, resulting in a cleaner table layout.', 'Explanation of the comparison logic in the sorting process A detailed explanation of the comparison logic used in the sorting process is provided, including discussions on the return values and their significance in the sorting function.']}], 'duration': 813.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM8406094.jpg', 'highlights': ['Implementing sorting function using sort method The chapter discusses implementing a sorting function in a React application using the sort method, showcasing a detailed explanation of the comparison logic and optimizing the sorting process.', 'Creating a responsive table using display flex and justify content properties The chapter explains the creation of a responsive table using display flex and justify content properties to evenly distribute spacing, resulting in a cleaner table layout.', 'Explaining how to create a table in JSX and import and style it using CSS. The chapter explains how to create a table in JSX, import and style it using CSS, including setting margins, overflow, height, text and background colors.', 'Demonstrating the mapping through country data and accessing object properties. It explains mapping through the country data, splitting and accessing object properties, such as accessing the country and cases.', 'Teaching the concept of destructuring and its application in the code. The chapter introduces the concept of destructuring and its application in the code, allowing for easier access to object properties.', 'Explanation of the comparison logic in the sorting process A detailed explanation of the comparison logic used in the sorting process is provided, including discussions on the return values and their significance in the sorting function.']}, {'end': 11306.851, 'segs': [{'end': 9677.803, 'src': 'heatmap', 'start': 9339.118, 'weight': 0.754, 'content': [{'end': 9349.364, 'text': "All I'm going to have in here is something called, so we need to install a dependency here called React Chart JS2.", 'start': 9339.118, 'duration': 10.246}, {'end': 9353.807, 'text': "Inside of the terminal now, so let's go ahead and open the terminal.", 'start': 9350.925, 'duration': 2.882}, {'end': 9355.628, 'text': "It's called React Chart JS2.", 'start': 9353.907, 'duration': 1.721}, {'end': 9360.892, 'text': 'and many of you guys would have used Chart.js before.', 'start': 9356.588, 'duration': 4.304}, {'end': 9370.26, 'text': "You may have, you may have not used it before, but it's a really, really powerful library for pretty much any sort of visual graph.", 'start': 9361.012, 'duration': 9.248}, {'end': 9372.502, 'text': "In this case, it's that top one right there.", 'start': 9370.801, 'duration': 1.701}, {'end': 9374.464, 'text': 'Yeah, there we go.', 'start': 9373.643, 'duration': 0.821}, {'end': 9379.795, 'text': 'And basically all you need to do is run MPM install.', 'start': 9375.291, 'duration': 4.504}, {'end': 9380.956, 'text': "So it's at the bottom.", 'start': 9379.815, 'duration': 1.141}, {'end': 9382.797, 'text': 'So MPM install, not that one.', 'start': 9381.016, 'duration': 1.781}, {'end': 9385.74, 'text': 'MPM, and there you go.', 'start': 9383.718, 'duration': 2.022}, {'end': 9386.14, 'text': 'MPM install.', 'start': 9385.76, 'duration': 0.38}, {'end': 9388.702, 'text': "I don't know why they have chart.js at the end of it.", 'start': 9386.34, 'duration': 2.362}, {'end': 9389.803, 'text': "You don't actually need to do that.", 'start': 9388.782, 'duration': 1.021}, {'end': 9391.424, 'text': "You don't need to do that? Let that just say I don't know why.", 'start': 9389.843, 'duration': 1.581}, {'end': 9393.816, 'text': "Yeah, Yeah, it's MPMI.", 'start': 9391.484, 'duration': 2.332}, {'end': 9395.217, 'text': 'so literally in the terminal now.', 'start': 9393.816, 'duration': 1.401}, {'end': 9402.301, 'text': "so if you just go ahead and do Command J on the terminal and we'll do MPMI, oh, you're gonna have to go to the.", 'start': 9395.217, 'duration': 7.084}, {'end': 9404.562, 'text': 'you see where the dropdown?', 'start': 9402.301, 'duration': 2.261}, {'end': 9406.263, 'text': 'yeah, three, I think yeah?', 'start': 9404.562, 'duration': 1.701}, {'end': 9409.805, 'text': "So, MPMI, can you see what I'm writing??", 'start': 9407.484, 'duration': 2.321}, {'end': 9411.146, 'text': 'Yep, yep, yep, all is good.', 'start': 9409.945, 'duration': 1.201}, {'end': 9416.428, 'text': "All right, so MPMI, and then I'm gonna do React Chart JS2.", 'start': 9412.186, 'duration': 4.242}, {'end': 9420.591, 'text': 'So we go ahead and we install that, right? Beautiful.', 'start': 9416.789, 'duration': 3.802}, {'end': 9422.232, 'text': 'Oh, wow, that was really quick.', 'start': 9420.911, 'duration': 1.321}, {'end': 9423.672, 'text': 'That was really quick, actually.', 'start': 9422.732, 'duration': 0.94}, {'end': 9429.735, 'text': 'Yeah, and then what we go ahead and do at the end is we pretty much go back into our code, and we do this line.', 'start': 9423.692, 'duration': 6.043}, {'end': 9436.279, 'text': 'We say import line from React Chart JS2, right? And this will give us the line component from them, right? Mm-hmm.', 'start': 9429.816, 'duration': 6.463}, {'end': 9440.261, 'text': 'Now What this needs is a few things.', 'start': 9437.119, 'duration': 3.142}, {'end': 9443.843, 'text': 'So we just basically to render it, we go ahead and we do line.', 'start': 9440.481, 'duration': 3.362}, {'end': 9448.625, 'text': 'But it takes a bunch of sort of attributes in order to render it correctly.', 'start': 9444.663, 'duration': 3.962}, {'end': 9452.527, 'text': 'And the ones that we are interested in here are one is called data.', 'start': 9448.645, 'duration': 3.882}, {'end': 9455.229, 'text': 'One is called options.', 'start': 9453.328, 'duration': 1.901}, {'end': 9459.331, 'text': 'Right now, the data we will pass in as a prop.', 'start': 9455.649, 'duration': 3.682}, {'end': 9462.837, 'text': "So we will pass in as a, no, we're not going to pass in as props.", 'start': 9460.235, 'duration': 2.602}, {'end': 9463.857, 'text': "We're going to fetch the data.", 'start': 9462.857, 'duration': 1}, {'end': 9465.959, 'text': 'So this component is going to do everything on its own.', 'start': 9464.138, 'duration': 1.821}, {'end': 9469.741, 'text': "It's actually going to go ahead and fetch its own data and everything by itself.", 'start': 9466.019, 'duration': 3.722}, {'end': 9476.145, 'text': "So the first thing we need to do is go ahead and introduce a piece of state where we're going to store the data that it's going to go and fetch.", 'start': 9469.821, 'duration': 6.324}, {'end': 9481.882, 'text': "So we're going to say data, set data, Equals use state and because we're in a new file.", 'start': 9476.165, 'duration': 5.717}, {'end': 9484.323, 'text': 'We need to go ahead and pull that in.', 'start': 9482.502, 'duration': 1.821}, {'end': 9489.225, 'text': "So you stay, and in the beginning I'm gonna say it's an, it's an empty Object.", 'start': 9484.323, 'duration': 4.902}, {'end': 9490.665, 'text': "right, that's gonna be color data.", 'start': 9489.225, 'duration': 1.44}, {'end': 9491.845, 'text': "guys, like that's the data.", 'start': 9490.665, 'duration': 1.18}, {'end': 9492.546, 'text': 'is there for a color?', 'start': 9491.845, 'duration': 0.701}, {'end': 9495.367, 'text': "because we're gonna pass that in to the actual graph.", 'start': 9492.546, 'duration': 2.821}, {'end': 9496.987, 'text': 'Okay, Exactly.', 'start': 9495.367, 'duration': 1.62}, {'end': 9500.749, 'text': 'Yeah, and remember so in order to make a call.', 'start': 9497.007, 'duration': 3.742}, {'end': 9504.95, 'text': "So there is an endpoint that I'm interested in right now, and it's this one right here.", 'start': 9500.749, 'duration': 4.201}, {'end': 9512.249, 'text': "so I'm interested in making a call to this endpoint, and This endpoint is basically going to give me all of the worldwide information,", 'start': 9504.95, 'duration': 7.299}, {'end': 9520.333, 'text': "all the worldwide data, and it's basically going to go ahead and get the last 120 days' worth of information.", 'start': 9512.249, 'duration': 8.084}, {'end': 9524.516, 'text': "I'm going to go ahead and drop that on another line so you guys can see that like that.", 'start': 9520.413, 'duration': 4.103}, {'end': 9526.276, 'text': "That's how it is.", 'start': 9524.576, 'duration': 1.7}, {'end': 9532.74, 'text': "What we're going to do now is have a useEffect.", 'start': 9526.336, 'duration': 6.404}, {'end': 9534.581, 'text': 'This is how we write useEffect.', 'start': 9532.9, 'duration': 1.681}, {'end': 9537.002, 'text': "We're quite comfortable now with the useEffect.", 'start': 9534.601, 'duration': 2.401}, {'end': 9539.408, 'text': 'Hook We do this.', 'start': 9538.308, 'duration': 1.1}, {'end': 9542.049, 'text': "We're going to run once for now.", 'start': 9540.249, 'duration': 1.8}, {'end': 9544.33, 'text': 'Here we do use effect like this.', 'start': 9542.089, 'duration': 2.241}, {'end': 9547.97, 'text': "Inside of here, what I'm going to do is I'm going to make a call.", 'start': 9544.91, 'duration': 3.06}, {'end': 9551.551, 'text': "I'm going to say fetch, and I'm going to basically go to that URL.", 'start': 9547.99, 'duration': 3.561}, {'end': 9556.092, 'text': "Fetch, go to that URL, and then I'm going to say get the response.", 'start': 9552.091, 'duration': 4.001}, {'end': 9558.253, 'text': 'Get the response.', 'start': 9557.533, 'duration': 0.72}, {'end': 9563.957, 'text': 'get the response to json, which is basically the only, the only thing we care about.', 'start': 9559.975, 'duration': 3.982}, {'end': 9572.121, 'text': 'get the json sort of the stuff that we can work with, that essentially acts as our data, and then what we can do with the data we basically do here.', 'start': 9563.957, 'duration': 8.164}, {'end': 9573.882, 'text': 'so clever stuff here.', 'start': 9572.121, 'duration': 1.761}, {'end': 9579.525, 'text': 'so, like all the clever stuff happens here now right, which is how we sort of get the information and we basically render it on the data.', 'start': 9573.882, 'duration': 5.643}, {'end': 9582.146, 'text': 'so the first thing i want to do is essentially go ahead.', 'start': 9579.525, 'duration': 2.621}, {'end': 9586.998, 'text': 'Firstly, what I would say to do, guys, is we need to.', 'start': 9583.977, 'duration': 3.021}, {'end': 9592.999, 'text': "so yes, this data is going to come back, but it's not in a way that is going to be usable here.", 'start': 9586.998, 'duration': 6.001}, {'end': 9594.999, 'text': "It's not in a way that's going to be usable here.", 'start': 9593.319, 'duration': 1.68}, {'end': 9597, 'text': "What I'm going to do is I'm going to comment this out.", 'start': 9595.019, 'duration': 1.981}, {'end': 9602.661, 'text': "Here, I'm just going to say temporarily I'm a graph just so we know that it's rendering.", 'start': 9597.42, 'duration': 5.241}, {'end': 9608.402, 'text': "Here, what I would first say is do is console.log the data to see what you're getting back.", 'start': 9603.281, 'duration': 5.121}, {'end': 9609.502, 'text': 'Console.log, oops.', 'start': 9608.422, 'duration': 1.08}, {'end': 9614.162, 'text': 'data, right? So console log data like this.', 'start': 9611.26, 'duration': 2.902}, {'end': 9618.905, 'text': "So now if we check out the response and basically I need to make sure that it's imported.", 'start': 9614.782, 'duration': 4.123}, {'end': 9621.827, 'text': "So I'm going to go into app.js, import it in.", 'start': 9618.925, 'duration': 2.902}, {'end': 9622.647, 'text': 'So there we go.', 'start': 9622.087, 'duration': 0.56}, {'end': 9623.488, 'text': "I've imported it.", 'start': 9622.667, 'duration': 0.821}, {'end': 9625.329, 'text': 'I did a short.', 'start': 9624.749, 'duration': 0.58}, {'end': 9627.13, 'text': 'Yeah, I did it.', 'start': 9625.529, 'duration': 1.601}, {'end': 9628.791, 'text': "That's the line that we did.", 'start': 9627.59, 'duration': 1.201}, {'end': 9630.953, 'text': 'Gotcha Yep.', 'start': 9629.151, 'duration': 1.802}, {'end': 9634.895, 'text': 'And then it says cannot resolve chart.js in.', 'start': 9631.873, 'duration': 3.022}, {'end': 9636.316, 'text': 'Oh, oops.', 'start': 9635.676, 'duration': 0.64}, {'end': 9636.936, 'text': 'Yeah Okay.', 'start': 9636.476, 'duration': 0.46}, {'end': 9639.458, 'text': 'So you do need to do that at MPMI.', 'start': 9636.956, 'duration': 2.502}, {'end': 9642.197, 'text': "So if we open up the terminal, yeah, so that's.", 'start': 9639.478, 'duration': 2.719}, {'end': 9644.258, 'text': 'i was wondering that was too quick.', 'start': 9642.197, 'duration': 2.061}, {'end': 9648.982, 'text': "yeah, so, guys, the reason why they had chart.js is because it's a separate dependency.", 'start': 9644.258, 'duration': 4.724}, {'end': 9650.283, 'text': "so you're installing both.", 'start': 9648.982, 'duration': 1.301}, {'end': 9652.344, 'text': "okay, so i'm going to go ahead.", 'start': 9650.283, 'duration': 2.061}, {'end': 9653.485, 'text': "i didn't realize that's just.", 'start': 9652.344, 'duration': 1.141}, {'end': 9654.886, 'text': "that's how you do that.", 'start': 9653.485, 'duration': 1.401}, {'end': 9657.988, 'text': 'nice, um, okay, so then we there, we have it.', 'start': 9654.886, 'duration': 3.102}, {'end': 9660.03, 'text': 'we have the other one installed now and there you go.', 'start': 9657.988, 'duration': 2.042}, {'end': 9662.196, 'text': 'so it popped up.', 'start': 9660.03, 'duration': 2.166}, {'end': 9671.82, 'text': 'but if we go ahead and inspect the console, you can see now that, um, we can see country info.', 'start': 9662.196, 'duration': 9.624}, {'end': 9673.501, 'text': "um, no, it's not that one.", 'start': 9671.82, 'duration': 1.681}, {'end': 9677.803, 'text': 'it would be inside of line graph and then you can say console.log.', 'start': 9673.501, 'duration': 4.302}], 'summary': 'Installing react chart js2 dependency and fetching worldwide data for visualization.', 'duration': 338.685, 'max_score': 9339.118, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM9339118.jpg'}, {'end': 9802.549, 'src': 'embed', 'start': 9772.768, 'weight': 0, 'content': [{'end': 9774.089, 'text': 'I got it, I got it, I got it, I got it.', 'start': 9772.768, 'duration': 1.321}, {'end': 9775.27, 'text': 'Hold on, hold on, hold on, hold on.', 'start': 9774.109, 'duration': 1.161}, {'end': 9785.385, 'text': "I'm actually curious as well, because this is a step that I sort of, Naz had already wrote this function for me when I came to this point.", 'start': 9776.843, 'duration': 8.542}, {'end': 9787.385, 'text': "Hold on, it's not letting me, okay.", 'start': 9786.085, 'duration': 1.3}, {'end': 9789.126, 'text': 'Chart.js data, okay.', 'start': 9787.585, 'duration': 1.541}, {'end': 9794.087, 'text': 'Yep And now if I go to simply, where did I get the data from? Updating charts, no.', 'start': 9789.286, 'duration': 4.801}, {'end': 9796.087, 'text': 'I think I just went- Maybe check.', 'start': 9794.947, 'duration': 1.14}, {'end': 9797.108, 'text': 'I went to the example.', 'start': 9796.387, 'duration': 0.721}, {'end': 9798.208, 'text': 'Yeah, maybe check align graph.', 'start': 9797.128, 'duration': 1.08}, {'end': 9801.008, 'text': "Align graph? Let's go to align graph.", 'start': 9799.468, 'duration': 1.54}, {'end': 9802.549, 'text': 'Yeah, so align graph chart.js.', 'start': 9801.068, 'duration': 1.481}], 'summary': 'Discussion about chart.js data and aligning graph.', 'duration': 29.781, 'max_score': 9772.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM9772768.jpg'}, {'end': 10015.048, 'src': 'embed', 'start': 9987.919, 'weight': 8, 'content': [{'end': 9993.924, 'text': "So this is going to be an object, and it's going to have an x, and the x is going to be the date.", 'start': 9987.919, 'duration': 6.005}, {'end': 9999.049, 'text': "So in this case, every single entry is not case, it's going to be date.", 'start': 9994.585, 'duration': 4.464}, {'end': 10002.365, 'text': 'So every single entry that we loop through is going to be the date.', 'start': 9999.784, 'duration': 2.581}, {'end': 10003.625, 'text': 'So the X is going to be the date.', 'start': 10002.385, 'duration': 1.24}, {'end': 10006.726, 'text': 'The Y, this is where it gets a little bit more tricky.', 'start': 10004.085, 'duration': 2.641}, {'end': 10008.586, 'text': "We're going to say the Y is the data.", 'start': 10006.746, 'duration': 1.84}, {'end': 10015.048, 'text': "It's the data, and in this case we're going to access all the cases, because we're just going to show it for the cases at the moment,", 'start': 10009.847, 'duration': 5.201}], 'summary': 'An object with x as date and y as cases will be used for visualization.', 'duration': 27.129, 'max_score': 9987.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM9987919.jpg'}, {'end': 10082.126, 'src': 'embed', 'start': 10048.506, 'weight': 10, 'content': [{'end': 10057.073, 'text': "Now, for example, if you think about this, this is 384, 420, right? That's the total cases for that date.", 'start': 10048.506, 'duration': 8.567}, {'end': 10064.74, 'text': 'If you want to know how many new cases appeared on that date, what do we do? Drop in the comment below.', 'start': 10057.734, 'duration': 7.006}, {'end': 10069.123, 'text': 'We simply do 384, 420.', 'start': 10065.16, 'duration': 3.963}, {'end': 10070.543, 'text': '384, 420 minus 342, 255.', 'start': 10069.123, 'duration': 1.42}, {'end': 10076.045, 'text': 'And that gives us what?', 'start': 10070.543, 'duration': 5.502}, {'end': 10082.126, 'text': 'The difference between the last date and the current date, and that new cases right?', 'start': 10076.225, 'duration': 5.901}], 'summary': 'On a specific date, there were 384,420 total cases, with a difference of 42,165 new cases.', 'duration': 33.62, 'max_score': 10048.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM10048506.jpg'}, {'end': 10497.511, 'src': 'heatmap', 'start': 10319.48, 'weight': 2, 'content': [{'end': 10328.164, 'text': "And now, remember, I can pass in the case type here, so I can pass in that recovered, but if I don't, it will default to cases right?", 'start': 10319.48, 'duration': 8.684}, {'end': 10329.505, 'text': 'Yeah, by default exactly.', 'start': 10328.444, 'duration': 1.061}, {'end': 10336.108, 'text': "So if you don't pass in anything, basically, which, you know, if you don't pass in anything, it will just be cases by default, exactly.", 'start': 10329.525, 'duration': 6.583}, {'end': 10338.957, 'text': 'Exactly That should set everything.', 'start': 10336.596, 'duration': 2.361}, {'end': 10344.8, 'text': 'Then what I want to do is I want to say set data to my chart data.', 'start': 10339.177, 'duration': 5.623}, {'end': 10348.001, 'text': 'Then after that, what I can do is I can just get rid of all of these comments.', 'start': 10345.42, 'duration': 2.581}, {'end': 10349.642, 'text': "That's actually what we need.", 'start': 10348.161, 'duration': 1.481}, {'end': 10359.366, 'text': 'That would have actually translated or transformed all the information into the required format that they need in Chart.js.', 'start': 10349.802, 'duration': 9.564}, {'end': 10364.349, 'text': "Now, there's one more step to this, which is we just need to remember to do this.", 'start': 10359.867, 'duration': 4.482}, {'end': 10367.551, 'text': 'Data actually takes an object.', 'start': 10365.209, 'duration': 2.342}, {'end': 10369.473, 'text': 'It takes an object there.', 'start': 10368.052, 'duration': 1.421}, {'end': 10371.835, 'text': 'So we can ignore options for now, but it takes an object.', 'start': 10369.713, 'duration': 2.122}, {'end': 10378.62, 'text': 'Inside of there, this is all inside of the API or the documentation, but we can see it takes datasets.', 'start': 10372.415, 'duration': 6.205}, {'end': 10382.043, 'text': 'It takes a variable called datasets, and this takes an array.', 'start': 10378.82, 'duration': 3.223}, {'end': 10385.945, 'text': 'Inside of this array, we can pass the data.', 'start': 10382.683, 'duration': 3.262}, {'end': 10391.648, 'text': "So here, I'm just going to say the data in this case is our data variable in the store.", 'start': 10386.025, 'duration': 5.623}, {'end': 10393.408, 'text': "So here, something's freaking out.", 'start': 10391.828, 'duration': 1.58}, {'end': 10401.712, 'text': "it's because I'm passing in the datasets.", 'start': 10397.731, 'duration': 3.981}, {'end': 10410.034, 'text': 'Here, what we need to actually do is inside of datasets, this needs to be an object and then this needs to be our data.', 'start': 10401.792, 'duration': 8.242}, {'end': 10415.915, 'text': "We're saying the key is data and the value is our state data.", 'start': 10410.434, 'duration': 5.481}, {'end': 10419.456, 'text': 'This one right here that we set with that response.', 'start': 10416.295, 'duration': 3.161}, {'end': 10421.216, 'text': 'Now, you can also do two more things.', 'start': 10419.536, 'duration': 1.68}, {'end': 10423.437, 'text': 'You can add a background color and a border color.', 'start': 10421.236, 'duration': 2.201}, {'end': 10425.417, 'text': "We'll go ahead and drop that in there.", 'start': 10423.997, 'duration': 1.42}, {'end': 10431.863, 'text': "And if we save it, this will actually go ahead and get the data set and it'll do what we need it to do.", 'start': 10426.081, 'duration': 5.782}, {'end': 10435.664, 'text': 'Right So now it says for each is not a function.', 'start': 10431.943, 'duration': 3.721}, {'end': 10440.985, 'text': "So really what? Well, it's because, all right, actually.", 'start': 10435.724, 'duration': 5.261}, {'end': 10442.026, 'text': 'Oh, right.', 'start': 10441.205, 'duration': 0.821}, {'end': 10444.666, 'text': 'Maybe Yeah.', 'start': 10442.426, 'duration': 2.24}, {'end': 10452.249, 'text': "So this this situation sometimes happens when you loop through um, a object like it's.", 'start': 10445.527, 'duration': 6.722}, {'end': 10453.409, 'text': 'so in this case it was.', 'start': 10452.249, 'duration': 1.16}, {'end': 10456.496, 'text': 'it was because it was not an array, remember.', 'start': 10454.375, 'duration': 2.121}, {'end': 10458.357, 'text': "yeah, it's not an array, right?", 'start': 10456.496, 'duration': 1.861}, {'end': 10460.318, 'text': "yeah, it's not an array, it's not, it's not.", 'start': 10458.357, 'duration': 1.961}, {'end': 10464.3, 'text': "it's a dictionary object with the keys as being dates.", 'start': 10460.318, 'duration': 3.982}, {'end': 10472.044, 'text': "so sometimes you might run into this, guys, and it's a completely normal thing, and what you need to do is actually change it to this syntax.", 'start': 10464.3, 'duration': 7.744}, {'end': 10473.624, 'text': "so you can't use es6.", 'start': 10472.044, 'duration': 1.58}, {'end': 10478.947, 'text': 'in this case, you have to do it like this you have to say four, oh yeah, and you say let, and then you say date.', 'start': 10473.624, 'duration': 5.323}, {'end': 10484.283, 'text': 'so, rather than the way we did it, let day in data dot cases, yeah,', 'start': 10478.947, 'duration': 5.336}, {'end': 10488.345, 'text': 'and then what this will do is it will actually go through and we get rid of this one here, and it will go through.', 'start': 10484.283, 'duration': 4.062}, {'end': 10493.148, 'text': 'um, there we go, it will go through and it will basically just get you the date in those.', 'start': 10488.345, 'duration': 4.803}, {'end': 10496.551, 'text': 'so every time it gets to find a new object, it will just call it day.', 'start': 10493.148, 'duration': 3.403}, {'end': 10497.511, 'text': 'so you will.', 'start': 10496.551, 'duration': 0.96}], 'summary': "Modifying data to fit chart.js format, handling object iteration, and resolving 'for each is not a function' error.", 'duration': 178.031, 'max_score': 10319.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM10319480.jpg'}, {'end': 10827.913, 'src': 'heatmap', 'start': 10641.601, 'weight': 9, 'content': [{'end': 10645.641, 'text': "so it's an empty object And what we have in here is a bunch of things.", 'start': 10641.601, 'duration': 4.04}, {'end': 10647.261, 'text': "So there's a few things by default.", 'start': 10645.801, 'duration': 1.46}, {'end': 10652.262, 'text': 'So these are things which you can see in the documentation and you can pretty much just copy these from the code right?', 'start': 10647.301, 'duration': 4.961}, {'end': 10656.283, 'text': 'These are just sort of predefined options, which is what you need.', 'start': 10652.382, 'duration': 3.901}, {'end': 10657.163, 'text': 'So we have a legend.', 'start': 10656.303, 'duration': 0.86}, {'end': 10658.204, 'text': "We don't want to display it.", 'start': 10657.223, 'duration': 0.981}, {'end': 10661.124, 'text': 'We were saying the point radius should be zero.', 'start': 10659.144, 'duration': 1.98}, {'end': 10663.825, 'text': 'Maintain aspect ratio should be false.', 'start': 10661.704, 'duration': 2.121}, {'end': 10666.006, 'text': "We don't really want that at this point.", 'start': 10663.905, 'duration': 2.101}, {'end': 10668.986, 'text': "We don't care if it sort of goes a bit skewed or something like that.", 'start': 10666.406, 'duration': 2.58}, {'end': 10672.007, 'text': "The tool tips, we're going to enable some tool tips here.", 'start': 10669.346, 'duration': 2.661}, {'end': 10679.507, 'text': 'so again, guys, this is, this is area where you can pretty much just copy it out, and we need to install this package here.', 'start': 10673.101, 'duration': 6.406}, {'end': 10682.61, 'text': 'this package, here, this is going to allow you to have a tool tip.', 'start': 10679.507, 'duration': 3.103}, {'end': 10689.496, 'text': "so when you hover over the graph, you're going to be able to see what um value is is is at that point.", 'start': 10682.61, 'duration': 6.886}, {'end': 10692.619, 'text': 'so here i need to install a package called numeral.', 'start': 10689.496, 'duration': 3.123}, {'end': 10694.28, 'text': "so i'm going to do npm.", 'start': 10692.619, 'duration': 1.661}, {'end': 10697.203, 'text': 'so inside, if we do command j, we do npm i.', 'start': 10694.28, 'duration': 2.923}, {'end': 10701.495, 'text': "Then I'm going to install something called numeral.", 'start': 10698.252, 'duration': 3.243}, {'end': 10705.68, 'text': 'This is basically going to help us format our numbers in a given way.', 'start': 10702.096, 'duration': 3.584}, {'end': 10710.264, 'text': "I need to import that if we're going to use it at the top.", 'start': 10705.78, 'duration': 4.484}, {'end': 10713.187, 'text': "Here I'm going to go import numeral from numeral.", 'start': 10710.324, 'duration': 2.863}, {'end': 10715.583, 'text': 'Then we have our scales.', 'start': 10714.622, 'duration': 0.961}, {'end': 10717.004, 'text': 'Now, scales is really important.', 'start': 10715.743, 'duration': 1.261}, {'end': 10720.948, 'text': "I'm going to copy a snippet that we have and I'm going to explain through it.", 'start': 10717.044, 'duration': 3.904}, {'end': 10723.069, 'text': 'Here is the scales.', 'start': 10721.688, 'duration': 1.381}, {'end': 10727.513, 'text': "Here we're saying it's an object with two important things.", 'start': 10723.129, 'duration': 4.384}, {'end': 10729.835, 'text': 'It has x-axis and a y-axis.', 'start': 10727.533, 'duration': 2.302}, {'end': 10737.082, 'text': "The X axis we're saying the type is a time, right? So that's a type of X axis that we're passing it.", 'start': 10731.076, 'duration': 6.006}, {'end': 10738.904, 'text': 'And this is the format that we want it in.', 'start': 10737.382, 'duration': 1.522}, {'end': 10740.505, 'text': 'So month, day, year.', 'start': 10739.104, 'duration': 1.401}, {'end': 10742.487, 'text': 'And the tool tip format is LL.', 'start': 10740.986, 'duration': 1.501}, {'end': 10743.748, 'text': "I'm not sure what LL is.", 'start': 10742.727, 'duration': 1.021}, {'end': 10746.471, 'text': 'What is LL? Is that? Tool tip format.', 'start': 10743.768, 'duration': 2.703}, {'end': 10747.832, 'text': 'Hold on.', 'start': 10747.192, 'duration': 0.64}, {'end': 10748.813, 'text': "I'll let you know in a second here.", 'start': 10747.892, 'duration': 0.921}, {'end': 10749.114, 'text': 'Hold on.', 'start': 10748.853, 'duration': 0.261}, {'end': 10749.894, 'text': 'Keep going.', 'start': 10749.554, 'duration': 0.34}, {'end': 10753.536, 'text': "Yeah So that's a type of, like a date, I'm sure it's type of date.", 'start': 10749.914, 'duration': 3.622}, {'end': 10757.858, 'text': "And we have the y-axis, so we're saying, don't show the y-axis grid lines.", 'start': 10754.037, 'duration': 3.821}, {'end': 10760.319, 'text': "So over here we say, don't show the y-axis grid lines.", 'start': 10758.098, 'duration': 2.221}, {'end': 10765.622, 'text': 'And also the ticks, we basically want it to show the ticks in this format.', 'start': 10760.68, 'duration': 4.942}, {'end': 10767.403, 'text': 'So this is a given timestamp.', 'start': 10765.662, 'duration': 1.741}, {'end': 10769.944, 'text': 'This will all make sense once we actually show you this.', 'start': 10767.463, 'duration': 2.481}, {'end': 10777.333, 'text': 'But the point is, we passed this entire object as a config to that line file.', 'start': 10770.064, 'duration': 7.269}, {'end': 10778.173, 'text': 'We just pass it in.', 'start': 10777.373, 'duration': 0.8}, {'end': 10780.513, 'text': 'In terms of what you need here, guys.', 'start': 10778.853, 'duration': 1.66}, {'end': 10785.674, 'text': 'honestly, you can just pretty much happily copy this config thing or you can get one and customize it as you need it.', 'start': 10780.513, 'duration': 5.161}, {'end': 10793.336, 'text': "But in this case, don't focus too much on this part of it as opposed to the actual getting the data, if that makes sense.", 'start': 10786.114, 'duration': 7.222}, {'end': 10797.877, 'text': 'In this case, do we still get that issue? We are still getting that issue.', 'start': 10794.556, 'duration': 3.321}, {'end': 10798.677, 'text': "Let's see.", 'start': 10797.897, 'duration': 0.78}, {'end': 10804.021, 'text': 'interesting. let me just go ahead and just for sunny, go ahead.', 'start': 10800.174, 'duration': 3.847}, {'end': 10809.103, 'text': 'oh, maybe actually, right, this might be, because, no, is it?', 'start': 10804.021, 'duration': 5.082}, {'end': 10811.165, 'text': "because we're actually doing so?", 'start': 10809.103, 'duration': 2.062}, {'end': 10813.706, 'text': 'what we need to do, maybe here is actually do a.', 'start': 10811.165, 'duration': 2.541}, {'end': 10817.448, 'text': 'oh, okay, i know why, right here, guys, we have a fetch.', 'start': 10813.706, 'duration': 3.742}, {'end': 10820.89, 'text': 'right, we have a fetch, but fetch is asynchronous.', 'start': 10817.448, 'duration': 3.442}, {'end': 10823.651, 'text': 'yeah, okay, oh right, yeah.', 'start': 10820.89, 'duration': 2.761}, {'end': 10827.913, 'text': 'so in order to run asynchronous code inside of a use effect, you need to do this.', 'start': 10823.651, 'duration': 4.262}], 'summary': 'Configuring options for tooltips, legends, and scales with predefined settings and package installations.', 'duration': 37.906, 'max_score': 10641.601, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM10641601.jpg'}, {'end': 11176.705, 'src': 'embed', 'start': 11147.432, 'weight': 3, 'content': [{'end': 11149.433, 'text': "What I'm going to do here is I'm going to say cases type.", 'start': 11147.432, 'duration': 2.001}, {'end': 11154.966, 'text': "I'm actually going to go ahead and you need to include this in here because it's a variable which can change.", 'start': 11150.322, 'duration': 4.644}, {'end': 11156.227, 'text': 'It needs to be a dependency.', 'start': 11154.986, 'duration': 1.241}, {'end': 11164.935, 'text': "Then I'm going to go ahead and go to the prop itself inside of line graph, which is here.", 'start': 11156.247, 'duration': 8.688}, {'end': 11169.479, 'text': "This is going to come in as a prop and we're going to destructure it and it's going to have case.", 'start': 11164.955, 'duration': 4.524}, {'end': 11172.501, 'text': "We're going to say, if you don't pass one, default to cases.", 'start': 11169.499, 'duration': 3.002}, {'end': 11174.883, 'text': "Beautiful That's a nice, elegant way of doing it.", 'start': 11172.922, 'duration': 1.961}, {'end': 11176.705, 'text': 'Nice Yeah, there you go.', 'start': 11175.744, 'duration': 0.961}], 'summary': "Discussion about handling cases type and defaulting to 'cases' if not passed.", 'duration': 29.273, 'max_score': 11147.432, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11147432.jpg'}, {'end': 11315.773, 'src': 'embed', 'start': 11284.554, 'weight': 4, 'content': [{'end': 11286.255, 'text': 'I just, I just, I just removed this for a second here.', 'start': 11284.554, 'duration': 1.701}, {'end': 11286.915, 'text': 'Oh, there you go.', 'start': 11286.355, 'duration': 0.56}, {'end': 11287.216, 'text': 'There we go.', 'start': 11286.935, 'duration': 0.281}, {'end': 11289.477, 'text': 'Yeah Hold on, hold on, hold on, hold on.', 'start': 11287.716, 'duration': 1.761}, {'end': 11290.718, 'text': 'Hold on.', 'start': 11290.418, 'duration': 0.3}, {'end': 11291.679, 'text': 'There you go.', 'start': 11291.179, 'duration': 0.5}, {'end': 11294.201, 'text': 'Yeah So you can see it.', 'start': 11291.699, 'duration': 2.502}, {'end': 11295.802, 'text': 'So now I put the legend back.', 'start': 11294.601, 'duration': 1.201}, {'end': 11297.444, 'text': "Okay And it's going to display it back.", 'start': 11295.942, 'duration': 1.502}, {'end': 11298.725, 'text': 'Just like that, guys.', 'start': 11298.004, 'duration': 0.721}, {'end': 11299.465, 'text': 'Wait Shoot.', 'start': 11299.005, 'duration': 0.46}, {'end': 11301.467, 'text': 'Boom Yeah.', 'start': 11300.946, 'duration': 0.521}, {'end': 11302.728, 'text': 'There you go.', 'start': 11302.427, 'duration': 0.301}, {'end': 11303.768, 'text': 'So now if I save it back.', 'start': 11302.808, 'duration': 0.96}, {'end': 11304.769, 'text': 'Save that.', 'start': 11304.289, 'duration': 0.48}, {'end': 11306.17, 'text': 'Boom Boom.', 'start': 11305.13, 'duration': 1.04}, {'end': 11306.851, 'text': 'Right there.', 'start': 11306.471, 'duration': 0.38}, {'end': 11308.352, 'text': 'Legends displayed right there.', 'start': 11307.351, 'duration': 1.001}, {'end': 11309.193, 'text': 'So just like that, guys.', 'start': 11308.372, 'duration': 0.821}, {'end': 11310.394, 'text': 'Beautiful Beautiful.', 'start': 11309.513, 'duration': 0.881}, {'end': 11315.773, 'text': 'Beautiful So this code, by the way, this code, guys, you will have this code later on.', 'start': 11310.414, 'duration': 5.359}], 'summary': 'Demonstration of adding and displaying a legend in code, with mention of saving the code for later use.', 'duration': 31.219, 'max_score': 11284.554, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11284554.jpg'}], 'start': 9219.318, 'title': 'Implementing line graph in react', 'summary': 'Covers implementing a line graph using react chart js2 in the app.js file, fetching worldwide data for the last 120 days. it also discusses using useeffect to fetch and manipulate data for visualization, formatting data for chart.js, and debugging asynchronous code while implementing chart options.', 'chapters': [{'end': 9526.276, 'start': 9219.318, 'title': 'Implementing line graph in app.js', 'summary': 'Covers the process of implementing a line graph component in the app.js file using react chart js2, including the installation of dependencies and fetching worldwide data for the last 120 days.', 'duration': 306.958, 'highlights': ['The chapter covers the process of implementing a line graph component in the App.js file using React Chart JS2 Describes the main focus of the chapter.', 'Fetching worldwide data for the last 120 days Mentions the specific data to be fetched and the time period, providing quantifiable information.', 'Installation of React Chart JS2 dependency Describes the installation process and the specific dependency used.']}, {'end': 10338.957, 'start': 9526.336, 'title': 'Implementing useeffect in react', 'summary': 'Discusses the implementation of useeffect in react, explaining how to fetch data from a url, manipulate the data to be usable in chart.js format, and the process of creating a utility function to build chart data for visualization.', 'duration': 812.621, 'highlights': ['The chapter discusses the implementation of useEffect in React The speaker explains the process of implementing the useEffect hook in React to fetch and manipulate data.', 'Explaining how to fetch data from a URL The speaker describes the process of making a call to a URL using the fetch method to retrieve the response data.', "The process of creating a utility function to build chart data for visualization The speaker details the creation of a utility function called 'build chart data' to transform the fetched data into a format usable by Chart.js for visualization purposes."]}, {'end': 10600.085, 'start': 10339.177, 'title': 'Chart.js data formatting', 'summary': 'Explains the process of formatting and transforming data into the required format for chart.js, including handling data objects, datasets, and resolving errors encountered in the process of data manipulation and visualization.', 'duration': 260.908, 'highlights': ['Explaining the process of formatting and transforming data into the required format for Chart.js The speaker discusses setting data to chart data and the process of transforming information into the required format for Chart.js.', 'Handling data objects and datasets for Chart.js The speaker explains the structure of the data object and datasets required for Chart.js, including passing the data array and setting key-value pairs for data.', 'Resolving errors encountered in the process of data manipulation and visualization The speaker encounters errors related to object iteration and undefined properties, and explains the process of debugging and resolving these issues in the data manipulation and visualization process.']}, {'end': 11306.851, 'start': 10600.085, 'title': 'Debugging chart data and implementing options', 'summary': 'Covers debugging asynchronous code, implementing chart options, installing packages like numeral, and utilizing optional chaining to handle data for a line graph, emphasizing the importance of defined options in configuring the graph.', 'duration': 706.766, 'highlights': ['The chapter emphasizes the importance of defined options in configuring the graph, including aspects such as tooltips, grid lines, and data formatting, with the demonstration of how these options impact the visual representation. (e.g. tooltip format, grid lines, data formatting)', "The chapter demonstrates the process of debugging asynchronous code by creating an asynchronous function and using 'await' to fetch data, ultimately resolving the issue and successfully logging the chart data. (e.g. debugging asynchronous code, using 'await' to fetch data)", "The chapter explains the installation and usage of the 'numeral' package for formatting numbers, providing insight into how it helps in formatting data in a given way. (e.g. installation and usage of 'numeral' package)", 'The chapter showcases the utilization of optional chaining to handle the existence of data, enabling the code to elegantly handle scenarios where data may be undefined without crashing. (e.g. utilization of optional chaining to handle data existence)']}], 'duration': 2087.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM9219318.jpg', 'highlights': ['Covers implementing a line graph component in the App.js file using React Chart JS2', 'Fetching worldwide data for the last 120 days', 'Installation of React Chart JS2 dependency', 'Discussing the implementation of useEffect in React', 'Explaining how to fetch data from a URL', 'Creating a utility function to build chart data for visualization', 'Explaining the process of formatting and transforming data for Chart.js', 'Handling data objects and datasets for Chart.js', 'Resolving errors encountered in data manipulation and visualization', 'Emphasizing the importance of defined options in configuring the graph', 'Demonstrating the process of debugging asynchronous code', "Explaining the installation and usage of the 'numeral' package", 'Showcasing the utilization of optional chaining to handle data existence']}, {'end': 13264.371, 'segs': [{'end': 11347.73, 'src': 'embed', 'start': 11324.496, 'weight': 2, 'content': [{'end': 11331.518, 'text': "We will post the code later on on GitHub and you guys can check it out, okay? So it's okay if you cannot fully have all the code.", 'start': 11324.496, 'duration': 7.022}, {'end': 11336.68, 'text': 'You can take small little bits and pieces and copy and paste them into your own project, okay?', 'start': 11331.818, 'duration': 4.862}, {'end': 11340.004, 'text': 'yeah, a good question from mr mehi.', 'start': 11337.702, 'duration': 2.302}, {'end': 11342.686, 'text': 'it says it might have already been asked, but which do you recommend?', 'start': 11340.004, 'duration': 2.682}, {'end': 11345.648, 'text': 'sunny, using class-based or functional components?', 'start': 11342.686, 'duration': 2.962}, {'end': 11347.73, 'text': 'so you need to know both.', 'start': 11345.648, 'duration': 2.082}], 'summary': 'Code will be on github, use bits in your project. learn both class-based and functional components.', 'duration': 23.234, 'max_score': 11324.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11324496.jpg'}, {'end': 11678.003, 'src': 'embed', 'start': 11655.411, 'weight': 1, 'content': [{'end': 11663.255, 'text': "having coaching calls about people like me and Sonny and Kazzy link is where, Sonny, It's in the description, guys.", 'start': 11655.411, 'duration': 7.844}, {'end': 11666.237, 'text': 'Go check it out and you will not be disappointed.', 'start': 11663.375, 'duration': 2.862}, {'end': 11667.657, 'text': 'Exactly Exactly.', 'start': 11666.737, 'duration': 0.92}, {'end': 11668.738, 'text': "It's in the description guys.", 'start': 11667.737, 'duration': 1.001}, {'end': 11670.339, 'text': 'And so yeah, go check it out.', 'start': 11669.158, 'duration': 1.181}, {'end': 11671.28, 'text': "But that's it for us.", 'start': 11670.559, 'duration': 0.721}, {'end': 11675.142, 'text': "We're going to continue on with what we're going to continue on.", 'start': 11671.48, 'duration': 3.662}, {'end': 11676.002, 'text': "That's pretty much done.", 'start': 11675.202, 'duration': 0.8}, {'end': 11678.003, 'text': "I mean, we're so close, man.", 'start': 11676.022, 'duration': 1.981}], 'summary': 'Coaching calls with sonny, kazzy link in description, close to completion.', 'duration': 22.592, 'max_score': 11655.411, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11655411.jpg'}, {'end': 11974.494, 'src': 'heatmap', 'start': 11804.868, 'weight': 0.999, 'content': [{'end': 11808.89, 'text': 'So we had a component that we created earlier, which just pretty much was a very dumb component.', 'start': 11804.868, 'duration': 4.022}, {'end': 11810.391, 'text': 'It just says, I am a map.', 'start': 11808.91, 'duration': 1.481}, {'end': 11814.372, 'text': 'So here, instead, we want this to actually be a fully functioning map.', 'start': 11810.691, 'duration': 3.681}, {'end': 11817.414, 'text': "So we're going to use something called React Leaflet.", 'start': 11814.813, 'duration': 2.601}, {'end': 11824.737, 'text': 'what we need to do is we need to press command J on the keyboard and we need to open up the terminal.', 'start': 11819.054, 'duration': 5.683}, {'end': 11831.16, 'text': "and I'm gonna basically run the following so I need to do NPM I and I was just gonna open up the terminal.", 'start': 11824.737, 'duration': 6.423}, {'end': 11833.861, 'text': 'sorry, I was replying to a comment.', 'start': 11831.16, 'duration': 2.701}, {'end': 11835.102, 'text': 'go ahead.', 'start': 11833.861, 'duration': 1.241}, {'end': 11835.722, 'text': 'yep, there he goes.', 'start': 11835.102, 'duration': 0.62}, {'end': 11841.805, 'text': "we've got NPM I and here we want to do react, leaflet right, NPM I, react and leaflet and.", 'start': 11835.722, 'duration': 6.083}, {'end': 11850.275, 'text': 'And what that will do is it will go ahead and it will install the React leaflet package into the project.', 'start': 11842.37, 'duration': 7.905}, {'end': 11855.979, 'text': 'So what do we do now? We basically need to use the leaflet.', 'start': 11850.856, 'duration': 5.123}, {'end': 11861.903, 'text': "Now, me and Naz had a lot of pain getting this working, so we're going to bring it to you guys as simple as it can be.", 'start': 11855.999, 'duration': 5.904}, {'end': 11865.806, 'text': "Their documentation isn't the greatest, in my opinion.", 'start': 11863.104, 'duration': 2.702}, {'end': 11868.648, 'text': "It's a piece of shit, to say the least.", 'start': 11865.826, 'duration': 2.822}, {'end': 11871.75, 'text': "I'm just going to say it straight up.", 'start': 11870.289, 'duration': 1.461}, {'end': 11874.932, 'text': 'Yeah, it was just a headache to get that thing going.', 'start': 11873.011, 'duration': 1.921}, {'end': 11880.977, 'text': "So we're going to basically give you the shortcut to how you can just get the thing working and get it as we see it, right? Yeah.", 'start': 11874.972, 'duration': 6.005}, {'end': 11883.78, 'text': "So the first thing we're going to do is we're going to import everything we need.", 'start': 11881.057, 'duration': 2.723}, {'end': 11886.982, 'text': "So I'm going to go ahead up here and I'm going to import the following.", 'start': 11883.84, 'duration': 3.142}, {'end': 11892.227, 'text': "So I'm importing the map, but I'm renaming it as leaflet map because in our case, our component is called map.", 'start': 11887.002, 'duration': 5.225}, {'end': 11894.809, 'text': "And I'm also pulling in something called tile layer.", 'start': 11892.627, 'duration': 2.182}, {'end': 11899.873, 'text': "Right now we have this div and instead we don't need this.", 'start': 11895.73, 'duration': 4.143}, {'end': 11901.475, 'text': 'I am a map rubbish inside of it.', 'start': 11899.993, 'duration': 1.482}, {'end': 11903.136, 'text': 'We just need to do the following.', 'start': 11901.795, 'duration': 1.341}, {'end': 11906.019, 'text': 'We need to basically pull in that leaflet map.', 'start': 11903.176, 'duration': 2.843}, {'end': 11907.92, 'text': 'So leaflet map.', 'start': 11906.039, 'duration': 1.881}, {'end': 11909.081, 'text': 'So leaflet map.', 'start': 11907.94, 'duration': 1.141}, {'end': 11910.863, 'text': 'Pull in that leaflet map.', 'start': 11909.942, 'duration': 0.921}, {'end': 11912.384, 'text': 'And there we go.', 'start': 11911.784, 'duration': 0.6}, {'end': 11915.247, 'text': 'And inside of it, we have something called tile layer.', 'start': 11912.785, 'duration': 2.462}, {'end': 11916.56, 'text': 'Right? TileLayer.', 'start': 11915.839, 'duration': 0.721}, {'end': 11919.122, 'text': 'Now, TileLayer has the following.', 'start': 11917.06, 'duration': 2.062}, {'end': 11921.924, 'text': 'So this is something which you guys can pretty much just copy at this point.', 'start': 11919.142, 'duration': 2.782}, {'end': 11924.506, 'text': 'So TileLayer, you can copy these two things.', 'start': 11921.964, 'duration': 2.542}, {'end': 11931.472, 'text': "They're sort of standard things that we just include in the build.", 'start': 11924.546, 'duration': 6.926}, {'end': 11933.954, 'text': "So I'm actually going to go ahead and make this readable for you guys.", 'start': 11931.492, 'duration': 2.462}, {'end': 11935.936, 'text': 'Cannot resolve leaflet.', 'start': 11934.755, 'duration': 1.181}, {'end': 11936.556, 'text': 'Okay, guys.', 'start': 11936.016, 'duration': 0.54}, {'end': 11941.761, 'text': 'So we need to actually do MPMI leaflet in the terminal as well.', 'start': 11936.596, 'duration': 5.165}, {'end': 11943.022, 'text': 'So MPMI leaflet.', 'start': 11941.801, 'duration': 1.221}, {'end': 11948.86, 'text': 'There we go and if I click save it should be working now.', 'start': 11944.753, 'duration': 4.107}, {'end': 11950.863, 'text': 'Yep, there we go and we want to leave that.', 'start': 11949.261, 'duration': 1.602}, {'end': 11951.765, 'text': 'So at this point.', 'start': 11950.903, 'duration': 0.862}, {'end': 11952.929, 'text': 'you need to.', 'start': 11952.449, 'duration': 0.48}, {'end': 11954.469, 'text': 'basically you want to copy this.', 'start': 11952.929, 'duration': 1.54}, {'end': 11960.091, 'text': 'so pretty much exactly as that, and this is actually on the website and for so that you guys can see this.', 'start': 11954.469, 'duration': 5.622}, {'end': 11961.731, 'text': 'um, you see this line here.', 'start': 11960.091, 'duration': 1.64}, {'end': 11965.972, 'text': 'so i want you to pretty much just pause the video at this point and you can just take a screenshot of that.', 'start': 11961.731, 'duration': 4.241}, {'end': 11969.352, 'text': 'and this is just some attribution at the bottom, which basically it gives them.', 'start': 11965.972, 'duration': 3.38}, {'end': 11974.494, 'text': 'um, it just like shouts out the basically creators of this right, so they they appreciate if you do that.', 'start': 11969.352, 'duration': 5.142}], 'summary': 'The transcript details the process of setting up a fully functioning map using react leaflet, including installation and code implementation.', 'duration': 169.626, 'max_score': 11804.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11804868.jpg'}, {'end': 11979.095, 'src': 'embed', 'start': 11954.469, 'weight': 12, 'content': [{'end': 11960.091, 'text': 'so pretty much exactly as that, and this is actually on the website and for so that you guys can see this.', 'start': 11954.469, 'duration': 5.622}, {'end': 11961.731, 'text': 'um, you see this line here.', 'start': 11960.091, 'duration': 1.64}, {'end': 11965.972, 'text': 'so i want you to pretty much just pause the video at this point and you can just take a screenshot of that.', 'start': 11961.731, 'duration': 4.241}, {'end': 11969.352, 'text': 'and this is just some attribution at the bottom, which basically it gives them.', 'start': 11965.972, 'duration': 3.38}, {'end': 11974.494, 'text': 'um, it just like shouts out the basically creators of this right, so they they appreciate if you do that.', 'start': 11969.352, 'duration': 5.142}, {'end': 11976.034, 'text': 'so you just need to include that.', 'start': 11974.494, 'duration': 1.54}, {'end': 11979.095, 'text': 'so at this point We have the URL and we have the attribution.', 'start': 11976.034, 'duration': 3.061}], 'summary': 'The website includes attribution for creators and a url.', 'duration': 24.626, 'max_score': 11954.469, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11954469.jpg'}, {'end': 12018.604, 'src': 'embed', 'start': 11990.103, 'weight': 3, 'content': [{'end': 11992.304, 'text': 'And guys, this will drive you crazy.', 'start': 11990.103, 'duration': 2.201}, {'end': 11995.307, 'text': 'It drove us crazy.', 'start': 11992.425, 'duration': 2.882}, {'end': 11998.649, 'text': 'Yeah So a few things you need to do at this point.', 'start': 11996.267, 'duration': 2.382}, {'end': 12002.392, 'text': 'You need to go into app.js, and you need to import the following.', 'start': 11998.669, 'duration': 3.723}, {'end': 12004.213, 'text': 'So you need to import the CSS.', 'start': 12002.632, 'duration': 1.581}, {'end': 12005.815, 'text': 'You need to import the CSS.', 'start': 12004.714, 'duration': 1.101}, {'end': 12007.116, 'text': 'And to do that, you do the following.', 'start': 12005.855, 'duration': 1.261}, {'end': 12010.058, 'text': 'You write this, import leaflet dist leaflet CSS.', 'start': 12007.156, 'duration': 2.902}, {'end': 12011.839, 'text': 'Save the file.', 'start': 12011.159, 'duration': 0.68}, {'end': 12014.061, 'text': "And they don't tell you to input CSS.", 'start': 12012.079, 'duration': 1.982}, {'end': 12015.282, 'text': 'You just have to figure it out on your own.', 'start': 12014.081, 'duration': 1.201}, {'end': 12018.604, 'text': 'Yeah, like, honestly, the documentation is not your friend.', 'start': 12016.221, 'duration': 2.383}], 'summary': 'Challenges faced while importing css in app.js, lack of guidance in documentation.', 'duration': 28.501, 'max_score': 11990.103, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11990103.jpg'}, {'end': 12083.225, 'src': 'embed', 'start': 12054.628, 'weight': 14, 'content': [{'end': 12056.088, 'text': "And we're inside that file now.", 'start': 12054.628, 'duration': 1.46}, {'end': 12063.575, 'text': "right. so what i'm going to do now is go over to map.css and basically the container.", 'start': 12056.832, 'duration': 6.743}, {'end': 12065.356, 'text': 'i need to give it some rules, right.', 'start': 12063.575, 'duration': 1.781}, {'end': 12070.698, 'text': "so the container, i need to give it rules and i need to say that the height i'm going to give it a set height of 500 pixels,", 'start': 12065.356, 'duration': 5.342}, {'end': 12074.52, 'text': "right 500 i'm going to save.", 'start': 12070.698, 'duration': 3.822}, {'end': 12083.225, 'text': "now let's get the um this, the screen, half and half at this point, Because this would be like they will see a moment where it will just work.", 'start': 12074.52, 'duration': 8.705}], 'summary': 'Setting a height of 500 pixels for the container in map.css.', 'duration': 28.597, 'max_score': 12054.628, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12054628.jpg'}, {'end': 12196.249, 'src': 'embed', 'start': 12167.638, 'weight': 4, 'content': [{'end': 12169.459, 'text': 'Wait, wait, wait.', 'start': 12167.638, 'duration': 1.821}, {'end': 12170.199, 'text': 'So it freaked out.', 'start': 12169.499, 'duration': 0.7}, {'end': 12172.06, 'text': 'It said set map center and zoom.', 'start': 12170.219, 'duration': 1.841}, {'end': 12176.623, 'text': 'So we saw something, but then it freaked out and it broke.', 'start': 12172.721, 'duration': 3.902}, {'end': 12178.344, 'text': 'So we need to fix that.', 'start': 12177.403, 'duration': 0.941}, {'end': 12179.464, 'text': "So let's go over to map.js.", 'start': 12178.384, 'duration': 1.08}, {'end': 12183.023, 'text': 'And map.js.', 'start': 12181.379, 'duration': 1.644}, {'end': 12193.408, 'text': 'basically, we need to pass in two things to leaflet map, and that is a center and the center and a zoom, right zoom,', 'start': 12183.023, 'duration': 10.385}, {'end': 12195.149, 'text': "and obviously we don't have these things right.", 'start': 12193.408, 'duration': 1.741}, {'end': 12196.249, 'text': "we don't have the center.", 'start': 12195.149, 'duration': 1.1}], 'summary': 'The map broke when trying to set center and zoom, needs fixing by passing in the correct parameters.', 'duration': 28.611, 'max_score': 12167.638, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12167638.jpg'}, {'end': 12634.861, 'src': 'heatmap', 'start': 12299.151, 'weight': 0.718, 'content': [{'end': 12304.855, 'text': "What we'll do is three is basically it zooms out enough to the point where you can see the entire map.", 'start': 12299.151, 'duration': 5.704}, {'end': 12308.557, 'text': "Yeah I'm going to do that, and then we're going to use those values.", 'start': 12305.155, 'duration': 3.402}, {'end': 12313.38, 'text': 'Again, when we go down here, we pass them in, and then they get used inside of map.js.', 'start': 12308.637, 'duration': 4.743}, {'end': 12316.882, 'text': 'Now, what we will see is the map actually loads.', 'start': 12313.46, 'duration': 3.422}, {'end': 12325.061, 'text': "look at that, you guys, we've got ourselves the map.", 'start': 12320.76, 'duration': 4.301}, {'end': 12325.661, 'text': 'check this out, guys.', 'start': 12325.061, 'duration': 0.6}, {'end': 12327.502, 'text': 'you can literally go through the map right.', 'start': 12325.661, 'duration': 1.841}, {'end': 12330.562, 'text': 'i can literally zoom into the map if i wanted to.', 'start': 12327.502, 'duration': 3.06}, {'end': 12331.643, 'text': "it's pretty much there.", 'start': 12330.562, 'duration': 1.081}, {'end': 12336.424, 'text': 'and one thing i wanted to mention to you guys is like you know what, what, uh, what sunny was mentioning?', 'start': 12331.643, 'duration': 4.781}, {'end': 12337.504, 'text': 'right, the whole thing.', 'start': 12336.424, 'duration': 1.08}, {'end': 12341.765, 'text': 'if you go back, sunny, can you go back to the css and map the css?', 'start': 12337.504, 'duration': 4.261}, {'end': 12346.385, 'text': 'yep, yeah, so you see, you see this leaflet container height of 100, right.', 'start': 12341.765, 'duration': 4.62}, {'end': 12350.309, 'text': 'the reason why that, why we had to do that, is again something not told, right?', 'start': 12346.385, 'duration': 3.924}, {'end': 12351.91, 'text': "because something they don't want they like.", 'start': 12350.309, 'duration': 1.601}, {'end': 12352.971, 'text': "they don't like the documentation.", 'start': 12351.91, 'duration': 1.061}, {'end': 12356.074, 'text': "obviously they don't like to create proper documentation.", 'start': 12352.971, 'duration': 3.103}, {'end': 12365.263, 'text': 'so what happens is when you initialize the leaflet right, which is a maps library, they will automatically create this leaflet container div right.', 'start': 12356.074, 'duration': 9.189}, {'end': 12366.405, 'text': 'Now, check this out.', 'start': 12365.743, 'duration': 0.662}, {'end': 12367.687, 'text': 'This div.', 'start': 12366.725, 'duration': 0.962}, {'end': 12372.136, 'text': 'if I actually go to, how do I go and see the CSS of this??', 'start': 12367.687, 'duration': 4.449}, {'end': 12384.061, 'text': 'This div right there, this div By default, if I remove the height 100%, check this out, you see, it disappears.', 'start': 12372.758, 'duration': 11.303}, {'end': 12387.502, 'text': "Because they don't do it that way.", 'start': 12384.441, 'duration': 3.061}, {'end': 12392.103, 'text': "They create this leaflet container, but for some reason they don't set the height.", 'start': 12387.802, 'duration': 4.301}, {'end': 12401.046, 'text': 'And so what you got is, if I hover over this leaflet container div, which is created by the map itself, You can see up top hold on,', 'start': 12392.543, 'duration': 8.503}, {'end': 12402.427, 'text': 'if I do this right here, maybe?', 'start': 12401.046, 'duration': 1.381}, {'end': 12403.407, 'text': "oh, I can't do it right there.", 'start': 12402.427, 'duration': 0.98}, {'end': 12404.788, 'text': "No, I can't do it.", 'start': 12404.148, 'duration': 0.64}, {'end': 12407.27, 'text': "Hold on, can I? No, I can't.", 'start': 12405.289, 'duration': 1.981}, {'end': 12408.29, 'text': 'I was going to like.', 'start': 12407.65, 'duration': 0.64}, {'end': 12409.791, 'text': 'you can see up top.', 'start': 12408.29, 'duration': 1.501}, {'end': 12411.752, 'text': 'if I hover over this, you can see up top.', 'start': 12409.791, 'duration': 1.961}, {'end': 12418.817, 'text': "it says 871 by 0, right by 0, meaning that the height is 0, and that's why it's hidden.", 'start': 12411.752, 'duration': 7.065}, {'end': 12425.601, 'text': 'But if we set the height to 100%, which is below right here, where is it right there?', 'start': 12419.417, 'duration': 6.184}, {'end': 12432.427, 'text': 'if we make that 100, boom, voila, you have, the map shows up and we get an air horn right.', 'start': 12426.201, 'duration': 6.226}, {'end': 12437.431, 'text': 'so like yeah, so, guys, that is why we kind of that.', 'start': 12432.427, 'duration': 5.004}, {'end': 12442.576, 'text': "that's why the leaflet container was there, because we realized because, like hold on something's interesting, it's not working the way it should,", 'start': 12437.431, 'duration': 5.145}, {'end': 12446.119, 'text': 'and so we realized that we had to add that to that.', 'start': 12442.576, 'duration': 3.543}, {'end': 12447.24, 'text': 'so hopefully that makes sense.', 'start': 12446.119, 'duration': 1.121}, {'end': 12448.962, 'text': 'hopefully that makes things clearer.', 'start': 12447.24, 'duration': 1.722}, {'end': 12456.458, 'text': "um, and on that on those terms exactly, and what we're going to do quickly, while we're on the topic of adding, uh,", 'start': 12448.962, 'duration': 7.496}, {'end': 12461.3, 'text': 'the center and the zoom is basically we want it so that when we change the country,', 'start': 12456.458, 'duration': 4.842}, {'end': 12465.582, 'text': 'i want it to center to the point of which of the country that we change.', 'start': 12461.3, 'duration': 4.282}, {'end': 12470.004, 'text': 'if i go to drop down and click the uk, i want to center in on the uk right.', 'start': 12465.582, 'duration': 4.422}, {'end': 12474.446, 'text': 'yeah, so if i click, for example, usa or aruba, i wanted to change.', 'start': 12470.004, 'duration': 4.442}, {'end': 12475.707, 'text': 'you know the actual location.', 'start': 12474.446, 'duration': 1.261}, {'end': 12477.505, 'text': 'Yeah, exactly.', 'start': 12476.684, 'duration': 0.821}, {'end': 12481.187, 'text': 'The way we do that is, remember we had the on-country change, right? Yeah.', 'start': 12477.625, 'duration': 3.562}, {'end': 12482.228, 'text': 'The on-country change was here.', 'start': 12481.287, 'duration': 0.941}, {'end': 12484.269, 'text': "So what we can do is I'm going to remove these comments.", 'start': 12482.628, 'duration': 1.641}, {'end': 12486.01, 'text': 'So these are two things that we were saying before.', 'start': 12484.289, 'duration': 1.721}, {'end': 12493.201, 'text': "I'm going to go ahead and set the map center you can actually pass in an array of longitude latitude.", 'start': 12486.03, 'duration': 7.171}, {'end': 12499.969, 'text': "What we're going to do is, inside of that data response, that big one that we got earlier, inside of country info,", 'start': 12494.002, 'duration': 5.967}, {'end': 12503.293, 'text': 'they actually give us a very useful piece of information called the latitude.', 'start': 12499.969, 'duration': 3.324}, {'end': 12505.336, 'text': 'Then we can also get the longitudes.', 'start': 12503.914, 'duration': 1.422}, {'end': 12514.023, 'text': 'We can say data.country country, info dot, long right, and this will actually go ahead and set it to that,', 'start': 12505.356, 'duration': 8.667}, {'end': 12516.545, 'text': 'and then what we can do is we can actually zoom out a little bit.', 'start': 12514.023, 'duration': 2.522}, {'end': 12523.251, 'text': 'so zoom map, zoom on four, and these two things in conjunction with each other will actually go ahead and do what we want.', 'start': 12516.545, 'duration': 6.706}, {'end': 12532.597, 'text': "so if i go ahead and click save when it refreshes now, now if you just go and select a uh country, like you will say, let's say Yep,", 'start': 12523.251, 'duration': 9.346}, {'end': 12534.278, 'text': 'and hopefully this should work.', 'start': 12532.597, 'duration': 1.681}, {'end': 12535.539, 'text': 'So if we see USA.', 'start': 12534.438, 'duration': 1.101}, {'end': 12537.601, 'text': "It doesn't fully.", 'start': 12535.539, 'duration': 2.062}, {'end': 12539.643, 'text': "I don't know why it's always been glitching like that.", 'start': 12537.601, 'duration': 2.042}, {'end': 12542.086, 'text': 'It just goes to a weird location.', 'start': 12539.824, 'duration': 2.262}, {'end': 12543.687, 'text': "Let's go ahead.", 'start': 12543.067, 'duration': 0.62}, {'end': 12544.448, 'text': 'Let me give it a try.', 'start': 12543.707, 'duration': 0.741}, {'end': 12546.45, 'text': 'So let me do United States.', 'start': 12544.468, 'duration': 1.982}, {'end': 12547.051, 'text': 'So UK.', 'start': 12546.57, 'duration': 0.481}, {'end': 12548.871, 'text': 'There we go.', 'start': 12548.491, 'duration': 0.38}, {'end': 12551.612, 'text': "Okay So if you try again, let's try again.", 'start': 12549.111, 'duration': 2.501}, {'end': 12556.354, 'text': 'Yeah now it is what now? Yeah, there we go Boom right there.', 'start': 12551.913, 'duration': 4.441}, {'end': 12557.935, 'text': 'Yeah, you can there we go.', 'start': 12556.495, 'duration': 1.44}, {'end': 12565.098, 'text': 'Hey if I go to USA you guys USA Dang, look at that you guys that is epic Damn.', 'start': 12558.235, 'duration': 6.863}, {'end': 12566.64, 'text': 'Yeah That is cool.', 'start': 12565.439, 'duration': 1.201}, {'end': 12567.701, 'text': 'Nice All right.', 'start': 12566.72, 'duration': 0.981}, {'end': 12568.522, 'text': 'Okay I like it.', 'start': 12567.862, 'duration': 0.66}, {'end': 12569.083, 'text': "Let's keep going.", 'start': 12568.562, 'duration': 0.521}, {'end': 12569.443, 'text': 'I love it.', 'start': 12569.103, 'duration': 0.34}, {'end': 12569.824, 'text': 'I love it.', 'start': 12569.463, 'duration': 0.361}, {'end': 12571.205, 'text': 'So we have that now.', 'start': 12569.964, 'duration': 1.241}, {'end': 12574.569, 'text': 'And the next thing that we want to do is actually get these circles.', 'start': 12571.266, 'duration': 3.303}, {'end': 12576.712, 'text': 'So the circles are what make the app pop.', 'start': 12574.589, 'duration': 2.123}, {'end': 12578.994, 'text': 'Like when we saw those circles, we were like whoa.', 'start': 12576.992, 'duration': 2.002}, {'end': 12581.137, 'text': 'like this is a pretty serious app, right?', 'start': 12578.994, 'duration': 2.143}, {'end': 12586.281, 'text': 'So now what we want to do is in the line, so in the table.js.', 'start': 12581.617, 'duration': 4.664}, {'end': 12588.002, 'text': 'so in table.js.', 'start': 12586.281, 'duration': 1.721}, {'end': 12592.325, 'text': "table.js. what I'm going to go ahead and do now is not in table.js.", 'start': 12588.002, 'duration': 4.323}, {'end': 12593.726, 'text': 'sorry, in line.', 'start': 12592.325, 'duration': 1.401}, {'end': 12594.647, 'text': "no, it's not line, bro.", 'start': 12593.726, 'duration': 0.921}, {'end': 12596.988, 'text': 'Map.js Map.js, yeah.', 'start': 12594.707, 'duration': 2.281}, {'end': 12601.431, 'text': "And what we're going to do in here is, that's how you know it's been coding for long, so map.js.", 'start': 12597.088, 'duration': 4.343}, {'end': 12609.197, 'text': 'So here what I essentially need to do is I need some kind of function which will loop through and draw a bunch of circles right?', 'start': 12601.772, 'duration': 7.425}, {'end': 12611.173, 'text': 'draw circles on the screen.', 'start': 12609.833, 'duration': 1.34}, {'end': 12612.934, 'text': "That's literally our mission here.", 'start': 12611.193, 'duration': 1.741}, {'end': 12614.855, 'text': "We're going to loop through the countries.", 'start': 12612.954, 'duration': 1.901}, {'end': 12617.956, 'text': 'Loop through all the countries and draw circles on the screen.', 'start': 12615.775, 'duration': 2.181}, {'end': 12625.538, 'text': 'Basically, those circles are basically going to be bigger if there are more cases, or there are more recoveries or deaths,', 'start': 12618.416, 'duration': 7.122}, {'end': 12627.959, 'text': "and they're going to be smaller if there are less.", 'start': 12625.538, 'duration': 2.421}, {'end': 12634.861, 'text': 'How do we even begin to solve this problem? The first thing is, we know that we get the countries inside of app.js.', 'start': 12629.219, 'duration': 5.642}], 'summary': 'The transcript discusses zooming in and out of a map, fixing css issues, and implementing functionality to center and zoom in on specific countries.', 'duration': 335.71, 'max_score': 12299.151, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12299151.jpg'}, {'end': 12482.228, 'src': 'embed', 'start': 12456.458, 'weight': 5, 'content': [{'end': 12461.3, 'text': 'the center and the zoom is basically we want it so that when we change the country,', 'start': 12456.458, 'duration': 4.842}, {'end': 12465.582, 'text': 'i want it to center to the point of which of the country that we change.', 'start': 12461.3, 'duration': 4.282}, {'end': 12470.004, 'text': 'if i go to drop down and click the uk, i want to center in on the uk right.', 'start': 12465.582, 'duration': 4.422}, {'end': 12474.446, 'text': 'yeah, so if i click, for example, usa or aruba, i wanted to change.', 'start': 12470.004, 'duration': 4.442}, {'end': 12475.707, 'text': 'you know the actual location.', 'start': 12474.446, 'duration': 1.261}, {'end': 12477.505, 'text': 'Yeah, exactly.', 'start': 12476.684, 'duration': 0.821}, {'end': 12481.187, 'text': 'The way we do that is, remember we had the on-country change, right? Yeah.', 'start': 12477.625, 'duration': 3.562}, {'end': 12482.228, 'text': 'The on-country change was here.', 'start': 12481.287, 'duration': 0.941}], 'summary': 'Implementing a feature to dynamically center and zoom the map on the selected country when changed, as discussed in the transcript.', 'duration': 25.77, 'max_score': 12456.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12456458.jpg'}, {'end': 12735.603, 'src': 'embed', 'start': 12707.719, 'weight': 7, 'content': [{'end': 12712.922, 'text': "So I'm going to say set map countries, to the data that is returned.", 'start': 12707.719, 'duration': 5.203}, {'end': 12717.785, 'text': "Basically because we're making a fetch to this URL.", 'start': 12713.082, 'duration': 4.703}, {'end': 12724.269, 'text': 'this data is just going to be all of the countries, the response of the countries, all of the information based on them.', 'start': 12717.785, 'duration': 6.484}, {'end': 12730.342, 'text': "We're going to save that and then we're going to keep it and then we're passing it through as a prop down here.", 'start': 12724.329, 'duration': 6.013}, {'end': 12735.603, 'text': "We're passing it as a prop over here, MapCountries.", 'start': 12732.402, 'duration': 3.201}], 'summary': 'Fetches and saves data of all countries for mapping.', 'duration': 27.884, 'max_score': 12707.719, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12707719.jpg'}, {'end': 12784.652, 'src': 'embed', 'start': 12759.451, 'weight': 6, 'content': [{'end': 12766.699, 'text': "Okay And this is going to go ahead and get the data and we're going to, we're going to go ahead and pass in also cases types.", 'start': 12759.451, 'duration': 7.248}, {'end': 12771.964, 'text': 'So remember, we saw that there was three types of cases those cases recoveries and deaths, right?', 'start': 12766.719, 'duration': 5.245}, {'end': 12774.707, 'text': 'And so, and what does this function like?', 'start': 12772.925, 'duration': 1.782}, {'end': 12776.569, 'text': 'the purpose of this function is what?', 'start': 12774.707, 'duration': 1.862}, {'end': 12782.671, 'text': 'draw circles on the map with interactive tooltips.', 'start': 12777.788, 'duration': 4.883}, {'end': 12783.491, 'text': 'Beautiful Okay.', 'start': 12782.691, 'duration': 0.8}, {'end': 12784.652, 'text': 'Got you.', 'start': 12783.551, 'duration': 1.101}], 'summary': 'Function to draw interactive map circles for 3 case types.', 'duration': 25.201, 'max_score': 12759.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12759451.jpg'}, {'end': 12887.931, 'src': 'embed', 'start': 12852.925, 'weight': 0, 'content': [{'end': 12856.306, 'text': "and while i'm going to import react because we're going to be using some jsx.", 'start': 12852.925, 'duration': 3.381}, {'end': 12857.707, 'text': "oops, we're going to be using some jsx.", 'start': 12856.306, 'duration': 1.401}, {'end': 12859.68, 'text': 'Give me one sec.', 'start': 12858.78, 'duration': 0.9}, {'end': 12860.841, 'text': "We're going to reuse it in JSX.", 'start': 12859.72, 'duration': 1.121}, {'end': 12865.102, 'text': "I'm going to import numeral because we're going to be formatting in a certain way.", 'start': 12860.901, 'duration': 4.201}, {'end': 12867.363, 'text': 'Numeral is just to format numbers in a certain way.', 'start': 12865.242, 'duration': 2.121}, {'end': 12874.625, 'text': "Now, what I'm going to do here is I'm actually going to go ahead and I'm going to draw a circle.", 'start': 12869.323, 'duration': 5.302}, {'end': 12877.466, 'text': "Here, the way we do it, I'm going to say draw a circle like this.", 'start': 12874.665, 'duration': 2.801}, {'end': 12878.466, 'text': 'Draw a circle.', 'start': 12877.846, 'duration': 0.62}, {'end': 12887.931, 'text': 'And a circle takes a bunch of attributes, right? It takes a center, it takes a color, it takes a fill color, a fill opacity, and a radius.', 'start': 12880.328, 'duration': 7.603}], 'summary': 'Using react and numeral to draw a circle with specific attributes.', 'duration': 35.006, 'max_score': 12852.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM12852925.jpg'}, {'end': 13100.854, 'src': 'embed', 'start': 13070.054, 'weight': 13, 'content': [{'end': 13072.715, 'text': 'This is some magic out here.', 'start': 13070.054, 'duration': 2.661}, {'end': 13077.016, 'text': 'We actually created this with a couple of our students to figure out this multiplier, figure this out.', 'start': 13072.735, 'duration': 4.281}, {'end': 13086.92, 'text': 'But basically, if you guys think about it, you want what? You want the circle around the country to represent the number of cases.', 'start': 13077.036, 'duration': 9.884}, {'end': 13089.723, 'text': 'right. so basically, the bigger the circle, the more cases right.', 'start': 13087, 'duration': 2.723}, {'end': 13094.167, 'text': "that way you can visually see what's going on right.", 'start': 13089.723, 'duration': 4.444}, {'end': 13100.854, 'text': 'and so when we figured out, okay, so what can we actually do in terms of like you know the radius or the circle, like how large the circle?', 'start': 13094.167, 'duration': 6.687}], 'summary': 'Developed visual representation to show covid-19 cases using circle size as an indicator.', 'duration': 30.8, 'max_score': 13070.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM13070054.jpg'}, {'end': 13207.191, 'src': 'embed', 'start': 13176.483, 'weight': 10, 'content': [{'end': 13179.003, 'text': "so that's that's pretty much, guys.", 'start': 13176.483, 'duration': 2.52}, {'end': 13185.065, 'text': 'uh, how we determine the circles sizing right and when we have that circle we want to have it.', 'start': 13179.003, 'duration': 6.062}, {'end': 13190.421, 'text': 'so when you tap it, it actually opens up a pop-up like a nice little pop-up.', 'start': 13185.065, 'duration': 5.356}, {'end': 13196.765, 'text': "To demonstrate that pop-up, what we're going to do is I'm just going to say, I'm a pop-up, just to show you guys that this works.", 'start': 13190.461, 'duration': 6.304}, {'end': 13199.647, 'text': 'This is the utility function that we just created.', 'start': 13197.566, 'duration': 2.081}, {'end': 13201.969, 'text': "We're exploring it, so we're going to pull that into our map.", 'start': 13199.867, 'duration': 2.102}, {'end': 13207.191, 'text': "We're going to pull it in and we're basically going to pass the data and it's going to return.", 'start': 13203.826, 'duration': 3.365}], 'summary': 'Demonstrating circle sizing and pop-up functionality for map utility function.', 'duration': 30.708, 'max_score': 13176.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM13176483.jpg'}], 'start': 11307.351, 'title': 'React components, training, and map styling', 'summary': 'Covers react components, github code availability, and course promotion with over 1,500 students as well as a javascript training program with coaching calls, personalized feedback, and a money-back guarantee. it also discusses fixing leaflet map styling and drawing circles on the map in a react-based app to visualize covid-19 data.', 'chapters': [{'end': 11463.704, 'start': 11307.351, 'title': 'React components and course promotion', 'summary': "Covers the importance of knowing both class-based and functional components in react, emphasizes the availability of code on github, and promotes the course 'profit with javascript, profit with react' which has over 1,500 students.", 'duration': 156.353, 'highlights': ['The importance of knowing both class-based and functional components in React, as companies mostly use class-based components and there is a high demand for the skill.', 'The availability of the code on GitHub for viewers to access and use for their projects.', "Promotion of the course 'Profit with JavaScript, Profit with React' with over 1,500 students and its benefits for aspiring developers and job seekers."]}, {'end': 12030.758, 'start': 11464.084, 'title': 'Profit with react javascript trainings', 'summary': 'Introduces a program that offers javascript trainings with weekly coaching calls, personalized video feedback, and a 30-day money-back guarantee, aiming to help learners go beyond the fundamentals and make a living with their skills, supported by a strong community and success coaches.', 'duration': 566.674, 'highlights': ['The program offers up to four weekly coaching calls and personalized video feedback on every assignment, aiming to help learners make a living with their JavaScript skills. Up to four weekly coaching calls and personalized video feedback provided on every assignment to help learners make a living with their JavaScript skills.', 'The program includes a 30-day money-back guarantee, providing a risk-free option for learners to try the program. A 30-day money-back guarantee is offered, providing a risk-free option for learners to try the program.', 'The program boasts an active and supportive community, with success coaches available 24/7 to help learners. An active and supportive community with success coaches available 24/7 to help learners.', 'The training program aims to help learners go beyond the basics and actually make a living with their JavaScript skills, going beyond typical tutorials. The program aims to help learners go beyond the basics and actually make a living with their JavaScript skills, going beyond typical tutorials.']}, {'end': 12565.098, 'start': 12031.119, 'title': 'Fixing leaflet map styling', 'summary': 'Discusses fixing the styling of a leaflet map by setting up css rules, passing center and zoom props, and modifying on-country change to center the map on selected countries, resulting in a functional map with proper styling and interactive features.', 'duration': 533.979, 'highlights': ['Setting up CSS rules for the map container with a height of 500 pixels The speaker sets a specific height of 500 pixels for the map container to establish initial styling.', 'Passing center and zoom props to the Leaflet map, resulting in a functional map The process of passing center and zoom props to the Leaflet map component allows for the successful loading and functionality of the map.', 'Modifying on-country change to center the map on selected countries The on-country change functionality is altered to center the map on selected countries, enhancing the interactive features of the map.']}, {'end': 12867.363, 'start': 12565.439, 'title': 'Drawing circles on the map', 'summary': 'Discusses the process of drawing circles on the map in react-based app, emphasizing the need to loop through countries, draw circles based on case data, and pass country information as a prop, while also creating a function to show interactive tooltips.', 'duration': 301.924, 'highlights': ["The purpose of the function 'showDataOnMap' is to draw circles on the map with interactive tooltips, displaying information such as number of cases, recoveries, and deaths for each country.", "The data for all countries is obtained and set as 'map countries' using a piece of state, which is then passed as a prop to the map component.", "A function is created to loop through the country data and return the necessary information for drawing circles on the map using 'react leaflet' components like 'circle' and 'pop-up'.", "The need for formatting numbers in a specific way is addressed by importing 'numeral' to ensure proper display of data in the interactive tooltips."]}, {'end': 13264.371, 'start': 12869.323, 'title': 'Visualizing data on a map', 'summary': 'Explains how to draw circles on a map representing covid-19 data, including attributes like center, color, opacity, and radius, and demonstrates the process of determining circle sizes based on the number of cases and creating pop-ups.', 'duration': 395.048, 'highlights': ['The process of determining circle sizes is explained, involving calculating the square root of the number of cases and multiplying it by a multiplier based on the cases, with multipliers of 2000, 1000, 200, and 800, to visually represent the number of cases on the map.', 'The chapter demonstrates how to draw circles on a map, specifying attributes such as center, color, fill color, fill opacity, and radius, and creating a dictionary with keys for cases, recovered, and deaths to access appropriate colors and sizes for the circles.', 'A utility function for creating pop-ups on the map is introduced, showing how to pass data to return a pop-up, offering a practical solution for displaying information when tapping on the circles.']}], 'duration': 1957.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM11307351.jpg', 'highlights': ["Promotion of the course 'Profit with JavaScript, Profit with React' with over 1,500 students and its benefits for aspiring developers and job seekers.", 'The program offers up to four weekly coaching calls and personalized video feedback on every assignment, aiming to help learners make a living with their JavaScript skills.', 'The program includes a 30-day money-back guarantee, providing a risk-free option for learners to try the program.', 'The training program aims to help learners go beyond the basics and actually make a living with their JavaScript skills, going beyond typical tutorials.', 'The process of passing center and zoom props to the Leaflet map component allows for the successful loading and functionality of the map.', 'The on-country change functionality is altered to center the map on selected countries, enhancing the interactive features of the map.', "The purpose of the function 'showDataOnMap' is to draw circles on the map with interactive tooltips, displaying information such as number of cases, recoveries, and deaths for each country.", "The data for all countries is obtained and set as 'map countries' using a piece of state, which is then passed as a prop to the map component.", "The need for formatting numbers in a specific way is addressed by importing 'numeral' to ensure proper display of data in the interactive tooltips.", 'The chapter demonstrates how to draw circles on a map, specifying attributes such as center, color, fill color, fill opacity, and radius, and creating a dictionary with keys for cases, recovered, and deaths to access appropriate colors and sizes for the circles.', 'A utility function for creating pop-ups on the map is introduced, showing how to pass data to return a pop-up, offering a practical solution for displaying information when tapping on the circles.', 'The importance of knowing both class-based and functional components in React, as companies mostly use class-based components and there is a high demand for the skill.', 'The availability of the code on GitHub for viewers to access and use for their projects.', 'The program boasts an active and supportive community, with success coaches available 24/7 to help learners.', 'Setting up CSS rules for the map container with a height of 500 pixels The speaker sets a specific height of 500 pixels for the map container to establish initial styling.', 'The process of determining circle sizes is explained, involving calculating the square root of the number of cases and multiplying it by a multiplier based on the cases, with multipliers of 2000, 1000, 200, and 800, to visually represent the number of cases on the map.']}, {'end': 14213.591, 'segs': [{'end': 13333.611, 'src': 'embed', 'start': 13293.544, 'weight': 0, 'content': [{'end': 13294.945, 'text': "if that's a huge pop-up, by the way.", 'start': 13293.544, 'duration': 1.401}, {'end': 13302.711, 'text': 'wow, okay, then you got the pop-up and again, the goal for this pop-up is to show number of cases and so forth.', 'start': 13295.245, 'duration': 7.466}, {'end': 13305.653, 'text': 'but that looks sweet, man, this looks really cool.', 'start': 13302.711, 'duration': 2.942}, {'end': 13306.533, 'text': 'drop in the comments.', 'start': 13305.653, 'duration': 0.88}, {'end': 13306.773, 'text': 'if you.', 'start': 13306.533, 'duration': 0.24}, {'end': 13307.774, 'text': 'that looks awesome.', 'start': 13306.773, 'duration': 1.001}, {'end': 13311.157, 'text': "if that you're like pumped to see what you've just done like.", 'start': 13307.774, 'duration': 3.383}, {'end': 13314.119, 'text': 'yeah, to be able to show circles on a map.', 'start': 13311.157, 'duration': 2.962}, {'end': 13317.862, 'text': 'this is some like high level stuff, guys, like give us some fire emojis.', 'start': 13314.119, 'duration': 3.743}, {'end': 13319.122, 'text': 'give us some rocket emojis.', 'start': 13317.862, 'duration': 1.26}, {'end': 13320.363, 'text': 'give us anything you got.', 'start': 13319.122, 'duration': 1.241}, {'end': 13321.204, 'text': 'give us some applause.', 'start': 13320.363, 'duration': 0.841}, {'end': 13323.165, 'text': 'applause would be great as well, you know.', 'start': 13321.204, 'duration': 1.961}, {'end': 13325.887, 'text': "yeah, but you know, i don't think.", 'start': 13323.165, 'duration': 2.722}, {'end': 13328.088, 'text': "smash the thumbs up button if you think it's pretty cool.", 'start': 13325.887, 'duration': 2.201}, {'end': 13329.048, 'text': 'yeah, about guys.', 'start': 13328.088, 'duration': 0.96}, {'end': 13331.89, 'text': "holy, what we built today, guys, let's get this.", 'start': 13329.048, 'duration': 2.842}, {'end': 13332.991, 'text': 'the the thumbs up.', 'start': 13331.89, 'duration': 1.101}, {'end': 13333.611, 'text': 'two thousand.', 'start': 13332.991, 'duration': 0.62}], 'summary': 'The goal is to show the number of cases and receive positive feedback, reaching 2000 thumbs up.', 'duration': 40.067, 'max_score': 13293.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM13293544.jpg'}, {'end': 13396.129, 'src': 'embed', 'start': 13371.821, 'weight': 3, 'content': [{'end': 13378.263, 'text': 'Naz, if you want to go ahead and make that full screen and show it as it looks with it to the side, and then we can show.', 'start': 13371.821, 'duration': 6.442}, {'end': 13382.245, 'text': 'I have it sometimes for some reason, like that takes up a really big, big page for some reason.', 'start': 13378.803, 'duration': 3.442}, {'end': 13382.665, 'text': "I don't know why.", 'start': 13382.265, 'duration': 0.4}, {'end': 13384.805, 'text': "But yeah, so far that's how it is right there.", 'start': 13383.165, 'duration': 1.64}, {'end': 13386.626, 'text': 'Lovely Nice.', 'start': 13385.706, 'duration': 0.92}, {'end': 13389.347, 'text': "So it's already starting to come together really nice, right? Yeah.", 'start': 13386.826, 'duration': 2.521}, {'end': 13391.187, 'text': "It's really nice.", 'start': 13390.147, 'duration': 1.04}, {'end': 13396.129, 'text': 'Now, Carl Dodie said, this is really good, but no one can ever keep up.', 'start': 13391.587, 'duration': 4.542}], 'summary': 'Transcript: discussion about screen layout and positive feedback.', 'duration': 24.308, 'max_score': 13371.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM13371821.jpg'}, {'end': 13974.325, 'src': 'embed', 'start': 13948.913, 'weight': 4, 'content': [{'end': 13955.877, 'text': 'Yeah And now for the, um, info box, we actually gave like the title, the cases, the total.', 'start': 13948.913, 'duration': 6.964}, {'end': 13959.979, 'text': "So I'm going to go ahead and, uh, style the cases and the total,", 'start': 13956.237, 'duration': 3.742}, {'end': 13963.881, 'text': 'because the cases in total right now should be screaming out a bit more than they are.', 'start': 13959.979, 'duration': 3.902}, {'end': 13967.803, 'text': "So I'm going to go ahead and I've got some pre-written code and we're going to explain what that is.", 'start': 13964.341, 'duration': 3.462}, {'end': 13971.024, 'text': "So we've got info boxes cases and info boxes total.", 'start': 13967.823, 'duration': 3.201}, {'end': 13974.325, 'text': "Here, we're pretty much changing the color of the cases.", 'start': 13971.284, 'duration': 3.041}], 'summary': 'Styling the info box to emphasize the cases and total for better visibility.', 'duration': 25.412, 'max_score': 13948.913, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM13948913.jpg'}, {'end': 14086.676, 'src': 'embed', 'start': 14058.01, 'weight': 5, 'content': [{'end': 14060.992, 'text': 'Otherwise, print out plus and then nicely format the number.', 'start': 14058.01, 'duration': 2.982}, {'end': 14068.178, 'text': "I'm going to create a nice little nifty function inside of the util, because util is where we add on nice little handy functions.", 'start': 14061.392, 'duration': 6.786}, {'end': 14073.262, 'text': "I'm going to say export const, and I'm going to say pretty print stat.", 'start': 14068.198, 'duration': 5.064}, {'end': 14075.684, 'text': 'right. so this is basically.', 'start': 14074.122, 'duration': 1.562}, {'end': 14079.147, 'text': 'the only job of this function is going to basically be to pretty print it.', 'start': 14075.684, 'duration': 3.463}, {'end': 14080.849, 'text': "so basically it'll pretty like we.", 'start': 14079.147, 'duration': 1.702}, {'end': 14086.676, 'text': 'it will take a stat which is a number, and it will return a really nice string, right?', 'start': 14080.849, 'duration': 5.827}], 'summary': "Create a 'pretty print stat' function in util to format numbers nicely.", 'duration': 28.666, 'max_score': 14058.01, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14058010.jpg'}, {'end': 14224.059, 'src': 'embed', 'start': 14194.027, 'weight': 6, 'content': [{'end': 14194.547, 'text': 'That was good.', 'start': 14194.027, 'duration': 0.52}, {'end': 14195.947, 'text': 'Guys, drop us some fire emojis.', 'start': 14194.627, 'duration': 1.32}, {'end': 14196.727, 'text': 'Drop us some comment.', 'start': 14195.987, 'duration': 0.74}, {'end': 14198.227, 'text': 'Yeah, drop us some fire emojis.', 'start': 14197.187, 'duration': 1.04}, {'end': 14199.928, 'text': 'Drop us some rocket emojis.', 'start': 14198.267, 'duration': 1.661}, {'end': 14203.409, 'text': "And yeah, just, you know, I know it's already been four hours, guys.", 'start': 14200.408, 'duration': 3.001}, {'end': 14204.909, 'text': 'I know you guys have probably already tired, guys.', 'start': 14203.429, 'duration': 1.48}, {'end': 14206.609, 'text': "But you know, we're keeping going.", 'start': 14204.949, 'duration': 1.66}, {'end': 14210.11, 'text': 'We still have almost 250 people right now live.', 'start': 14206.629, 'duration': 3.481}, {'end': 14213.591, 'text': 'And guys, so yeah, appreciate all of you.', 'start': 14210.63, 'duration': 2.961}, {'end': 14224.059, 'text': "this is awesome let's keep it going drop us some fire drop us some excitement let's finish this off with a banger Exactly.", 'start': 14213.871, 'duration': 10.188}], 'summary': 'Continuing strong with 250 live viewers, urging for fire and rocket emojis.', 'duration': 30.032, 'max_score': 14194.027, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14194027.jpg'}], 'start': 13264.411, 'title': 'Creating interactive map and pop-up design', 'summary': 'Demonstrates creating an interactive map with pop-up functionality, aiming for enthusiastic audience engagement and two thousand thumbs-up. it also details pop-up design and coding for displaying country information, along with styling info boxes and formatting numbers, mentioning live viewers and duration.', 'chapters': [{'end': 13431.3, 'start': 13264.411, 'title': 'Creating interactive map and pop-up', 'summary': 'Demonstrates the process of creating an interactive map with pop-up functionality, receiving enthusiastic audience engagement and aiming for two thousand thumbs-up.', 'duration': 166.889, 'highlights': ['The goal for the pop-up is to show the number of cases and other related information, receiving positive feedback and engagement from the audience.', 'Audience engagement includes requests for fire emojis, rocket emojis, applause, and thumbs-up, aiming for two thousand thumbs-up.', 'The process involves rendering the map on the page, making it full screen, and ensuring visibility of code snippets for audience reference.']}, {'end': 13747.366, 'start': 13433.901, 'title': 'Pop-up design and coding', 'summary': 'Details the process of designing and coding a pop-up for displaying country information, involving the creation of divs and styling for the pop-up and its components.', 'duration': 313.465, 'highlights': ['The pop-up is designed to display country information including the country name, number of cases, recoveries, and deaths. The pop-up is designed to display country information including the country name, number of cases, recoveries, and deaths.', 'The process involves coding divs and applying styling to achieve the desired appearance for the pop-up and its components. The process involves coding divs and applying styling to achieve the desired appearance for the pop-up and its components.', 'Styling includes setting the width, height, background image, font size, font weight, and color for the various components of the pop-up. Styling includes setting the width, height, background image, font size, font weight, and color for the various components of the pop-up.']}, {'end': 14213.591, 'start': 13748.59, 'title': 'Styling info boxes', 'summary': 'Focuses on styling the info boxes and formatting the numbers, with a demonstration of using a function to improve the presentation, while also mentioning the duration and number of live viewers.', 'duration': 465.001, 'highlights': ['The transcript emphasizes styling the info boxes and formatting the numbers, providing specific CSS rules and overriding Material UI styles to enhance the presentation.', 'It demonstrates the use of a function called PrettyPrintStat to format numbers, improve presentation, and handle cases when the number is not available.', 'The chapter mentions the duration of the session, stating that it has been ongoing for approximately four hours, and acknowledges the number of live viewers, which is almost 250 people.', "The speaker encourages audience engagement by requesting fire and rocket emojis and expresses gratitude for the viewers' continued participation."]}], 'duration': 949.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM13264411.jpg', 'highlights': ['The goal for the pop-up is to show the number of cases and other related information, receiving positive feedback and engagement from the audience.', 'Audience engagement includes requests for fire emojis, rocket emojis, applause, and thumbs-up, aiming for two thousand thumbs-up.', 'The pop-up is designed to display country information including the country name, number of cases, recoveries, and deaths.', 'The process involves rendering the map on the page, making it full screen, and ensuring visibility of code snippets for audience reference.', 'The transcript emphasizes styling the info boxes and formatting the numbers, providing specific CSS rules and overriding Material UI styles to enhance the presentation.', 'It demonstrates the use of a function called PrettyPrintStat to format numbers, improve presentation, and handle cases when the number is not available.', 'The chapter mentions the duration of the session, stating that it has been ongoing for approximately four hours, and acknowledges the number of live viewers, which is almost 250 people.', "The speaker encourages audience engagement by requesting fire and rocket emojis and expresses gratitude for the viewers' continued participation."]}, {'end': 15027.566, 'segs': [{'end': 14289.31, 'src': 'embed', 'start': 14240.264, 'weight': 0, 'content': [{'end': 14241.545, 'text': "I'm going to basically apply this.", 'start': 14240.264, 'duration': 1.281}, {'end': 14246.486, 'text': "I'm going to use numeral and I'm going to say, for the cases, format it in this way.", 'start': 14241.585, 'duration': 4.901}, {'end': 14247.666, 'text': 'Look at it as it is now.', 'start': 14246.526, 'duration': 1.14}, {'end': 14251.248, 'text': 'Basically, I need to import numeral at the top of the file.', 'start': 14248.227, 'duration': 3.021}, {'end': 14252.348, 'text': "I'm going to save it.", 'start': 14251.668, 'duration': 0.68}, {'end': 14255.089, 'text': 'and watch what happens to those numbers on the right.', 'start': 14252.988, 'duration': 2.101}, {'end': 14261.473, 'text': "You can now see they're separated by comments based on millions, et cetera, like that.", 'start': 14257.03, 'duration': 4.443}, {'end': 14262.433, 'text': 'I love it.', 'start': 14261.573, 'duration': 0.86}, {'end': 14267.736, 'text': 'You can see these subtle changes, guys, give such a nice user experience.', 'start': 14262.453, 'duration': 5.283}, {'end': 14270.717, 'text': "We're already getting such a better user experience from this.", 'start': 14267.776, 'duration': 2.941}, {'end': 14275.2, 'text': "Now, we need to solve one thing, so there's two things here.", 'start': 14271.358, 'duration': 3.842}, {'end': 14279.182, 'text': 'Live cases by country and worldwide new cases.', 'start': 14276.64, 'duration': 2.542}, {'end': 14289.31, 'text': "We want it so that One, we basically want it so that now when we click coronavirus cases recovered or deaths, it's going to change.", 'start': 14280.142, 'duration': 9.168}], 'summary': 'Using numeral, the user makes formatting and import changes, resulting in a better user experience.', 'duration': 49.046, 'max_score': 14240.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14240264.jpg'}, {'end': 14500.799, 'src': 'embed', 'start': 14469.621, 'weight': 2, 'content': [{'end': 14470.001, 'text': 'Look at this.', 'start': 14469.621, 'duration': 0.38}, {'end': 14473.985, 'text': 'Everything that we built earlier is actually going to work now.', 'start': 14470.422, 'duration': 3.563}, {'end': 14474.885, 'text': 'So if I click.', 'start': 14474.005, 'duration': 0.88}, {'end': 14477.928, 'text': 'You guys ready for this? You guys ready for this? Boom.', 'start': 14474.885, 'duration': 3.043}, {'end': 14480.23, 'text': 'Boom Look at that.', 'start': 14478.468, 'duration': 1.762}, {'end': 14482.432, 'text': 'Applause Thanks.', 'start': 14480.45, 'duration': 1.982}, {'end': 14484.713, 'text': 'right, you see, just just by.', 'start': 14483.072, 'duration': 1.641}, {'end': 14485.353, 'text': 'simply, you know.', 'start': 14484.713, 'duration': 0.64}, {'end': 14491.916, 'text': 'but when you build things kind of like for the future, almost like when you build things modular, you know things will be able to add,', 'start': 14485.353, 'duration': 6.563}, {'end': 14495.437, 'text': 'will be able to edit on really easily, right, just like how you know.', 'start': 14491.916, 'duration': 3.521}, {'end': 14500.799, 'text': 'a non-click of changing the cases type right, change the whole map data,', 'start': 14495.437, 'duration': 5.362}], 'summary': 'Modular approach allows easy editing and updating of built items.', 'duration': 31.178, 'max_score': 14469.621, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14469621.jpg'}, {'end': 14685.177, 'src': 'embed', 'start': 14659.228, 'weight': 3, 'content': [{'end': 14663.692, 'text': 'So InfoBox here, and I basically pass in that prop, so active.', 'start': 14659.228, 'duration': 4.464}, {'end': 14668.658, 'text': 'What I can do now is I can actually go ahead and add some more complicated CSS styling.', 'start': 14664.533, 'duration': 4.125}, {'end': 14670.8, 'text': "So I can actually get rid of these because we don't need that.", 'start': 14668.698, 'duration': 2.102}, {'end': 14677.03, 'text': "Go in here and I can actually now conditionally add things based on if it's active or not.", 'start': 14672.566, 'duration': 4.464}, {'end': 14680.473, 'text': "So I'm going to show you here is I'm going to basically have it.", 'start': 14677.11, 'duration': 3.363}, {'end': 14685.177, 'text': "So we're going to say this class name is always going to be info box, right? But I'm going to do it in a clever way.", 'start': 14680.493, 'duration': 4.684}], 'summary': "Demonstrates conditional css styling for an infobox component based on its 'active' state.", 'duration': 25.949, 'max_score': 14659.228, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14659228.jpg'}, {'end': 14825.535, 'src': 'embed', 'start': 14796.69, 'weight': 5, 'content': [{'end': 14799.651, 'text': "So I'm going to go ahead and add a variable called isRed.", 'start': 14796.69, 'duration': 2.961}, {'end': 14805.753, 'text': "So in the first one and in the last one, I'm going to add a Boolean thing, isRed.", 'start': 14800.752, 'duration': 5.001}, {'end': 14810.515, 'text': "Now, there's many ways you can do this.", 'start': 14808.755, 'duration': 1.76}, {'end': 14812.536, 'text': 'This is a very quick way of showing you how you can do it.', 'start': 14810.535, 'duration': 2.001}, {'end': 14813.556, 'text': "So it's just saying isRed.", 'start': 14812.596, 'duration': 0.96}, {'end': 14815.717, 'text': "Now here, I'm passing in isRed.", 'start': 14813.957, 'duration': 1.76}, {'end': 14818.438, 'text': "So it's a prop saying is it red or is it not?", 'start': 14815.737, 'duration': 2.701}, {'end': 14825.535, 'text': "I mean you could probably use different ways of doing this, but this way is like a very simple way of just seeing it if it's true or if it's not.", 'start': 14818.738, 'duration': 6.797}], 'summary': "Adding a variable 'isred' as a boolean prop to show if something is red or not.", 'duration': 28.845, 'max_score': 14796.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14796690.jpg'}], 'start': 14213.871, 'title': 'Improving user experience and conditional styling', 'summary': 'Focuses on implementing numeral.js for number formatting, dynamically changing data display, and adding conditional styling to info boxes, resulting in a better user experience for the app. it provides specific examples and code snippets for improved number formatting and demonstrates the impact of conditional styling on the user interface.', 'chapters': [{'end': 14561.742, 'start': 14213.871, 'title': 'Improving user experience with number formatting', 'summary': 'Focuses on implementing numeral.js for number formatting and dynamically changing data display on user interaction, resulting in a better user experience for the app, with specific examples and code snippets provided.', 'duration': 347.871, 'highlights': ['Implementing numeral.js for Number Formatting The speaker demonstrates using numeral.js to format numbers with nicer formatting, resulting in better user experience and improved readability of data, such as separating numbers by commas based on millions.', 'Dynamically Changing Data Display The chapter discusses dynamically changing the displayed data based on user interaction by keeping track of cases type in the state and utilizing onClick attributes, enabling a seamless transition between different data categories like cases, recovered, and deaths.', 'Modular Implementation for Future Flexibility The speaker emphasizes building modular components for future flexibility, showcasing how a simple onClick event can trigger changes across the entire app, highlighting the benefit of thoughtful, modular design for seamless updates and additions.']}, {'end': 15027.566, 'start': 14561.762, 'title': 'Adding conditional styling to info boxes', 'summary': "Discusses adding conditional styling to the info boxes with 'is active' and 'is red' props, allowing for different css styling based on the box's status, such as highlighting active boxes and changing the color to red for specific cases like deaths, with a visual demonstration of the changes made and the impact on the user interface.", 'duration': 465.804, 'highlights': ["The chapter discusses adding conditional styling to the info boxes with 'is active' and 'is red' props The speaker explains the process of adding 'is active' and 'is red' props to the info boxes.", "Allowing for different CSS styling based on the box's status, such as highlighting active boxes The speaker demonstrates how the 'is active' prop allows for different CSS styling, highlighting active boxes in the user interface.", "Changing the color to red for specific cases like deaths The speaker explains how the 'is red' prop enables changing the color to red for specific cases like deaths, with a visual demonstration of the changes."]}], 'duration': 813.695, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM14213871.jpg', 'highlights': ['Demonstrates using numeral.js for number formatting with nicer formatting and improved readability of data', 'Discusses dynamically changing the displayed data based on user interaction for seamless transition between different data categories', 'Emphasizes building modular components for future flexibility and seamless updates and additions', "Explains the process of adding 'is active' and 'is red' props to the info boxes", "Demonstrates how the 'is active' prop allows for different CSS styling, highlighting active boxes", "Explains how the 'is red' prop enables changing the color to red for specific cases like deaths"]}, {'end': 16398.86, 'segs': [{'end': 15097.48, 'src': 'embed', 'start': 15027.586, 'weight': 6, 'content': [{'end': 15030.788, 'text': 'So you see this time it worked, the whole center thing in Zoom, that worked.', 'start': 15027.586, 'duration': 3.202}, {'end': 15034.771, 'text': "So that's coronavirus and then zero recovered.", 'start': 15031.509, 'duration': 3.262}, {'end': 15038.773, 'text': "It looks like maybe we don't have any data on the recovery because it looks like there's zero for total.", 'start': 15034.851, 'duration': 3.922}, {'end': 15039.354, 'text': "That's interesting.", 'start': 15038.793, 'duration': 0.561}, {'end': 15042.275, 'text': 'Yeah Yeah.', 'start': 15041.755, 'duration': 0.52}, {'end': 15046.998, 'text': "So we've actually done it so that if there is any kind of error in the data, that's returned,", 'start': 15042.395, 'duration': 4.603}, {'end': 15050.98, 'text': "or if they haven't returned because they could be doing that on purpose guys.", 'start': 15046.998, 'duration': 3.982}, {'end': 15058.085, 'text': "So you could either write unavailable, but in this case, we just wrote plus zero because that's what we've done because it hasn't returned anything.", 'start': 15051.381, 'duration': 6.704}, {'end': 15061.636, 'text': "Nice That's really cool.", 'start': 15060.006, 'duration': 1.63}, {'end': 15064.257, 'text': "Wow So guys, I mean, that's pretty much it.", 'start': 15061.796, 'duration': 2.461}, {'end': 15068.918, 'text': 'Like, like, do we have anything else? We do need to change.', 'start': 15064.297, 'duration': 4.621}, {'end': 15080.481, 'text': 'So one thing like final little tweak, right? So in app.css, so in app.css, um, for the actual, um, app header.', 'start': 15069.338, 'duration': 11.143}, {'end': 15084.73, 'text': "So we have a H1 inside the app header, right? I'm going to go ahead and style that.", 'start': 15080.521, 'duration': 4.209}, {'end': 15087.172, 'text': "I'm targeting the H1 inside of the App Header.", 'start': 15085.051, 'duration': 2.121}, {'end': 15089.294, 'text': "I'm saying change that to a red.", 'start': 15087.552, 'duration': 1.742}, {'end': 15090.415, 'text': 'There we go.', 'start': 15089.794, 'duration': 0.621}, {'end': 15092.376, 'text': "We've got COVID-19 tracker in red.", 'start': 15090.495, 'duration': 1.881}, {'end': 15097.48, 'text': "I'm also saying that we want it to basically have.", 'start': 15093.697, 'duration': 3.783}], 'summary': 'Discussion about covid-19 data and making style tweaks in the app.', 'duration': 69.894, 'max_score': 15027.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM15027586.jpg'}, {'end': 15244.591, 'src': 'embed', 'start': 15213.916, 'weight': 5, 'content': [{'end': 15221.203, 'text': 'And then we say for this MUI card content we say flex, grow one which will make it grow one fully.', 'start': 15213.916, 'duration': 7.287}, {'end': 15222.925, 'text': 'Okay Okay.', 'start': 15221.223, 'duration': 1.702}, {'end': 15224.405, 'text': 'right there.', 'start': 15223.805, 'duration': 0.6}, {'end': 15226.266, 'text': "you see, now it's a.", 'start': 15224.405, 'duration': 1.861}, {'end': 15228.647, 'text': 'now it fully is the height one.', 'start': 15226.266, 'duration': 2.381}, {'end': 15238.71, 'text': "when, once we got that, if you look at now, charger yes, which is this one, all it's needed now is this div to be also the full height right.", 'start': 15228.647, 'duration': 10.063}, {'end': 15240.55, 'text': 'and how do we make that part work?', 'start': 15238.71, 'duration': 1.84}, {'end': 15244.591, 'text': 'huh, well, we can do display flex right.', 'start': 15240.55, 'duration': 4.041}], 'summary': 'Using flex property to make mui card content grow to full height.', 'duration': 30.675, 'max_score': 15213.916, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM15213916.jpg'}, {'end': 15591.256, 'src': 'embed', 'start': 15557.583, 'weight': 4, 'content': [{'end': 15560.505, 'text': 'And what we can do is just add a little bit of padding to this.', 'start': 15557.583, 'duration': 2.922}, {'end': 15561.266, 'text': 'Yeah Yeah.', 'start': 15560.645, 'duration': 0.621}, {'end': 15562.387, 'text': "Let's do that.", 'start': 15561.826, 'duration': 0.561}, {'end': 15564.208, 'text': 'We can say H three seconds.', 'start': 15562.427, 'duration': 1.781}, {'end': 15568.691, 'text': 'So in here, just to make life easy, we can say class name equals app underscore.', 'start': 15564.228, 'duration': 4.463}, {'end': 15582.555, 'text': 'Uh, we can say graph title, uh, And then we can do this, and we can say app.css margin-top.', 'start': 15568.711, 'duration': 13.844}, {'end': 15591.256, 'text': "And because of Flexbox, guys, everything will just restructure itself nicely, which is so nice, and that's why you want to use Flexbox all the time.", 'start': 15583.935, 'duration': 7.321}], 'summary': 'Adding padding to the app.css with flexbox for restructuring.', 'duration': 33.673, 'max_score': 15557.583, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM15557583.jpg'}, {'end': 15679.492, 'src': 'embed', 'start': 15650.668, 'weight': 3, 'content': [{'end': 15652.269, 'text': 'Yep, continue, create project.', 'start': 15650.668, 'duration': 1.601}, {'end': 15654.371, 'text': "So it's doing the whole create project thing.", 'start': 15652.768, 'duration': 1.603}, {'end': 15658.257, 'text': 'Now, what we need to do is if you open up the terminal, so come on Jay.', 'start': 15654.431, 'duration': 3.826}, {'end': 15661.343, 'text': 'Uh, hold on, hold on, hold on, hold on, hold on.', 'start': 15658.277, 'duration': 3.066}, {'end': 15662.364, 'text': 'Come on Jay.', 'start': 15661.844, 'duration': 0.52}, {'end': 15669.449, 'text': "Okay What you're going to have to do, guys, is you're going to have to install something called Firebase command line.", 'start': 15662.404, 'duration': 7.045}, {'end': 15670.769, 'text': "It's the command line tools.", 'start': 15669.709, 'duration': 1.06}, {'end': 15674.71, 'text': "What you're going to have to do here is you're going to have to do, so I'm actually just checking.", 'start': 15670.809, 'duration': 3.901}, {'end': 15675.971, 'text': "Right now, I'm logged in as Kazi.", 'start': 15674.85, 'duration': 1.121}, {'end': 15679.492, 'text': "What we're going to have to do is you actually will have to probably install these.", 'start': 15675.991, 'duration': 3.501}], 'summary': 'Installing firebase command line tools is required to create a project and use terminal commands.', 'duration': 28.824, 'max_score': 15650.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM15650668.jpg'}, {'end': 16064.634, 'src': 'embed', 'start': 16037.213, 'weight': 1, 'content': [{'end': 16044.098, 'text': 'Deploying hosting, deploying now, adding files, uploading files, and.', 'start': 16037.213, 'duration': 6.885}, {'end': 16045.537, 'text': 'There we go.', 'start': 16045.177, 'duration': 0.36}, {'end': 16048.82, 'text': 'That the hosting URO is the hosting URL is deployed up.', 'start': 16045.938, 'duration': 2.882}, {'end': 16051.863, 'text': 'Hey, hold on, hold on, hold on guys.', 'start': 16049.02, 'duration': 2.843}, {'end': 16053.344, 'text': "They're ready for this guys.", 'start': 16051.883, 'duration': 1.461}, {'end': 16055.366, 'text': "Hey, it's working guys.", 'start': 16053.364, 'duration': 2.002}, {'end': 16058.729, 'text': "Ready? Who's get ready to give us a thumbs up button for Sonny and me.", 'start': 16055.406, 'duration': 3.323}, {'end': 16062.832, 'text': 'And for this project guys, give us, give us a thumbs up button.', 'start': 16058.889, 'duration': 3.943}, {'end': 16063.873, 'text': "Let's go.", 'start': 16063.312, 'duration': 0.561}, {'end': 16064.634, 'text': "Let's go.", 'start': 16064.213, 'duration': 0.421}], 'summary': 'Deployed hosting url, project ready, seeking approval with thumbs up.', 'duration': 27.421, 'max_score': 16037.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM16037213.jpg'}, {'end': 16160.729, 'src': 'embed', 'start': 16133.709, 'weight': 0, 'content': [{'end': 16138.353, 'text': 'wrap up with that and then we can call it an end to an amazing run through.', 'start': 16133.709, 'duration': 4.644}, {'end': 16140.254, 'text': "well, i can't return.", 'start': 16138.353, 'duration': 1.901}, {'end': 16142.116, 'text': "i can't believe how many people are still watching it.", 'start': 16140.254, 'duration': 1.862}, {'end': 16144.157, 'text': "it's really like i.", 'start': 16142.116, 'duration': 2.041}, {'end': 16149.322, 'text': "really we're still at 200, 200 people watching, which is crazy after five hours of a live.", 'start': 16144.157, 'duration': 5.165}, {'end': 16150.703, 'text': "call that that's something, guys.", 'start': 16149.322, 'duration': 1.381}, {'end': 16152.264, 'text': 'that is something, guys.', 'start': 16151.323, 'duration': 0.941}, {'end': 16156.086, 'text': "so yeah, guys, seriously, give us a thumbs up, let's get it.", 'start': 16152.264, 'duration': 3.822}, {'end': 16157.867, 'text': "we're at 985 thumbs up.", 'start': 16156.086, 'duration': 1.781}, {'end': 16160.729, 'text': "let's get it to 1000.", 'start': 16157.867, 'duration': 2.862}], 'summary': 'After a five-hour live stream, 200 people are still watching, with 985 thumbs up, aiming for 1000.', 'duration': 27.02, 'max_score': 16133.709, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM16133709.jpg'}, {'end': 16252.111, 'src': 'embed', 'start': 16221.528, 'weight': 2, 'content': [{'end': 16224.752, 'text': 'All this stuff is in Profit with JavaScript, Profit with React.', 'start': 16221.528, 'duration': 3.224}, {'end': 16227.174, 'text': "This is all of this stuff that you're learning.", 'start': 16224.792, 'duration': 2.382}, {'end': 16232.62, 'text': 'We get into this into detail in our course, right? Link is in bio, in description.', 'start': 16227.254, 'duration': 5.366}, {'end': 16233.621, 'text': 'Check it out, guys.', 'start': 16232.74, 'duration': 0.881}, {'end': 16239.846, 'text': "What are you still doing here? Like, I don't know what you're still doing here, right? I literally want you to go right now, click on that link.", 'start': 16234.042, 'duration': 5.804}, {'end': 16240.866, 'text': 'I mean, you can still be in the video.', 'start': 16239.886, 'duration': 0.98}, {'end': 16244.848, 'text': 'Okay But open up a new tab, click on that link in bio right there.', 'start': 16240.906, 'duration': 3.942}, {'end': 16245.688, 'text': 'Okay Click on that.', 'start': 16244.868, 'duration': 0.82}, {'end': 16246.689, 'text': 'Check it out.', 'start': 16246.108, 'duration': 0.581}, {'end': 16247.669, 'text': 'Join us.', 'start': 16247.149, 'duration': 0.52}, {'end': 16252.111, 'text': 'Join the coaching calls where you get taught by people like Sonny and me and Kazi.', 'start': 16248.069, 'duration': 4.042}], 'summary': 'Promotion for profit with javascript and react courses, encouraging viewers to join coaching calls.', 'duration': 30.583, 'max_score': 16221.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM16221528.jpg'}], 'start': 15027.586, 'title': 'Zoom data analysis, css styling, firebase deployment, and live coding wrap-up', 'summary': 'Delves into zoom data analysis of coronavirus cases, css styling and flexbox implementation for a covid-19 tracker, deployment of a firebase app, and a live coding session with 200 viewers for 5 hours and 985 thumbs up, promoting javascript and react courses.', 'chapters': [{'end': 15068.918, 'start': 15027.586, 'title': 'Zoom data analysis on coronavirus', 'summary': "Discusses the analysis of coronavirus data in zoom, revealing zero recovered cases and the team's approach in handling errors and unavailable data.", 'duration': 41.332, 'highlights': ['The team observed zero recovered cases in the coronavirus data analysis in Zoom.', "The discussion includes the team's approach in handling errors and unavailable data by inputting plus zero for cases with no data available.", 'The chapter also mentions the successful implementation of the whole center thing in Zoom for data analysis.']}, {'end': 15611.147, 'start': 15069.338, 'title': 'Css styling and flexbox implementation', 'summary': 'Covers the process of implementing css styling by targeting specific elements, changing background colors, and utilizing flexbox to adjust element heights, resulting in a responsive layout for the covid-19 tracker application.', 'duration': 541.809, 'highlights': ['Implementing CSS styling to target specific elements such as the app header and input field, resulting in the COVID-19 tracker header being styled in red and the input field background being changed to white. The speaker demonstrates targeting specific elements in the app.css file to style the app header in red and change the input field background to white.', 'Utilizing Flexbox to adjust the height of elements, such as setting the MUI card content to flex grow one, and using display flex and flex direction column to make the div also grow to full height. The speaker explains the process of using Flexbox properties to adjust the height of elements, such as setting the MUI card content to flex grow one and applying display flex and flex direction column to make the div grow to full height.', 'Adding a class to the line graph element and implementing Flexbox properties, resulting in a responsive layout and the addition of padding to the graph title for a structured design. The speaker demonstrates adding a class to the line graph element, implementing Flexbox properties for a responsive layout, and adding padding to the graph title for a structured design.']}, {'end': 15942.364, 'start': 15611.167, 'title': 'Deploying firebase app', 'summary': 'Details the process of deploying a firebase app, including creating a project, installing firebase command line tools, initializing hosting, and optimizing a production build, with a remark on the duration of the project and the number of likes received.', 'duration': 331.197, 'highlights': ['The chapter details the process of deploying a Firebase app, including creating a project, installing Firebase command line tools, initializing hosting, and optimizing a production build, with a remark on the duration of the project and the number of likes received.', 'Creating a Firebase app to save time by avoiding logging into another account and adding a project named COVID-19 app.', "Instructions on installing Firebase command line tools using 'mpmi-g firebase-tools' and 'sudo' if necessary, followed by logging in and initializing the app for deployment.", "Guidance on ensuring the correct folder is selected when installing dependencies using 'MPMI', and the need to refresh and run 'npm run build' to obtain a production build of the app, with an estimate of four and a half hours for the project.", 'Encouragement to reach a thousand likes on YouTube and a call to action for Facebook viewers to visit YouTube and give a thumbs up.']}, {'end': 16398.86, 'start': 15942.424, 'title': 'Live coding deployment and wrap-up', 'summary': 'Documents a live coding session where a web application is built, deployed, and celebrated, with interactions from the audience and instructions for further engagement, receiving around 200 viewers for 5 hours and reaching 985 thumbs up. the team also promotes their javascript and react courses and encourages audience participation through tagging and sharing their work.', 'duration': 456.436, 'highlights': ['The live coding session received around 200 viewers for 5 hours and reached 985 thumbs up. The event garnered a significant audience of about 200 viewers and achieved 985 thumbs up, demonstrating high engagement and interest in the live coding session.', 'The team promotes their JavaScript and React courses and encourages audience participation through tagging and sharing their work. The team actively promotes their JavaScript and React courses, urging the audience to engage by tagging and sharing their work, emphasizing the potential for growth and learning through their courses.', 'The team celebrates the completion and functionality of the web application, encouraging viewers to visit the deployed site. The team expresses excitement and celebrates the successful completion and functionality of the web application, inviting viewers to visit the deployed site and witness the results for themselves.']}], 'duration': 1371.274, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/cF3pIMJUZxM/pics/cF3pIMJUZxM15027586.jpg', 'highlights': ['The live coding session received around 200 viewers for 5 hours and reached 985 thumbs up.', 'The team celebrates the completion and functionality of the web application, encouraging viewers to visit the deployed site.', 'The team promotes their JavaScript and React courses and encourages audience participation through tagging and sharing their work.', 'The chapter details the process of deploying a Firebase app, including creating a project, installing Firebase command line tools, initializing hosting, and optimizing a production build, with a remark on the duration of the project and the number of likes received.', 'Adding a class to the line graph element and implementing Flexbox properties, resulting in a responsive layout and the addition of padding to the graph title for a structured design.', 'Utilizing Flexbox to adjust the height of elements, such as setting the MUI card content to flex grow one, and using display flex and flex direction column to make the div also grow to full height.', 'Implementing CSS styling to target specific elements such as the app header and input field, resulting in the COVID-19 tracker header being styled in red and the input field background being changed to white.', 'The team observed zero recovered cases in the coronavirus data analysis in Zoom.', "The discussion includes the team's approach in handling errors and unavailable data by inputting plus zero for cases with no data available."]}], 'highlights': ['Building a COVID-19 tracker app in React.js with map visualization and dynamic data rendering, engaging over 600 viewers and gathering 711 participants for the live call.', "Utilizing 'disease.sh' API with 20 billion open disease data and emphasizing the importance of wireframes for visualization and planning.", 'Practical instructions on duplicating information boxes, left-aligning text, and creating wireframes for map, table, and graph components.', 'Implementing Material UI dropdown, styling with class names, and explaining the concept of HTML containers and Flexbox for layout manipulation.', 'Explaining the concept of useEffect in React, making asynchronous API requests, restructuring data using the map function, and creating a reusable component with props.', 'Using Material UI to render a card element, implementing a media query for responsive design, and fetching data in React with calls to a service.', 'Implementing sorting function using sort method, creating a responsive table using display flex and justify content properties, and explaining the comparison logic in the sorting process.', 'Installing React Chart JS2, fetching worldwide data for the last 120 days, and handling data objects and datasets for Chart.js visualization.', "Promotion of the course 'Profit with JavaScript, Profit with React' with up to four weekly coaching calls, personalized video feedback, and a 30-day money-back guarantee.", 'Drawing circles on a map, creating pop-ups with interactive tooltips, and setting up CSS rules for the map container with a height of 500 pixels.', 'Rendering the map on the page, styling the info boxes, and using numeral.js for number formatting and dynamically changing displayed data based on user interaction.', 'Live coding session with around 200 viewers for 5 hours, celebrating the completion and functionality of the web application, and promoting JavaScript and React courses.', 'Deploying a Firebase app, adding a class to the line graph element, utilizing Flexbox for responsive layout, and implementing CSS styling for specific elements.']}