title
JavaScript Tutorial for Beginners - Full Course in 8 Hours [2020]

description
🚀 Join my FREE JavaScript Course: https://www.cleverprogrammer.com Here is the best free javascript programming course on the planet. Made with lots of ❤️. Take your web development skills to the next level with this Clever Programmer Learn Javascript course for beginners. This course will help you learn web development in 2020 and beyond. Mastering these technical skills is vital to your career as a software developer. Whether you want to get a full-time job or become a freelance developer. Or whether you want to become a full-stack or front-end developer... You HAVE to master Javascript. 🔥 TABLE OF CONTENTS... ENJOY 👇 3:57 - How to run your first Program with Javascript 7:17 - Manipulate the DOM 15:49 - Numbers in Javascript 22:18 - Functions in Javascript 33:31 - While vs. For Loops in Javascript 39:10 - Data Types in Javascript 43:26 - Strings (Common Methods) 52:07 - Javascript in Arrays 1:11:07 - Objects in Javascript 1:18:18 - If else conditionals and switch statements 1:31:07 - Learn JSON in 5 minutes 1:36:41 - Challenge: Your age in days 2:10:07 - Challenge: Cat Generator 2:42:19 - Challenge: Rock Paper Scissors 2:58:28 - Challenge: Rock Paper Scissors PT. 2 3:57:46 - Challenge: Change Button Colors 4:39:48 - How Blackjack Works 4:45:23 - Blackjack HTML 5:05:14 - CSS Blackjack 5:28:47 - Challenge: Build a Blackjack Game with Javascript 6:06:58 - Blackjack PT. 2 6:35:42 - Blackjack PT. 3 7:03:29 - Blackjack PT. 4 7:22:08 - Blackjack PT. 5 7:39:19 - Blackjack PT. 6 7:47:56 - Blackjack PT 7 Blackjack Project Assets: https://drive.google.com/drive/u/0/folders/1mwK4VXOG_KSgsbYHRb8SOoFCpVPGAnjv Join the 3-part epic masterclass that shows you how to become a 6-figure developer... https://cleverprogrammer.com Enroll for exercises, tutorials, courses, and projects... https://cleverprogrammer.com?utm_source=youtube&utm_medium=yt-description Enroll in Learn Python™ course https://cleverprogrammer.com?utm_source=youtube&utm_medium=yt-description ================================================== Connect With Me! Website ► https://cleverprogrammer.com?utm_source=youtube&utm_medium=yt-description Facebook ► http://cleverprogrammer.io/facebook Twitter ► http://cleverprogrammer.io/twitter Instagram ► http://cleverprogrammer.io/instagram Snapchat ► Rafeh1 iTunes Podcast ► http://cleverprogrammer.io/podcast Google Podcast ► http://cleverprogrammer.io/google-podcast Support (Patreon) ► http://cleverprogrammer.io/patreon Youtube ► https://www.youtube.com/c/CleverProgrammer Github (Code) ► http://cleverprogrammer.io/github web development Biz / Sponsorships 👉 https://www.cleverprogrammer.com/partnerships

detail
{'title': 'JavaScript Tutorial for Beginners - Full Course in 8 Hours [2020]', 'heatmap': [{'end': 3728.219, 'start': 3438.544, 'weight': 1}, {'end': 7739.765, 'start': 7448.191, 'weight': 0.722}], 'summary': 'Tutorial covers a comprehensive 7-hour javascript course suitable for beginners and advanced students, including basic tutorials, multiple project building such as blackjack, javascript fundamentals, json and interface creation, age and cat tools, image manipulation, web development essentials, and the implementation of rock-paper-scissors and blackjack games using html, css, and javascript.', 'chapters': [{'end': 208.928, 'segs': [{'end': 49.657, 'src': 'embed', 'start': 0.669, 'weight': 0, 'content': [{'end': 4.592, 'text': 'JavaScript full seven hour course.', 'start': 0.669, 'duration': 3.923}, {'end': 8.915, 'text': 'This course has everything that you have been looking for.', 'start': 5.633, 'duration': 3.282}, {'end': 13.818, 'text': 'This is made for beginners as well as advanced students.', 'start': 9.395, 'duration': 4.423}, {'end': 22.204, 'text': 'You will go from the basic tutorials of JavaScript all the way to building multiple projects.', 'start': 14.058, 'duration': 8.146}, {'end': 25.125, 'text': "and we're gonna go in increasing complexity.", 'start': 23.124, 'duration': 2.001}, {'end': 31.348, 'text': 'The coolest and my favorite project is Blackjack that you will get to build at the end.', 'start': 25.505, 'duration': 5.843}, {'end': 39.912, 'text': "It has many, many things involved so that linear progression that you'll have in this tutorial, in this course, I think you will really enjoy.", 'start': 31.988, 'duration': 7.924}, {'end': 44.534, 'text': 'We will also put everything in table of content format.', 'start': 39.932, 'duration': 4.602}, {'end': 49.657, 'text': 'That way you will know where you need to go to access what you need to access.', 'start': 45.135, 'duration': 4.522}], 'summary': 'A comprehensive seven-hour javascript course covering basic tutorials, advanced projects, and a blackjack project, suitable for beginners and advanced students, with a linear progression and organized table of content.', 'duration': 48.988, 'max_score': 0.669, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA669.jpg'}, {'end': 101.889, 'src': 'embed', 'start': 71.662, 'weight': 4, 'content': [{'end': 78.964, 'text': 'If you are interested in becoming a web developer, who can also become a freelancer and charge what they are worth.', 'start': 71.662, 'duration': 7.302}, {'end': 86.672, 'text': "In the description below, I have put a link to a webinar training that's over an hour long.", 'start': 79.944, 'duration': 6.728}, {'end': 93.88, 'text': 'That training gives you all the pieces that you need to know to go from being a beginner or to an advanced.', 'start': 87.213, 'duration': 6.667}, {'end': 101.889, 'text': "And what's the roadmap to becoming a six figure developer or a six figure freelancer? I think you're gonna get a lot of value out of it.", 'start': 94.02, 'duration': 7.869}], 'summary': 'Web developer can become a six-figure freelancer with webinar training.', 'duration': 30.227, 'max_score': 71.662, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA71662.jpg'}, {'end': 138.013, 'src': 'embed', 'start': 114.12, 'weight': 2, 'content': [{'end': 121.847, 'text': 'There are many things that you can do with JavaScript, but the most important thing that people use it for is web development.', 'start': 114.12, 'duration': 7.727}, {'end': 132.652, 'text': "Almost everything that's on the web is using javascript and, for example, youtube and google use javascript.", 'start': 122.107, 'duration': 10.545}, {'end': 138.013, 'text': "anything that you want to do with web development, you're going to need to learn javascript for that.", 'start': 132.652, 'duration': 5.361}], 'summary': 'Javascript is crucial for web development, utilized by major platforms like youtube and google.', 'duration': 23.893, 'max_score': 114.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA114120.jpg'}, {'end': 187.639, 'src': 'embed', 'start': 159.417, 'weight': 3, 'content': [{'end': 166.904, 'text': 'And according to indeed.com in United States, JavaScript developers make on average over 112 or $113, 000 per year.', 'start': 159.417, 'duration': 7.487}, {'end': 179.573, 'text': 'There are many factors that are taken into your skill set, your experience, your ability to negotiate your salary, things of that nature.', 'start': 171.728, 'duration': 7.845}, {'end': 183.876, 'text': "What is the specific niche of the job that you're looking for?", 'start': 180.134, 'duration': 3.742}, {'end': 187.639, 'text': 'Are you trying to be a front end or a back end or a full stack developer??', 'start': 184.296, 'duration': 3.343}], 'summary': 'Javascript developers in the us earn an average of $112,000 to $113,000 per year, influenced by skill set and job niche.', 'duration': 28.222, 'max_score': 159.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA159417.jpg'}], 'start': 0.669, 'title': 'Javascript learning and earnings', 'summary': 'Provides a comprehensive seven-hour javascript course suitable for beginners and advanced students, covering basic tutorials, building multiple projects, including the blackjack project, and organized in a table of content format. it also covers the opportunities in javascript, including its importance in web development and the average annual earnings of javascript developers in the united states, which is over $112,000.', 'chapters': [{'end': 49.657, 'start': 0.669, 'title': 'Javascript full course with blackjack project', 'summary': 'Covers a comprehensive seven-hour javascript course suitable for beginners and advanced students, covering basic tutorials, building multiple projects, including the blackjack project, and organized in a table of content format for easy accessibility.', 'duration': 48.988, 'highlights': ['The course covers a comprehensive seven-hour JavaScript course suitable for beginners and advanced students, covering basic tutorials, building multiple projects, including the Blackjack project.', 'The tutorial is organized in a table of content format for easy accessibility.', 'The course includes a cool and favorite project, Blackjack, which students will get to build at the end.']}, {'end': 208.928, 'start': 50.157, 'title': 'Javascript: opportunities and earnings', 'summary': 'Covers the opportunities in javascript, including its importance in web development and the average annual earnings of javascript developers in the united states, which is over $112,000. it also provides a link to a training for aspiring web developers.', 'duration': 158.771, 'highlights': ['JavaScript developers in the United States make on average over 112 or $113, 000 per year. The average annual earnings of JavaScript developers in the United States is over $112,000.', 'JavaScript is the number two most popular language according to the paypal index, right behind python. JavaScript is the second most popular language according to the paypal index, just behind python.', "Almost everything that's on the web is using javascript and, for example, youtube and google use javascript. JavaScript is widely used in web development, with platforms like YouTube and Google employing it extensively.", 'The tutorial provides a link to a webinar training that gives all the pieces needed to go from a beginner to an advanced web developer. A webinar training linked in the tutorial equips beginners with all the necessary knowledge to become advanced web developers.']}], 'duration': 208.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA669.jpg', 'highlights': ['The course covers a comprehensive seven-hour JavaScript course suitable for beginners and advanced students, covering basic tutorials, building multiple projects, including the Blackjack project.', 'The tutorial is organized in a table of content format for easy accessibility.', 'JavaScript is widely used in web development, with platforms like YouTube and Google employing it extensively.', 'JavaScript developers in the United States make on average over $112,000 per year.', 'The tutorial provides a link to a webinar training that gives all the pieces needed to go from a beginner to an advanced web developer.']}, {'end': 2469.644, 'segs': [{'end': 275.08, 'src': 'embed', 'start': 243.439, 'weight': 0, 'content': [{'end': 247.022, 'text': "JavaScript crash course tutorial, let's just jump right into it.", 'start': 243.439, 'duration': 3.583}, {'end': 251.085, 'text': 'So first thing I want you to do is install Visual Studio Code.', 'start': 247.082, 'duration': 4.003}, {'end': 259.993, 'text': "Once you are done with Visual Studio Code, we are going to create a folder right on our homepage, and we're going to call it JavaScript crash course.", 'start': 252.467, 'duration': 7.526}, {'end': 264.016, 'text': "Now inside of this folder, we're going to create just a few files, and I'll show you how.", 'start': 260.493, 'duration': 3.523}, {'end': 266.919, 'text': "First, we're going to open up our Visual Studio Code.", 'start': 264.637, 'duration': 2.282}, {'end': 275.08, 'text': "Once our Visual Studio Code is open, let's hit Command N or Control N And um, or sorry,", 'start': 267.399, 'duration': 7.681}], 'summary': 'Javascript crash course covers visual studio code setup and file creation.', 'duration': 31.641, 'max_score': 243.439, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA243439.jpg'}, {'end': 370.239, 'src': 'embed', 'start': 340.922, 'weight': 1, 'content': [{'end': 345.186, 'text': 'Now, in between these script tags is where you will write JavaScript code.', 'start': 340.922, 'duration': 4.264}, {'end': 349.289, 'text': "In the future, I'll show you how you create a JavaScript file and then write your code there.", 'start': 345.226, 'duration': 4.063}, {'end': 353.933, 'text': "I'm going to say console.log hello.", 'start': 350.43, 'duration': 3.503}, {'end': 359.237, 'text': "And now we're going to open up a Chrome tab.", 'start': 355.634, 'duration': 3.603}, {'end': 370.239, 'text': "like. so i'm going to hit commando, or you can hit ctrl o, go to index.html and open that right up and then hit inspect.", 'start': 361.437, 'duration': 8.802}], 'summary': 'Learning to write javascript code within script tags for logging output.', 'duration': 29.317, 'max_score': 340.922, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA340922.jpg'}, {'end': 446.78, 'src': 'embed', 'start': 418.24, 'weight': 2, 'content': [{'end': 427.148, 'text': "So, before we continue any further, I'm going to show you how you create your own JavaScript file, link it to your HTML file,", 'start': 418.24, 'duration': 8.908}, {'end': 434.414, 'text': "and then we're going to be coding strictly in our JavaScript file from now till the end of the tutorial.", 'start': 427.148, 'duration': 7.266}, {'end': 435.514, 'text': "That's it.", 'start': 435.114, 'duration': 0.4}, {'end': 436.535, 'text': 'Thank you so much for watching.', 'start': 435.554, 'duration': 0.981}, {'end': 438.015, 'text': "And I'll see you in the next video.", 'start': 436.555, 'duration': 1.46}, {'end': 446.78, 'text': 'Beautiful person.', 'start': 445.319, 'duration': 1.461}], 'summary': 'Creating and linking javascript file to html, coding exclusively in javascript.', 'duration': 28.54, 'max_score': 418.24, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA418240.jpg'}, {'end': 633.047, 'src': 'embed', 'start': 583.949, 'weight': 3, 'content': [{'end': 597.653, 'text': 'So we can now just focus strictly inside of our JavaScript file and do coding here, and then we will run the code in our index.html file.', 'start': 583.949, 'duration': 13.704}, {'end': 601.766, 'text': "So let's get started with variables.", 'start': 599.625, 'duration': 2.141}, {'end': 604.406, 'text': 'What are variables? Variables is something very simple.', 'start': 602.086, 'duration': 2.32}, {'end': 623.331, 'text': 'So I can do var hello or var b is equal to something, smoothie.', 'start': 604.426, 'duration': 18.905}, {'end': 625.412, 'text': 'Now I can say console.log.', 'start': 623.871, 'duration': 1.541}, {'end': 631.345, 'text': 'B, which just means read what B is.', 'start': 627.699, 'duration': 3.646}, {'end': 633.047, 'text': 'Oh, not like that, sorry.', 'start': 631.525, 'duration': 1.522}], 'summary': 'Focus on javascript coding, define variables, and use console.log for output.', 'duration': 49.098, 'max_score': 583.949, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA583949.jpg'}, {'end': 812.199, 'src': 'embed', 'start': 773.464, 'weight': 4, 'content': [{'end': 786.112, 'text': 'For example, you can ask a user for, hey, what is your age, right? And when the user hits, types in their age, you can actually store that somewhere.', 'start': 773.464, 'duration': 12.648}, {'end': 799.76, 'text': 'For example, say we have a prompt and it asks, what is your age? Okay, like this.', 'start': 786.412, 'duration': 13.348}, {'end': 810.099, 'text': "And we go here, it'll ask you, what is your age? I'll say 45.", 'start': 804.318, 'duration': 5.781}, {'end': 812.199, 'text': "But it doesn't do anything with that information.", 'start': 810.099, 'duration': 2.1}], 'summary': 'Demonstrating how to prompt user for age input and store it, but not utilizing the information received.', 'duration': 38.735, 'max_score': 773.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA773464.jpg'}, {'end': 1002.208, 'src': 'embed', 'start': 966.401, 'weight': 5, 'content': [{'end': 975.366, 'text': 'We have var num1, and you can have a simple number like this, or you could have a floating number like this', 'start': 966.401, 'duration': 8.965}, {'end': 982.484, 'text': 'and then you can also do lots of different operations on a number.', 'start': 977.783, 'duration': 4.701}, {'end': 997.627, 'text': 'you can do lots of arithmetic with a number, okay, which means that you can multiply a number so you could do console.log.', 'start': 982.484, 'duration': 15.143}, {'end': 1002.208, 'text': "i could do num1 or let's just keep it simple, 5 times 10..", 'start': 997.627, 'duration': 4.581}], 'summary': 'Introduction to mathematical operations using javascript numbers.', 'duration': 35.807, 'max_score': 966.401, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA966401.jpg'}, {'end': 1268.767, 'src': 'embed', 'start': 1206.697, 'weight': 6, 'content': [{'end': 1216.987, 'text': 'I can go num1, remainder 5, and I can have it read it out.', 'start': 1206.697, 'duration': 10.29}, {'end': 1222.594, 'text': "Let's take a look.", 'start': 1221.954, 'duration': 0.64}, {'end': 1228.338, 'text': 'Zero, nothing left over because five goes perfectly into 10.', 'start': 1223.115, 'duration': 5.223}, {'end': 1233.881, 'text': 'What if I did six? Well, the remainder would be four because six only goes once.', 'start': 1228.338, 'duration': 5.543}, {'end': 1268.767, 'text': 'Okay, Another thing I want to show you is while you can increment things by doing num plus plus and num minus minus, you can increment by.', 'start': 1256.357, 'duration': 12.41}], 'summary': 'Demonstration of division and incrementing in a programming context.', 'duration': 62.07, 'max_score': 1206.697, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA1206697.jpg'}, {'end': 1453.649, 'src': 'embed', 'start': 1423.083, 'weight': 7, 'content': [{'end': 1424.863, 'text': 'This is how you call the function.', 'start': 1423.083, 'duration': 1.78}, {'end': 1434.287, 'text': 'This is creating, create, and this is call.', 'start': 1428.665, 'duration': 5.622}, {'end': 1437.448, 'text': "It's kind of like naming your child, John.", 'start': 1435.047, 'duration': 2.401}, {'end': 1444.54, 'text': "It's like creating a child, but then to get his attention and have him come to you, you gotta say John.", 'start': 1438.715, 'duration': 5.825}, {'end': 1446.562, 'text': 'Here you gotta say fun.', 'start': 1445.621, 'duration': 0.941}, {'end': 1450.886, 'text': 'If I go back here and I hit refresh, now it says this is a function.', 'start': 1447.403, 'duration': 3.483}, {'end': 1453.649, 'text': "So that's pretty much the idea.", 'start': 1451.567, 'duration': 2.082}], 'summary': 'Demonstrates calling a function, creating and naming a function, akin to naming a child, with the outcome being a functional function.', 'duration': 30.566, 'max_score': 1423.083, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA1423083.jpg'}, {'end': 1539.006, 'src': 'embed', 'start': 1482.627, 'weight': 8, 'content': [{'end': 1483.428, 'text': "So I'll write this down.", 'start': 1482.627, 'duration': 0.801}, {'end': 1502.224, 'text': "Let's create a function that takes in a name and returns to you and says hello followed by your name.", 'start': 1483.668, 'duration': 18.556}, {'end': 1519.309, 'text': 'For example, if your name is Kazi, which mine is, the function should return hello Kazi.', 'start': 1505.985, 'duration': 13.324}, {'end': 1523.89, 'text': 'Okay, hopefully that makes sense.', 'start': 1522.31, 'duration': 1.58}, {'end': 1526.011, 'text': "So let's code this up.", 'start': 1524.31, 'duration': 1.701}, {'end': 1539.006, 'text': "We'll say function, and then we will call this greeting, open close paren.", 'start': 1528.544, 'duration': 10.462}], 'summary': "Create a function that returns 'hello' followed by the input name.", 'duration': 56.379, 'max_score': 1482.627, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA1482627.jpg'}, {'end': 1685.309, 'src': 'embed', 'start': 1643.877, 'weight': 9, 'content': [{'end': 1651.524, 'text': "This is fancy, so I'll leave a little note for this right here and I'll say string concatenation like this.", 'start': 1643.877, 'duration': 7.647}, {'end': 1660.772, 'text': 'Now, functions could also take in arguments.', 'start': 1657.669, 'duration': 3.103}, {'end': 1672.466, 'text': 'which essentially just means, look, every function is gonna have some kind of input.', 'start': 1668.345, 'duration': 4.121}, {'end': 1674.907, 'text': 'Here, our input is the name.', 'start': 1673.006, 'duration': 1.901}, {'end': 1680.608, 'text': 'So what we should probably do is have it outside of the function.', 'start': 1675.407, 'duration': 5.201}, {'end': 1685.309, 'text': 'And the function should be taking that as the input.', 'start': 1681.928, 'duration': 3.381}], 'summary': 'Functions take input arguments for string concatenation.', 'duration': 41.432, 'max_score': 1643.877, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA1643877.jpg'}, {'end': 1945.059, 'src': 'embed', 'start': 1902.677, 'weight': 10, 'content': [{'end': 1908.961, 'text': 'We wanted to give function, so greeting an input and then have it do the thing that we want it to do.', 'start': 1902.677, 'duration': 6.284}, {'end': 1910.542, 'text': "So let's go ahead and do that.", 'start': 1909.361, 'duration': 1.181}, {'end': 1914.325, 'text': 'I will put this prompt here.', 'start': 1912.444, 'duration': 1.881}, {'end': 1929.466, 'text': 'of what is your name, I will say that greeting takes in your name, your name, like this.', 'start': 1916.696, 'duration': 12.77}, {'end': 1939.134, 'text': 'So now when we run greeting, we do the following.', 'start': 1931.208, 'duration': 7.926}, {'end': 1945.059, 'text': 'We take in the name, and then we pass it to greeting like so.', 'start': 1941.196, 'duration': 3.863}], 'summary': 'Creating a function to greet users by taking their name as input and passing it to the greeting function.', 'duration': 42.382, 'max_score': 1902.677, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA1902677.jpg'}, {'end': 2053.027, 'src': 'embed', 'start': 1977.581, 'weight': 11, 'content': [{'end': 1985.307, 'text': "Because otherwise you are not writing clean code and somebody's reading your code will not know that that function is dependent on some piece of information.", 'start': 1977.581, 'duration': 7.726}, {'end': 1986.848, 'text': 'So make that very, very clear.', 'start': 1985.587, 'duration': 1.261}, {'end': 1991.552, 'text': 'Otherwise you will not get a job and the people who read your code will make fun of you and laugh at you.', 'start': 1987.409, 'duration': 4.143}, {'end': 1994.753, 'text': 'So just be careful about that.', 'start': 1993.052, 'duration': 1.701}, {'end': 1999.075, 'text': 'All right, in this video, we just wanted to cover functions.', 'start': 1995.913, 'duration': 3.162}, {'end': 2005.058, 'text': "We wanted to cover functions with multiple arguments and we're gonna leave it off at that.", 'start': 1999.135, 'duration': 5.923}, {'end': 2007.659, 'text': 'I hope that you enjoyed functions.', 'start': 2005.438, 'duration': 2.221}, {'end': 2010.18, 'text': 'You kind of understood the basics of how they work.', 'start': 2007.699, 'duration': 2.481}, {'end': 2011.461, 'text': "That's it for this video.", 'start': 2010.36, 'duration': 1.101}, {'end': 2026.966, 'text': 'Welcome back to the JavaScript crash course, we left off talking about functions and how functions can take in multiple arguments.', 'start': 2017.895, 'duration': 9.071}, {'end': 2038.039, 'text': "Now, what we want to be able to do next is what if things have to be done multiple times? How do we do that? Well, let's talk about while loops.", 'start': 2027.026, 'duration': 11.013}, {'end': 2043.143, 'text': "And then after that, we're going to talk about how for loops work.", 'start': 2039.522, 'duration': 3.621}, {'end': 2046.805, 'text': "So all right, let's talk about while loops.", 'start': 2043.984, 'duration': 2.821}, {'end': 2049.246, 'text': 'So say we have some number.', 'start': 2047.785, 'duration': 1.461}, {'end': 2053.027, 'text': "And I'm going to put this number to zero.", 'start': 2049.266, 'duration': 3.761}], 'summary': 'Covered functions with multiple arguments in javascript. introduced while loops.', 'duration': 75.446, 'max_score': 1977.581, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA1977581.jpg'}, {'end': 2222.867, 'src': 'embed', 'start': 2184.518, 'weight': 14, 'content': [{'end': 2188.154, 'text': "Now we're going to do for loop.", 'start': 2184.518, 'duration': 3.636}, {'end': 2194.556, 'text': "So what I'll do is I'm gonna write for, and I'll say var num.", 'start': 2188.614, 'duration': 5.942}, {'end': 2201.899, 'text': 'And instead of var, the better habit I want you guys to get into starting now is actually let.', 'start': 2196.557, 'duration': 5.342}, {'end': 2210.122, 'text': 'So start writing let rather than var wherever you, probably is.', 'start': 2202.819, 'duration': 7.303}, {'end': 2212.023, 'text': "Let's actually cut that part out.", 'start': 2210.802, 'duration': 1.221}, {'end': 2215.924, 'text': "So for, and let's just write let off.", 'start': 2212.763, 'duration': 3.161}, {'end': 2222.867, 'text': 'Four You can say var or let.', 'start': 2217.756, 'duration': 5.111}], 'summary': "Encouraging use of 'let' instead of 'var' in for loops.", 'duration': 38.349, 'max_score': 2184.518, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA2184518.jpg'}, {'end': 2443.364, 'src': 'embed', 'start': 2380.193, 'weight': 15, 'content': [{'end': 2387.434, 'text': 'Okay, so for example, if I did var, your age is equal to 18.', 'start': 2380.193, 'duration': 7.241}, {'end': 2388.494, 'text': "Well, that's a number.", 'start': 2387.434, 'duration': 1.06}, {'end': 2406.854, 'text': "And we can start getting into the practice of using let, if I did let your name equal Bob, That's a string.", 'start': 2392.855, 'duration': 13.999}, {'end': 2429.101, 'text': 'I can also do let your name equal Jane, and then last name be Doe.', 'start': 2412.495, 'duration': 16.606}, {'end': 2435.798, 'text': 'This is an object in JavaScript.', 'start': 2432.614, 'duration': 3.184}, {'end': 2443.364, 'text': 'So these are examples.', 'start': 2441.963, 'duration': 1.401}], 'summary': 'Javascript examples with var, let, and object.', 'duration': 63.171, 'max_score': 2380.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA2380193.jpg'}], 'start': 208.928, 'title': 'Javascript fundamentals', 'summary': 'Provides a javascript crash course tutorial, covering installation of visual studio code, creating/ linking javascript files, working with variables, manipulating html elements, dealing with numbers, creating/calling functions, handling multiple function arguments, using loops, and understanding data types in javascript.', 'chapters': [{'end': 900.813, 'start': 208.928, 'title': 'Javascript crash course tutorial', 'summary': 'Provides a javascript crash course tutorial covering the installation of visual studio code, creating and linking javascript files, running javascript in the browser, working with variables, and manipulating html elements using javascript.', 'duration': 691.885, 'highlights': ['The tutorial covers the installation of Visual Studio Code and the creation of a folder named JavaScript crash course. The chapter instructs to install Visual Studio Code and create a folder named JavaScript crash course, emphasizing the initial setup process.', 'Instructions are provided for creating an index.html file, writing JavaScript code within script tags, and running JavaScript in the browser using Chrome dev tools. The tutorial demonstrates creating an index.html file, writing JavaScript code within script tags, and running JavaScript in the browser using Chrome dev tools, ensuring a practical understanding of JavaScript basics.', 'Guidance is given on creating a JavaScript file, linking it to the HTML file, and using comments to annotate code for human readability. The chapter provides guidance on creating a JavaScript file, linking it to the HTML file, and using comments for human-readable code, ensuring comprehensive understanding of JavaScript file management.', 'The tutorial explains the concept of variables, demonstrates storing and logging string and numerical values, and manipulating HTML elements using JavaScript. The tutorial covers the concept of variables, demonstrating storing and logging string and numerical values, and manipulating HTML elements using JavaScript, ensuring a practical understanding of variable usage and HTML manipulation.', 'Instructions are given for prompting user input, storing the input in a variable, and displaying the input on the HTML page, showcasing user interaction with JavaScript. The tutorial provides instructions for prompting user input, storing the input in a variable, and displaying the input on the HTML page, showcasing user interaction with JavaScript for practical application.']}, {'end': 1358.289, 'start': 901.633, 'title': 'Javascript number operations', 'summary': 'Covers the basics of dealing with numbers in javascript, including storing numbers in variables, performing arithmetic operations, incrementing and decrementing numbers, and obtaining remainders, with examples and explanations provided.', 'duration': 456.656, 'highlights': ['You can perform arithmetic operations on numbers in JavaScript, such as multiplication and division, with examples like 5 times 10 resulting in 50 and 50 divided by 5 resulting in 10.', "Numbers in JavaScript can be incremented by one using 'num1 = num1 + 1' or 'num1++', and decremented by one using 'num1 = num1 - 1' or 'num1--', with a demonstration showing the transformation of 10 to 11 and vice versa.", "It is possible to increment or decrement numbers by any desired number in JavaScript, demonstrated through 'num1 += 10', resulting in the transformation of 10 to 20 and then to 30.", 'The chapter also explains how to obtain remainders of numbers in JavaScript, with examples showing the remainder of 10 divided by 5 being 0 and the remainder of 10 divided by 6 being 4.']}, {'end': 1701.955, 'start': 1358.489, 'title': 'Function creation and call', 'summary': 'Explains the creation and calling of functions, emphasizing the steps to create and call a function, and demonstrating the creation of a function that takes in a name and returns a personalized greeting.', 'duration': 343.466, 'highlights': ['The chapter explains the creation and calling of functions, emphasizing the steps to create and call a function. It mentions the two steps for functions - creating a function and then calling it.', "Demonstrates the creation of a function that takes in a name and returns a personalized greeting. It shows the creation of a function 'greeting' that prompts for a name and returns a personalized greeting, exemplifying with 'hello Kazi'.", "Emphasizes the importance of providing input to a function in the form of arguments. It stresses the need for functions to have input in the form of arguments, demonstrating that the function won't run without the required information."]}, {'end': 2026.966, 'start': 1704.677, 'title': 'Function with multiple arguments', 'summary': 'Covers writing a greeting function that takes in an input, demonstrating adding two numbers together, and the importance of writing clean code by making function dependencies clear, concluding with an overview of functions with multiple arguments in javascript.', 'duration': 322.289, 'highlights': ['Writing a greeting function that takes in an input The transcript explains the process of writing a greeting function that takes in an input, demonstrating the use of input for personalized output.', 'Demonstrating adding two numbers together in a function The transcript provides an example of adding two numbers together in a function, showcasing the process of defining, calling, and using arguments within the function.', 'Importance of writing clean code by making function dependencies clear The importance of writing clean code by making function dependencies clear is emphasized, with the warning that unclear code may lead to negative consequences such as job rejections and ridicule from peers.', "Overview of functions with multiple arguments in JavaScript The chapter concludes with an overview of functions with multiple arguments in JavaScript, summarizing the covered topics and expressing hope for the audience's understanding of the basics of function usage."]}, {'end': 2469.644, 'start': 2027.026, 'title': 'Loops and data types in javascript', 'summary': 'Explains while loops and for loops, demonstrating a while loop that counts from 1 to 100 and a for loop that achieves the same result, emphasizing the importance of using let over var and then introduces different data types in javascript.', 'duration': 442.618, 'highlights': ['The chapter explains while loops and for loops The transcript introduces the concept of while loops and for loops in JavaScript, demonstrating the use of a while loop that counts from 1 to 100 and a for loop that achieves the same result.', 'Demonstrating a while loop that counts from 1 to 100 The transcript provides a detailed explanation of a while loop that iterates from 1 to 100 and stops when the number reaches 100.', "Emphasizing the importance of using let over var The speaker emphasizes the importance of using 'let' instead of 'var' when declaring variables in JavaScript, highlighting that 'let' is the preferred choice for better code readability and avoiding potential issues.", "Introducing different data types in JavaScript The transcript introduces various data types in JavaScript, including numbers, strings, and objects, providing examples and encouraging the use of 'let' for variable declaration."]}], 'duration': 2260.716, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA208928.jpg', 'highlights': ['The tutorial covers the installation of Visual Studio Code and the creation of a folder named JavaScript crash course.', 'Instructions are provided for creating an index.html file, writing JavaScript code within script tags, and running JavaScript in the browser using Chrome dev tools.', 'Guidance is given on creating a JavaScript file, linking it to the HTML file, and using comments to annotate code for human readability.', 'The tutorial explains the concept of variables, demonstrates storing and logging string and numerical values, and manipulating HTML elements using JavaScript.', 'Instructions are given for prompting user input, storing the input in a variable, and displaying the input on the HTML page.', 'You can perform arithmetic operations on numbers in JavaScript, such as multiplication and division, with examples like 5 times 10 resulting in 50 and 50 divided by 5 resulting in 10.', 'The chapter also explains how to obtain remainders of numbers in JavaScript, with examples showing the remainder of 10 divided by 5 being 0 and the remainder of 10 divided by 6 being 4.', 'The chapter explains the creation and calling of functions, emphasizing the steps to create and call a function.', 'Demonstrates the creation of a function that takes in a name and returns a personalized greeting.', 'Emphasizes the importance of providing input to a function in the form of arguments.', 'Writing a greeting function that takes in an input The transcript explains the process of writing a greeting function that takes in an input, demonstrating the use of input for personalized output.', 'Importance of writing clean code by making function dependencies clear The importance of writing clean code by making function dependencies clear is emphasized, with the warning that unclear code may lead to negative consequences such as job rejections and ridicule from peers.', "Overview of functions with multiple arguments in JavaScript The chapter concludes with an overview of functions with multiple arguments in JavaScript, summarizing the covered topics and expressing hope for the audience's understanding of the basics of function usage.", 'The chapter explains while loops and for loops The transcript introduces the concept of while loops and for loops in JavaScript, demonstrating the use of a while loop that counts from 1 to 100 and a for loop that achieves the same result.', "Emphasizing the importance of using 'let' instead of 'var' when declaring variables in JavaScript, highlighting that 'let' is the preferred choice for better code readability and avoiding potential issues.", "Introducing different data types in JavaScript The transcript introduces various data types in JavaScript, including numbers, strings, and objects, providing examples and encouraging the use of 'let' for variable declaration."]}, {'end': 5463.356, 'segs': [{'end': 2573.821, 'src': 'embed', 'start': 2541.147, 'weight': 5, 'content': [{'end': 2544.69, 'text': 'And if you check the type of this, this will give you back an undefined.', 'start': 2541.147, 'duration': 3.543}, {'end': 2546.532, 'text': 'So you can also have an undefined.', 'start': 2544.71, 'duration': 1.822}, {'end': 2554.558, 'text': 'Another thing you can have is a null.', 'start': 2546.552, 'duration': 8.006}, {'end': 2558.521, 'text': 'And null is just null.', 'start': 2556.52, 'duration': 2.001}, {'end': 2563.846, 'text': 'Okay Great.', 'start': 2560.363, 'duration': 3.483}, {'end': 2569.458, 'text': 'So these are the different data types we have in JavaScript.', 'start': 2565.956, 'duration': 3.502}, {'end': 2573.821, 'text': "If you're coming from another language, this is called a dictionary and a list in Python.", 'start': 2569.498, 'duration': 4.323}], 'summary': 'Javascript has undefined and null data types. in python, they are called dictionary and list.', 'duration': 32.674, 'max_score': 2541.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA2541147.jpg'}, {'end': 2618.775, 'src': 'embed', 'start': 2594.11, 'weight': 4, 'content': [{'end': 2602.932, 'text': "We'll touch more in the next videos on how to actually use these data types and what do we do with them and what do we use them for.", 'start': 2594.11, 'duration': 8.822}, {'end': 2606.232, 'text': "That's it for this video, I'll see you in the next video.", 'start': 2603.452, 'duration': 2.78}, {'end': 2618.775, 'text': "Welcome back, let's talk about strings in JavaScript and the common methods that you can use with strings.", 'start': 2613.494, 'duration': 5.281}], 'summary': 'Javascript tutorial: next videos will cover using data types and common string methods.', 'duration': 24.665, 'max_score': 2594.11, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA2594110.jpg'}, {'end': 3140.854, 'src': 'embed', 'start': 3106.279, 'weight': 0, 'content': [{'end': 3110.901, 'text': 'So this is split by character.', 'start': 3106.279, 'duration': 4.622}, {'end': 3112.362, 'text': 'All right.', 'start': 3110.921, 'duration': 1.441}, {'end': 3116.744, 'text': 'Great Okay.', 'start': 3114.463, 'duration': 2.281}, {'end': 3121.166, 'text': 'So these are the common string operations that I wanted to share with you in this video.', 'start': 3116.864, 'duration': 4.302}, {'end': 3121.747, 'text': "That's it.", 'start': 3121.327, 'duration': 0.42}, {'end': 3122.627, 'text': 'Thank you for watching.', 'start': 3121.787, 'duration': 0.84}, {'end': 3125.969, 'text': "As always, I love your face, and I'll see you in the next video.", 'start': 3122.727, 'duration': 3.242}, {'end': 3134.447, 'text': 'Welcome back.', 'start': 3133.726, 'duration': 0.721}, {'end': 3138.652, 'text': "Let's talk about arrays in JavaScript.", 'start': 3134.547, 'duration': 4.105}, {'end': 3140.854, 'text': 'So this is another data type.', 'start': 3139.052, 'duration': 1.802}], 'summary': 'Introduction to common string operations and javascript arrays.', 'duration': 34.575, 'max_score': 3106.279, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA3106279.jpg'}, {'end': 3239.262, 'src': 'embed', 'start': 3201.777, 'weight': 8, 'content': [{'end': 3212.674, 'text': "So two ways to create the same array that you're looking at currently, all right? This is just the declaration.", 'start': 3201.777, 'duration': 10.897}, {'end': 3219.376, 'text': "Now let's start getting the values of this array.", 'start': 3215.195, 'duration': 4.181}, {'end': 3222.797, 'text': "So I'll do alert one and I'll run this.", 'start': 3219.396, 'duration': 3.401}, {'end': 3225.918, 'text': 'Oh, fruits has already been declared.', 'start': 3223.918, 'duration': 2}, {'end': 3226.798, 'text': "Let's do fruit.", 'start': 3225.938, 'duration': 0.86}, {'end': 3236.221, 'text': "Fruit says, okay, so let is cool because it goes, hey, you've already declared it once.", 'start': 3229.359, 'duration': 6.862}, {'end': 3239.262, 'text': "So now you can't keep using let and let again.", 'start': 3236.301, 'duration': 2.961}], 'summary': 'Demonstrated the use of let to declare and assign values to arrays in javascript.', 'duration': 37.485, 'max_score': 3201.777, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA3201777.jpg'}, {'end': 3420.418, 'src': 'embed', 'start': 3388.323, 'weight': 2, 'content': [{'end': 3393.927, 'text': 'And all it did is just went through the array of fruits and then just printed out one item at a time.', 'start': 3388.323, 'duration': 5.604}, {'end': 3398.909, 'text': "Now let's talk about array common methods.", 'start': 3395.047, 'duration': 3.862}, {'end': 3404.773, 'text': 'So there are lots of different methods you can do in an array.', 'start': 3402.091, 'duration': 2.682}, {'end': 3408.435, 'text': "And let's just get started with some of them.", 'start': 3406.194, 'duration': 2.241}, {'end': 3420.418, 'text': 'So I can take an array and I can actually convert it to a string and it can essentially turn it to the opposite of what split functionality does.', 'start': 3410.034, 'duration': 10.384}], 'summary': 'The transcript covers array methods and conversion to string.', 'duration': 32.095, 'max_score': 3388.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA3388323.jpg'}, {'end': 3728.219, 'src': 'heatmap', 'start': 3438.544, 'weight': 1, 'content': [{'end': 3440.005, 'text': 'Put a space there and refresh.', 'start': 3438.544, 'duration': 1.461}, {'end': 3442.105, 'text': "Or we don't need to put a space there.", 'start': 3440.945, 'duration': 1.16}, {'end': 3445.706, 'text': 'So to console.log, you can give it multiple arguments.', 'start': 3442.525, 'duration': 3.181}, {'end': 3450.188, 'text': "Here I've given it, I'm saying print this and then print this right next to it.", 'start': 3445.847, 'duration': 4.341}, {'end': 3455.07, 'text': "That way in one box you'll see these two print statements.", 'start': 3451.228, 'duration': 3.842}, {'end': 3458.791, 'text': 'And maybe I can make this bigger.', 'start': 3457.13, 'duration': 1.661}, {'end': 3466.845, 'text': 'So you can see these two print statements right here.', 'start': 3463.483, 'duration': 3.362}, {'end': 3469.367, 'text': 'One is to string and then pair apple, orange, pineapples.', 'start': 3466.965, 'duration': 2.402}, {'end': 3471.048, 'text': 'All right.', 'start': 3470.687, 'duration': 0.361}, {'end': 3478.192, 'text': 'You also have join.', 'start': 3474.93, 'duration': 3.262}, {'end': 3485.696, 'text': 'You can do join.', 'start': 3484.436, 'duration': 1.26}, {'end': 3488.798, 'text': 'And you can join it by something.', 'start': 3487.377, 'duration': 1.421}, {'end': 3489.959, 'text': 'So I can say that.', 'start': 3488.898, 'duration': 1.061}, {'end': 3494.655, 'text': 'Now when I refresh it, look what it does.', 'start': 3492.813, 'duration': 1.842}, {'end': 3498.581, 'text': 'It takes that array and each item and it joins it by and hyphen.', 'start': 3495.196, 'duration': 3.385}, {'end': 3504.829, 'text': 'I can also put a star here if I wanted to.', 'start': 3501.084, 'duration': 3.745}, {'end': 3518.365, 'text': 'I can pop an item, meaning that I can pop the last item.', 'start': 3514.443, 'duration': 3.922}, {'end': 3520.466, 'text': "So I'll show you what that does.", 'start': 3518.445, 'duration': 2.021}, {'end': 3524.389, 'text': "So I'll print out two different things.", 'start': 3520.586, 'duration': 3.803}, {'end': 3530.072, 'text': "So I'll say pop, and then here I'll also say print fruits.", 'start': 3526.21, 'duration': 3.862}, {'end': 3535.267, 'text': 'okay, and here i also write fruits.', 'start': 3531.443, 'duration': 3.824}, {'end': 3538.109, 'text': "so first i'm going to print out what fruits was.", 'start': 3535.267, 'duration': 2.842}, {'end': 3539.35, 'text': 'then what pop does?', 'start': 3538.109, 'duration': 1.241}, {'end': 3541.532, 'text': 'is it pops off the last element.', 'start': 3539.35, 'duration': 2.182}, {'end': 3546.917, 'text': 'so from our grocery list is going to pop off pineapples.', 'start': 3541.532, 'duration': 5.385}, {'end': 3553.483, 'text': 'then when i call fruits again, it will just read banana, apple orange.', 'start': 3546.917, 'duration': 6.566}, {'end': 3560.412, 'text': 'My bad pair, apple orange, because we changed the zeroth item to pair.', 'start': 3554.727, 'duration': 5.685}, {'end': 3564.936, 'text': 'So you can see the pineapples has been popped off.', 'start': 3562.013, 'duration': 2.923}, {'end': 3571.801, 'text': 'So now let me remove this line here and run it.', 'start': 3567.658, 'duration': 4.143}, {'end': 3577.526, 'text': 'So it popped off pineapples, and when it pops it off, it also shows and returns that.', 'start': 3572.782, 'duration': 4.744}, {'end': 3580.869, 'text': 'So when you do fruits.pop, it pops it off and returns it to you.', 'start': 3577.546, 'duration': 3.323}, {'end': 3587.787, 'text': 'And now the list has been changed permanently after you call .', 'start': 3582.802, 'duration': 4.985}, {'end': 3594.733, 'text': 'pop Another common one is to push.', 'start': 3587.787, 'duration': 6.946}, {'end': 3598.657, 'text': 'Push actually appends something, which is a really common thing to do.', 'start': 3595.034, 'duration': 3.623}, {'end': 3600.319, 'text': "So we'll do that.", 'start': 3599.458, 'duration': 0.861}, {'end': 3607.806, 'text': "We'll print fruits after pushing onto it blackberries.", 'start': 3600.339, 'duration': 7.467}, {'end': 3617.104, 'text': "and let's refresh and you will see that I have pushed.", 'start': 3609.881, 'duration': 7.223}, {'end': 3631.81, 'text': "and when you push it, I'm doing the act of pushing this and then, when I print fruits, it actually returns to me pear, apple, orange blackberries.", 'start': 3617.104, 'duration': 14.706}, {'end': 3640.008, 'text': 'This deletes items, removes last item, pens.', 'start': 3632.55, 'duration': 7.458}, {'end': 3655.439, 'text': "Okay Another thing which is the same as essentially the push method, but it's kind of a clever way of doing things is I can do fruits.", 'start': 3640.028, 'duration': 15.411}, {'end': 3660.102, 'text': 'And I can get the fruits dot length here.', 'start': 3658.141, 'duration': 1.961}, {'end': 3663.199, 'text': 'which is gonna say six.', 'start': 3661.618, 'duration': 1.581}, {'end': 3670.822, 'text': "So, essentially it's the same way of saying at fruits equals six or sorry, fruits equals, because there are four items in here.", 'start': 3663.479, 'duration': 7.343}, {'end': 3675.003, 'text': 'right?. There are four items inside of here.', 'start': 3670.822, 'duration': 4.181}, {'end': 3683.867, 'text': "So if I did fruit of four, okay, let's just start printing this out, console.log fruits of four.", 'start': 3675.524, 'duration': 8.343}, {'end': 3691.39, 'text': "It should give me back undefined, because there's nothing there, but if I do fruits of three, it should give me back blackberries.", 'start': 3686.168, 'duration': 5.222}, {'end': 3708.839, 'text': "On fruits of four, what we are going to do is I'm going to add new fruit like so.", 'start': 3693.573, 'duration': 15.266}, {'end': 3715.742, 'text': "And then I'm simply going to print that out.", 'start': 3713.561, 'duration': 2.181}, {'end': 3728.219, 'text': "When I run it, you'll see that all I've done is essentially added a new fruit item.", 'start': 3722.176, 'duration': 6.043}], 'summary': 'The transcript discusses javascript array methods like pop, push, and join, showcasing their usage and effects with code examples.', 'duration': 289.675, 'max_score': 3438.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA3438544.jpg'}, {'end': 4241.39, 'src': 'embed', 'start': 4213.889, 'weight': 1, 'content': [{'end': 4227.279, 'text': 'So I loop from zero to 10 or zero up until nine and I keep pushing those numbers to this array.', 'start': 4213.889, 'duration': 13.39}, {'end': 4232.883, 'text': 'So basically this array at the end will look like the following, zero to nine.', 'start': 4227.68, 'duration': 5.203}, {'end': 4238.307, 'text': "If I wanted to make sure I added the 10th element in there, I'll just do less than or equal to.", 'start': 4234.144, 'duration': 4.163}, {'end': 4241.39, 'text': 'If I refresh, we have zero through 10 like so.', 'start': 4238.527, 'duration': 2.863}], 'summary': 'Loop from 0 to 10, push to array, results in 0-10.', 'duration': 27.501, 'max_score': 4213.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA4213889.jpg'}, {'end': 4541.39, 'src': 'embed', 'start': 4491.915, 'weight': 9, 'content': [{'end': 4495.837, 'text': 'So this is how you have keys and you can access them from this object.', 'start': 4491.915, 'duration': 3.922}, {'end': 4497.398, 'text': 'Everything has a value.', 'start': 4496.518, 'duration': 0.88}, {'end': 4499.44, 'text': 'You can change the value using this.', 'start': 4497.498, 'duration': 1.942}, {'end': 4500.4, 'text': 'You can increment it.', 'start': 4499.46, 'duration': 0.94}, {'end': 4508.266, 'text': 'For example, I can do student.age and I can just hit plus plus.', 'start': 4500.44, 'duration': 7.826}, {'end': 4517.736, 'text': "And now if I read it out, it'll be 26 instead of 25.", 'start': 4511.693, 'duration': 6.043}, {'end': 4519.357, 'text': 'So you can increment things like that.', 'start': 4517.736, 'duration': 1.621}, {'end': 4526.201, 'text': 'And another thing I want to show you in objects is you can actually do a little bit of object oriented programming.', 'start': 4520.838, 'duration': 5.363}, {'end': 4529.463, 'text': 'And this is how you actually do object oriented programming in JavaScript.', 'start': 4526.321, 'duration': 3.142}, {'end': 4539.389, 'text': 'So I can go here and I can say I can create a function that basically just reads out info about the student.', 'start': 4529.503, 'duration': 9.886}, {'end': 4541.39, 'text': "So let's call it student info.", 'start': 4539.649, 'duration': 1.741}], 'summary': 'Access, change, and increment values in javascript objects; apply object-oriented programming.', 'duration': 49.475, 'max_score': 4491.915, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA4491915.jpg'}, {'end': 4758.416, 'src': 'embed', 'start': 4728.248, 'weight': 12, 'content': [{'end': 4735.537, 'text': 'So my target demographic most people who watch my video and then the people who become my customers, are generally between the ages of 18 to 35..', 'start': 4728.248, 'duration': 7.289}, {'end': 4736.418, 'text': '18 to 35 is my target demographic.', 'start': 4735.537, 'duration': 0.881}, {'end': 4755.276, 'text': 'I want to be able to write in line a statement of code that represents this idea.', 'start': 4750.675, 'duration': 4.601}, {'end': 4758.416, 'text': 'I can do that by doing something like this.', 'start': 4756.256, 'duration': 2.16}], 'summary': 'Target demographic is 18-35; aiming to represent this in code.', 'duration': 30.168, 'max_score': 4728.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA4728248.jpg'}, {'end': 4942.546, 'src': 'embed', 'start': 4897.464, 'weight': 13, 'content': [{'end': 4898.305, 'text': 'Print here as well.', 'start': 4897.464, 'duration': 0.841}, {'end': 4899.085, 'text': "Let's refresh.", 'start': 4898.325, 'duration': 0.76}, {'end': 4904.089, 'text': "If we are 24, it says we're part of the target demo.", 'start': 4899.826, 'duration': 4.263}, {'end': 4909.293, 'text': 'If we are 36, it says this is not the audience.', 'start': 4904.37, 'duration': 4.923}, {'end': 4915.278, 'text': "That's how if and else statements work.", 'start': 4911.815, 'duration': 3.463}, {'end': 4922.577, 'text': "Now let's talk also about how switch statements work in JavaScript.", 'start': 4917.034, 'duration': 5.543}, {'end': 4932.341, 'text': 'So say that if every day was a weekday.', 'start': 4925.038, 'duration': 7.303}, {'end': 4937.203, 'text': 'So how do we differentiate?', 'start': 4935.302, 'duration': 1.901}, {'end': 4942.546, 'text': 'differentiate between weekday versus weekend?', 'start': 4937.203, 'duration': 5.343}], 'summary': 'Javascript lesson covers if/else and switch statements for audience demographics and weekdays.', 'duration': 45.082, 'max_score': 4897.464, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA4897464.jpg'}, {'end': 5031.31, 'src': 'embed', 'start': 5004.931, 'weight': 11, 'content': [{'end': 5008.568, 'text': 'And which would be a weekday.', 'start': 5004.931, 'duration': 3.637}, {'end': 5018.498, 'text': 'All right, so Friday, Saturday, Sunday should be the weekend, and everything else, Monday, Tuesday, Wednesday, Thursday should be the weekday.', 'start': 5010.03, 'duration': 8.468}, {'end': 5021.781, 'text': 'Well, we can use switch cases in that.', 'start': 5018.538, 'duration': 3.243}, {'end': 5028.767, 'text': "Instead of writing a bunch of if-then statements, which would take forever, it'd be way easier if we wrote switch.", 'start': 5021.821, 'duration': 6.946}, {'end': 5031.31, 'text': 'Say we have switch here.', 'start': 5030.229, 'duration': 1.081}], 'summary': 'Proposing to define friday, saturday, and sunday as weekend and monday, tuesday, wednesday, thursday as weekdays using switch cases.', 'duration': 26.379, 'max_score': 5004.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5004931.jpg'}], 'start': 2469.644, 'title': 'Javascript fundamentals', 'summary': 'Introduces javascript data types, strings, arrays, objects, conditionals, and control flow, with coverage of common operations and methods, targeting a demographic of 18 to 35, and practical examples demonstrating their functionality and usage.', 'chapters': [{'end': 2592.192, 'start': 2469.644, 'title': 'Javascript data types and structures', 'summary': 'Introduces javascript data types such as numbers, strings, objects, boolean, arrays, undefined, and null, comparing them to similar data structures in python and other programming languages.', 'duration': 122.548, 'highlights': ['The chapter introduces JavaScript data types, including numbers, strings, objects, Boolean, arrays, undefined, and null. It provides an overview of various data types in JavaScript, including examples of each type.', 'Comparison of JavaScript data types with similar data structures in Python and other programming languages is discussed. The chapter compares JavaScript data types like objects and arrays to the corresponding data structures in Python and other programming languages.', 'Explanation of data types such as objects and arrays is provided, including their functionality and usage. It explains the functionality of data types such as objects and arrays, highlighting their ability to hold multiple values and their differences from other data types.']}, {'end': 3104.998, 'start': 2594.11, 'title': 'Javascript strings and common methods', 'summary': 'Covers the common methods for manipulating strings in javascript, including adding new lines, getting string length, finding index of a character, slicing, replacing, converting to uppercase and lowercase, concatenating strings, and splitting strings, with practical examples demonstrating their functionality and usage.', 'duration': 510.888, 'highlights': ['The chapter covers the common methods for manipulating strings in JavaScript Describes the main focus of the chapter.', 'including adding new lines, getting string length, finding index of a character, slicing, replacing, converting to uppercase and lowercase, concatenating strings, and splitting strings Lists the specific common methods covered in the chapter.', 'practical examples demonstrating their functionality and usage Emphasizes the presence of practical examples in the chapter.']}, {'end': 4241.39, 'start': 3106.279, 'title': 'Javascript arrays and common operations', 'summary': 'Covers common array operations in javascript, including creation, accessing values, changing values, looping through arrays, and using common array methods like tostring, join, pop, push, shift, unshift, concat, slice, reverse, sort, and adding elements to an array through a loop.', 'duration': 1135.111, 'highlights': ['The chapter covers common array operations in JavaScript, including creation, accessing values, changing values, looping through arrays, and using common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, sort, and adding elements to an array through a loop. Covers a comprehensive overview of common array operations in JavaScript, including creation, accessing values, changing values, looping through arrays, and using common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, sort, and adding elements to an array through a loop.', 'Shows two ways to create an array in JavaScript and demonstrates accessing and changing values in the array. Demonstrates two ways to create an array in JavaScript and shows how to access and change values within the array.', "Demonstrates looping through an array and printing out its values using a 'for' loop. Demonstrates looping through an array and printing out its values using a 'for' loop.", 'Explains and demonstrates common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, and sort. Explains and demonstrates various common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, and sort.', 'Shows how to add elements to an array through a loop, resulting in an array containing numbers from 0 to 10. Demonstrates the process of adding elements to an array through a loop, resulting in an array containing numbers from 0 to 10.']}, {'end': 4687.303, 'start': 4242.25, 'title': 'Javascript objects basics', 'summary': 'Covers essential methods and ideas behind javascript objects, including creating, accessing, modifying, and utilizing object-oriented programming, with examples and explanations.', 'duration': 445.053, 'highlights': ['The chapter explains creating and accessing objects, including adding and modifying attributes, such as age and height, and changing property values.', 'It demonstrates object-oriented programming in JavaScript, showcasing how to define functions within objects to retrieve and display object information.', 'The chapter addresses the inability to access objects using indices, as well as incrementing values within objects, with an example of age incrementation from 25 to 26.', 'It highlights the deprecation of certain features in JavaScript, such as accessing objects using indices and assigning values directly, providing cautionary advice to avoid outdated practices.']}, {'end': 5463.356, 'start': 4687.323, 'title': 'Javascript conditionals & control flow', 'summary': 'Introduces conditionals and control flow in javascript, targeting a demographic of 18 to 35, demonstrating if-else statements and switch cases to determine weekday or weekend based on the day input, showcasing the simplicity and efficiency of switch cases over multiple if-else statements.', 'duration': 776.033, 'highlights': ['The target demographic for the content is people between the ages of 18 to 35, representing the potential customers.', "Demonstrates the use of if-else statements to determine if a person's age falls within the defined demographic, with examples of how the code executes based on the input age.", 'Explains the concept of switch cases to distinguish between weekdays and weekends based on the input day, showcasing the simplicity and efficiency of switch cases over multiple if-else statements.']}], 'duration': 2993.712, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA2469644.jpg', 'highlights': ['Covers common array operations in JavaScript, including creation, accessing values, changing values, looping through arrays, and using common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, sort, and adding elements to an array through a loop.', 'Demonstrates the process of adding elements to an array through a loop, resulting in an array containing numbers from 0 to 10.', 'Explains and demonstrates common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, and sort.', "Demonstrates looping through an array and printing out its values using a 'for' loop.", 'The chapter covers the common methods for manipulating strings in JavaScript, including adding new lines, getting string length, finding index of a character, slicing, replacing, converting to uppercase and lowercase, concatenating strings, and splitting strings.', 'The chapter introduces JavaScript data types, including numbers, strings, objects, Boolean, arrays, undefined, and null. It provides an overview of various data types in JavaScript, including examples of each type.', 'Demonstrates the main focus of the chapter with practical examples demonstrating the functionality and usage of common methods for manipulating strings in JavaScript.', 'Explains the functionality of data types such as objects and arrays, highlighting their ability to hold multiple values and their differences from other data types.', 'Demonstrates two ways to create an array in JavaScript and shows how to access and change values within the array.', 'The chapter explains creating and accessing objects, including adding and modifying attributes, such as age and height, and changing property values.', 'Demonstrates object-oriented programming in JavaScript, showcasing how to define functions within objects to retrieve and display object information.', 'Explains the concept of switch cases to distinguish between weekdays and weekends based on the input day, showcasing the simplicity and efficiency of switch cases over multiple if-else statements.', 'The target demographic for the content is people between the ages of 18 to 35, representing the potential customers.', "Demonstrates the use of if-else statements to determine if a person's age falls within the defined demographic, with examples of how the code executes based on the input age."]}, {'end': 6962.063, 'segs': [{'end': 5529.232, 'src': 'embed', 'start': 5497.757, 'weight': 0, 'content': [{'end': 5500.778, 'text': 'It stands for JavaScript Object Notation.', 'start': 5497.757, 'duration': 3.021}, {'end': 5507.822, 'text': "Generally, it's used for APIs to carry information that's very, very lightweight, so APIs and configurations.", 'start': 5501.378, 'duration': 6.444}, {'end': 5510.863, 'text': 'And that is all the theory you need to know.', 'start': 5508.762, 'duration': 2.101}, {'end': 5516.466, 'text': "Now let's get into how it actually works, and we'll just put it to a test.", 'start': 5511.003, 'duration': 5.463}, {'end': 5521.388, 'text': "Now generally, what it looks like is essentially it's an array with objects inside of it.", 'start': 5517.066, 'duration': 4.322}, {'end': 5523.349, 'text': 'in JavaScript.', 'start': 5522.629, 'duration': 0.72}, {'end': 5529.232, 'text': "How you would think about it in the Python world is that it's a list with dictionaries inside of it.", 'start': 5523.509, 'duration': 5.723}], 'summary': "Json is used for lightweight api and configuration data. it's an array with objects in javascript, similar to a list with dictionaries in python.", 'duration': 31.475, 'max_score': 5497.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5497757.jpg'}, {'end': 5735.079, 'src': 'embed', 'start': 5705.948, 'weight': 2, 'content': [{'end': 5715.736, 'text': "Now, in order to represent this like an actual array when we get it, what I'm going to do is I'm going to parse this as a string.", 'start': 5705.948, 'duration': 9.788}, {'end': 5719.977, 'text': "I'm gonna turn this entire thing into a string.", 'start': 5717.355, 'duration': 2.622}, {'end': 5722.638, 'text': 'Now when I hit refresh, you should just get a string.', 'start': 5720.457, 'duration': 2.181}, {'end': 5724.74, 'text': 'This is what a JSON object looks like.', 'start': 5722.658, 'duration': 2.082}, {'end': 5735.079, 'text': 'All you have to do to deal with this is you gotta take that, so you gotta do JSON, dot parse.', 'start': 5726.641, 'duration': 8.438}], 'summary': 'Parsing array data as a string to create a json object.', 'duration': 29.131, 'max_score': 5705.948, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5705948.jpg'}, {'end': 5844.242, 'src': 'embed', 'start': 5818.928, 'weight': 3, 'content': [{'end': 5826.61, 'text': "So we're gonna be starting from complete scratch, okay? So if you look at over onto the screen, cue that screen up right now.", 'start': 5818.928, 'duration': 7.682}, {'end': 5831.817, 'text': "It's empty, okay? But this is what we want it to look like ultimately.", 'start': 5827.495, 'duration': 4.322}, {'end': 5837.319, 'text': 'So challenge one, challenge two, three, four, five, blackjack, blah, blah, blah.', 'start': 5831.977, 'duration': 5.342}, {'end': 5844.242, 'text': "We're gonna start off with challenge one in this video, okay? And we're just gonna work and figure out how to actually do that.", 'start': 5837.659, 'duration': 6.583}], 'summary': 'Starting from scratch to create challenges for blackjack game.', 'duration': 25.314, 'max_score': 5818.928, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5818928.jpg'}, {'end': 5885.098, 'src': 'embed', 'start': 5858.147, 'weight': 4, 'content': [{'end': 5866.333, 'text': "once we're actually working on this challenge, you'll you'll see how you know each border is supposed to represent, like a div or a container,", 'start': 5858.147, 'duration': 8.186}, {'end': 5869.636, 'text': "and if you don't know what the heck that is, don't worry, you'll learn.", 'start': 5866.333, 'duration': 3.303}, {'end': 5871.717, 'text': "um, and i'll guide you through the process.", 'start': 5869.636, 'duration': 2.081}, {'end': 5878.372, 'text': "okay, so the first thing we're gonna do is just add the HTML content, okay?", 'start': 5871.717, 'duration': 6.655}, {'end': 5885.098, 'text': "So where it says challenge one, your age and days, and maybe the click me button and the reset button, and we'll go from there, okay?", 'start': 5878.392, 'duration': 6.706}], 'summary': 'Guidance on adding html content for challenge 1.', 'duration': 26.951, 'max_score': 5858.147, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5858147.jpg'}, {'end': 5961.769, 'src': 'embed', 'start': 5930.874, 'weight': 6, 'content': [{'end': 5935.636, 'text': "And I don't want to just show you JavaScript by itself, I can and I will a little bit here and there.", 'start': 5930.874, 'duration': 4.762}, {'end': 5940.979, 'text': 'But my main goal is to show you JavaScript and how it works together with everything else.', 'start': 5935.917, 'duration': 5.062}, {'end': 5944.84, 'text': "Okay So you know, I'll show you a few things in JavaScript right now.", 'start': 5941.039, 'duration': 3.801}, {'end': 5952.925, 'text': "I'll go over to my JavaScript and I'll write something like alert hello.", 'start': 5946.261, 'duration': 6.664}, {'end': 5955.546, 'text': "And I'm gonna hit save.", 'start': 5954.365, 'duration': 1.181}, {'end': 5961.769, 'text': "I'm gonna go back to my index.html file and I'll write my doc tab.", 'start': 5955.586, 'duration': 6.183}], 'summary': 'Javascript will be shown alongside other technologies, with a demo of writing an alert using javascript.', 'duration': 30.895, 'max_score': 5930.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5930874.jpg'}, {'end': 6115.655, 'src': 'embed', 'start': 6090.02, 'weight': 12, 'content': [{'end': 6094.501, 'text': "But I encourage you to use Chrome, because that's what we're gonna be using for this course.", 'start': 6090.02, 'duration': 4.481}, {'end': 6102.089, 'text': "So now let's get started and see how can we add this challenge one your age and days, right? We're gonna just add the HTML content.", 'start': 6096.007, 'duration': 6.082}, {'end': 6106.511, 'text': "I'm just gonna comment on some of the JavaScript and we'll work on the JavaScript part together.", 'start': 6102.39, 'duration': 4.121}, {'end': 6109.773, 'text': "I'm also gonna hide the tab by doing command B.", 'start': 6106.891, 'duration': 2.882}, {'end': 6112.394, 'text': "Okay, I'm gonna hide that little tab right there.", 'start': 6109.773, 'duration': 2.621}, {'end': 6115.655, 'text': "And we're gonna go in our body and we're gonna get started.", 'start': 6113.054, 'duration': 2.601}], 'summary': 'Encourages use of chrome for course, adds html content and javascript comments, hides tab using command b.', 'duration': 25.635, 'max_score': 6090.02, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6090020.jpg'}, {'end': 6296.871, 'src': 'embed', 'start': 6272.276, 'weight': 5, 'content': [{'end': 6280.06, 'text': "Okay And then I'm for this button, I'm going to add class is equal to button button danger like that.", 'start': 6272.276, 'duration': 7.784}, {'end': 6281.961, 'text': 'Okay, hit refresh.', 'start': 6280.08, 'duration': 1.881}, {'end': 6285.983, 'text': 'And you can see now it looks like a nice juicy bootstrap danger button.', 'start': 6282.001, 'duration': 3.982}, {'end': 6288.684, 'text': 'Okay, so you have the blue button, we have the red button.', 'start': 6286.023, 'duration': 2.661}, {'end': 6296.871, 'text': 'Now, what else is going on on this page, right? So on this page, we have all this content nice and centered.', 'start': 6288.724, 'duration': 8.147}], 'summary': 'Added class to button, refreshing showed a bootstrap danger button. page has centered content.', 'duration': 24.595, 'max_score': 6272.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6272276.jpg'}, {'end': 6359.473, 'src': 'embed', 'start': 6320.737, 'weight': 7, 'content': [{'end': 6324.699, 'text': "okay?. I'm gonna put a container here in a second, because what I wanna do?", 'start': 6320.737, 'duration': 3.962}, {'end': 6327.801, 'text': 'I wanna show you guys something called Flexbox, okay?', 'start': 6324.699, 'duration': 3.102}, {'end': 6331.343, 'text': 'And Flexbox makes your life really, really easy.', 'start': 6328.161, 'duration': 3.182}, {'end': 6340.009, 'text': "It's gonna allow you to put things in a nice little grid and organize them instead of how we had to do it before we had Flexboxes.", 'start': 6331.483, 'duration': 8.526}, {'end': 6347.45, 'text': 'you have to use like coordinates and percentages and do a lot of math to create things into their own grids and columns.', 'start': 6340.669, 'duration': 6.781}, {'end': 6355.952, 'text': 'Well, with Flexbox it makes it really easy to put things either in a row or in a column and it just calculates everything for you looks super nice and organized,', 'start': 6347.91, 'duration': 8.042}, {'end': 6359.473, 'text': "okay?. So that's what we're gonna do.", 'start': 6355.952, 'duration': 3.521}], 'summary': 'Introduction to flexbox for easy grid organization and layout. simplifies placement in rows or columns.', 'duration': 38.736, 'max_score': 6320.737, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6320737.jpg'}, {'end': 6647.599, 'src': 'embed', 'start': 6617.239, 'weight': 8, 'content': [{'end': 6621.441, 'text': 'just give it a padding of 10 pixels.', 'start': 6617.239, 'duration': 4.202}, {'end': 6629.785, 'text': "And so now you see, because click me as a div and reset as a div, it's giving it its own space.", 'start': 6622.202, 'duration': 7.583}, {'end': 6638.993, 'text': 'I can also say hey, border, add a one pixel solid black here.', 'start': 6630.465, 'duration': 8.528}, {'end': 6644.076, 'text': 'And so now you can see that the reset and click me are actually their own little thing.', 'start': 6639.573, 'duration': 4.503}, {'end': 6647.599, 'text': 'And even though their own little thing, they have a little padding inside right?', 'start': 6644.737, 'duration': 2.862}], 'summary': "Adding 10 pixels padding creates space for the 'click me' and 'reset' divs. a 1 pixel solid black border further delineates their individual spaces.", 'duration': 30.36, 'max_score': 6617.239, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6617239.jpg'}, {'end': 6801.611, 'src': 'embed', 'start': 6770.271, 'weight': 10, 'content': [{'end': 6773.253, 'text': "Justify content, we'll add a flex wrap.", 'start': 6770.271, 'duration': 2.982}, {'end': 6781.819, 'text': 'Flex wrap will come in handy later on when we have things that need to wrap around or start going to new lines.', 'start': 6774.214, 'duration': 7.605}, {'end': 6789.004, 'text': "So it won't really take too much effect right now, but I'll show you what it does afterward.", 'start': 6782.68, 'duration': 6.324}, {'end': 6792.767, 'text': "And instead of flex end, we're gonna again do space around.", 'start': 6789.065, 'duration': 3.702}, {'end': 6795.289, 'text': 'You can also do space between, space evenly.', 'start': 6793.027, 'duration': 2.262}, {'end': 6801.611, 'text': 'Cool, so our div one is looking somewhat decent.', 'start': 6797.025, 'duration': 4.586}], 'summary': 'Using flex wrap will allow items to wrap around or start new lines, adding flexibility to the layout.', 'duration': 31.34, 'max_score': 6770.271, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6770271.jpg'}], 'start': 5463.416, 'title': 'Learning json and interface creation', 'summary': 'Covers the basics of json for lightweight data representation, its structure as an array with objects, and demonstrates parsing json in javascript. it also covers setting up an interface using html and bootstrap, with a focus on javascript for the module.', 'chapters': [{'end': 5818.448, 'start': 5463.416, 'title': 'Learn json in 5 minutes', 'summary': 'Covers the basics of json, explaining its usage for lightweight data representation, its structure as an array with objects, and demonstrates parsing json in javascript to manipulate and access data.', 'duration': 355.032, 'highlights': ["JSON is used for APIs to carry lightweight information and configurations. JSON is used for APIs and configurations as it is lightweight and efficient, making it suitable for transferring data. It is a key aspect of JSON's usage.", 'JSON structure is an array with objects inside, similar to a list with dictionaries in Python. The structure of JSON involves an array with objects inside, which is comparable to a list with dictionaries in Python. Understanding this structure is fundamental to working with JSON.', 'Demonstrates parsing JSON as a string in JavaScript. The tutorial demonstrates the process of parsing JSON as a string in JavaScript, showing how to manipulate and access the data effectively, providing practical knowledge for dealing with JSON.']}, {'end': 6296.871, 'start': 5818.928, 'title': 'Creating challenge 1 interface', 'summary': 'Covers starting from scratch, setting up the interface, using html to add content and bootstrap to style buttons, with a focus on javascript for the module.', 'duration': 477.943, 'highlights': ['Starting from scratch and setting up the interface. The chapter emphasizes starting from scratch and setting up the interface for challenge one.', 'Using HTML to add content for challenge one. The chapter highlights the process of using HTML to add content for challenge one, including buttons and text.', 'Utilizing Bootstrap to style buttons for a nicer look. The chapter demonstrates the use of Bootstrap to style buttons for a visually appealing interface.', 'Focusing on JavaScript with a module emphasis. The chapter emphasizes a focus on JavaScript for the module, integrating it with other elements.']}, {'end': 6672.257, 'start': 6297.871, 'title': 'Using flexbox for organized layout', 'summary': 'Discusses using flexbox to create organized grid layouts, demonstrating the use of flexbox to easily arrange elements in rows or columns, and adding padding to create spacing between elements.', 'duration': 374.386, 'highlights': ['Demonstrating the use of Flexbox to easily arrange elements in rows or columns Flexbox makes it really easy to put things either in a row or in a column and it just calculates everything for you, making it super nice and organized.', 'Adding padding to create spacing between elements Adding a padding of 10 pixels to each div creates a breathing room between elements, preventing them from being squeezed together.', 'Creating a container class and applying Flexbox to organize elements Creating a container class and applying Flexbox to put things in a nice little grid and organize them, providing a structured and organized layout.']}, {'end': 6962.063, 'start': 6672.557, 'title': 'Flexbox styling and javascript integration', 'summary': 'Discusses the implementation of flexbox styling, including justifying content, flex wrapping, aligning items, and the integration of javascript to add functionality for calculating and displaying age in days.', 'duration': 289.506, 'highlights': ['Flexbox styling and properties such as justify-content, flex-wrap, and align-items are demonstrated for layout manipulation. The chapter covers various flexbox styling properties like justify-content, flex-wrap, and align-items to manipulate the layout.', 'The demonstration includes the utilization of flexbox to create a container for elements, with options to control the direction and order of layout items. The demonstration showcases the use of flexbox to create a container for elements and control the direction and order of layout items using flex-direction and flex-order.', 'The integration of JavaScript is discussed for adding functionality to calculate and display age in days upon clicking a button. The chapter discusses the integration of JavaScript to add functionality for calculating and displaying age in days upon clicking a button.']}], 'duration': 1498.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA5463416.jpg', 'highlights': ['JSON is used for APIs and configurations as it is lightweight and efficient, making it suitable for transferring data.', 'Understanding the structure of JSON, involving an array with objects inside, is fundamental to working with JSON.', 'The tutorial demonstrates the process of parsing JSON as a string in JavaScript, showing how to manipulate and access the data effectively.', 'The chapter emphasizes starting from scratch and setting up the interface for challenge one.', 'The chapter highlights the process of using HTML to add content for challenge one, including buttons and text.', 'The chapter demonstrates the use of Bootstrap to style buttons for a visually appealing interface.', 'The chapter emphasizes a focus on JavaScript for the module, integrating it with other elements.', 'Flexbox makes it really easy to put things either in a row or in a column and it just calculates everything for you, making it super nice and organized.', 'Adding a padding of 10 pixels to each div creates a breathing room between elements, preventing them from being squeezed together.', 'Creating a container class and applying Flexbox to put things in a nice little grid and organize them, providing a structured and organized layout.', 'The chapter covers various flexbox styling properties like justify-content, flex-wrap, and align-items to manipulate the layout.', 'The demonstration showcases the use of flexbox to create a container for elements and control the direction and order of layout items using flex-direction and flex-order.', 'The chapter discusses the integration of JavaScript to add functionality for calculating and displaying age in days upon clicking a button.']}, {'end': 7899.349, 'segs': [{'end': 7020.663, 'src': 'embed', 'start': 6962.643, 'weight': 1, 'content': [{'end': 6966.427, 'text': "What we're gonna do is we're gonna create a H2 element and we're gonna add it in there.", 'start': 6962.643, 'duration': 3.784}, {'end': 6970.73, 'text': "So that's kind of where that is gonna take place.", 'start': 6966.847, 'duration': 3.883}, {'end': 6973.512, 'text': "But you're not gonna see that right away.", 'start': 6971.23, 'duration': 2.282}, {'end': 6976.094, 'text': "So let's go ahead and do that.", 'start': 6974.133, 'duration': 1.961}, {'end': 6979.097, 'text': "Now we're gonna go to our script.", 'start': 6976.334, 'duration': 2.763}, {'end': 6987.274, 'text': 'I will remove all of this and this is gonna be our challenge one, your age in days.', 'start': 6980.842, 'duration': 6.432}, {'end': 6995.929, 'text': 'Now this is the fun JavaScript part, okay? Okay, how do we do age and days? Well, think about it.', 'start': 6989.177, 'duration': 6.752}, {'end': 6999.852, 'text': "First, what we need is here's what we need to get okay?", 'start': 6996.129, 'duration': 3.723}, {'end': 7004.015, 'text': 'We need to see how, what year somebody was born in.', 'start': 7000.372, 'duration': 3.643}, {'end': 7007.477, 'text': "okay?. So let's say that you were born in 1994..", 'start': 7004.015, 'duration': 3.462}, {'end': 7020.663, 'text': 'Well, how would I figure out how many days old you are? In a simple way, okay, I will take your age and just multiply it by 365.', 'start': 7007.477, 'duration': 13.186}], 'summary': 'Creating h2 element, javascript challenge to calculate age in days', 'duration': 58.02, 'max_score': 6962.643, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6962643.jpg'}, {'end': 7151.892, 'src': 'embed', 'start': 7081.134, 'weight': 2, 'content': [{'end': 7092.782, 'text': 'And now, if I print out age in days, age in days, it says 20, or sorry, I gotta do this multiplied.', 'start': 7081.134, 'duration': 11.648}, {'end': 7096.425, 'text': "Let's put a parentheses around this.", 'start': 7094.863, 'duration': 1.562}, {'end': 7098.679, 'text': 'multiplied by 365.', 'start': 7097.498, 'duration': 1.181}, {'end': 7108.126, 'text': "Okay Now if I do age in days, it gives me 8, 760 and that's how many days old I am.", 'start': 7098.679, 'duration': 9.447}, {'end': 7109.727, 'text': "So that's essentially it.", 'start': 7108.626, 'duration': 1.101}, {'end': 7111.168, 'text': "It's not too complicated.", 'start': 7109.867, 'duration': 1.301}, {'end': 7112.789, 'text': "It's a pretty straight up thing.", 'start': 7111.268, 'duration': 1.521}, {'end': 7121.556, 'text': "So we're gonna do birth year is equal to, but how we're gonna now take this input is by using something called prompt.", 'start': 7113.25, 'duration': 8.306}, {'end': 7130.606, 'text': "Okay So for example, I can say variable, um, Let's see, apple.", 'start': 7121.636, 'duration': 8.97}, {'end': 7141.281, 'text': 'I will say equals prompt, how many apples do you eat every day? Question mark.', 'start': 7132.368, 'duration': 8.913}, {'end': 7151.892, 'text': 'And now notice it just pulled up a prompt, okay? It says, how many apples do you eat every day? I will say six and hit enter.', 'start': 7143.51, 'duration': 8.382}], 'summary': 'The speaker demonstrates code for calculating age in days and using prompt for user input.', 'duration': 70.758, 'max_score': 7081.134, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA7081134.jpg'}, {'end': 7538.812, 'src': 'embed', 'start': 7514.61, 'weight': 3, 'content': [{'end': 7523.466, 'text': "And another thing I want you to notice is You see here on line eight where we're setting this attribute and we're saying set this H1 tags ID to age in days.", 'start': 7514.61, 'duration': 8.856}, {'end': 7524.446, 'text': 'Well, check it out.', 'start': 7523.846, 'duration': 0.6}, {'end': 7528.308, 'text': 'This H1 now has an ID, which is age in days.', 'start': 7524.806, 'duration': 3.502}, {'end': 7538.812, 'text': "And then what I'm doing is I'm adding that little H1 that I created, right? To that I'm appending the text answer I created earlier.", 'start': 7528.928, 'duration': 9.884}], 'summary': "Setting h1 tag id to 'age in days', appending created text answer.", 'duration': 24.202, 'max_score': 7514.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA7514610.jpg'}, {'end': 7749.348, 'src': 'heatmap', 'start': 7448.191, 'weight': 6, 'content': [{'end': 7453.014, 'text': 'And then I wanna do h1.appendChild text answer.', 'start': 7448.191, 'duration': 4.823}, {'end': 7464.781, 'text': 'And then lastly, what I wanna do is document.getElementById, flex box result, okay? And append child h1.', 'start': 7453.774, 'duration': 11.007}, {'end': 7469.143, 'text': "A lot going on here, and I'm gonna explain it in just a second.", 'start': 7465.681, 'duration': 3.462}, {'end': 7473.386, 'text': "So I'm gonna delete all of this, or that one line.", 'start': 7469.603, 'duration': 3.783}, {'end': 7476.61, 'text': "I'm gonna hit refresh, I'll hit click me.", 'start': 7474.326, 'duration': 2.284}, {'end': 7485.286, 'text': "I'll hit 1994 and boom, you can see that it says you are 8, 760 days old in my code.", 'start': 7476.61, 'duration': 8.676}, {'end': 7487.209, 'text': "okay?. Doesn't say it anywhere else.", 'start': 7485.286, 'duration': 1.923}, {'end': 7490.511, 'text': 'and not in the console, not in an alert.', 'start': 7488.109, 'duration': 2.402}, {'end': 7493.553, 'text': 'It actually says it right in my page.', 'start': 7490.691, 'duration': 2.862}, {'end': 7500.919, 'text': 'So how is this working? I can always right click and hit inspect.', 'start': 7493.994, 'duration': 6.925}, {'end': 7503.802, 'text': "Whenever you're in doubt, just inspect.", 'start': 7501.159, 'duration': 2.643}, {'end': 7509.006, 'text': "Think of it like you're a detective and you're trying to figure out what's actually taking place.", 'start': 7504.562, 'duration': 4.444}, {'end': 7513.97, 'text': "So while I'm looking at this, if I hover over, I can see my age and days.", 'start': 7509.606, 'duration': 4.364}, {'end': 7523.466, 'text': "And another thing I want you to notice is You see here on line eight where we're setting this attribute and we're saying set this H1 tags ID to age in days.", 'start': 7514.61, 'duration': 8.856}, {'end': 7524.446, 'text': 'Well, check it out.', 'start': 7523.846, 'duration': 0.6}, {'end': 7528.308, 'text': 'This H1 now has an ID, which is age in days.', 'start': 7524.806, 'duration': 3.502}, {'end': 7538.812, 'text': "And then what I'm doing is I'm adding that little H1 that I created, right? To that I'm appending the text answer I created earlier.", 'start': 7528.928, 'duration': 9.884}, {'end': 7550.618, 'text': "So it's adding this guy right here to the H1, and then, once it does that, I go grab the Flexbox result.", 'start': 7539.312, 'duration': 11.306}, {'end': 7559.362, 'text': 'okay, which is right over here, Flexbox result, and to that I append a child, which is the H1 tag I ended up creating.', 'start': 7550.618, 'duration': 8.744}, {'end': 7562.868, 'text': 'So if I hit refresh, it goes away.', 'start': 7561.067, 'duration': 1.801}, {'end': 7568.714, 'text': 'When I hit click me 1994, it calculates it for me and gives me how old I am.', 'start': 7563.269, 'duration': 5.445}, {'end': 7570.735, 'text': 'Now we just need to do two things.', 'start': 7569.154, 'duration': 1.581}, {'end': 7576.581, 'text': "One, it's to make sure that when we hit reset, this actually goes away.", 'start': 7571.436, 'duration': 5.145}, {'end': 7580.344, 'text': 'And that one is not as hard.', 'start': 7577.782, 'duration': 2.562}, {'end': 7582.887, 'text': "So I'm going to do function reset reset.", 'start': 7580.384, 'duration': 2.503}, {'end': 7589.185, 'text': "and I'll say take that document, get that particular element by its ID, okay?", 'start': 7584.181, 'duration': 5.004}, {'end': 7590.005, 'text': 'And the ID.', 'start': 7589.385, 'duration': 0.62}, {'end': 7592.527, 'text': 'we gave it flexbox result.', 'start': 7590.005, 'duration': 2.522}, {'end': 7593.608, 'text': "that's ID of it, right?", 'start': 7592.527, 'duration': 1.081}, {'end': 7604.436, 'text': "So I'm gonna do flexbox result, or actually I'm gonna do age and days, because that's the ID that this guy has.", 'start': 7593.648, 'duration': 10.788}, {'end': 7614.255, 'text': "So we wanna grab that guy and remove him, okay? So I'm gonna do get element, age and days, and I'm just gonna call remove on it.", 'start': 7604.797, 'duration': 9.458}, {'end': 7623.533, 'text': 'And now I just wanna make sure that this function reset runs when I click the reset button.', 'start': 7615.097, 'duration': 8.436}, {'end': 7626.881, 'text': 'See if you can figure this part out.', 'start': 7625.04, 'duration': 1.841}, {'end': 7634.424, 'text': 'Cause we did the ClickMe together where I gave ClickMe the ability to run this function age and days.', 'start': 7627.561, 'duration': 6.863}, {'end': 7637.205, 'text': 'See if you can get the reset one to figure it out.', 'start': 7634.884, 'duration': 2.321}, {'end': 7638.246, 'text': "I'm gonna give you five seconds.", 'start': 7637.225, 'duration': 1.021}, {'end': 7641.027, 'text': 'Five, four, three, two, one.', 'start': 7638.926, 'duration': 2.101}, {'end': 7645.829, 'text': "okay, now i'm going to show you how to do it.", 'start': 7644.088, 'duration': 1.741}, {'end': 7650.731, 'text': "so if you didn't get it, don't worry, beat yourself up just a little bit, because you should have gotten it.", 'start': 7645.829, 'duration': 4.902}, {'end': 7652.392, 'text': "but if, but if not, you know what it's.", 'start': 7650.731, 'duration': 1.661}, {'end': 7656.814, 'text': "okay, this happens, and, uh, we're here to learn and we'll just figure it out together.", 'start': 7652.392, 'duration': 4.422}, {'end': 7657.975, 'text': 'okay, you and me.', 'start': 7656.814, 'duration': 1.161}, {'end': 7661.817, 'text': "okay, we're in this battle together, so let's figure it out.", 'start': 7657.975, 'duration': 3.842}, {'end': 7666.151, 'text': "i'm gonna go to my um, I'm gonna go to my button.", 'start': 7661.817, 'duration': 4.334}, {'end': 7666.952, 'text': 'okay, reset.', 'start': 7666.151, 'duration': 0.801}, {'end': 7672.699, 'text': "And I'm just gonna go here and I'll say on click and I will say run the function reset.", 'start': 7667.032, 'duration': 5.667}, {'end': 7673.68, 'text': "That's it.", 'start': 7673.34, 'duration': 0.34}, {'end': 7679.187, 'text': "So now I'll refresh, I'll hit click me 1994, you are 8, 760 days old.", 'start': 7674.101, 'duration': 5.086}, {'end': 7685.815, 'text': "I'll hit reset and boom, it just grabs that div and just deletes it.", 'start': 7679.567, 'duration': 6.248}, {'end': 7691.442, 'text': "So now it's gone, okay? If I actually remove all the borders, you wouldn't even see anything here.", 'start': 7685.855, 'duration': 5.587}, {'end': 7692.903, 'text': "It'd just look empty to you.", 'start': 7691.462, 'duration': 1.441}, {'end': 7698.33, 'text': 'And the last thing we wanna do in this challenge is just make sure everything is kind of like centralized.', 'start': 7693.724, 'duration': 4.606}, {'end': 7701.634, 'text': 'So what I wanna do is I will go to my style.css.', 'start': 7698.77, 'duration': 2.864}, {'end': 7702.655, 'text': "I'll go to my container.", 'start': 7701.674, 'duration': 0.981}, {'end': 7707.71, 'text': "and I'm gonna do margin zero auto, and I'll hit refresh here.", 'start': 7703.829, 'duration': 3.881}, {'end': 7715.472, 'text': "And I'm gonna go to my width, and I'll make my width like about 75%.", 'start': 7708.91, 'duration': 6.562}, {'end': 7716.432, 'text': "And I'll hit refresh.", 'start': 7715.472, 'duration': 0.96}, {'end': 7723.394, 'text': "And now you can see that it's a little bit more centralized, right? But the text is still not centralized.", 'start': 7716.873, 'duration': 6.521}, {'end': 7729.963, 'text': "So last thing I wanna do is align Text, or I think it's text align.", 'start': 7723.514, 'duration': 6.449}, {'end': 7732.823, 'text': 'Text align and center.', 'start': 7730.883, 'duration': 1.94}, {'end': 7734.864, 'text': "I'm not a front end expert guys.", 'start': 7733.204, 'duration': 1.66}, {'end': 7737.405, 'text': 'I barely spend any time on front end.', 'start': 7735.564, 'duration': 1.841}, {'end': 7739.765, 'text': 'So take this with a grain of salt.', 'start': 7737.905, 'duration': 1.86}, {'end': 7742.426, 'text': 'So take this with a grain of salt, but this is good.', 'start': 7740.166, 'duration': 2.26}, {'end': 7743.546, 'text': "I'm gonna save it.", 'start': 7742.866, 'duration': 0.68}, {'end': 7744.807, 'text': "I'm gonna come here and refresh.", 'start': 7743.566, 'duration': 1.241}, {'end': 7745.967, 'text': 'Look at that.', 'start': 7745.407, 'duration': 0.56}, {'end': 7749.348, 'text': 'Nice and centralized, looking sexy.', 'start': 7746.467, 'duration': 2.881}], 'summary': "The transcript covers coding to display a person's age in days and includes adding a reset button and centralizing the display.", 'duration': 25.834, 'max_score': 7448.191, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA7448191.jpg'}, {'end': 7881.022, 'src': 'embed', 'start': 7835.361, 'weight': 0, 'content': [{'end': 7841.284, 'text': 'And this is where you hit that green button and it generates cats for you, okay? Kinda like that.', 'start': 7835.361, 'duration': 5.923}, {'end': 7843.365, 'text': "And we're gonna work on this together.", 'start': 7841.924, 'duration': 1.441}, {'end': 7844.185, 'text': "We're gonna build it up.", 'start': 7843.385, 'duration': 0.8}, {'end': 7852.51, 'text': 'Now, the things that are gonna be the most complex in this project, right, is not really the JavaScript portion.', 'start': 7844.265, 'duration': 8.245}, {'end': 7855.412, 'text': "It's gonna be the HTML and CSS portion.", 'start': 7853.231, 'duration': 2.181}, {'end': 7859.716, 'text': "So we're gonna focus more on the HTML and CSS part for this project.", 'start': 7855.492, 'duration': 4.224}, {'end': 7864.139, 'text': "And then the JavaScript part is gonna be a little bit easier, and we're gonna do that at the end.", 'start': 7860.376, 'duration': 3.763}, {'end': 7870.204, 'text': "In the start, we're gonna do HTML CSS, and now you might be wondering hey, Qazi, this is the JavaScript module.", 'start': 7864.339, 'duration': 5.865}, {'end': 7873.346, 'text': 'so why are we focusing more on the HTML and CSS??', 'start': 7870.204, 'duration': 3.142}, {'end': 7877.93, 'text': 'The reason is because I want you to learn in a project-based way.', 'start': 7873.566, 'duration': 4.364}, {'end': 7881.022, 'text': 'Now, I can just teach you the JavaScript part.', 'start': 7879.079, 'duration': 1.943}], 'summary': 'Project will focus on html/css; javascript will be easier, and taught at the end.', 'duration': 45.661, 'max_score': 7835.361, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA7835361.jpg'}], 'start': 6962.643, 'title': 'Building age and cat tools', 'summary': "Demonstrates creating an age in days calculator using javascript, calculating a person's age in days resulting in 8,760 days, and building a cat generator with central alignment using html, css, and javascript.", 'chapters': [{'end': 7272.99, 'start': 6962.643, 'title': 'Creating age in days calculator', 'summary': 'Demonstrates creating an age in days calculator using javascript, including obtaining user input through prompts, performing calculations, and triggering the functionality on button click.', 'duration': 310.347, 'highlights': ['Creating a H2 element to house the calculator functionality. The process involves creating a H2 element to house the age in days calculator.', 'Using prompts to obtain user input for birth year and triggering the functionality on button click. The demonstration includes using prompts to obtain user input for birth year and triggering the functionality on button click.', 'Performing age calculation by multiplying the age with 365 to obtain the age in days. The demonstration involves performing age calculation by multiplying the age with 365 to obtain the age in days.']}, {'end': 7513.97, 'start': 7272.99, 'title': 'Calculating age in days', 'summary': "Covers calculating a person's age in days using javascript, demonstrating the process of calculating the age in days and displaying it on a webpage, resulting in 8,760 days for a person born in 1994.", 'duration': 240.98, 'highlights': ['The process of calculating the age in days is demonstrated using JavaScript, resulting in 8,760 days for a person born in 1994. The speaker explains the computation of age in days by subtracting the birth year from 2018 and multiplying the result by 365, displaying the outcome as 8,760 days for a person born in 1994.', 'The age in days is displayed on a webpage using string concatenation and the Document Object Model (DOM). The method of displaying the age in days on a webpage is elucidated, involving the creation of an H1 element, concatenating a string with the age in days, setting attributes, and appending the result to the webpage using DOM manipulation.']}, {'end': 7899.349, 'start': 7514.61, 'title': 'Building cat generator', 'summary': 'Demonstrates building a cat generator and a reset button using html, css, and javascript, focusing more on the html and css part for the project, and ensuring central alignment of the content.', 'duration': 384.739, 'highlights': ['Demonstrating building a cat generator and a reset button using HTML, CSS, and JavaScript The chapter focuses on creating a cat generator and a reset button using HTML, CSS, and JavaScript to demonstrate the integration of these technologies.', 'Focusing more on the HTML and CSS part for the project The emphasis is placed on HTML and CSS, as the JavaScript part is considered to be easier and is left for the end of the project.', "Ensuring central alignment of the content The chapter includes steps to center-align the content by adjusting the margin and width in the style.css file and using the 'text-align: center' property."]}], 'duration': 936.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA6962643.jpg', 'highlights': ['Demonstrating building a cat generator and a reset button using HTML, CSS, and JavaScript', 'The process of calculating the age in days is demonstrated using JavaScript, resulting in 8,760 days for a person born in 1994', 'Using prompts to obtain user input for birth year and triggering the functionality on button click', 'The age in days is displayed on a webpage using string concatenation and the Document Object Model (DOM)', 'Creating a H2 element to house the calculator functionality', 'Performing age calculation by multiplying the age with 365 to obtain the age in days', 'Ensuring central alignment of the content', 'Focusing more on the HTML and CSS part for the project']}, {'end': 8773.711, 'segs': [{'end': 7940.968, 'src': 'embed', 'start': 7899.829, 'weight': 0, 'content': [{'end': 7906.819, 'text': 'But I promise you will learn JavaScript in a more deeper way because you get to learn how it connects to these projects, okay?', 'start': 7899.829, 'duration': 6.99}, {'end': 7908.362, 'text': "So it'll be a lot of fun.", 'start': 7906.839, 'duration': 1.523}, {'end': 7910.364, 'text': "Hang in there with me and let's get started.", 'start': 7908.642, 'duration': 1.722}, {'end': 7914.71, 'text': "So for this, let's talk about the HTML and CSS part.", 'start': 7911.468, 'duration': 3.242}, {'end': 7917.832, 'text': 'So you saw me just generate five cats right now.', 'start': 7914.89, 'duration': 2.942}, {'end': 7919.033, 'text': 'And notice what happened.', 'start': 7917.952, 'duration': 1.081}, {'end': 7922.916, 'text': "The cats didn't run across this border.", 'start': 7919.854, 'duration': 3.062}, {'end': 7924.877, 'text': "They didn't run across to the right or to the left.", 'start': 7922.956, 'duration': 1.921}, {'end': 7930.501, 'text': 'They nicely move on to a new line in this case.', 'start': 7925.678, 'duration': 4.823}, {'end': 7934.724, 'text': 'So how are these images intelligent like that?', 'start': 7930.861, 'duration': 3.863}, {'end': 7935.644, 'text': 'How does that happen?', 'start': 7934.784, 'duration': 0.86}, {'end': 7940.968, 'text': "How does it know to automatically go to a new line when it can't fit on the top one anymore?", 'start': 7936.144, 'duration': 4.824}], 'summary': 'Learn javascript in depth through hands-on projects, generating five intelligent moving images in html and css.', 'duration': 41.139, 'max_score': 7899.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA7899829.jpg'}, {'end': 8368.582, 'src': 'embed', 'start': 8338.945, 'weight': 2, 'content': [{'end': 8342.187, 'text': 'One is a container div, and then the one is a flexbox div.', 'start': 8338.945, 'duration': 3.242}, {'end': 8345.17, 'text': "Flexbox div, It's intelligent.", 'start': 8342.628, 'duration': 2.542}, {'end': 8348.531, 'text': 'We just tell it, hey, make all the items of that div flex.', 'start': 8345.29, 'duration': 3.241}, {'end': 8351.673, 'text': 'So all the elements in that div will be flex items.', 'start': 8348.611, 'duration': 3.062}, {'end': 8358.437, 'text': "So for example, if the item is an image element, which in this case is an image element, it'll be part of that flex box.", 'start': 8352.452, 'duration': 5.985}, {'end': 8361.058, 'text': "If it's an H2 element, it'll be part of that flex box.", 'start': 8358.816, 'duration': 2.242}, {'end': 8368.582, 'text': "No matter what it is, what element it is, it'll automatically be a flex box element, and it'll have all those properties.", 'start': 8361.558, 'duration': 7.024}], 'summary': 'Using flexbox makes all elements in a div flex, adapting them to its properties.', 'duration': 29.637, 'max_score': 8338.945, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA8338945.jpg'}, {'end': 8536.348, 'src': 'embed', 'start': 8509.022, 'weight': 4, 'content': [{'end': 8512.724, 'text': "Okay So that's the HTML part of it.", 'start': 8509.022, 'duration': 3.702}, {'end': 8514.265, 'text': 'Okay, that looks pretty good.', 'start': 8512.744, 'duration': 1.521}, {'end': 8516.426, 'text': "Now I'm going to go in my style part of it.", 'start': 8514.325, 'duration': 2.101}, {'end': 8518.067, 'text': "And let's just start coding this.", 'start': 8516.566, 'duration': 1.501}, {'end': 8520.929, 'text': "Let's, let's do the style part of this.", 'start': 8518.908, 'duration': 2.021}, {'end': 8527.412, 'text': 'So remember, the class, I called it flexbox container, too.', 'start': 8521.529, 'duration': 5.883}, {'end': 8530.666, 'text': 'Oh, And yeah, container two.', 'start': 8528.253, 'duration': 2.413}, {'end': 8536.348, 'text': 'So remember for container two, I need to give it the same settings as container one.', 'start': 8530.746, 'duration': 5.602}], 'summary': 'Coding html and css for flexbox containers.', 'duration': 27.326, 'max_score': 8509.022, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA8509022.jpg'}], 'start': 7899.829, 'title': 'Javascript, html, and css in project development', 'summary': 'Delves into the practical application of javascript in project development, emphasizing its role in image arrangement on webpages. it also explains html structure and css styling using flexbox, highlighting containers, flex containers, and image elements with practical application and code demonstration.', 'chapters': [{'end': 7940.968, 'start': 7899.829, 'title': 'Javascript in project development', 'summary': "Explains how javascript connects to projects, emphasizing its practical application in generating and arranging images on a webpage, ensuring they move to a new line when they can't fit on the current one.", 'duration': 41.139, 'highlights': ['The chapter emphasizes learning JavaScript in connection to real projects, offering a deeper understanding and practical application.', "It demonstrates the generation and arrangement of five images on a webpage using HTML and CSS, showing how they move to a new line when they can't fit on the current line."]}, {'end': 8773.711, 'start': 7942.253, 'title': 'Html structure & styling with flexbox', 'summary': 'Explains the html structure and css styling using flexbox, highlighting the concept of containers, flex containers, and image elements, with practical application and code demonstration.', 'duration': 831.458, 'highlights': ['The chapter discusses the concept of containers and flex containers in HTML structure and CSS styling, emphasizing the use of div elements and class attributes, demonstrating the creation of a container and a flexbox container. The chapter discusses the concept of containers and flex containers, emphasizing the use of div elements and class attributes to create a container and a flexbox container.', "The chapter explains the use of image elements within the flexbox container, and demonstrates the practical application of inserting images in HTML with the 'img' element and 'src' attribute. The chapter explains the use of image elements within the flexbox container, demonstrating the practical application of inserting images in HTML with the 'img' element and 'src' attribute.", 'The chapter illustrates the application of CSS styling to the containers and flexbox container, including setting borders, width, and alignment to achieve the desired layout and appearance. The chapter illustrates the application of CSS styling to the containers and flexbox container, including setting borders, width, and alignment to achieve the desired layout and appearance.']}], 'duration': 873.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA7899829.jpg', 'highlights': ['The chapter emphasizes learning JavaScript in connection to real projects, offering a deeper understanding and practical application.', "It demonstrates the generation and arrangement of five images on a webpage using HTML and CSS, showing how they move to a new line when they can't fit on the current line.", 'The chapter discusses the concept of containers and flex containers in HTML structure and CSS styling, emphasizing the use of div elements and class attributes, demonstrating the creation of a container and a flexbox container.', "The chapter explains the use of image elements within the flexbox container, and demonstrates the practical application of inserting images in HTML with the 'img' element and 'src' attribute.", 'The chapter illustrates the application of CSS styling to the containers and flexbox container, including setting borders, width, and alignment to achieve the desired layout and appearance.']}, {'end': 9663.878, 'segs': [{'end': 8940.957, 'src': 'embed', 'start': 8910.054, 'weight': 4, 'content': [{'end': 8918.038, 'text': 'Okay so now, how can we make it so the images actually run across or, sorry, run down??', 'start': 8910.054, 'duration': 7.984}, {'end': 8919.639, 'text': "Okay so first let's do that.", 'start': 8918.338, 'duration': 1.301}, {'end': 8922.1, 'text': 'So make sure the image is actually running down.', 'start': 8919.679, 'duration': 2.421}, {'end': 8930.924, 'text': 'So my container, the type is flex, and then what I wanna do is I wanna say flex wrap and enable the wrap.', 'start': 8922.7, 'duration': 8.224}, {'end': 8940.957, 'text': "And when I hit refresh, you'll notice that now when it's about to run across, the div or the flex box, it'll automatically go to the new line.", 'start': 8931.444, 'duration': 9.513}], 'summary': 'Using flex container with flex-wrap enabled to make images run down instead of across.', 'duration': 30.903, 'max_score': 8910.054, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA8910054.jpg'}, {'end': 9034.861, 'src': 'embed', 'start': 9005.248, 'weight': 2, 'content': [{'end': 9010.849, 'text': 'Before we had the padding in the div, but what we actually want the padding in is between each image element.', 'start': 9005.248, 'duration': 5.601}, {'end': 9014.39, 'text': 'So now between each image element, it has a padding of 10.', 'start': 9011.109, 'duration': 3.281}, {'end': 9016.971, 'text': 'So this has a padding of 10 and this has a padding of 10.', 'start': 9014.39, 'duration': 2.581}, {'end': 9022.112, 'text': "That's why they're kind of equally, they're spaced out from one another.", 'start': 9016.971, 'duration': 5.141}, {'end': 9034.861, 'text': 'Now notice how these images, like the images below, are lining up to the images at the top, but notice how what we had on this page,', 'start': 9025.293, 'duration': 9.568}], 'summary': 'Added 10 padding between each image for equal spacing.', 'duration': 29.613, 'max_score': 9005.248, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9005248.jpg'}, {'end': 9076.603, 'src': 'embed', 'start': 9045.791, 'weight': 1, 'content': [{'end': 9054.793, 'text': 'So to do that, what we essentially need to do is say justify content and we wanna say space around okay?', 'start': 9045.791, 'duration': 9.002}, {'end': 9064.715, 'text': "And once I hit refresh, you can see that because of space around, the images at the bottom don't actually run all the way to the left.", 'start': 9054.853, 'duration': 9.862}, {'end': 9067.759, 'text': "They're more centralized.", 'start': 9066.738, 'duration': 1.021}, {'end': 9076.603, 'text': 'Okay Cool, so flex boxes are pretty awesome and they make our life a lot, a lot easier.', 'start': 9068.719, 'duration': 7.884}], 'summary': "Using 'space around' in flex boxes centers images and makes life easier.", 'duration': 30.812, 'max_score': 9045.791, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9045791.jpg'}, {'end': 9213.767, 'src': 'embed', 'start': 9184.607, 'weight': 0, 'content': [{'end': 9189.831, 'text': "And in my JavaScript, I'm going to create a function called generate cat.", 'start': 9184.607, 'duration': 5.224}, {'end': 9199.877, 'text': "And what this is essentially gonna do is it's gonna first get that, it's gonna create an image element.", 'start': 9192.012, 'duration': 7.865}, {'end': 9206.642, 'text': 'Then I want to create a div element.', 'start': 9203.22, 'duration': 3.422}, {'end': 9213.767, 'text': "So I'm gonna say, or actually we don't need to create a div element, but what I do need to do is get access to the Flexbox div.", 'start': 9206.682, 'duration': 7.085}], 'summary': 'Creating a javascript function to generate cat image and access flexbox div.', 'duration': 29.16, 'max_score': 9184.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9184607.jpg'}, {'end': 9528.789, 'src': 'embed', 'start': 9496.091, 'weight': 5, 'content': [{'end': 9503.134, 'text': "So since there's so much overlap of the code, there's really no reason to write its own, like write these lines again.", 'start': 9496.091, 'duration': 7.043}, {'end': 9510.457, 'text': 'What I can actually just do is say flex box container two, okay, like that.', 'start': 9503.594, 'duration': 6.863}, {'end': 9513.838, 'text': 'And just hit save and delete this.', 'start': 9510.837, 'duration': 3.001}, {'end': 9525.207, 'text': 'And when I come over here, refresh and hit generate cat, you see it generates my cats and my cats look Pretty good.', 'start': 9515.519, 'duration': 9.688}, {'end': 9528.789, 'text': "So that's the situation with that guy.", 'start': 9526.828, 'duration': 1.961}], 'summary': 'Eliminated code redundancy by reusing flex box container, resulting in efficient development and improved user experience.', 'duration': 32.698, 'max_score': 9496.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9496091.jpg'}, {'end': 9663.878, 'src': 'embed', 'start': 9637.903, 'weight': 3, 'content': [{'end': 9646.086, 'text': 'look at that instead of like extending each image box, what it did, is it just added spacing between each image box.', 'start': 9637.903, 'duration': 8.183}, {'end': 9651.773, 'text': 'okay, so now this looks super clean.', 'start': 9646.086, 'duration': 5.687}, {'end': 9652.333, 'text': 'i love it.', 'start': 9651.773, 'duration': 0.56}, {'end': 9656.035, 'text': 'i hope you love it and you can see the power of flex boxes right.', 'start': 9652.333, 'duration': 3.702}, {'end': 9663.878, 'text': 'the more i hit generate cats, the the container grows to fit it, the flex box grows to fix it to fit it.', 'start': 9656.035, 'duration': 7.843}], 'summary': 'Flex boxes add spacing, container grows to fit images.', 'duration': 25.975, 'max_score': 9637.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9637903.jpg'}], 'start': 8775.532, 'title': 'Javascript image manipulation and automated cat image generation', 'summary': 'Explores using flexbox to manipulate image positioning in javascript, enhancing visual layout. it also focuses on automating cat image generation using flex boxes and optimizing functionality.', 'chapters': [{'end': 9076.603, 'start': 8775.532, 'title': 'Javascript steroids: flexbox and image manipulation', 'summary': 'Explores using flexbox to manipulate the positioning and spacing of images in javascript, including applying padding, alignment, and wrapping to the elements, ultimately enhancing the visual layout and presentation of the webpage.', 'duration': 301.071, 'highlights': ["Applying flex wrap to enable images to run down in a flex container, resulting in automatic new line positioning. By setting the flex container type to 'flex' and enabling flex wrap, the images are positioned to run down in a flex container, automatically moving to a new line when necessary.", 'Adding padding of 10 between each image element to create equal spacing and alignment. By adding padding of 10 between each image element, a consistent and equally spaced alignment is achieved, enhancing the visual presentation of the images.', "Utilizing justify content with 'space around' to center the images at the bottom and enhance visual alignment. By using justify content with 'space around', the images at the bottom are centralized in an intelligent way, improving their alignment and visual presentation on the webpage."]}, {'end': 9663.878, 'start': 9076.883, 'title': 'Automated cat image generator', 'summary': 'Focuses on automating the process of generating cat images through javascript, using flex boxes to add spacing between images, and removing redundant css code to optimize the functionality, ultimately creating a clean and efficient cat image generator.', 'duration': 586.995, 'highlights': ['Automating image generation through JavaScript The process involves creating a function called generate cat that automatically adds image elements to the Flexbox container when the generate cat button is clicked, streamlining the generation process.', 'Using flex boxes to add spacing between images By utilizing margin instead of padding, the speaker demonstrates how flex boxes can be used to create a clean and organized layout with breathing room between image elements, enhancing the visual appeal of the cat image generator.', 'Optimizing functionality by removing redundant CSS code The speaker eliminates redundant CSS code by consolidating common styling properties into a single class, demonstrating a more efficient and maintainable approach to styling the cat image generator.']}], 'duration': 888.346, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA8775532.jpg', 'highlights': ['Automating image generation through JavaScript The process involves creating a function called generate cat that automatically adds image elements to the Flexbox container when the generate cat button is clicked, streamlining the generation process.', "Utilizing justify content with 'space around' to center the images at the bottom and enhance visual alignment. By using justify content with 'space around', the images at the bottom are centralized in an intelligent way, improving their alignment and visual presentation on the webpage.", 'Adding padding of 10 between each image element to create equal spacing and alignment. By adding padding of 10 between each image element, a consistent and equally spaced alignment is achieved, enhancing the visual presentation of the images.', 'Using flex boxes to add spacing between images By utilizing margin instead of padding, the speaker demonstrates how flex boxes can be used to create a clean and organized layout with breathing room between image elements, enhancing the visual appeal of the cat image generator.', "Applying flex wrap to enable images to run down in a flex container, resulting in automatic new line positioning. By setting the flex container type to 'flex' and enabling flex wrap, the images are positioned to run down in a flex container, automatically moving to a new line when necessary.", 'Optimizing functionality by removing redundant CSS code The speaker eliminates redundant CSS code by consolidating common styling properties into a single class, demonstrating a more efficient and maintainable approach to styling the cat image generator.']}, {'end': 10914.191, 'segs': [{'end': 9688.932, 'src': 'embed', 'start': 9663.878, 'weight': 2, 'content': [{'end': 9671.582, 'text': 'and then the flex box is also very intelligent in terms of how it wraps, how it spaces around evenly, how it centralizes it.', 'start': 9663.878, 'duration': 7.704}, {'end': 9674.26, 'text': 'So I am a big fan.', 'start': 9672.679, 'duration': 1.581}, {'end': 9674.701, 'text': 'I love it.', 'start': 9674.26, 'duration': 0.441}, {'end': 9675.882, 'text': 'And there you have it.', 'start': 9675.141, 'duration': 0.741}, {'end': 9678.584, 'text': 'This is what your CSS actually should look like.', 'start': 9675.982, 'duration': 2.602}, {'end': 9685.069, 'text': 'okay?. These were the new things that we added, literally like this, and I believe this line here, okay?', 'start': 9678.584, 'duration': 6.485}, {'end': 9688.932, 'text': 'That was all that was added in the CSS for this one, or actually in container two.', 'start': 9685.49, 'duration': 3.442}], 'summary': 'Flex box is intelligent in wrapping, spacing, and centralizing, making it a preferred css choice.', 'duration': 25.054, 'max_score': 9663.878, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9663878.jpg'}, {'end': 9825.388, 'src': 'embed', 'start': 9797.992, 'weight': 0, 'content': [{'end': 9808.936, 'text': "If you don't know how rock, paper, scissors works, first of all, step out of your cave, go learn what it is, and two, just Google it and you'll learn.", 'start': 9797.992, 'duration': 10.944}, {'end': 9812.357, 'text': 'Paper, scissor cuts it, cool.', 'start': 9810.456, 'duration': 1.901}, {'end': 9815.261, 'text': 'So how do we actually make this game?', 'start': 9813.72, 'duration': 1.541}, {'end': 9821.565, 'text': "That's the topic of this video, and we're gonna break it down and work on it one step at a time, okay?", 'start': 9816.062, 'duration': 5.503}, {'end': 9825.388, 'text': "So, number one, we're gonna work on the HTML part.", 'start': 9821.585, 'duration': 3.803}], 'summary': 'The video discusses creating a rock, paper, scissors game, starting with the html part.', 'duration': 27.396, 'max_score': 9797.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9797992.jpg'}, {'end': 10089.894, 'src': 'embed', 'start': 10062.099, 'weight': 3, 'content': [{'end': 10067.402, 'text': 'now, another thing I want you to notice is that when I hover over it, it kind of becomes blue, right?', 'start': 10062.099, 'duration': 5.303}, {'end': 10069.263, 'text': 'So let me hit, inspect on this thing.', 'start': 10067.562, 'duration': 1.701}, {'end': 10073.085, 'text': 'Okay, so you can see that I just clicked on hover and styles.', 'start': 10070.004, 'duration': 3.081}, {'end': 10075.067, 'text': 'So I inspected this and I clicked hover.', 'start': 10073.145, 'duration': 1.922}, {'end': 10081.37, 'text': "And now all these force element states popped up, right? So there's an active, focus, focus within, visited.", 'start': 10076.287, 'duration': 5.083}, {'end': 10083.532, 'text': "So for us, we're looking at the hover.", 'start': 10081.811, 'duration': 1.721}, {'end': 10089.894, 'text': 'And in hover, you can see that it has a certain styling that comes, as soon as I click it, you can see that it comes up.', 'start': 10084.312, 'duration': 5.582}], 'summary': 'Inspecting the hover effect reveals different element states and their respective styles.', 'duration': 27.795, 'max_score': 10062.099, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA10062099.jpg'}, {'end': 10702.98, 'src': 'embed', 'start': 10643.407, 'weight': 1, 'content': [{'end': 10652.973, 'text': 'The container is styled, the flex box div is styled, and we have defined what takes place on hover of the image.', 'start': 10643.407, 'duration': 9.566}, {'end': 10656.456, 'text': "And yeah, so far it's looking good.", 'start': 10653.734, 'duration': 2.722}, {'end': 10660.778, 'text': "We just have to do one more thing, but that thing we're gonna do after the JavaScript part.", 'start': 10656.516, 'duration': 4.262}, {'end': 10663.02, 'text': "So let's go there.", 'start': 10662.219, 'duration': 0.801}, {'end': 10670.485, 'text': 'Challenge three, rock paper scissors.', 'start': 10666.202, 'duration': 4.283}, {'end': 10679.411, 'text': 'scissors Okay, so now this does have a little bit of logic that goes into it.', 'start': 10672.328, 'duration': 7.083}, {'end': 10683.773, 'text': "And there's a little bit of coding involved quite a bit, actually.", 'start': 10679.491, 'duration': 4.282}, {'end': 10689.795, 'text': "So we're gonna now step through it, I'm going to break it down into a separate video.", 'start': 10684.293, 'duration': 5.502}, {'end': 10695.237, 'text': "Okay, so we're gonna start the next video off from the JavaScript part, because otherwise, this video will get too long.", 'start': 10689.815, 'duration': 5.422}, {'end': 10697.618, 'text': "Okay, so that's it for this video.", 'start': 10695.537, 'duration': 2.081}, {'end': 10698.719, 'text': "I'm excited.", 'start': 10697.958, 'duration': 0.761}, {'end': 10702.98, 'text': "Now let's jump on and attack the JavaScript part, crush it.", 'start': 10698.899, 'duration': 4.081}], 'summary': 'Styling and logic discussed for rock paper scissors game, moving on to javascript part.', 'duration': 59.573, 'max_score': 10643.407, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA10643407.jpg'}, {'end': 10789.517, 'src': 'embed', 'start': 10764.557, 'weight': 5, 'content': [{'end': 10771.102, 'text': "So I'm gonna start off with creating like the RPS function, okay?", 'start': 10764.557, 'duration': 6.545}, {'end': 10776.467, 'text': "And we're gonna leave a lot of these things kind of blank, and then you'll see how we work through it, okay?", 'start': 10771.242, 'duration': 5.225}, {'end': 10778.128, 'text': "And we're gonna just get started now.", 'start': 10776.527, 'duration': 1.601}, {'end': 10781.831, 'text': "So I'm gonna create function and I'm gonna call it RPS game.", 'start': 10778.768, 'duration': 3.063}, {'end': 10787.515, 'text': 'If you remember, in the HTML code I say that on click, this function should take place.', 'start': 10782.271, 'duration': 5.244}, {'end': 10789.517, 'text': 'okay?. So what does that mean??', 'start': 10787.515, 'duration': 2.002}], 'summary': 'Creating an rps function in html code for on-click events', 'duration': 24.96, 'max_score': 10764.557, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA10764557.jpg'}], 'start': 9663.878, 'title': 'Web development essentials', 'summary': "Covers implementing a rock paper scissors game using html, css, and javascript, understanding html and css hover effects, and creating a flexbox layout for displaying game images. it also introduces the javascript function 'rps game' for interactive user choices and discusses the upcoming video plan.", 'chapters': [{'end': 9889.631, 'start': 9663.878, 'title': 'Rock paper scissors challenge', 'summary': 'Covers the implementation of a rock paper scissors game using html, css, and javascript, including flexbox, centralization, and the plan for the upcoming video.', 'duration': 225.753, 'highlights': ['The implementation of a rock paper scissors game is discussed, with a focus on HTML, CSS, and JavaScript. The chapter covers the implementation of a rock paper scissors game using HTML, CSS, and JavaScript.', 'The use of flexbox for intelligent wrapping, spacing, and centralization is highlighted. The flexbox is highlighted for its intelligent wrapping, spacing, and centralization.', 'The plan for the upcoming video, including a focus on JavaScript and the length of the JavaScript part, is mentioned. The plan for the upcoming video and the focus on JavaScript, along with the length of the JavaScript part, is mentioned.']}, {'end': 10196.276, 'start': 9889.671, 'title': 'Understanding html and css hover effects', 'summary': 'Explains how to identify elements using hover, the structure of the webpage, and the application of hover forced element states for styling, before delving into creating a container and h2 element for challenge three in the html part of the project.', 'duration': 306.605, 'highlights': ['The chapter explains how to identify elements using hover, providing examples of hovering over different elements and understanding their properties, such as images and divs with specific IDs and classes.', 'It discusses the structure of the webpage, highlighting the use of divs to contain text and images, and the arrangement of elements within the flexbox div.', 'The application of hover forced element states for styling is demonstrated, emphasizing the control of styling through the CSS portion of the project.', 'The chapter delves into creating a div with the class container three and an H2 element to represent challenge three in the HTML part of the project, focusing on the styling aspects such as borders, margins, and width for the container.']}, {'end': 10914.191, 'start': 10196.616, 'title': 'Html flexbox and javascript function', 'summary': "Covers the usage of html and css to create a flexbox layout for displaying rock paper scissors images, emphasizing the use of the 'flex' class and 'hover' attribute, and introduces the javascript function 'rps game' for interactive user choices.", 'duration': 717.575, 'highlights': ["The usage of HTML and CSS to create a flexbox layout for displaying rock paper scissors images. The transcript details the process of using HTML and CSS to create a flexbox layout for displaying rock paper scissors images, emphasizing the 'flex' class and the 'hover' attribute for styling.", "Introduction of the JavaScript function 'RPS game' for interactive user choices. The transcript introduces the JavaScript function 'RPS game' and demonstrates how it allows interactive user choices, including accessing the clicked image element and its attributes."]}], 'duration': 1250.313, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA9663878.jpg', 'highlights': ['The chapter covers the implementation of a rock paper scissors game using HTML, CSS, and JavaScript.', 'The plan for the upcoming video and the focus on JavaScript, along with the length of the JavaScript part, is mentioned.', 'The use of flexbox for intelligent wrapping, spacing, and centralization is highlighted.', 'The chapter explains how to identify elements using hover, providing examples of hovering over different elements and understanding their properties.', 'The usage of HTML and CSS to create a flexbox layout for displaying rock paper scissors images.', "Introduction of the JavaScript function 'RPS game' for interactive user choices."]}, {'end': 12309.65, 'segs': [{'end': 10994.261, 'src': 'embed', 'start': 10958.834, 'weight': 2, 'content': [{'end': 10968.941, 'text': "So my RPS game function, right? I am going to say that it's gonna have two different choices, right? Human choice or bot choice.", 'start': 10958.834, 'duration': 10.107}, {'end': 10974.511, 'text': "Okay, so these are the two different variables that it's going to have.", 'start': 10971.049, 'duration': 3.462}, {'end': 10981.695, 'text': 'Now, I can initialize the variables like this and then use them throughout.', 'start': 10974.611, 'duration': 7.084}, {'end': 10989.819, 'text': 'So human choice is going to be your choice.id.', 'start': 10983.395, 'duration': 6.424}, {'end': 10994.261, 'text': 'So this is gonna be what choice the human made, right?', 'start': 10990.459, 'duration': 3.802}], 'summary': 'Creating rps game function with human and bot choices.', 'duration': 35.427, 'max_score': 10958.834, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA10958834.jpg'}, {'end': 11132.998, 'src': 'embed', 'start': 11102.981, 'weight': 5, 'content': [{'end': 11104.122, 'text': "And we'll come back to it later.", 'start': 11102.981, 'duration': 1.141}, {'end': 11111.112, 'text': "So here I'm mapping out what the RPS game would look like at a high level.", 'start': 11105.649, 'duration': 5.463}, {'end': 11115.313, 'text': "And then we're gonna write each function that takes care of every little thing.", 'start': 11111.272, 'duration': 4.041}, {'end': 11119.375, 'text': "So for example, the decide winner function, we're gonna need to write that from scratch.", 'start': 11115.353, 'duration': 4.022}, {'end': 11128.66, 'text': "We're also gonna have to figure out a way for the bot to choose randomly, okay? Because in the game, the bot is choosing on its own.", 'start': 11119.715, 'duration': 8.945}, {'end': 11132.998, 'text': 'All right.', 'start': 11132.637, 'duration': 0.361}], 'summary': "Creating functions for rps game to decide winner and bot's choice.", 'duration': 30.017, 'max_score': 11102.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11102981.jpg'}, {'end': 11289.17, 'src': 'embed', 'start': 11256.183, 'weight': 4, 'content': [{'end': 11260.946, 'text': 'So, once the human picks a choice, what that front end looks like and what it does right?', 'start': 11256.183, 'duration': 4.763}, {'end': 11262.227, 'text': 'So what takes place??', 'start': 11261.046, 'duration': 1.181}, {'end': 11270.205, 'text': 'Well, remember, when I click one of these options, what actually happens is all of the images get removed.', 'start': 11262.328, 'duration': 7.877}, {'end': 11271.125, 'text': 'okay, all of this.', 'start': 11270.205, 'duration': 0.92}, {'end': 11272.606, 'text': "so it's actually blank.", 'start': 11271.125, 'duration': 1.481}, {'end': 11280.768, 'text': "and once they're removed, we take our choice and the computer choice and then pick those images and then put those in the front.", 'start': 11272.606, 'duration': 8.162}, {'end': 11289.17, 'text': 'okay, so we remove all of the images and then we put the new images in the front and then we highlight them a certain way.', 'start': 11280.768, 'duration': 8.402}], 'summary': 'Images are removed, new ones added, and highlighted in front end.', 'duration': 32.987, 'max_score': 11256.183, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11256183.jpg'}, {'end': 11478.719, 'src': 'embed', 'start': 11448.561, 'weight': 6, 'content': [{'end': 11451.263, 'text': 'now we know what the message is and what color it has.', 'start': 11448.561, 'duration': 2.702}, {'end': 11457.505, 'text': "So then when we're doing the styling using the JavaScript, we can actually color it the right way.", 'start': 11451.283, 'duration': 6.222}, {'end': 11460.665, 'text': "Okay That's really what's important.", 'start': 11457.525, 'duration': 3.14}, {'end': 11465.048, 'text': 'So now we have the entire skeleton for the game.', 'start': 11460.685, 'duration': 4.363}, {'end': 11472.374, 'text': 'If you wanna take this challenge on yourself, you can go ahead and write these functions and fill out and complete the game from here.', 'start': 11466.189, 'duration': 6.185}, {'end': 11475.677, 'text': "It'll be pretty difficult, but you can give it a try.", 'start': 11472.394, 'duration': 3.283}, {'end': 11478.719, 'text': "But now I'm gonna kinda jump into it and we'll walk through it.", 'start': 11475.977, 'duration': 2.742}], 'summary': 'Identified message and color for styling, completed game skeleton, and encouraged taking on the challenge.', 'duration': 30.158, 'max_score': 11448.561, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11448561.jpg'}, {'end': 11515.648, 'src': 'embed', 'start': 11489.584, 'weight': 8, 'content': [{'end': 11498.607, 'text': "really learn what I'm doing and then come up with either your own examples or just redo what I have done from scratch without watching my video.", 'start': 11489.584, 'duration': 9.023}, {'end': 11500.588, 'text': "That's another great way to learn this stuff.", 'start': 11498.787, 'duration': 1.801}, {'end': 11507.78, 'text': "All right, so let's get started with the first function and a few things that might be tricky.", 'start': 11502.335, 'duration': 5.445}, {'end': 11515.648, 'text': 'So one thing that we wanna do is the bot needs to choose randomly, right? So bot needs to choose randomly.', 'start': 11507.8, 'duration': 7.848}], 'summary': 'Learning to code: focusing on creating random choices in the first function.', 'duration': 26.064, 'max_score': 11489.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11489584.jpg'}, {'end': 11569.442, 'src': 'embed', 'start': 11541.635, 'weight': 0, 'content': [{'end': 11544.697, 'text': 'Right How many choices are there? There are three choices.', 'start': 11541.635, 'duration': 3.062}, {'end': 11550.962, 'text': 'So we need to give the computer a way to pick three numbers, zero, one and two.', 'start': 11545.037, 'duration': 5.925}, {'end': 11555.525, 'text': 'And we need to be able to allow the computer to do it randomly every time.', 'start': 11551.362, 'duration': 4.163}, {'end': 11561.05, 'text': "So I'm gonna show you a cool way to do that in JavaScript.", 'start': 11555.925, 'duration': 5.125}, {'end': 11565.295, 'text': 'So in JavaScript, what we can do, let me cross this out.', 'start': 11562.432, 'duration': 2.863}, {'end': 11569.442, 'text': 'Let me open up repl.it for you here.', 'start': 11566.88, 'duration': 2.562}], 'summary': 'The transcript discusses selecting three numbers randomly in javascript.', 'duration': 27.807, 'max_score': 11541.635, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11541635.jpg'}, {'end': 11772.086, 'src': 'embed', 'start': 11736.031, 'weight': 7, 'content': [{'end': 11740.014, 'text': 'And remember, math starts with a capital M that has thrown me off multiple times.', 'start': 11736.031, 'duration': 3.983}, {'end': 11741.495, 'text': "So don't let that throw you off.", 'start': 11740.074, 'duration': 1.421}, {'end': 11746.627, 'text': "And you'll see the reason why I'm creating multiple functions.", 'start': 11744.105, 'duration': 2.522}, {'end': 11753.232, 'text': 'you also get to practice with how functional programming works and how you can break down each component into its own little function.', 'start': 11746.627, 'duration': 6.605}, {'end': 11761.218, 'text': "And then next thing I wanna do is now that I'm getting a number between zero, one and two, right?", 'start': 11756.114, 'duration': 5.104}, {'end': 11772.086, 'text': 'Imagine if I had an array and that array had rock paper and scissors.', 'start': 11761.438, 'duration': 10.648}], 'summary': 'Introduction to functional programming and breaking down components into functions.', 'duration': 36.055, 'max_score': 11736.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11736031.jpg'}, {'end': 11829.078, 'src': 'embed', 'start': 11804.686, 'weight': 1, 'content': [{'end': 11814.673, 'text': "And you can see that every time I run this, I'm gonna get a different answer, right?. So I get rock rock paper paper scissors. rock paper scissors.", 'start': 11804.686, 'duration': 9.987}, {'end': 11817.555, 'text': 'it just shuffles between those three.', 'start': 11815.874, 'duration': 1.681}, {'end': 11823.776, 'text': "That's essentially what we're trying to do here, okay? So I created a function that lets me generate a random number.", 'start': 11817.775, 'duration': 6.001}, {'end': 11829.078, 'text': "Now another function I'm gonna create is, I'm gonna call it numberToChoice.", 'start': 11825.157, 'duration': 3.921}], 'summary': 'Creating functions to generate random numbers and convert them to choices.', 'duration': 24.392, 'max_score': 11804.686, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA11804686.jpg'}], 'start': 10914.491, 'title': 'Implementing rps game functions, creating front end, and learning javascript functions', 'summary': 'Discusses implementing an rps game function, creating the front end for a rock-paper-scissors game, and learning javascript functions. it details initializing variables, displaying user and computer choices, and creating a random number generator. it also covers determining the winner using a clever data structure and practicing building own examples.', 'chapters': [{'end': 11228.194, 'start': 10914.491, 'title': 'Object-oriented programming functions', 'summary': 'Discusses implementing an rps game function, initializing variables for human and bot choices, and mapping out functions for deciding the winner and printing messages in the game.', 'duration': 313.703, 'highlights': ['Implementing an RPS game function with two choices: human choice and bot choice. The chapter outlines the creation of an RPS game function with two different choices, human choice and bot choice.', 'Initializing variables for human and bot choices and explaining how they are used. The chapter explains the process of initializing variables for human and bot choices and their utilization throughout the game.', 'Mapping out functions for deciding the winner and printing messages in the game. The chapter discusses mapping out functions for deciding the winner and printing specific messages based on the game results.']}, {'end': 11472.374, 'start': 11228.254, 'title': 'Creating rps game front end', 'summary': 'Details the process of creating the front end for a rock-paper-scissors game, including the functions needed to display user and computer choices, as well as messages, utilizing dictionaries for message color and completion of the game skeleton.', 'duration': 244.12, 'highlights': ["The final function that's gonna actually show us the front end once we pick a choice. The final function for displaying the front end after a choice is made is crucial for the game's functionality.", 'The function needs to know the human choice, the bot choice, and the message to be printed out. The function requires information on the human choice, bot choice, and the message to be displayed in order to proceed.', 'Using dictionaries for message color and ensuring correct styling through JavaScript is emphasized. The utilization of dictionaries for message color and styling in JavaScript is highlighted as a key aspect of the front end.']}, {'end': 11753.232, 'start': 11472.394, 'title': 'Learning javascript functions', 'summary': 'Walks through creating a function in javascript to allow the computer to choose randomly between three options, using math.random and math.floor, and encourages practicing by following along and building own examples.', 'duration': 280.838, 'highlights': ['Creating a function in JavaScript to allow the computer to choose randomly between three options The chapter explains the process of creating a function in JavaScript to enable the computer to pick a number randomly between zero, one, and two, and demonstrates the use of math.random and math.floor to achieve this.', 'Encouraging practicing by following along and building own examples The chapter encourages beginners to follow along with the demonstration, learn the process, and then come up with their own examples or replicate the demonstrated process from scratch without watching the video, serving as a great way to learn the material.', 'Introducing the concept of functional programming and breaking down components into individual functions The chapter introduces the concept of functional programming and emphasizes breaking down each component into its own function, providing practice in understanding how functional programming works.']}, {'end': 12309.65, 'start': 11756.114, 'title': 'Creating a random number generator and deciding the winner', 'summary': 'Covers creating a random number generator to pick between rock, paper, and scissors and determining the winner using a clever data structure, showcasing a total of nine different cases to be covered and a cleaner way to handle the process.', 'duration': 553.536, 'highlights': ['The chapter covers creating a random number generator to pick between rock, paper, and scissors and determining the winner using a clever data structure The speaker explains the process of generating a random number to represent rock, paper, or scissors and then proceeds to illustrate a clever data structure to determine the winner, showcasing the use of if-then statements and a more organized way to handle the process.', 'Showcasing a total of nine different cases to be covered The speaker elaborates on the need to define nine different scenarios using if-then statements, covering all possible outcomes when the human and computer pick rock, paper, or scissors, demonstrating the complexity of the decision-making process.', 'A cleaner way to handle the process The speaker introduces a cleaner way to handle the decision-making process by creating a data structure resembling a JSON object, showcasing a nested dictionary to define the outcomes for each possible choice of rock, paper, or scissors, providing a more organized approach.']}], 'duration': 1395.159, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA10914491.jpg', 'highlights': ['Creating a function in JavaScript to allow the computer to choose randomly between three options', 'The chapter covers creating a random number generator to pick between rock, paper, and scissors and determining the winner using a clever data structure', 'The chapter outlines the creation of an RPS game function with two different choices, human choice and bot choice', 'The chapter explains the process of initializing variables for human and bot choices and their utilization throughout the game', "The final function for displaying the front end after a choice is made is crucial for the game's functionality", 'The chapter discusses mapping out functions for deciding the winner and printing specific messages based on the game results', 'The utilization of dictionaries for message color and styling in JavaScript is highlighted as a key aspect of the front end', 'The chapter introduces the concept of functional programming and emphasizes breaking down each component into its own function, providing practice in understanding how functional programming works', 'The chapter encourages beginners to follow along with the demonstration, learn the process, and then come up with their own examples or replicate the demonstrated process from scratch without watching the video, serving as a great way to learn the material']}, {'end': 14272.664, 'segs': [{'end': 12359.501, 'src': 'embed', 'start': 12338.73, 'weight': 0, 'content': [{'end': 12349.916, 'text': "So this function's job is to return one comma zero, zero comma one or 0.5 comma, 0.5, like it needs to return an array, as you can see here,", 'start': 12338.73, 'duration': 11.186}, {'end': 12354.018, 'text': 'and it needs to describe what took place human loss, bot one, something like that, okay?', 'start': 12349.916, 'duration': 4.102}, {'end': 12359.501, 'text': "So that's essentially what we want for our results, for decide winner function to be able to do.", 'start': 12354.438, 'duration': 5.063}], 'summary': 'Function returns an array of 1,0, 0,1, or 0.5, 0.5 to describe human loss, bot win, or draw.', 'duration': 20.771, 'max_score': 12338.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12338730.jpg'}, {'end': 12473.937, 'src': 'embed', 'start': 12445.335, 'weight': 1, 'content': [{'end': 12451.177, 'text': 'so here we can see your choice.', 'start': 12445.335, 'duration': 5.842}, {'end': 12452.797, 'text': 'if you pick rock, what takes place?', 'start': 12451.177, 'duration': 1.62}, {'end': 12454.958, 'text': "or you pick paper and then here computer's choice.", 'start': 12452.797, 'duration': 2.161}, {'end': 12460.44, 'text': 'what happens if computer picks scissors and the human player picks one of those three options?', 'start': 12454.958, 'duration': 5.482}, {'end': 12471.023, 'text': "And that's how the winner is gonna be decided, and then what we want it to do is return your score and then the computer score.", 'start': 12461.08, 'duration': 9.943}, {'end': 12473.937, 'text': 'just like that, okay?', 'start': 12472.776, 'duration': 1.161}], 'summary': 'Explaining the rules of a game where the winner is determined based on choices made, returning scores for both players.', 'duration': 28.602, 'max_score': 12445.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12445335.jpg'}, {'end': 12536.789, 'src': 'embed', 'start': 12507.007, 'weight': 2, 'content': [{'end': 12511.308, 'text': "So now it's gonna console.long computer choice what the computer actually picked,", 'start': 12507.007, 'duration': 4.301}, {'end': 12515.729, 'text': "and then it's gonna send the human choice and the bot choice to decide winner function.", 'start': 12511.308, 'duration': 4.421}, {'end': 12524.491, 'text': 'Decide winner function is gonna figure out what took place and is gonna return an array like zero comma one, 0.5 comma 0.5 or one comma zero.', 'start': 12515.769, 'duration': 8.722}, {'end': 12529.833, 'text': 'And then console.long is gonna just print that out, okay? So line 33 is gonna print that.', 'start': 12525.131, 'duration': 4.702}, {'end': 12531.133, 'text': "I'm gonna hit refresh, let's click.", 'start': 12529.873, 'duration': 1.26}, {'end': 12536.789, 'text': 'Decide win, winner is the function name.', 'start': 12532.547, 'duration': 4.242}], 'summary': 'The program determines the winner between computer and human choices and prints the result.', 'duration': 29.782, 'max_score': 12507.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12507007.jpg'}, {'end': 12603.832, 'src': 'embed', 'start': 12571.966, 'weight': 3, 'content': [{'end': 12579.148, 'text': 'And now look, I picked rock, right? And the computer choice was paper.', 'start': 12571.966, 'duration': 7.182}, {'end': 12581.628, 'text': 'So paper beats rock.', 'start': 12579.548, 'duration': 2.08}, {'end': 12584.788, 'text': 'So the array that was returned is zero comma one.', 'start': 12582.368, 'duration': 2.42}, {'end': 12586.989, 'text': 'Human loss, computer one.', 'start': 12585.589, 'duration': 1.4}, {'end': 12589.169, 'text': 'This case scenario.', 'start': 12588.209, 'duration': 0.96}, {'end': 12594.71, 'text': "Now I'll refresh and I'll pick rock again and it looks like the computer picked paper again and I lost again.", 'start': 12589.849, 'duration': 4.861}, {'end': 12603.832, 'text': "I'll hit it, and now it looks like the computer picked scissors, except rock beats scissors, and so we got back one comma zero,", 'start': 12595.65, 'duration': 8.182}], 'summary': 'Human: 0, computer: 2. computer picked paper twice, human lost both times.', 'duration': 31.866, 'max_score': 12571.966, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12571966.jpg'}, {'end': 12690.839, 'src': 'embed', 'start': 12663.923, 'weight': 4, 'content': [{'end': 12667.065, 'text': 'So there are only a few options that can take place here.', 'start': 12663.923, 'duration': 3.142}, {'end': 12670.928, 'text': 'There are only three possible array options here.', 'start': 12667.425, 'duration': 3.503}, {'end': 12677.011, 'text': 'The array will return one comma zero, zero point five comma zero point five, or zero comma one.', 'start': 12671.568, 'duration': 5.443}, {'end': 12680.514, 'text': 'If you get one comma zero, it should say you won.', 'start': 12677.572, 'duration': 2.942}, {'end': 12685.397, 'text': 'If you get zero point five comma zero point five, it should say you tied.', 'start': 12681.034, 'duration': 4.363}, {'end': 12690.839, 'text': 'If it does, zero comma one, it should say you lost, right.', 'start': 12685.917, 'duration': 4.922}], 'summary': 'Three possible array options: 1,0.5; 0.5,0.5; 0,1 for win, tie, or lose.', 'duration': 26.916, 'max_score': 12663.923, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12663923.jpg'}, {'end': 12746.98, 'src': 'embed', 'start': 12721.263, 'weight': 5, 'content': [{'end': 12725.626, 'text': "But if you do it with three equals and you do this, it will say that that's false.", 'start': 12721.263, 'duration': 4.363}, {'end': 12732.912, 'text': "So just to be very strict about it and make sure that we're always on the same page, stick to using three.", 'start': 12726.207, 'duration': 6.705}, {'end': 12740.495, 'text': 'And I will say return message.', 'start': 12737.055, 'duration': 3.44}, {'end': 12745.179, 'text': "And remember, we're returning a dictionary, okay, so something like this, or sorry, an object.", 'start': 12740.696, 'duration': 4.483}, {'end': 12746.98, 'text': "So remember, we're going to return something like that.", 'start': 12745.199, 'duration': 1.781}], 'summary': 'Using three equals ensures strict comparison and returning an object.', 'duration': 25.717, 'max_score': 12721.263, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12721263.jpg'}, {'end': 12891.567, 'src': 'embed', 'start': 12856.528, 'weight': 6, 'content': [{'end': 12868.909, 'text': 'Okay So final message is going to be the object objects and contain the message and the color.', 'start': 12856.528, 'duration': 12.381}, {'end': 12873.373, 'text': "Okay and it'll also make your code pretty readable.", 'start': 12868.929, 'duration': 4.444}, {'end': 12877.156, 'text': "So now I'm gonna uncomment this line out.", 'start': 12874.134, 'duration': 3.022}, {'end': 12881.7, 'text': 'Now the final message function should know what to do.', 'start': 12877.877, 'duration': 3.823}, {'end': 12891.567, 'text': 'The reason why, again, we wanna break down a lot of these things into its own functions is because if something goes wrong, Like, for example,', 'start': 12882.581, 'duration': 8.986}], 'summary': 'Final message function organizes objects by message and color to improve code readability.', 'duration': 35.039, 'max_score': 12856.528, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12856528.jpg'}, {'end': 13020.298, 'src': 'embed', 'start': 12982.642, 'weight': 7, 'content': [{'end': 12985.444, 'text': 'And the message that we got is you tied and the color is yellow.', 'start': 12982.642, 'duration': 2.802}, {'end': 12990.929, 'text': 'Perfect And if I click this, it says you lost the color is red because the computer picks scissors.', 'start': 12985.625, 'duration': 5.304}, {'end': 12997.215, 'text': 'If I pick scissors, it says the computer picked rock and you lost again and the color is red.', 'start': 12991.009, 'duration': 6.206}, {'end': 13002.029, 'text': "Perfect, that's exactly what we wanted it to be able to do.", 'start': 12998.427, 'duration': 3.602}, {'end': 13007.932, 'text': 'Now that we have all of our back end logic done, our logic is completely correct.', 'start': 13002.109, 'duration': 5.823}, {'end': 13020.298, 'text': 'the thing that we need to work on at this point is what the function, what the function should actually, what the front end actually should look like.', 'start': 13007.932, 'duration': 12.366}], 'summary': 'Backend logic is correct, focus on designing frontend function.', 'duration': 37.656, 'max_score': 12982.642, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12982642.jpg'}, {'end': 13126.761, 'src': 'embed', 'start': 13097.135, 'weight': 9, 'content': [{'end': 13106.996, 'text': "So I'm gonna say rock and rock, we're gonna give it the image source because these images we're gonna be using later.", 'start': 13097.135, 'duration': 9.861}, {'end': 13111.617, 'text': "So I just wanna collect them and put them in one place so it's easy to access them.", 'start': 13107.036, 'duration': 4.581}, {'end': 13116.839, 'text': "So get element by ID and this is just the rock ID, right? That's all.", 'start': 13112.178, 'duration': 4.661}, {'end': 13126.761, 'text': 'Like if you go to our index.html, the ID is rock, paper and scissors for these images.', 'start': 13121.16, 'duration': 5.601}], 'summary': 'Collect and organize rock images in one place for easy access.', 'duration': 29.626, 'max_score': 13097.135, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA13097135.jpg'}, {'end': 13253.904, 'src': 'embed', 'start': 13223.268, 'weight': 10, 'content': [{'end': 13227.07, 'text': "So document.getElementById, and I'm gonna do rock.remove.", 'start': 13223.268, 'duration': 3.802}, {'end': 13234.089, 'text': 'and I will do paper and I will do scissors.', 'start': 13230.106, 'duration': 3.983}, {'end': 13241.214, 'text': "And now when I refresh, let's go here and let's uncomment this line out.", 'start': 13235.67, 'duration': 5.544}, {'end': 13246.238, 'text': "And let's now click.", 'start': 13244.437, 'duration': 1.801}, {'end': 13249.601, 'text': 'And you can see that all of those images get removed.', 'start': 13246.939, 'duration': 2.662}, {'end': 13253.904, 'text': 'And then what we wanna do is based on the choices that the human and the bot have picked,', 'start': 13249.981, 'duration': 3.923}], 'summary': 'Removing images using javascript method and refreshing the page shows the images are removed.', 'duration': 30.636, 'max_score': 13223.268, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA13223268.jpg'}, {'end': 13605.521, 'src': 'embed', 'start': 13573.631, 'weight': 11, 'content': [{'end': 13576.432, 'text': "So this random div that I've created.", 'start': 13573.631, 'duration': 2.801}, {'end': 13586.137, 'text': "what I'm doing to that is I'm writing its inner HTML code and now I'm gonna go to the FlexboxRPSDiv and I'm gonna pen that human div.", 'start': 13576.432, 'duration': 9.705}, {'end': 13599.795, 'text': "so now i'm going to hit refresh and let's just click the rock and boom, it's actually showing the rock, so that's pretty good,", 'start': 13589.463, 'duration': 10.332}, {'end': 13605.521, 'text': "and it's attaching it to that div, and that's that's pretty much what we want to be able to see.", 'start': 13599.795, 'duration': 5.726}], 'summary': 'Demonstrating updating inner html and attaching elements to div using flexboxrpsdiv.', 'duration': 31.89, 'max_score': 13573.631, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA13573631.jpg'}, {'end': 13730.321, 'src': 'embed', 'start': 13667.259, 'weight': 12, 'content': [{'end': 13674.625, 'text': 'Now, the last thing we wanna do to this is make sure that it has that nice little box shadow right?', 'start': 13667.259, 'duration': 7.366}, {'end': 13678.388, 'text': "Because if we don't have that, then it doesn't have the blue thing behind it.", 'start': 13674.685, 'duration': 3.703}, {'end': 13682.671, 'text': 'So if I go here and I click, you can see that it has the blue thing that stays behind it.', 'start': 13678.488, 'duration': 4.183}, {'end': 13687.135, 'text': "So you wanna add that box shadow and we don't wanna wait for somebody to hover over it.", 'start': 13683.032, 'duration': 4.103}, {'end': 13690.397, 'text': 'We just want it to be there the entire time.', 'start': 13687.175, 'duration': 3.222}, {'end': 13695.508, 'text': "Oops, that's not what I meant to do.", 'start': 13693.587, 'duration': 1.921}, {'end': 13697.109, 'text': "Let's get out of the mobile mode.", 'start': 13695.628, 'duration': 1.481}, {'end': 13702.813, 'text': "So now I'm going to write style.", 'start': 13700.271, 'duration': 2.542}, {'end': 13708.097, 'text': 'And remember, you can style things directly from the HTML code.', 'start': 13704.514, 'duration': 3.583}, {'end': 13720.565, 'text': 'And right now we have access to the inner HTML box shadow.', 'start': 13708.197, 'duration': 12.368}, {'end': 13730.321, 'text': "And I'll do 0 pixel, 10 pixel, 50, and RGB.", 'start': 13722.097, 'duration': 8.224}], 'summary': 'Adding box shadow to maintain blue background, ensuring constant visibility.', 'duration': 63.062, 'max_score': 13667.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA13667259.jpg'}, {'end': 13873.544, 'src': 'embed', 'start': 13829.359, 'weight': 15, 'content': [{'end': 13834.8, 'text': 'And now, when the bot picks rock, or the bot picks scissors, we can actually see it.', 'start': 13829.359, 'duration': 5.441}, {'end': 13845.689, 'text': "Cool And it's looking nice.", 'start': 13839.641, 'duration': 6.048}, {'end': 13859.615, 'text': 'Now, the last thing we want to do is make sure that when we pick the styling and we show the rock or scissors or paper,', 'start': 13846.509, 'duration': 13.106}, {'end': 13862.457, 'text': 'we also want to make sure that we show the message.', 'start': 13859.615, 'duration': 2.842}, {'end': 13866.479, 'text': "So now that's what we want to create.", 'start': 13863.477, 'duration': 3.002}, {'end': 13873.544, 'text': "Since we've already created the div for it, what we want to do is added.", 'start': 13868.239, 'duration': 5.305}], 'summary': "Creating visual representation for bot's choice and messaging display.", 'duration': 44.185, 'max_score': 13829.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA13829359.jpg'}, {'end': 14175.036, 'src': 'embed', 'start': 14147.285, 'weight': 14, 'content': [{'end': 14151.39, 'text': "In this case, it doesn't really matter because it's looking nice and organized.", 'start': 14147.285, 'duration': 4.105}, {'end': 14153.012, 'text': 'Okay All right.', 'start': 14151.49, 'duration': 1.522}, {'end': 14154.875, 'text': 'Awesome So look at that.', 'start': 14153.313, 'duration': 1.562}, {'end': 14160.322, 'text': "We can now click paper and if the bot picks scissors, it'll tell us you lost.", 'start': 14155.155, 'duration': 5.167}, {'end': 14164.447, 'text': "We'll pick rock and if the bot picks paper, it'll tell us you lost.", 'start': 14161.323, 'duration': 3.124}, {'end': 14169.271, 'text': "If we pick rock and the bot picks scissors, it'll tell us you won.", 'start': 14165.508, 'duration': 3.763}, {'end': 14170.592, 'text': 'I mean, this is awesome.', 'start': 14169.571, 'duration': 1.021}, {'end': 14175.036, 'text': 'This is exactly what we wanted to make, and we have made it okay?', 'start': 14170.612, 'duration': 4.424}], 'summary': 'Created a game where user competes against a bot.', 'duration': 27.751, 'max_score': 14147.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14147285.jpg'}, {'end': 14242.706, 'src': 'embed', 'start': 14198.871, 'weight': 17, 'content': [{'end': 14204.754, 'text': "we'll go to style that CSS, everything that we have added, and we actually don't even need to do this, unless you want to do it,", 'start': 14198.871, 'duration': 5.883}, {'end': 14206.875, 'text': "but it's not necessary.", 'start': 14204.754, 'duration': 2.121}, {'end': 14214.32, 'text': 'I add we added the flexbox RPS, we added flexbox RPS here and we added container three here.', 'start': 14206.875, 'duration': 7.445}, {'end': 14219.383, 'text': "okay, that's all for the CSS part and for the index.html part.", 'start': 14214.32, 'duration': 5.063}, {'end': 14219.803, 'text': 'this is it.', 'start': 14219.383, 'duration': 0.42}, {'end': 14226.954, 'text': "Okay. so that's essentially all for this video.", 'start': 14222.671, 'duration': 4.283}, {'end': 14229.216, 'text': "It's looking awesome, our project is working.", 'start': 14227.134, 'duration': 2.082}, {'end': 14230.317, 'text': "I mean, isn't it exciting?", 'start': 14229.256, 'duration': 1.061}, {'end': 14231.197, 'text': 'This is really cool.', 'start': 14230.377, 'duration': 0.82}, {'end': 14232.118, 'text': "what we're working on right?", 'start': 14231.197, 'duration': 0.921}, {'end': 14239.263, 'text': "In the next one, we're gonna now work on the buttons and be able to change the colors of almost all of the buttons on the page.", 'start': 14232.638, 'duration': 6.625}, {'end': 14242.706, 'text': "And this challenge will be really fun and you'll learn a lot.", 'start': 14239.944, 'duration': 2.762}], 'summary': 'Added flexbox rps and container three in css and index.html. project is working.', 'duration': 43.835, 'max_score': 14198.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14198871.jpg'}], 'start': 12309.69, 'title': 'Rock-paper-scissors game implementation', 'summary': 'Discusses implementing rock-paper-scissors game logic, determining scores, creating front end logic, styling and displaying choices, and demonstrating game outcomes with specific color-coding using javascript, css, and html.', 'chapters': [{'end': 12571.306, 'start': 12309.69, 'title': 'Implementing rps game logic', 'summary': 'Discusses the implementation of a rock-paper-scissors game logic, determining the score based on choices made by the player and computer, and printing the results using console.log.', 'duration': 261.616, 'highlights': ["The function's job is to return an array with numerical values, representing the result of the game such as 1,0 or 0.5,0.5.", "The process involves accessing an RPS database to determine the outcome based on the human and computer choices, with the score being determined similarly for the computer's perspective.", "Printing the results using console.log includes displaying the computer's choice, sending the choices to the decideWinner function, and then printing the returned array."]}, {'end': 12746.98, 'start': 12571.966, 'title': 'Rock, paper, scissors game', 'summary': 'Demonstrates a game where rock, paper, scissors is played against a computer, resulting in the array indicating human and computer scores, with the final function determining the message based on the scores.', 'duration': 175.014, 'highlights': ['The game involves playing rock, paper, scissors against the computer, resulting in an array indicating human and computer scores. The game involves playing rock, paper, scissors against the computer, resulting in an array indicating human and computer scores such as 0,1 and 1,0.', 'The final function determines the message based on the scores, with three possible array options resulting in different messages. The final function determines the message based on the scores, with three possible array options resulting in different messages: 1,0 (you won), 0.5,0.5 (you tied), and 0,1 (you lost).', 'The chapter emphasizes the importance of using strict comparison (===) for checking conditions and returning a dictionary or object as the message. The chapter emphasizes the importance of using strict comparison (===) for checking conditions and returning a dictionary or object as the message, to ensure accuracy and consistency in the game logic.']}, {'end': 13002.029, 'start': 12747.56, 'title': 'Javascript rock-paper-scissors game logic', 'summary': "Explains the logic for determining the winner in a rock-paper-scissors game using javascript, emphasizing the importance of breaking down the code into separate functions for better readability and error identification, and demonstrating the game outcomes with specific color-coding based on the player's and computer's choices.", 'duration': 254.469, 'highlights': ['The chapter emphasizes the importance of breaking down the code into separate functions for better readability and error identification. The speaker explains the need to break down the code into separate functions to easily identify errors and improve readability, highlighting the potential issues that may arise when all the code is combined into one function.', "Demonstration of the game outcomes with specific color-coding based on the player's and computer's choices. The speaker demonstrates the different game outcomes by displaying specific color-coded messages for the player's and computer's choices, such as 'you tied' with a yellow color, and 'you lost' with a red color, providing a visual representation of the game results.", "Explanation of the logic for determining the winner in a rock-paper-scissors game using JavaScript. The chapter provides an explanation of the logic used to determine the winner in a rock-paper-scissors game, including conditions for different scores and the corresponding color-coded messages, enhancing the understanding of the game's decision-making process."]}, {'end': 13666.859, 'start': 13002.109, 'title': 'Creating front end logic for rps game', 'summary': 'Discusses the creation of front end logic for a rock-paper-scissors game, including the creation of a database of images, removal and recreation of images on user interaction, and appending the created divs to display the chosen image.', 'duration': 664.75, 'highlights': ['Creation of a database of images for the Rock-Paper-Scissors game to easily access and display any image needed. The speaker explains the creation of a database of images for the game, making it easy to access and display any image needed, improving the readablility of the code.', 'Removal and recreation of images based on user interaction to display the chosen image. The process of removing and recreating images on user interaction is explained, demonstrating how the chosen image is displayed and appended to the flexbox rps div.', "Appending the created divs to display the chosen image for the Rock-Paper-Scissors game. The speaker explains the process of appending the created divs to display the chosen image, providing a visual representation of the user's choice in the game."]}, {'end': 13873.544, 'start': 13667.259, 'title': 'Styling and displaying choices', 'summary': 'Demonstrates adding box shadow for styling and displaying the choices of rock, paper, and scissors, along with corresponding colors, while also ensuring the message is displayed alongside the choices.', 'duration': 206.285, 'highlights': ['Adding box shadow for styling and displaying choices The speaker emphasizes the importance of adding a box shadow to ensure the blue highlight stays behind the choices of rock, paper, and scissors, without requiring a hover action.', 'Setting box shadow with specific values and RGB The speaker mentions setting the box shadow with specific values (0 pixel, 10 pixel, 50) and RGB (24, 38) to achieve the desired styling for the choices.', 'Displaying choices and corresponding colors The speaker demonstrates displaying the choices of rock, paper, and scissors with highlighted blue for human choice and red for bot choice, ensuring the choices are displayed appropriately.', 'Ensuring the message is displayed alongside the choices The speaker highlights the importance of showing the message alongside the displayed choices, emphasizing the completion of the desired outcome.']}, {'end': 14272.664, 'start': 13873.684, 'title': 'Styling html elements with javascript', 'summary': 'Focuses on styling html elements using javascript, including setting color, font size, padding, and appending elements to the dom, resulting in a rock-paper-scissors game with interactive functionality and code additions in javascript, css, and html.', 'duration': 398.98, 'highlights': ['The chapter covers styling HTML elements using JavaScript, including setting color, font size, padding, and appending elements to the DOM, resulting in a rock-paper-scissors game with interactive functionality and code additions in JavaScript, CSS, and HTML.', 'The code additions include JavaScript for handling the game logic, CSS for styling using flexbox and defining containers, and HTML for structuring the elements of the game.', "The tutorial emphasizes the interactive functionality of the rock-paper-scissors game, showcasing the outcomes when the user picks rock and the bot picks paper, rock, or scissors, with corresponding messages of 'you lost' or 'you won'.", 'The upcoming challenge involves working on the buttons and changing the colors of most of the buttons on the page, with a promise of a fun and insightful learning experience.']}], 'duration': 1962.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA12309690.jpg', 'highlights': ["The function's job is to return an array with numerical values, representing the result of the game such as 1,0 or 0.5,0.5.", "The process involves accessing an RPS database to determine the outcome based on the human and computer choices, with the score being determined similarly for the computer's perspective.", "Printing the results using console.log includes displaying the computer's choice, sending the choices to the decideWinner function, and then printing the returned array.", 'The game involves playing rock, paper, scissors against the computer, resulting in an array indicating human and computer scores such as 0,1 and 1,0.', 'The final function determines the message based on the scores, with three possible array options resulting in different messages: 1,0 (you won), 0.5,0.5 (you tied), and 0,1 (you lost).', 'The chapter emphasizes the importance of using strict comparison (===) for checking conditions and returning a dictionary or object as the message, to ensure accuracy and consistency in the game logic.', 'The chapter emphasizes the importance of breaking down the code into separate functions for better readability and error identification.', "Demonstration of the game outcomes with specific color-coding based on the player's and computer's choices.", 'Explanation of the logic for determining the winner in a rock-paper-scissors game using JavaScript.', 'Creation of a database of images for the Rock-Paper-Scissors game to easily access and display any image needed.', 'Removal and recreation of images based on user interaction to display the chosen image.', 'Appending the created divs to display the chosen image for the Rock-Paper-Scissors game.', 'Adding box shadow for styling and displaying choices.', 'Setting box shadow with specific values (0 pixel, 10 pixel, 50) and RGB (24, 38) to achieve the desired styling for the choices.', 'Displaying choices of rock, paper, and scissors with highlighted blue for human choice and red for bot choice, ensuring the choices are displayed appropriately.', 'Ensuring the message is displayed alongside the choices.', 'The chapter covers styling HTML elements using JavaScript, including setting color, font size, padding, and appending elements to the DOM, resulting in a rock-paper-scissors game with interactive functionality and code additions in JavaScript, CSS, and HTML.', 'The code additions include JavaScript for handling the game logic, CSS for styling using flexbox and defining containers, and HTML for structuring the elements of the game.', "The tutorial emphasizes the interactive functionality of the rock-paper-scissors game, showcasing the outcomes when the user picks rock and the bot picks paper, rock, or scissors, with corresponding messages of 'you lost' or 'you won'.", 'The upcoming challenge involves working on the buttons and changing the colors of most of the buttons on the page, with a promise of a fun and insightful learning experience.']}, {'end': 15114.24, 'segs': [{'end': 14299.881, 'src': 'embed', 'start': 14278.309, 'weight': 1, 'content': [{'end': 14289.195, 'text': 'Welcome, I hope that you had a lot of fun and it was really challenging for you to work on the rock paper scissors challenge so far and the cat generator in your agent days.', 'start': 14278.309, 'duration': 10.886}, {'end': 14295.339, 'text': 'This is the challenge called change the color of all buttons, okay?', 'start': 14289.755, 'duration': 5.584}, {'end': 14299.881, 'text': "There's gonna be a really fun challenge, and that's what we're gonna be covering in this video.", 'start': 14295.739, 'duration': 4.142}], 'summary': 'Covering a fun challenge to change button colors.', 'duration': 21.572, 'max_score': 14278.309, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14278309.jpg'}, {'end': 14406.095, 'src': 'embed', 'start': 14377.001, 'weight': 2, 'content': [{'end': 14380.444, 'text': "The only portion you really need to worry about, because like, look, what's the CSS??", 'start': 14377.001, 'duration': 3.443}, {'end': 14382.025, 'text': "It's just one Flexbox div right?", 'start': 14380.504, 'duration': 1.521}, {'end': 14386.569, 'text': 'So let me right click here, inspect and highlight this', 'start': 14382.065, 'duration': 4.504}, {'end': 14391.253, 'text': 'This div is called, okay let me click here first, select an element in the page to inspect it.', 'start': 14387.049, 'duration': 4.204}, {'end': 14395.188, 'text': 'This div here is just called flex box pick color.', 'start': 14392.406, 'duration': 2.782}, {'end': 14396.369, 'text': "That's it.", 'start': 14395.888, 'duration': 0.481}, {'end': 14401.372, 'text': 'When I hover over, this is a select element.', 'start': 14397.409, 'duration': 3.963}, {'end': 14406.095, 'text': 'You can have an input element or you could have an image element.', 'start': 14402.413, 'duration': 3.682}], 'summary': "The css involves one flexbox div named 'flex box pick color' with select, input, or image elements.", 'duration': 29.094, 'max_score': 14377.001, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14377001.jpg'}, {'end': 14475.478, 'src': 'embed', 'start': 14447.944, 'weight': 4, 'content': [{'end': 14455.467, 'text': 'So here, button danger I know turns it red, button primary turns it blue, button warning turns it yellow, and button success turns it green.', 'start': 14447.944, 'duration': 7.523}, {'end': 14458.668, 'text': 'So I want you to remember that fact in the back of your head.', 'start': 14455.767, 'duration': 2.901}, {'end': 14463.71, 'text': 'Other than that, all we have is a container.', 'start': 14459.789, 'duration': 3.921}, {'end': 14466.551, 'text': 'So this is container four, as you can see, for challenge four.', 'start': 14464.03, 'duration': 2.521}, {'end': 14475.478, 'text': 'we got a container, we got a div, and here we just have our H2, okay?', 'start': 14468.894, 'duration': 6.584}], 'summary': 'Buttons change colors: danger-red, primary-blue, warning-yellow, success-green. container four for challenge four.', 'duration': 27.534, 'max_score': 14447.944, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14447944.jpg'}, {'end': 14705.048, 'src': 'embed', 'start': 14676.261, 'weight': 0, 'content': [{'end': 14680.223, 'text': 'Reset like that refresh, and boom, we got all of those options.', 'start': 14676.261, 'duration': 3.962}, {'end': 14688.703, 'text': "Okay And on change is kind of like saying on click except we don't want things to take place when we click.", 'start': 14680.303, 'duration': 8.4}, {'end': 14692.264, 'text': 'We want things to take place when we change.', 'start': 14689.363, 'duration': 2.901}, {'end': 14695.225, 'text': 'So when we change it to red or we change it to green.', 'start': 14692.684, 'duration': 2.541}, {'end': 14698.666, 'text': "If it's the same and we select green again, it shouldn't do anything.", 'start': 14695.745, 'duration': 2.921}, {'end': 14701.907, 'text': 'But only on change something should take effect.', 'start': 14699.567, 'duration': 2.34}, {'end': 14705.048, 'text': "So that's why we have an on change trigger right there.", 'start': 14701.927, 'duration': 3.121}], 'summary': 'Explaining the on change trigger for selecting colors, ensuring it only takes effect when a change occurs.', 'duration': 28.787, 'max_score': 14676.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14676261.jpg'}, {'end': 14926.071, 'src': 'embed', 'start': 14886.889, 'weight': 3, 'content': [{'end': 14892.952, 'text': "so we're pretty much gonna start off by collecting all of the buttons, okay?", 'start': 14886.889, 'duration': 6.063}, {'end': 14900.356, 'text': 'So what is one way to collect all of the buttons, or in other words, yeah, basically getting all of these elements?', 'start': 14892.972, 'duration': 7.384}, {'end': 14901.156, 'text': "Well, I'll show you.", 'start': 14900.436, 'duration': 0.72}, {'end': 14910.075, 'text': "So what I can do is I can do var all buttons, create a variable for this and I'll say document dot.", 'start': 14901.697, 'duration': 8.378}, {'end': 14913.477, 'text': 'get elements by.', 'start': 14910.075, 'duration': 3.402}, {'end': 14916.918, 'text': 'did I misspell it??', 'start': 14913.477, 'duration': 3.441}, {'end': 14926.071, 'text': 'Elements, whoops, get elements by tag name.', 'start': 14917.699, 'duration': 8.372}], 'summary': 'Starts by collecting all buttons using document.getelementbytagname.', 'duration': 39.182, 'max_score': 14886.889, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14886889.jpg'}], 'start': 14278.309, 'title': 'Changing button colors challenge', 'summary': 'Covers a new challenge to change the color of buttons, demonstrating how to dynamically alter the button colors based on user input, with the ability to reset to original colors and generate random colors.', 'chapters': [{'end': 14351.742, 'start': 14278.309, 'title': 'Changing button colors challenge', 'summary': 'Covers a new challenge to change the color of buttons, demonstrating how to dynamically alter the button colors based on user input, with the ability to reset to original colors and generate random colors.', 'duration': 73.433, 'highlights': ['The challenge introduces a new task to change the color of buttons, providing an engaging opportunity for the viewers.', 'The demonstration showcases the dynamic functionality of altering button colors based on user input, including the options to reset to original colors and generate random colors.', "The instructor encourages the viewers to focus on the buttons' color changes and assures them not to worry about other elements on the screen during the demonstration."]}, {'end': 15114.24, 'start': 14351.742, 'title': 'Web design challenge explanation', 'summary': 'Explains a web design challenge, focusing on html, css, and javascript, and how to change the color of buttons using predefined terms, with a detailed explanation of the flexbox div, button classes, and the process of collecting all the buttons in the document.', 'duration': 762.498, 'highlights': ['The CSS portion for this challenge is pretty much non-existent, with only one Flexbox div to worry about, and the predefined terms from Bootstrap are used to control the button colors. The CSS portion for this challenge is minimal, with only one Flexbox div to worry about. Predefined terms from Bootstrap, such as button danger (red), button warning (yellow), and button success (green), are used to control the button colors.', "The Flexbox div, 'flex box pick color,' is explained in detail, including the select element, button classes, and the process of organizing the buttons within the div. The Flexbox div, 'flex box pick color,' is explained, including the select element, button classes (e.g., button primary, button danger), and the process of organizing the buttons within the div.", "The process of collecting all the buttons in the document using JavaScript is described, using the 'document.getElementsByTagName' method to obtain an array of all button elements. The process of collecting all the buttons in the document using JavaScript is described, utilizing the 'document.getElementsByTagName' method to obtain an array of all button elements."]}], 'duration': 835.931, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA14278309.jpg', 'highlights': ['The demonstration showcases the dynamic functionality of altering button colors based on user input, including the options to reset to original colors and generate random colors.', 'The challenge introduces a new task to change the color of buttons, providing an engaging opportunity for the viewers.', "The Flexbox div, 'flex box pick color,' is explained, including the select element, button classes (e.g., button primary, button danger), and the process of organizing the buttons within the div.", "The process of collecting all the buttons in the document using JavaScript is described, utilizing the 'document.getElementsByTagName' method to obtain an array of all button elements.", 'The CSS portion for this challenge is minimal, with only one Flexbox div to worry about. Predefined terms from Bootstrap, such as button danger (red), button warning (yellow), and button success (green), are used to control the button colors.']}, {'end': 17089.417, 'segs': [{'end': 15200.049, 'src': 'embed', 'start': 15171.847, 'weight': 2, 'content': [{'end': 15177.32, 'text': "If you're confused, just always use let, okay? So now I'm gonna start showing you guys that.", 'start': 15171.847, 'duration': 5.473}, {'end': 15180.022, 'text': "So instead of saying var i equals something, I'm gonna say let.", 'start': 15177.34, 'duration': 2.682}, {'end': 15186.488, 'text': "And the more we get advanced into this, the more and more we're gonna start using let and const.", 'start': 15180.663, 'duration': 5.825}, {'end': 15194.264, 'text': "But the reason why I wanna use var is so you're not super confused, and var is pretty much used everywhere.", 'start': 15188.939, 'duration': 5.325}, {'end': 15200.049, 'text': "So if you look at tutorials and try to learn from online, you'll be like oh okay, I know what var is okay?", 'start': 15194.304, 'duration': 5.745}], 'summary': "Use 'let' and 'const' more as we advance, but 'var' is widely used for avoiding confusion.", 'duration': 28.202, 'max_score': 15171.847, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA15171847.jpg'}, {'end': 15865.615, 'src': 'embed', 'start': 15825.213, 'weight': 4, 'content': [{'end': 15829.936, 'text': 'If you use the object data structure, it would not keep the order there.', 'start': 15825.213, 'duration': 4.723}, {'end': 15833.237, 'text': 'All right, so cool.', 'start': 15832.077, 'duration': 1.16}, {'end': 15834.718, 'text': "That's what we needed.", 'start': 15833.438, 'duration': 1.28}, {'end': 15838.981, 'text': 'Now back to writing our function.', 'start': 15835.058, 'duration': 3.923}, {'end': 15849.886, 'text': "what we're going to do is loop through and say hey, buttons, red, get the class list and then remove.", 'start': 15842.421, 'duration': 7.465}, {'end': 15864.915, 'text': "okay, and what we want to effectively remove is we're going to get the all buttons i and we want to remove that buttons.", 'start': 15849.886, 'duration': 15.029}, {'end': 15865.615, 'text': 'second class.', 'start': 15864.915, 'duration': 0.7}], 'summary': "Using object data structure doesn't preserve order. writing function to remove specific classes from buttons.", 'duration': 40.402, 'max_score': 15825.213, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA15825213.jpg'}, {'end': 16393.197, 'src': 'embed', 'start': 16366.321, 'weight': 3, 'content': [{'end': 16372.546, 'text': "And if we just keep indexing it randomly, we're always gonna get a random number, except we don't have a random number here.", 'start': 16366.321, 'duration': 6.225}, {'end': 16373.827, 'text': 'We have a hard-coded number.', 'start': 16372.606, 'duration': 1.221}, {'end': 16376.669, 'text': 'So how do we get a random number?', 'start': 16374.207, 'duration': 2.462}, {'end': 16379.992, 'text': 'Well, remember, math dot.', 'start': 16376.709, 'duration': 3.283}, {'end': 16383.897, 'text': 'random will give us a random number between zero and one.', 'start': 16379.992, 'duration': 3.905}, {'end': 16388.524, 'text': 'multiplying it by four will give us a number between zero and four.', 'start': 16383.897, 'duration': 4.627}, {'end': 16393.197, 'text': "okay?, It won't ever give us four.", 'start': 16388.524, 'duration': 4.673}], 'summary': 'Using math.random to generate random numbers between 0 and 4.', 'duration': 26.876, 'max_score': 16366.321, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA16366321.jpg'}, {'end': 16715.335, 'src': 'embed', 'start': 16686.098, 'weight': 1, 'content': [{'end': 16690.722, 'text': "And there you have it, I'll do random again, and then we'll do reset.", 'start': 16686.098, 'duration': 4.624}, {'end': 16699.123, 'text': 'And so now you can see that buttons red is working, buttons green is working, button color reset, random colors is working.', 'start': 16691.023, 'duration': 8.1}, {'end': 16703.026, 'text': "This is the main function that's making all of the other ones run.", 'start': 16699.664, 'duration': 3.362}, {'end': 16706.149, 'text': "And that's effectively it, my friend.", 'start': 16704.067, 'duration': 2.082}, {'end': 16707.63, 'text': "That's effectively it.", 'start': 16706.569, 'duration': 1.061}, {'end': 16715.335, 'text': 'You have completed the change the color of all buttons challenge, okay? Great, great job.', 'start': 16707.77, 'duration': 7.565}], 'summary': 'Successfully completed the change the color of all buttons challenge.', 'duration': 29.237, 'max_score': 16686.098, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA16686098.jpg'}, {'end': 16863.955, 'src': 'embed', 'start': 16839.347, 'weight': 0, 'content': [{'end': 16844.811, 'text': 'Now, JavaScript part also has multiple parts to it, so we might break that down into multiple videos.', 'start': 16839.347, 'duration': 5.464}, {'end': 16848.193, 'text': 'So this project should be at least three plus videos.', 'start': 16845.011, 'duration': 3.182}, {'end': 16855.152, 'text': 'All right, so before we start coding it up, we need to know a few things.', 'start': 16851.111, 'duration': 4.041}, {'end': 16857.953, 'text': 'First of all, is like what this even is right?', 'start': 16855.272, 'duration': 2.681}, {'end': 16860.434, 'text': 'How does blackjack in this case work?', 'start': 16858.013, 'duration': 2.421}, {'end': 16862.854, 'text': 'So most of the blackjacks are a lot.', 'start': 16860.574, 'duration': 2.28}, {'end': 16863.955, 'text': "you know they're like.", 'start': 16862.854, 'duration': 1.101}], 'summary': 'The project will consist of at least three videos covering the multiple parts of javascript and the explanation of how blackjack works.', 'duration': 24.608, 'max_score': 16839.347, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA16839347.jpg'}], 'start': 15114.88, 'title': 'Button functionality and color control', 'summary': 'Covers duplicating buttons, using let in javascript, and adding/removing classes for color changes, creating a master function for button color control, accessing/manipulating button classes, selecting random colors, and building challenge five blackjack game involving html, css, and javascript.', 'chapters': [{'end': 15496.508, 'start': 15114.88, 'title': 'Button styling and color change', 'summary': 'Discusses the process of duplicating all buttons, using let instead of var in javascript, and removing and adding button classes for color changes, with the aim of retaining original button colors and changing them as required.', 'duration': 381.628, 'highlights': ['The process of duplicating all buttons using a JavaScript array to retain original colors is explained, emphasizing the use of let instead of var for loop iteration.', 'The method of removing and adding button classes for color changes is detailed, showcasing the ability to manipulate button styling and achieve desired color changes.', 'The significance of retaining original button colors and changing them as required is highlighted, providing a clear understanding of the purpose behind the color manipulation process.', 'The explanation of using let or const instead of var for loop iterations in new JavaScript is outlined, emphasizing the need to adapt to the updated JavaScript standards for variable declaration.', 'The process of looping through and removing all button classes, then adding a new class for color changes, is described, offering a comprehensive approach to achieve desired color modifications.']}, {'end': 15751.42, 'start': 15498.469, 'title': 'Button color change function', 'summary': "Discusses the creation of a master function 'button color change' to control the behavior of different buttons, with a demonstration of obtaining button values and an explanation of the conditional statements for different button values.", 'duration': 252.951, 'highlights': ["The main function 'button color change' is introduced, serving as the master controller for different button functions, with conditional statements for red, green, reset, and random button values.", 'Demonstration of obtaining the value of a particular button by using console.log to display the button value when selected, indicating successful retrieval of button values such as red and green.', "The process of defining specific functions for each button value, including the 'red', 'green', 'reset', and 'random colors' functions to be executed based on the selected button value."]}, {'end': 16297.577, 'start': 15751.42, 'title': 'Accessing and manipulating button classes', 'summary': 'Focuses on accessing and manipulating button classes in a web development context, demonstrating the use of class lists and array data structures to preserve and modify button colors, as well as defining functions to reset, change to random colors, and specifically assign colors to buttons.', 'duration': 546.157, 'highlights': ['The use of array data structure preserves the order of button classes, ensuring the correct color sequence is maintained. The array data structure is utilized to preserve the order of button classes, allowing for the correct sequence of colors to be maintained, ensuring proper functionality.', 'Defining functions to reset, change to random colors, and specifically assign colors to buttons demonstrates practical application of web development concepts. The practical application of defining functions to reset, change to random colors, and specifically assign colors to buttons showcases the implementation of web development concepts in a functional manner.', 'Demonstration of accessing and manipulating button classes using class lists and array data structures provides insight into efficient web development techniques. The demonstration of accessing and manipulating button classes through the use of class lists and array data structures offers insight into efficient and effective web development techniques.']}, {'end': 16779.145, 'start': 16298.618, 'title': 'Random button selection', 'summary': 'Discusses selecting random items from an array, generating random numbers, and using for loops to change button colors in a web application, aiming to achieve random color selection and providing practice for technical concepts.', 'duration': 480.527, 'highlights': ['The chapter explains how to select random items from an array by generating a random number between 0 and the array length, then using this number to index the array and access a randomly selected item.', 'It demonstrates the use of Math.random() and Math.floor() to generate a random number between 0 and the array length, ensuring a whole number between 0 and the array length is obtained for indexing the array.', 'The transcript provides insights into the importance of generating a new random number inside a loop to ensure different colors for each button, emphasizing the practical application of technical concepts in a project-based context.', 'It encourages learners to practice for loops and arrays to strengthen their understanding of the technical aspects, highlighting the need for additional practice and exploration of these concepts to enhance proficiency in coding.', 'The chapter concludes with a message of encouragement, urging learners to share their results and seek further practice if needed, fostering a supportive learning environment and emphasizing the value of persistence and continuous learning in programming.']}, {'end': 17089.417, 'start': 16779.325, 'title': 'Building challenge 5: blackjack', 'summary': 'Covers the creation of challenge five blackjack, involving html, css, and multiple parts of javascript, with the aim of at least three videos, to simulate a game where players compete to get closest to 21, with examples of wins, losses, and draws.', 'duration': 310.092, 'highlights': ['The project involves creating challenge five blackjack, spanning HTML, CSS, and multiple parts of JavaScript, with the goal of at least three videos to simulate a game where players compete to get closest to 21, showcasing wins, losses, and draws.', 'The game simulates players competing to get closest to 21, with examples of wins, losses, and draws as the players interact with the bot, demonstrating scenarios of hitting, standing, and the outcomes of the game.', "Explanation of how blackjack works, where players aim to get closest to 21 without going over, and the demonstration of the game's functionalities, including the scoring system and card values, providing a clear understanding of the game's mechanics."]}], 'duration': 1974.537, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA15114880.jpg', 'highlights': ['The project involves creating challenge five blackjack, spanning HTML, CSS, and multiple parts of JavaScript, with the goal of at least three videos to simulate a game where players compete to get closest to 21, showcasing wins, losses, and draws.', "The main function 'button color change' is introduced, serving as the master controller for different button functions, with conditional statements for red, green, reset, and random button values.", 'The explanation of using let or const instead of var for loop iterations in new JavaScript is outlined, emphasizing the need to adapt to the updated JavaScript standards for variable declaration.', 'The chapter explains how to select random items from an array by generating a random number between 0 and the array length, then using this number to index the array and access a randomly selected item.', 'Demonstration of accessing and manipulating button classes using class lists and array data structures provides insight into efficient web development techniques.']}, {'end': 20692.374, 'segs': [{'end': 17736.015, 'src': 'embed', 'start': 17709.69, 'weight': 2, 'content': [{'end': 17713.43, 'text': 'And then the second row has a div inside of it.', 'start': 17709.69, 'duration': 3.74}, {'end': 17721.032, 'text': 'And that div actually contains the following buttons, okay? Now notice this div does not have an ID or a class.', 'start': 17713.55, 'duration': 7.482}, {'end': 17722.952, 'text': 'So we need to respect that.', 'start': 17721.572, 'duration': 1.38}, {'end': 17725.613, 'text': 'But these buttons do have an ID.', 'start': 17723.872, 'duration': 1.741}, {'end': 17736.015, 'text': 'And the reason for that is that later, when we make our JavaScript functions, we wanna be able to access these specific buttons with their ID, okay?', 'start': 17725.633, 'duration': 10.382}], 'summary': 'Transcript: describes structure of buttons without class or id, emphasizes need for future javascript access.', 'duration': 26.325, 'max_score': 17709.69, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA17709690.jpg'}, {'end': 18310.734, 'src': 'embed', 'start': 18280.14, 'weight': 0, 'content': [{'end': 18281.801, 'text': "Now let's look at row two.", 'start': 18280.14, 'duration': 1.661}, {'end': 18284.361, 'text': 'That should have the buttons, and it does.', 'start': 18281.881, 'duration': 2.48}, {'end': 18290.943, 'text': 'Row two has a div inside of it, and that div has the buttons inside of that.', 'start': 18284.841, 'duration': 6.102}, {'end': 18299.166, 'text': "And then we got flex blackjack row three, and row three has the table inside of it, and that's exactly what we wanted.", 'start': 18291.783, 'duration': 7.383}, {'end': 18301.486, 'text': "So that's it for the HTML part.", 'start': 18299.726, 'duration': 1.76}, {'end': 18306.008, 'text': "Now in the next video, we're gonna work on the CSS part and add some styling to it.", 'start': 18301.546, 'duration': 4.462}, {'end': 18310.734, 'text': "Thank you so much for watching, and I'll see you in the next video.", 'start': 18306.228, 'duration': 4.506}], 'summary': 'Html layout consists of rows with buttons and a table. css styling is next.', 'duration': 30.594, 'max_score': 18280.14, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA18280140.jpg'}, {'end': 18863.782, 'src': 'embed', 'start': 18828.437, 'weight': 1, 'content': [{'end': 18831.018, 'text': "And I guess from here I'll just bring it down a line.", 'start': 18828.437, 'duration': 2.581}, {'end': 18840.813, 'text': "Let's hit refresh and now you see that these buttons are actually in a row of their own.", 'start': 18835.851, 'duration': 4.962}, {'end': 18849.716, 'text': "And let's actually, I'm gonna highlight row two and then inside of row two there's a div.", 'start': 18843.774, 'duration': 5.942}, {'end': 18851.437, 'text': "So that's actually what we want.", 'start': 18849.856, 'duration': 1.581}, {'end': 18859.42, 'text': 'And that particular div, I also wanna turn that div into a flex box.', 'start': 18853.738, 'duration': 5.682}, {'end': 18863.782, 'text': "So I'm gonna go ahead and do that.", 'start': 18861.201, 'duration': 2.581}], 'summary': 'Styling changes made to row two and a div element to turn it into a flex box.', 'duration': 35.345, 'max_score': 18828.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA18828437.jpg'}, {'end': 19727.354, 'src': 'embed', 'start': 19700.62, 'weight': 3, 'content': [{'end': 19705.585, 'text': 'now the main thing that we actually need to work on is make sure that, um,', 'start': 19700.62, 'duration': 4.965}, {'end': 19713.113, 'text': "that our um final version you know the javascript portion is now added and we're ready to go.", 'start': 19705.585, 'duration': 7.528}, {'end': 19719.941, 'text': "so that's what we're going to work on, the actual functionality, because right now, if we do hit stand deal, nothing really takes place, okay?", 'start': 19713.113, 'duration': 6.828}, {'end': 19722.566, 'text': "So let's go ahead and work on that.", 'start': 19720.342, 'duration': 2.224}, {'end': 19727.354, 'text': "That's it for this video, and as always, I'll see you in the next video.", 'start': 19722.606, 'duration': 4.748}], 'summary': 'Finalize javascript functionality for the project.', 'duration': 26.734, 'max_score': 19700.62, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA19700620.jpg'}, {'end': 20089.38, 'src': 'embed', 'start': 20059.607, 'weight': 4, 'content': [{'end': 20062.39, 'text': 'Now we can write this all in our JavaScript directly.', 'start': 20059.607, 'duration': 2.783}, {'end': 20063.411, 'text': "That's a lot nicer.", 'start': 20062.57, 'duration': 0.841}, {'end': 20073.117, 'text': 'Okay, now what I want you to do is the Blackjack Assets folder that I gave you.', 'start': 20065.535, 'duration': 7.582}, {'end': 20084.139, 'text': "so in this module there is a post, or there's a lesson I created called Blackjack Assets, and that has all the sounds and the images you need.", 'start': 20073.117, 'duration': 11.022}, {'end': 20089.38, 'text': 'okay?. So what you should do is get all the sounds and the images.', 'start': 20084.139, 'duration': 5.241}], 'summary': 'In the javascript module, retrieve all sounds and images from the blackjack assets folder.', 'duration': 29.773, 'max_score': 20059.607, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA20059607.jpg'}], 'start': 17089.417, 'title': 'Creating blackjack game elements', 'summary': 'Covers creating html portion, flex boxes, styling, and javascript functionality for the blackjack game, emphasizing layout, visuals, and functionality, with a focus on divs, tables, buttons, flexboxes, images, sounds, and event handling.', 'chapters': [{'end': 18734.828, 'start': 17089.417, 'title': 'Html portion for blackjack challenge', 'summary': 'Outlines the creation of the html portion for the blackjack challenge, including the use of divs, tables, and buttons, with a focus on creating a flexible layout and styling the container and its contents.', 'duration': 1645.411, 'highlights': ['The HTML portion for the blackjack challenge is explained, focusing on the creation of divs, tables, and buttons. divs, tables, buttons', 'The use of flexbox for layout and styling the container and its contents is detailed to ensure a centered and organized presentation. flexbox layout, styling the container', 'The process of adding specific IDs and classes to elements for later access in JavaScript functions is emphasized. adding IDs and classes for JavaScript access']}, {'end': 19351.828, 'start': 18734.889, 'title': 'Creating flex boxes for blackjack game', 'summary': 'Explains the process of creating flex boxes for the blackjack game, adjusting the layout, adding images, and applying styling properties, with a focus on equal spacing and visual aesthetics.', 'duration': 616.939, 'highlights': ["The containers for 'you' and 'dealer' are set as flex items to be evenly spaced out, with the removal of 'dealer' resulting in 'you' being perfectly centered. Flex containers for 'you' and 'dealer' evenly spaced out, 'you' centered upon removing 'dealer'.", 'The buttons are placed in their own flex box and the div containing the buttons is also turned into a flex box. Buttons placed in their own flex box, div containing buttons turned into a flex box.', "An image is added as the background for 'row one' with adjustments made to ensure the text is readable and the image is visually pleasing. Image added as background for 'row one', adjustments to ensure text readability and visual appeal."]}, {'end': 19670.078, 'start': 19351.888, 'title': 'Styling flexbox and adding borders', 'summary': 'Demonstrates how to style a webpage using flexbox, adding images and borders, and adjusting padding and borders for a consistent look and feel, while addressing issues with table layout and appearance.', 'duration': 318.19, 'highlights': ['The chapter demonstrates how to add an image to a flexbox layout, achieving the desired appearance and structure. This is exemplified by adding an image to the second row using the flexbox properties, resulting in a visually pleasing layout.', 'The tutorial emphasizes the importance of consistent styling by converting div elements into flex containers, ensuring uniformity in button appearance and positioning. This is achieved by applying flexbox properties to div elements, resulting in a harmonized visual design across the webpage.', "The instructor provides guidance on adding borders to buttons, using the 'solid black' style for instructional purposes, to visually represent the spacing and layout of the elements. This is exemplified by adding borders to buttons and emphasizing their use for instructional clarity.", 'The chapter focuses on addressing issues with table layout and appearance, highlighting the steps to add borders and padding to ensure a visually consistent and well-structured table. This includes adding borders and adjusting padding to achieve a visually appealing and consistent table layout.']}, {'end': 20059.167, 'start': 19670.278, 'title': 'Blackjack javascript challenge', 'summary': 'Focuses on adding javascript functionality to a blackjack game, including selecting elements using query selector, adding event listeners, and creating functions for specific button clicks. the main goal is to ensure the javascript portion is added and functioning properly, with plans to implement logic for player actions and computer moves.', 'duration': 388.889, 'highlights': ["The main goal is to ensure the JavaScript portion is added and functioning properly The speaker emphasizes the need to work on the JavaScript portion to ensure the game's functionality, as hitting 'stand' currently does not trigger any action.", 'Adding event listeners and creating functions for specific button clicks The speaker demonstrates the use of query selector to select elements and add event listeners for specific button clicks, highlighting the benefits of this approach over traditional methods.', 'Plans to implement logic for player actions and computer moves The speaker outlines a step-by-step approach to implementing logic for player actions, adding layers of logic for player, computer, and dealing actions to the game.']}, {'end': 20692.374, 'start': 20059.607, 'title': 'Adding blackjack assets and implementing hit functionality', 'summary': "Covers adding blackjack assets, such as images and sounds, to the javascript code and implementing the functionality to display a card image and play a sound each time the 'hit' button is clicked, while also defining important variables and objects for the game.", 'duration': 632.767, 'highlights': ['The chapter introduces adding blackjack assets, including card images and sounds, to the JavaScript code. Assets such as card images and sounds are provided in a zip folder for download and integration into the code.', 'The chapter explains the process of unzipping the assets and placing the images and sounds in the correct directories within the code structure. Instructions are provided for unzipping the assets and placing the images and sounds in the appropriate directories within the code structure.', "The chapter demonstrates the creation of the 'blackjack game' object to store important variables and details, such as the player's score, the span tag for the score, and the 'your box' and 'dealer box' IDs. The creation of the 'blackjack game' object and the storage of important variables and details, including the player's score and the 'your box' and 'dealer box' IDs, are demonstrated."]}], 'duration': 3602.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA17089417.jpg', 'highlights': ['Covers creating html portion, flex boxes, styling, and javascript functionality for the blackjack game, emphasizing layout, visuals, and functionality, with a focus on divs, tables, buttons, flexboxes, images, sounds, and event handling.', 'The tutorial emphasizes the importance of consistent styling by converting div elements into flex containers, ensuring uniformity in button appearance and positioning. This is achieved by applying flexbox properties to div elements, resulting in a harmonized visual design across the webpage.', 'The process of adding specific IDs and classes to elements for later access in JavaScript functions is emphasized. adding IDs and classes for JavaScript access', "The main goal is to ensure the JavaScript portion is added and functioning properly The speaker emphasizes the need to work on the JavaScript portion to ensure the game's functionality, as hitting 'stand' currently does not trigger any action.", 'The chapter introduces adding blackjack assets, including card images and sounds, to the JavaScript code. Assets such as card images and sounds are provided in a zip folder for download and integration into the code.']}, {'end': 21977.544, 'segs': [{'end': 20792.482, 'src': 'embed', 'start': 20766.654, 'weight': 0, 'content': [{'end': 20774.097, 'text': 'So if ever the problem comes up in the card not showing up the right way, or the sound of the card not showing up the right way,', 'start': 20766.654, 'duration': 7.443}, {'end': 20778.619, 'text': 'we know that the show card function is the problem, okay?', 'start': 20774.097, 'duration': 4.522}, {'end': 20784.356, 'text': "So what I'm gonna do is I'm gonna create this function, call it show card.", 'start': 20780.313, 'duration': 4.043}, {'end': 20792.482, 'text': "And what this function will do is for now, I'm just gonna keep it like this.", 'start': 20785.257, 'duration': 7.225}], 'summary': 'Show card function may be the problem, needs to be created.', 'duration': 25.828, 'max_score': 20766.654, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA20766654.jpg'}, {'end': 20985.647, 'src': 'embed', 'start': 20907.774, 'weight': 1, 'content': [{'end': 20910.495, 'text': "And for now, we're just gonna pick you, okay? Because that's what we want.", 'start': 20907.774, 'duration': 2.721}, {'end': 20913.417, 'text': "All right, that's good.", 'start': 20911.416, 'duration': 2.001}, {'end': 20925.902, 'text': 'Now what we wanna do is we wanna create the deal function so that when somebody clicks deal, we want all of these images to go away.', 'start': 20914.157, 'duration': 11.745}, {'end': 20935.026, 'text': 'okay?. We want, instead of having to refresh, we wanna just be able to hit deal and then the images should go away.', 'start': 20925.902, 'duration': 9.124}, {'end': 20936.247, 'text': "So let's work on that.", 'start': 20935.306, 'duration': 0.941}, {'end': 20943.015, 'text': "So I'm going to create the function blackjack deal.", 'start': 20940.313, 'duration': 2.702}, {'end': 20955.586, 'text': 'Let your images equal document query selector.', 'start': 20946.038, 'duration': 9.548}, {'end': 20960.551, 'text': "OK And again we're going to see your box here.", 'start': 20955.606, 'duration': 4.945}, {'end': 20968.157, 'text': "and I'll do querySelector all and then pass an image.", 'start': 20962.834, 'duration': 5.323}, {'end': 20975.942, 'text': "okay?. Because what we're trying to do is every image that's inside of this.", 'start': 20968.157, 'duration': 7.785}, {'end': 20977.702, 'text': 'okay, look, let me do it like this', 'start': 20975.942, 'duration': 1.76}, {'end': 20985.647, 'text': 'So your box is this flexbox div here, right?', 'start': 20982.025, 'duration': 3.622}], 'summary': 'Creating a deal function to remove all images when deal button is clicked.', 'duration': 77.873, 'max_score': 20907.774, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA20907774.jpg'}, {'end': 21094.91, 'src': 'embed', 'start': 21049.525, 'weight': 3, 'content': [{'end': 21064.176, 'text': 'okay?. I will say document dot, query selector and we will say blackjack deal button dot.', 'start': 21049.525, 'duration': 14.651}, {'end': 21067.979, 'text': 'add event listener and then on click.', 'start': 21064.176, 'duration': 3.803}, {'end': 21072.883, 'text': 'it should run the blackjack deal function, okay?', 'start': 21067.979, 'duration': 4.904}, {'end': 21077.065, 'text': "So now I'm gonna hit refresh.", 'start': 21074.097, 'duration': 2.968}, {'end': 21080.575, 'text': "I'll hit deal.", 'start': 21077.626, 'duration': 2.949}, {'end': 21081.978, 'text': "I'll go to console.", 'start': 21080.956, 'duration': 1.022}, {'end': 21090.009, 'text': "And when I hit deal, look, it's returning to me a list.", 'start': 21087.168, 'duration': 2.841}, {'end': 21092.929, 'text': "Why is it empty? It's because, well, there are no images.", 'start': 21090.549, 'duration': 2.38}, {'end': 21094.91, 'text': 'So let me hit hit, let me hit deal.', 'start': 21092.949, 'duration': 1.961}], 'summary': 'Using document.queryselector, addeventlistener to run blackjack deal function on click.', 'duration': 45.385, 'max_score': 21049.525, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21049525.jpg'}, {'end': 21150.936, 'src': 'embed', 'start': 21122.757, 'weight': 2, 'content': [{'end': 21128.66, 'text': "Now, what we're gonna do is we're just gonna go ahead and remove one of the images, okay?", 'start': 21122.757, 'duration': 5.903}, {'end': 21134.924, 'text': "So what I'll do is I'll just say here remove, because this is an array.", 'start': 21128.7, 'duration': 6.224}, {'end': 21145.013, 'text': 'what I can do is I can just say your images, grab zeroth item from it and then just do dot, remove on it, okay?', 'start': 21134.924, 'duration': 10.089}, {'end': 21146.594, 'text': "And let's see if that does anything.", 'start': 21145.033, 'duration': 1.561}, {'end': 21150.936, 'text': "So I'm gonna hit, and then I'll hit deal, and it removes that image.", 'start': 21146.694, 'duration': 4.242}], 'summary': 'Demonstration of removing an image from an array.', 'duration': 28.179, 'max_score': 21122.757, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21122757.jpg'}, {'end': 21269.882, 'src': 'embed', 'start': 21205.721, 'weight': 4, 'content': [{'end': 21209.142, 'text': 'It should kinda set everything to zero, except for this, okay?', 'start': 21205.721, 'duration': 3.421}, {'end': 21219.083, 'text': "But for now what we'll have it do is just remove the images from your box, okay?", 'start': 21213.22, 'duration': 5.863}, {'end': 21226.687, 'text': 'So now, because it sounds like a repetitive task, we should actually use a for loop here.', 'start': 21219.904, 'duration': 6.783}, {'end': 21243.281, 'text': "So what I will say is I'll say for equals zero, okay? it needs to loop the same number of times as the images.", 'start': 21227.588, 'duration': 15.693}, {'end': 21244.683, 'text': 'Okay, so this is pretty standard.', 'start': 21243.301, 'duration': 1.382}, {'end': 21253.951, 'text': "I++, increment, I, and then what I wanna do is just, for each image, just remove that image, that's it.", 'start': 21245.303, 'duration': 8.648}, {'end': 21260.437, 'text': 'Okay, so now, if I hit refresh, hit, hit, hit, hit, hit, okay, it just removes them all.', 'start': 21253.971, 'duration': 6.466}, {'end': 21262.74, 'text': 'Because all it is, is just an array.', 'start': 21260.778, 'duration': 1.962}, {'end': 21269.882, 'text': 'and then all I do is just keep going, indexing the ith image, and then just removing it.', 'start': 21264.477, 'duration': 5.405}], 'summary': 'Using a for loop to remove images, setting everything else to zero.', 'duration': 64.161, 'max_score': 21205.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21205721.jpg'}, {'end': 21541.475, 'src': 'embed', 'start': 21438.866, 'weight': 9, 'content': [{'end': 21443.911, 'text': 'One, we need all of the different possibility of cards that we can have.', 'start': 21438.866, 'duration': 5.045}, {'end': 21449.896, 'text': "So we're not gonna use 52 cards from the deck.", 'start': 21444.291, 'duration': 5.605}, {'end': 21451.017, 'text': "We're gonna keep it pretty simple.", 'start': 21449.916, 'duration': 1.101}, {'end': 21463.934, 'text': "And we're just going to list out all the possibilities from 2, 3, 4, 5, 6, 7, 8, 9, 10, jack, queen, king, ace.", 'start': 21452.489, 'duration': 11.445}, {'end': 21476.459, 'text': 'So that brings us to 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 distinct possibilities that your card can be.', 'start': 21464.854, 'duration': 11.605}, {'end': 21479.42, 'text': 'And what we want to do is we just want to put that in an array.', 'start': 21476.819, 'duration': 2.601}, {'end': 21486.266, 'text': "And then the beauty of that will be that it'll later allow us to choose randomly from that array.", 'start': 21480.16, 'duration': 6.106}, {'end': 21489.028, 'text': "Okay, so let's go ahead and do that.", 'start': 21486.366, 'duration': 2.662}, {'end': 21492.692, 'text': "So I'll go to the blackjack game and I'm gonna add it over here.", 'start': 21489.188, 'duration': 3.504}, {'end': 21497.456, 'text': "Make sure you got these commas at the end because otherwise you're gonna get syntax error.", 'start': 21492.752, 'duration': 4.704}, {'end': 21500.159, 'text': 'And I will say cards.', 'start': 21498.817, 'duration': 1.342}, {'end': 21505.664, 'text': "So I'm gonna add in another key to blackjack game and I'm gonna add an array here.", 'start': 21500.619, 'duration': 5.045}, {'end': 21521.302, 'text': "and I'll add the two, three, four, five, six, seven, eight, nine, 10.", 'start': 21507.213, 'duration': 14.089}, {'end': 21533.589, 'text': "And remember, we have king, jack, queen, and ace, okay? Whoops, let's put a comma right there.", 'start': 21521.302, 'duration': 12.287}, {'end': 21541.475, 'text': "So if you put a comma here, it won't give you an error, and the reason why I put that there is that later.", 'start': 21537.148, 'duration': 4.327}], 'summary': 'Creating an array of 13 distinct card possibilities for a blackjack game and implementing them into the game.', 'duration': 102.609, 'max_score': 21438.866, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21438866.jpg'}, {'end': 21681.084, 'src': 'embed', 'start': 21645.301, 'weight': 12, 'content': [{'end': 21653.325, 'text': "So this way we'll never get an error and it'll always pick something random from there, okay? Whoops, so that's kind of the point of that.", 'start': 21645.301, 'duration': 8.024}, {'end': 21656.626, 'text': "And now we're just gonna kind of turn it into a function, okay?", 'start': 21653.745, 'duration': 2.881}, {'end': 21675.139, 'text': "So I will say function random card and I'll say let random index is equal to that math.floor, math.random times 13..", 'start': 21657.326, 'duration': 17.813}, {'end': 21678.582, 'text': "And then I'm just gonna say return.", 'start': 21675.139, 'duration': 3.443}, {'end': 21681.084, 'text': "And here's the interesting part.", 'start': 21679.743, 'duration': 1.341}], 'summary': 'Creating a function to return a random index from 1 to 13.', 'duration': 35.783, 'max_score': 21645.301, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21645301.jpg'}, {'end': 21795.297, 'src': 'embed', 'start': 21725.307, 'weight': 13, 'content': [{'end': 21747.681, 'text': 'card. okay, now hit refresh and hit hit, and so every time i hit, hit, it picks a card randomly.', 'start': 21725.307, 'duration': 22.374}, {'end': 21753.645, 'text': 'okay, so notice six, three queen, eight, four k.', 'start': 21747.681, 'duration': 5.964}, {'end': 21755.945, 'text': "So that's pretty good.", 'start': 21755.004, 'duration': 0.941}, {'end': 21765.094, 'text': 'Now all we need to do is make sure that it randomly then picks that image as well.', 'start': 21757.567, 'duration': 7.527}, {'end': 21771.499, 'text': "Because right now it's picking the card randomly but it's doing that internally.", 'start': 21765.114, 'duration': 6.385}, {'end': 21777.763, 'text': 'What we want to do is make sure that it shows that random card on the front end.', 'start': 21771.9, 'duration': 5.863}, {'end': 21780.365, 'text': "Okay, so right now we're kind of have a front end problem.", 'start': 21777.844, 'duration': 2.521}, {'end': 21784.749, 'text': 'We figured out how to do the how to handle logic on the back end.', 'start': 21780.806, 'duration': 3.943}, {'end': 21795.297, 'text': "So what we're gonna do is I'm gonna move this kind of up here, because it makes more sense for it to be up here.", 'start': 21785.489, 'duration': 9.808}], 'summary': 'Developing a front end feature to display randomly picked cards for a game.', 'duration': 69.99, 'max_score': 21725.307, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21725307.jpg'}], 'start': 20693.815, 'title': 'Refactoring and image manipulation in javascript', 'summary': 'Covers refactoring code for flex box and function abstraction, creating a blackjack deal function, javascript image manipulation, removing items and images, blackjack game logic, and creating a random card function. it demonstrates making code more reusable and dynamic, removing images using javascript, and ensuring functionality works for both sides simultaneously. it also explains the random selection and display of cards in a blackjack game.', 'chapters': [{'end': 21013.236, 'start': 20693.815, 'title': 'Refactoring code for flex box and function abstraction', 'summary': "Discusses refactoring code to create a show card function, making it more reusable and dynamic, and creating a blackjack deal function to remove images upon clicking 'deal'. it also demonstrates the use of query selectors to access and manipulate elements in the document.", 'duration': 319.421, 'highlights': ["Refactoring the code to create a show card function and make it more reusable and dynamic The chapter discusses refactoring the code to create a show card function, allowing flexibility to show the card in different player's boxes by passing an active player argument, thus making the code more reusable and dynamic.", "Creating a blackjack deal function to remove images upon clicking 'deal' The transcript demonstrates the creation of a blackjack deal function using query selectors to access and remove all images from the 'your box' upon clicking 'deal', providing a seamless user experience without the need to refresh the page.", "Demonstrating the use of query selectors to access and manipulate elements in the document The chapter provides a demonstration of using query selectors to access and manipulate elements in the document, such as accessing all images inside the 'your box' div using querySelector and querySelectorAll to remove the images upon clicking 'deal'."]}, {'end': 21269.882, 'start': 21014.016, 'title': 'Javascript image manipulation', 'summary': 'Explains how to manipulate and remove images using javascript, including adding event listeners, retrieving and removing images from a list, and using a for loop to automate the removal process.', 'duration': 255.866, 'highlights': ['The chapter explains how to manipulate and remove images using JavaScript The transcript provides a tutorial on manipulating and removing images using JavaScript.', "Adding event listeners and running functions on click The tutorial includes adding an event listener to a 'blackjack deal button' and running a function on click to manipulate the images.", "Retrieving and removing images from a list using JavaScript The transcript demonstrates the process of retrieving and removing images from a list using JavaScript, including using console.log for retrieving and the 'remove' method for removal.", 'Using a for loop to automate the removal of images The chapter discusses using a for loop to automate the removal process of images, iterating through the images and removing them from the list.', "Resetting elements and using a for loop for repetitive tasks The chapter explains the need to reset elements and use a for loop for repetitive tasks, such as removing multiple images, ultimately aiming to reset various elements upon clicking the 'deal' button."]}, {'end': 21402.61, 'start': 21269.902, 'title': 'Removing items and images', 'summary': "Demonstrates the process of removing items and images from a dealer's box in a web application, ensuring the functionality works for both sides simultaneously and achieving the intended outcome.", 'duration': 132.708, 'highlights': ["The process involves removing items and images from a dealer's box in a web application, ensuring the functionality works for both sides simultaneously.", "Testing the functionality involved hitting 'refresh' and 'deal' multiple times to confirm the removal of items and images from the dealer's box.", "The demonstration emphasizes achieving the intended outcome by verifying the successful removal of items and images from both sides of the dealer's box."]}, {'end': 21589.743, 'start': 21407.057, 'title': 'Blackjack game logic', 'summary': 'Discusses adding logic to the hit button in a blackjack game, including the need to randomly pick from a list of 13 distinct card possibilities and implementing the logic using an array.', 'duration': 182.686, 'highlights': ['The need to list out all the possibilities from 2 to ace, creating a list of 13 distinct possibilities for the cards. 13 distinct possibilities', 'The process of adding the list of card possibilities to an array in the blackjack game logic. Array of card possibilities', 'The importance of including commas in the array to avoid syntax errors and enable easy future modifications. Syntax error prevention']}, {'end': 21977.544, 'start': 21590.323, 'title': 'Creating a random card function', 'summary': 'Demonstrates creating a function to randomly select a card from an array of 13 cards, ensuring it always picks a valid index and shows the chosen card on the front end, enabling the random selection and display of cards in a blackjack game.', 'duration': 387.221, 'highlights': ['Creating a function to randomly select a card from an array of 13 cards The speaker creates a function to generate a random index between 0 and 12, ensuring a valid index for card selection.', 'Ensuring it always picks a valid index for card selection The speaker discusses the use of math.floor and math.random functions to guarantee a valid index between 0 and 12 for card selection, providing a total of 13 possibilities.', 'Showing the chosen card on the front end for a blackjack game The speaker demonstrates the use of a function to display the randomly selected card on the front end, resolving the back end logic and enabling the random display of cards in the game.']}], 'duration': 1283.729, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA20693815.jpg', 'highlights': ['Creating a show card function to make code more reusable and dynamic', 'Demonstrating the creation of a blackjack deal function using query selectors', 'Manipulating and removing images using JavaScript', 'Adding event listeners and running functions on click', 'Retrieving and removing images from a list using JavaScript', 'Using a for loop to automate the removal of images', 'Resetting elements and using a for loop for repetitive tasks', "Removing items and images from a dealer's box in a web application", "Testing the functionality involved hitting 'refresh' and 'deal' multiple times", 'Creating a list of 13 distinct possibilities for the cards', 'Adding the list of card possibilities to an array in the blackjack game logic', 'Importance of including commas in the array to avoid syntax errors', 'Creating a function to randomly select a card from an array of 13 cards', 'Ensuring it always picks a valid index for card selection', 'Showing the chosen card on the front end for a blackjack game']}, {'end': 24923.05, 'segs': [{'end': 22384.263, 'src': 'embed', 'start': 22344.193, 'weight': 0, 'content': [{'end': 22349.194, 'text': "So it's going to get whether it's you or the dealer it's going to get the score of that player.", 'start': 22344.193, 'duration': 5.001}, {'end': 22366.959, 'text': "And we're going to increment that score by the cards map dictionary.", 'start': 22352.148, 'duration': 14.811}, {'end': 22375.921, 'text': 'And to get the value from the cards map dictionary, we have to give it a card, okay?', 'start': 22368.3, 'duration': 7.621}, {'end': 22380.202, 'text': 'So this will give us this will evaluate to the cards map dictionary.', 'start': 22376.381, 'duration': 3.821}, {'end': 22384.263, 'text': 'And to access a value from it, we need to give it a key.', 'start': 22381.022, 'duration': 3.241}], 'summary': "Increment player's score by cards map dictionary value.", 'duration': 40.07, 'max_score': 22344.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA22344193.jpg'}, {'end': 22620.278, 'src': 'embed', 'start': 22572.086, 'weight': 1, 'content': [{'end': 22577.509, 'text': 'We need to ultimately increment it on the front end as well.', 'start': 22572.086, 'duration': 5.423}, {'end': 22589.775, 'text': "So we're going to write our show score function, which is gonna take in an active player.", 'start': 22579.69, 'duration': 10.085}, {'end': 22606.009, 'text': "And then what we're going to do is we're simply gonna say, we're gonna query select, oops, query select the active player score span.", 'start': 22590.839, 'duration': 15.17}, {'end': 22609.931, 'text': 'So this thing here.', 'start': 22607.57, 'duration': 2.361}, {'end': 22620.278, 'text': "And we're gonna get its text content.", 'start': 22617.736, 'duration': 2.542}], 'summary': "Developing a function to display active player's score on the front end.", 'duration': 48.192, 'max_score': 22572.086, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA22572086.jpg'}, {'end': 22838.4, 'src': 'embed', 'start': 22786.104, 'weight': 2, 'content': [{'end': 22806.141, 'text': "So we're going to say if active player and active player score, and if we increment the active player score by the card's value,", 'start': 22786.104, 'duration': 20.037}, {'end': 22823.27, 'text': "and if it's less than or equal to 21,, then what we should do is, and what we need to do is this", 'start': 22806.141, 'duration': 17.129}, {'end': 22830.515, 'text': 'Because what this is seeing is if the card is an ace.', 'start': 22824.19, 'duration': 6.325}, {'end': 22838.4, 'text': 'And what we need to do right above this is make sure that we have our statement that checks if the card is an ace.', 'start': 22830.695, 'duration': 7.705}], 'summary': "Checking if active player's score is less than or equal to 21 after incrementing by card value, considering if the card is an ace.", 'duration': 52.296, 'max_score': 22786.104, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA22786104.jpg'}, {'end': 23178.685, 'src': 'embed', 'start': 23137.833, 'weight': 3, 'content': [{'end': 23139.854, 'text': "So it's not showing the new cards anymore.", 'start': 23137.833, 'duration': 2.021}, {'end': 23157.621, 'text': "Right, so as soon as you bust, now that I've busted, if I keep going, so the bust logic is correct.", 'start': 23149.659, 'duration': 7.962}, {'end': 23174.544, 'text': "Now we need to add this to show score as well, because show card, so the cards stop showing, but the score doesn't stop.", 'start': 23164.162, 'duration': 10.382}, {'end': 23175.904, 'text': 'the score keeps going forever.', 'start': 23174.544, 'duration': 1.36}, {'end': 23178.685, 'text': 'So now we need to do the same thing for show score.', 'start': 23175.964, 'duration': 2.721}], 'summary': 'Fixing issue with cards not showing, and implementing logic to display score as well.', 'duration': 40.852, 'max_score': 23137.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA23137833.jpg'}, {'end': 23838.071, 'src': 'embed', 'start': 23807.283, 'weight': 4, 'content': [{'end': 23812.128, 'text': "So I will say I'm going to create a dealer function in this case.", 'start': 23807.283, 'duration': 4.845}, {'end': 23814.19, 'text': 'So dealer logic.', 'start': 23812.528, 'duration': 1.662}, {'end': 23820.255, 'text': 'And I will say let car is equal to random card.', 'start': 23816.612, 'duration': 3.643}, {'end': 23824.459, 'text': 'And this will generate use our random card function to generate a random card.', 'start': 23820.415, 'duration': 4.044}, {'end': 23830.227, 'text': "I will say show card, and then I'm going to pass in dealer.", 'start': 23826.505, 'duration': 3.722}, {'end': 23838.071, 'text': "So now what I'm saying is show me the card on the dealer's side.", 'start': 23830.347, 'duration': 7.724}], 'summary': 'Creating a dealer function to generate a random card and display it.', 'duration': 30.788, 'max_score': 23807.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA23807283.jpg'}, {'end': 24062.23, 'src': 'embed', 'start': 23993.397, 'weight': 5, 'content': [{'end': 23996.84, 'text': 'So we need to teach it how to determine a win.', 'start': 23993.397, 'duration': 3.443}, {'end': 24010.754, 'text': "For example, you, as a human being watching this, you're like hey, if I got 18 and the dealer got a 20 or the other player got a 20,", 'start': 23997.42, 'duration': 13.334}, {'end': 24014.458, 'text': 'That means that I lost and the dealer won.', 'start': 24010.754, 'duration': 3.704}, {'end': 24022.907, 'text': "Now, how do you know that? Well, you're like, hey, that dude got greater score than I did.", 'start': 24016.24, 'duration': 6.667}, {'end': 24026.651, 'text': "One Two, he doesn't have a bust.", 'start': 24023.427, 'duration': 3.224}, {'end': 24028.873, 'text': "And so that's what he won.", 'start': 24027.432, 'duration': 1.441}, {'end': 24034.85, 'text': "Now, what if you both had the same scores? you would probably know that it's a draw.", 'start': 24029.153, 'duration': 5.697}, {'end': 24037.332, 'text': "Or if you both bust, it's a draw.", 'start': 24035.791, 'duration': 1.541}, {'end': 24041.616, 'text': 'So we need to teach the computer to compute the scores.', 'start': 24037.352, 'duration': 4.264}, {'end': 24044.399, 'text': 'And then we want to show the result of who won.', 'start': 24042.057, 'duration': 2.342}, {'end': 24049.323, 'text': 'And then we want to make a sound as well.', 'start': 24046.801, 'duration': 2.522}, {'end': 24052.426, 'text': "So let's go ahead and do a lot of these things.", 'start': 24049.624, 'duration': 2.802}, {'end': 24062.23, 'text': "So let's create a function that helps us compute winner and return who just won.", 'start': 24052.486, 'duration': 9.744}], 'summary': 'Teaching the computer to determine a win, compute scores, and display the result.', 'duration': 68.833, 'max_score': 23993.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA23993397.jpg'}, {'end': 24571.404, 'src': 'embed', 'start': 24546.542, 'weight': 7, 'content': [{'end': 24555.427, 'text': 'Okay And then the other case scenario is when you bust but the dealer does not.', 'start': 24546.542, 'duration': 8.885}, {'end': 24563.636, 'text': "OK. That's why we say if your score is greater than 21, in other words, if you bust and the dealer does not bust, you automatically lose,", 'start': 24555.567, 'duration': 8.069}, {'end': 24565.518, 'text': "doesn't matter what the dealer score is.", 'start': 24563.636, 'duration': 1.882}, {'end': 24571.404, 'text': 'And then the final scenario is when you and the dealer both bust.', 'start': 24566.419, 'duration': 4.985}], 'summary': 'If your score is over 21, you automatically lose.', 'duration': 24.862, 'max_score': 24546.542, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA24546542.jpg'}], 'start': 21979.324, 'title': 'Implementing blackjack game logic', 'summary': 'Covers updating current score logic, mapping card values, implementing game logic, creating dealer logic, and determining the winner, aiming to enhance the functionality and accurately track scores, preparing for upcoming video on further logic enhancement. it discusses creating a dictionary for card values, adding bust logic, and determining winners based on scores, providing a comprehensive understanding of game development.', 'chapters': [{'end': 22061.553, 'start': 21979.324, 'title': 'Updating current score logic', 'summary': 'Introduces the need to show the current score when the user clicks the hit button and then update the score, aiming to track and display the score accurately while hitting, preparing for the upcoming video on further functionality and logic enhancement.', 'duration': 82.229, 'highlights': ['The need to display and update the current score when the user clicks the hit button to accurately track the score while hitting, preparing for the upcoming video on further functionality and logic enhancement.', 'The video is concluding with a plan to continue working on the project in the next video, after covering the challenge and generating random cards on hit.']}, {'end': 22662.364, 'start': 22062.453, 'title': 'Mapping card values in blackjack', 'summary': 'Discusses mapping card values in a blackjack game, creating a dictionary to assign numerical values to cards, and implementing functions to update and display player scores based on the mapped values.', 'duration': 599.911, 'highlights': ['Creating a dictionary to map each card with its corresponding value The chapter discusses creating a dictionary called cards map to assign numerical values to each card, such as mapping K, J, Q to 10 and A to an array of 1 or 11.', "Implementing a function to update player scores based on the card's value The chapter explains the implementation of the update score function, which takes a card and an active player as inputs and increments the player's score based on the value retrieved from the cards map dictionary.", "Developing a function to display the player's current score on the front end The chapter introduces the show score function, which is designed to query select the active player's score span and set its text content to the active player's current score, ultimately displaying it on the front end."]}, {'end': 23805.342, 'start': 22663.184, 'title': 'Blackjack game logic', 'summary': 'Explains the implementation of blackjack game logic, including determining the value of an ace, mapping cards to numerical values, adding bust logic to stop showing cards after a score exceeds 21, and resetting the score and changing text color back to white after a bust.', 'duration': 1142.158, 'highlights': ['Determining the value of an ace Explains the decision-making process of whether an ace should be counted as 1 or 11 based on the current player score, ensuring it does not exceed 21.', 'Mapping cards to numerical values Describes the mapping of all cards to their respective numerical values, providing clarity on the value of each card in the game.', "Adding bust logic to show card and show score Incorporates logic to stop showing cards after the score exceeds 21 and to display 'bust' in red for scores over 21, enhancing the game's visual and functional aspects.", "Resetting the score and changing text color after a bust Details the process of resetting the score to zero and changing the text color back to white after a bust, ensuring the game's functionality and visual presentation."]}, {'end': 24091.654, 'start': 23807.283, 'title': 'Creating dealer logic and computing winner', 'summary': "Covers creating a dealer logic function to display and update the dealer's cards and score, connecting the stand button, and introducing the plan to compute the winner based on the scores and declare the winner of the game.", 'duration': 284.371, 'highlights': ["Creating dealer logic function to display and update dealer's cards and score The transcript discusses creating a dealer logic function to show the dealer's card and update their score after the card is revealed.", 'Connecting the stand button to the dealer logic function The process of linking the stand button to the dealer logic function is outlined, ensuring that the function runs upon clicking the stand button.', "Plan to compute the winner based on scores and declare the winner of the game There is a plan to develop a function to compute the winner based on the scores, determine if it's a win, draw, or bust, and then declare the winner of the game."]}, {'end': 24923.05, 'start': 24096.595, 'title': 'Blackjack winner determination', 'summary': "Outlines the process of determining the winner in a game of blackjack based on the user's score and the dealer's score, covering scenarios where the user wins, loses, draws, or busts, and successfully demonstrates the winner determination logic.", 'duration': 826.455, 'highlights': ["The chapter outlines the process of determining the winner in a game of blackjack based on the user's score and the dealer's score. The chapter focuses on the core concept of determining the winner in a game of blackjack based on the scores of the user and the dealer.", "The chapter covers scenarios where the user wins, loses, draws, or busts based on the comparison of their score with the dealer's score. It details the different scenarios of the user winning, losing, drawing, or busting based on a comparison of their score with the dealer's score.", 'The chapter successfully demonstrates the winner determination logic through practical code implementation and testing. The chapter effectively demonstrates the logic for determining the winner through practical code implementation and testing, providing a clear understanding of the process.']}], 'duration': 2943.726, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA21979324.jpg', 'highlights': ['Creating a dictionary to map each card with its corresponding value', "Developing a function to display the player's current score on the front end", 'Determining the value of an ace', 'Adding bust logic to show card and show score', "Creating dealer logic function to display and update dealer's cards and score", 'Plan to compute the winner based on scores and declare the winner of the game', "The chapter outlines the process of determining the winner in a game of blackjack based on the user's score and the dealer's score", "The chapter covers scenarios where the user wins, loses, draws, or busts based on the comparison of their score with the dealer's score"]}, {'end': 26185.795, 'segs': [{'end': 25562.604, 'src': 'embed', 'start': 25537.137, 'weight': 1, 'content': [{'end': 25546.564, 'text': "So we're gonna say hey, if your score is greater than 15, we want you to kind of come to a stop, compute a winner and then show the result.", 'start': 25537.137, 'duration': 9.427}, {'end': 25547.366, 'text': 'All right.', 'start': 25547.005, 'duration': 0.361}, {'end': 25557.122, 'text': 'And now the show result trigger The show result function is going to be triggered if the dealer is greater than 15.', 'start': 25548.028, 'duration': 9.094}, {'end': 25561.343, 'text': "And I'm going to go and I'm going to delete it from our blackjack deal function.", 'start': 25557.122, 'duration': 4.221}, {'end': 25562.604, 'text': 'So I just hit save.', 'start': 25561.563, 'duration': 1.041}], 'summary': 'If score > 15, stop, compute winner, trigger show result.', 'duration': 25.467, 'max_score': 25537.137, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA25537137.jpg'}, {'end': 25657.103, 'src': 'embed', 'start': 25597.821, 'weight': 0, 'content': [{'end': 25599.201, 'text': "It's taking place automatically.", 'start': 25597.821, 'duration': 1.38}, {'end': 25605.843, 'text': 'What eventually will take place is once we hit stand, dealer will keep playing the cards automatically.', 'start': 25599.761, 'duration': 6.082}, {'end': 25610.056, 'text': "So let's work our way to that.", 'start': 25607.935, 'duration': 2.121}, {'end': 25619.798, 'text': "But now that we have the bot logic kind of added a little bit of it, what we need to do now is to show each player's wins,", 'start': 25610.876, 'duration': 8.922}, {'end': 25623.019, 'text': 'losses and draws in the table on the front end.', 'start': 25619.798, 'duration': 3.221}, {'end': 25624.839, 'text': 'So this table right here.', 'start': 25623.339, 'duration': 1.5}, {'end': 25631.301, 'text': 'For that, we need to keep track of each win, loss, and draw.', 'start': 25625.979, 'duration': 5.322}, {'end': 25636.962, 'text': "So let's go to the initial blackjack game object that we created all the way at the top.", 'start': 25631.841, 'duration': 5.121}, {'end': 25640.994, 'text': "And let's make sure that we have a comma here.", 'start': 25638.673, 'duration': 2.321}, {'end': 25641.415, 'text': 'We do.', 'start': 25641.074, 'duration': 0.341}, {'end': 25643.976, 'text': "And let's add wins.", 'start': 25642.255, 'duration': 1.721}, {'end': 25646.117, 'text': "We're going to give that a zero.", 'start': 25644.796, 'duration': 1.321}, {'end': 25648.258, 'text': 'Start it off at zero.', 'start': 25647.358, 'duration': 0.9}, {'end': 25649.959, 'text': "We're going to add losses.", 'start': 25648.278, 'duration': 1.681}, {'end': 25654.642, 'text': 'Start it off at zero, obviously, and draw us to this game.', 'start': 25651.52, 'duration': 3.122}, {'end': 25657.103, 'text': 'Start it off at zero.', 'start': 25655.682, 'duration': 1.421}], 'summary': 'Updating blackjack game object to track wins, losses, and draws, starting at zero.', 'duration': 59.282, 'max_score': 25597.821, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA25597821.jpg'}, {'end': 25776.211, 'src': 'embed', 'start': 25714.823, 'weight': 2, 'content': [{'end': 25715.143, 'text': 'All right.', 'start': 25714.823, 'duration': 0.32}, {'end': 25725.005, 'text': 'Update the wins draws and losses.', 'start': 25721.625, 'duration': 3.38}, {'end': 25728.386, 'text': "OK That's the main function of compute winner.", 'start': 25725.105, 'duration': 3.281}, {'end': 25735.508, 'text': 'So what are we going to do instead of printing out here you won.', 'start': 25731.347, 'duration': 4.161}, {'end': 25749.163, 'text': "What we'll do is we'll say go to blackjack game, grab the wins, and simply increment it for the, you know, we're gonna increment the wins.", 'start': 25736.36, 'duration': 12.803}, {'end': 25755.525, 'text': 'Now the wins, draws and losses are, from your perspective, okay?', 'start': 25749.744, 'duration': 5.781}, {'end': 25764.648, 'text': "So it's not like we're doing dealer bracket wins or dealer bracket losses or you bracket wins and you bracket losses.", 'start': 25756.065, 'duration': 8.583}, {'end': 25767.368, 'text': "we're just doing blackjack game wins.", 'start': 25764.648, 'duration': 2.72}, {'end': 25770.589, 'text': "if i'm incrementing the wins, that means those are human wins.", 'start': 25767.368, 'duration': 3.221}, {'end': 25774.691, 'text': 'if i increment the losses, those are the you or the human losses.', 'start': 25770.589, 'duration': 4.102}, {'end': 25775.111, 'text': 'same thing.', 'start': 25774.691, 'duration': 0.42}, {'end': 25776.211, 'text': 'that goes for the draws.', 'start': 25775.111, 'duration': 1.1}], 'summary': 'Increment human wins, losses, and draws in blackjack game.', 'duration': 61.388, 'max_score': 25714.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA25714823.jpg'}], 'start': 24925.993, 'title': 'Automating blackjack game logic', 'summary': 'Focuses on automating the game logic for the dealer in the javascript module for the challenge blackjack, where the dealer automatically plays cards till the score is over 15, computes the winner, and updates the win, loss, and draw counts in the table on the front end.', 'chapters': [{'end': 25108.167, 'start': 24925.993, 'title': 'Javascript function for displaying game results', 'summary': 'Covers creating a javascript function to display game results by declaring variables for message and message color, setting conditions for different game outcomes, updating the result display with the message, and adding a function to show the result on the page.', 'duration': 182.174, 'highlights': ['Creating a JavaScript function to display game results The transcript explains the process of creating a JavaScript function to display game results.', 'Declaring variables for message and message color The speaker declares two variables, message and message color, to store the message and color for displaying game results.', 'Setting conditions for different game outcomes The speaker sets conditions for different game outcomes, specifying the message and color based on the winner (player or dealer).', "Updating the result display with the message The speaker uses document query selector to update the result display with the message, ensuring that the ID 'blackjack-result' is taken care of.", 'Adding a function to show the result on the page The speaker mentions adding a function to show the result on the page, ensuring that the game results are displayed.']}, {'end': 25398.389, 'start': 25109.468, 'title': 'Blackjack game progress', 'summary': 'Demonstrates the progress of the blackjack game, including updates to the compute winner function and the display of game results, as well as plans to add bot logic and update the front-end display for wins, losses, and draws.', 'duration': 288.921, 'highlights': ["The compute winner function is updated to correctly display the game result, such as 'you won' or 'you lost', along with corresponding sound effects.", 'Plans to add bot logic and update the front-end display for wins, losses, and draws are discussed in upcoming videos.', 'The need to address color display issues is mentioned, with plans to work on it later in the development process.', 'The chapter ends with a plan to cover additional game functionalities and future development steps.']}, {'end': 25683.524, 'start': 25398.389, 'title': 'Automating blackjack game logic', 'summary': 'Focuses on automating the game logic for the dealer in the javascript module for the challenge blackjack. the dealer automatically plays cards till the score is over 15, computes the winner, and updates the win, loss, and draw counts in the table on the front end.', 'duration': 285.135, 'highlights': ["The dealer automatically plays cards till the score is over 15, computes the winner, and updates the win, loss, and draw counts in the table on the front end. The dealer's logic is automated to play cards until the score is over 15, compute the winner, and update the win, loss, and draw counts in the table on the front end.", 'Adding intelligent logic for the dealer where it stops if the score is over 15 and computes the winner. Intelligent logic is added for the dealer to stop if the score is over 15 and compute the winner.', 'Initializing win, loss, and draw counts to zero in the initial blackjack game object. The win, loss, and draw counts are initialized to zero in the initial blackjack game object.']}, {'end': 26185.795, 'start': 25683.865, 'title': 'Updating wins, draws, and losses', 'summary': 'Details the process of updating wins, draws, and losses in a blackjack game, explaining the logic and steps involved, and debugging errors, resulting in a functional scoring system.', 'duration': 501.93, 'highlights': ['Explaining the logic behind updating wins, draws, and losses based on the outcome of the game, ensuring that the correct statistics are incremented for human and dealer results. The transcript provides a detailed explanation of how the wins, draws, and losses are updated based on the game outcome, ensuring that the correct statistics are incremented for human and dealer results.', 'Debugging errors related to displaying the updated scores, resolving issues with incorrect message colors and ensuring that the scores are correctly reflected in the game interface. The transcript describes the process of debugging errors related to displaying updated scores, addressing issues with incorrect message colors, and ensuring that the scores are correctly reflected in the game interface.', 'Utilizing query selectors to dynamically update the wins, losses, and draws in the game interface based on the values stored in the blackjack game object, ensuring real-time updates without creating new lines. The chapter demonstrates the use of query selectors to dynamically update the wins, losses, and draws in the game interface based on the values stored in the blackjack game object, ensuring real-time updates without creating new lines.']}], 'duration': 1259.802, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA24925993.jpg', 'highlights': ['The dealer automatically plays cards till the score is over 15, computes the winner, and updates the win, loss, and draw counts in the table on the front end.', 'Creating a JavaScript function to display game results.', "The compute winner function is updated to correctly display the game result, such as 'you won' or 'you lost', along with corresponding sound effects.", 'Initializing win, loss, and draw counts to zero in the initial blackjack game object.', 'Explaining the logic behind updating wins, draws, and losses based on the outcome of the game, ensuring that the correct statistics are incremented for human and dealer results.']}, {'end': 28635.228, 'segs': [{'end': 26346.56, 'src': 'embed', 'start': 26320.471, 'weight': 0, 'content': [{'end': 26326.612, 'text': "And also, another thing to keep in mind is you shouldn't be able to start the game off by clicking Stand.", 'start': 26320.471, 'duration': 6.141}, {'end': 26332.693, 'text': 'You should only be able to hit Stand now.', 'start': 26327.533, 'duration': 5.16}, {'end': 26335.434, 'text': 'okay, but you can hit after the user plays.', 'start': 26332.693, 'duration': 2.741}, {'end': 26341.217, 'text': "but you shouldn't be able to hit stand when the user has not played yet.", 'start': 26335.434, 'duration': 5.783}, {'end': 26346.56, 'text': 'so we still need to dummy proof the game from human error.', 'start': 26341.217, 'duration': 5.343}], 'summary': 'Users should only be able to hit stand after playing, preventing errors.', 'duration': 26.089, 'max_score': 26320.471, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA26320471.jpg'}, {'end': 26739.703, 'src': 'embed', 'start': 26712.449, 'weight': 1, 'content': [{'end': 26719.292, 'text': 'The only time deal works is once the turn is completely over and now, when I hit deal, it works okay?', 'start': 26712.449, 'duration': 6.843}, {'end': 26721.593, 'text': "So there's a lot going on there.", 'start': 26719.872, 'duration': 1.721}, {'end': 26725.315, 'text': "that's controlling the state and the flow of the game.", 'start': 26721.593, 'duration': 3.722}, {'end': 26727.856, 'text': "And we're going to break that down.", 'start': 26726.275, 'duration': 1.581}, {'end': 26734.82, 'text': 'And if we have time in this video, we will also go ahead and create the bot that can play every second.', 'start': 26727.956, 'duration': 6.864}, {'end': 26739.703, 'text': 'Okay So let me make this a little bit bigger here.', 'start': 26734.9, 'duration': 4.803}], 'summary': 'Explanation of game control and bot creation in progress.', 'duration': 27.254, 'max_score': 26712.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA26712449.jpg'}, {'end': 28004.5, 'src': 'embed', 'start': 27976.261, 'weight': 2, 'content': [{'end': 27980.484, 'text': "All we're doing here is I'm creating a sleep function, and then I just call that sleep function.", 'start': 27976.261, 'duration': 4.223}, {'end': 27981.264, 'text': "That's it okay?", 'start': 27980.524, 'duration': 0.74}, {'end': 27983.026, 'text': 'And the asynchronous part.', 'start': 27981.725, 'duration': 1.301}, {'end': 27987.609, 'text': "the reason why that's important is so your code is not running linearly.", 'start': 27983.026, 'duration': 4.583}, {'end': 27994.673, 'text': 'meaning if you ran this code linearly, then that means that every second the computer is waiting.', 'start': 27987.609, 'duration': 7.064}, {'end': 27998.316, 'text': 'what it would do is the whole browser would freeze for that one second.', 'start': 27994.673, 'duration': 3.643}, {'end': 28004.5, 'text': 'So the user would not be able to scroll up or scroll down or click another button like hit or hover over anything else.', 'start': 27998.336, 'duration': 6.164}], 'summary': 'Creating a sleep function to prevent browser freezing due to linear code execution.', 'duration': 28.239, 'max_score': 27976.261, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA27976261.jpg'}, {'end': 28146.363, 'src': 'embed', 'start': 28117.438, 'weight': 3, 'content': [{'end': 28123.242, 'text': 'And on this website you can generate lots of random users and it gives you an API for all of them.', 'start': 28117.438, 'duration': 5.804}, {'end': 28129.545, 'text': 'Okay And maybe we can even cut this part out and turn it into a video for this module.', 'start': 28124.602, 'duration': 4.943}, {'end': 28130.706, 'text': "So I'll just explain it right now.", 'start': 28129.565, 'duration': 1.141}, {'end': 28137.09, 'text': 'So each person you have here, it just generates random APIs for them, which is super useful.', 'start': 28131.446, 'duration': 5.644}, {'end': 28139.151, 'text': 'And their APIs might look like the following.', 'start': 28137.13, 'duration': 2.021}, {'end': 28141.016, 'text': 'like this.', 'start': 28140.575, 'duration': 0.441}, {'end': 28146.363, 'text': "You've seen stuff with APIs before, right, Ron? Like what the JSON data structure looks like.", 'start': 28142.257, 'duration': 4.106}], 'summary': 'Website generates random users with apis, useful for modules.', 'duration': 28.925, 'max_score': 28117.438, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA28117438.jpg'}, {'end': 28546.314, 'src': 'embed', 'start': 28520.404, 'weight': 4, 'content': [{'end': 28526.106, 'text': 'Wait, I was sharing my screen the whole time, right? Okay, okay, I was like, that would have been massively confusing.', 'start': 28520.404, 'duration': 5.702}, {'end': 28528.947, 'text': 'Okay, cool, awesome, awesome.', 'start': 28527.087, 'duration': 1.86}, {'end': 28531.488, 'text': 'So for everybody.', 'start': 28529.007, 'duration': 2.481}, {'end': 28535.15, 'text': 'this is another reason, Donnie, why coding is helpful right?', 'start': 28531.488, 'duration': 3.662}, {'end': 28539.411, 'text': 'Because if you load every picture ever on this page, this page is gonna freeze.', 'start': 28535.21, 'duration': 4.201}, {'end': 28543.653, 'text': "But because there's something called AJAX, notice what happens.", 'start': 28539.891, 'duration': 3.762}, {'end': 28546.314, 'text': 'okay?. On the right-hand side, you guys see this bar over here?', 'start': 28543.653, 'duration': 2.661}], 'summary': 'Coding prevents page freezing by using ajax to load images dynamically.', 'duration': 25.91, 'max_score': 28520.404, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA28520404.jpg'}], 'start': 26185.815, 'title': 'Blackjack game development', 'summary': 'Discusses fixing game logic issues, adding game states and bot automation, implementing an asynchronous function, and completing the blackjack game project with api usage. it also explores javascript promises, asynchronous calls, and their impact on webpage performance.', 'chapters': [{'end': 26346.56, 'start': 26185.815, 'title': 'Fixing game logic issues', 'summary': 'Discusses fixing issues in the game logic, such as incorrect display of win status and preventing users from taking invalid actions, with a focus on resetting game states and restricting user actions based on game rules.', 'duration': 160.745, 'highlights': ['The display of the win status is incorrect, as it stays green even after resetting the game, indicating a need for fixing the win status display.', 'Users are able to take invalid actions, such as hitting again after the bot stands, highlighting the need to restrict user actions based on game rules.', "The game needs to be dummy-proofed to prevent human errors, such as starting the game with 'Stand' or attempting to 'Stand' before the user's turn, emphasizing the need for stricter game rule enforcement."]}, {'end': 27616.485, 'start': 26346.56, 'title': 'Adding game states and bot automation', 'summary': "Details the process of adding game states to control the flow of the game, ensuring that turns are completed before dealing, and automating the bot player's moves after the user stands.", 'duration': 1269.925, 'highlights': ["The chapter discusses adding game states to control the flow of the game, ensuring that turns are completed before dealing, and automating the bot player's moves after the user stands. Adding game states to control game flow, ensuring turns are completed before dealing, automating bot player's moves after user stands.", 'The code is modified to ensure that the hit button only works when the user has not used stand yet, and the stand button activates the stand mode. Modifying code to restrict hit button only until stand mode is activated, and activating stand mode when the stand button is clicked.', "The deal button is updated to only work when both the user's and the dealer's turns are over, and the show result function is modified to show results only after all turns are over. Updating deal button to work after all turns are over, modifying show result function to display results after all turns are completed."]}, {'end': 28041.905, 'start': 27616.685, 'title': 'Asynchronous function implementation', 'summary': 'Covers implementing an asynchronous function to create a sleep function, allowing the computer to play moves after every one second, preventing the browser from freezing and providing a smooth user experience.', 'duration': 425.22, 'highlights': ["Implementing a sleep function using a promise object to introduce a one-second delay for the computer's moves. Introducing a one-second delay for the computer's moves to prevent the browser from freezing and provide a smooth user experience.", 'Converting the function into an asynchronous function to allow the code to run asynchronously, preventing the browser from freezing during the delay. Enabling asynchronous code execution to prevent the browser from freezing during the delay, ensuring a smooth user experience.', 'Explanation of the importance of asynchronous functions in preventing the freezing of the browser and ensuring simultaneous code execution for a smooth user experience. Highlighting the significance of asynchronous functions in preventing browser freezing and enabling simultaneous code execution for a smooth user experience.']}, {'end': 28235.604, 'start': 28042.125, 'title': 'Completion of blackjack game and api usage', 'summary': 'Concludes the completion of the blackjack game project and discusses the usage of randomuser.me api to generate random users and their corresponding apis.', 'duration': 193.479, 'highlights': ['The chapter discusses the completion of the blackjack game project and encourages reviewing the code for understanding and recreating the project from scratch.', 'The usage of randomuser.me API to generate random users and their corresponding APIs for the project is explained, including the process of querying specific parameters for obtaining desired results.', 'The structure of the JSON data obtained from the randomuser.me API is detailed, including the keys and the list of dictionaries, providing insights into the information available for each random user.']}, {'end': 28635.228, 'start': 28235.664, 'title': 'Javascript promises and asynchronous calls', 'summary': 'Explores the use of javascript promises to fetch and process data, creating html elements dynamically, and the importance of asynchronous calls using ajax to prevent webpage freezing.', 'duration': 399.564, 'highlights': ['The importance of asynchronous calls using AJAX to prevent webpage freezing Asynchronous calls using AJAX are crucial to prevent webpage freezing, as demonstrated by the example of dynamically loading images on the webpage as the user scrolls down.', "Creating HTML elements dynamically based on fetched data The process involves iterating through each user, creating divs for each author, adding the user's image and name dynamically, and appending the elements to the webpage, facilitating the dynamic display of user information.", 'Using JavaScript promises to fetch and process data JavaScript promises are utilized to fetch data from a URL and process it into JSON, demonstrating the asynchronous handling of data retrieval and manipulation.']}], 'duration': 2449.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Qqx_wzMmFeA/pics/Qqx_wzMmFeA26185815.jpg', 'highlights': ['The game needs to be dummy-proofed to prevent human errors, emphasizing the need for stricter game rule enforcement.', "Adding game states to control game flow, ensuring turns are completed before dealing, automating bot player's moves after user stands.", 'Enabling asynchronous code execution to prevent the browser from freezing during the delay, ensuring a smooth user experience.', 'The usage of randomuser.me API to generate random users and their corresponding APIs for the project is explained, including the process of querying specific parameters for obtaining desired results.', 'Asynchronous calls using AJAX are crucial to prevent webpage freezing, as demonstrated by the example of dynamically loading images on the webpage as the user scrolls down.']}], 'highlights': ['The course covers a comprehensive seven-hour JavaScript course suitable for beginners and advanced students, covering basic tutorials, building multiple projects, including the Blackjack project.', 'Covers common array operations in JavaScript, including creation, accessing values, changing values, looping through arrays, and using common array methods like toString, join, pop, push, shift, unshift, concat, slice, reverse, sort, and adding elements to an array through a loop.', 'JSON is used for APIs and configurations as it is lightweight and efficient, making it suitable for transferring data.', 'Demonstrating building a cat generator and a reset button using HTML, CSS, and JavaScript.', 'The chapter covers the implementation of a rock paper scissors game using HTML, CSS, and JavaScript.', 'Creating a function in JavaScript to allow the computer to choose randomly between three options.', "The function's job is to return an array with numerical values, representing the result of the game such as 1,0 or 0.5,0.5.", 'The project involves creating challenge five blackjack, spanning HTML, CSS, and multiple parts of JavaScript, with the goal of at least three videos to simulate a game where players compete to get closest to 21, showcasing wins, losses, and draws.', 'The dealer automatically plays cards till the score is over 15, computes the winner, and updates the win, loss, and draw counts in the table on the front end.', 'The game needs to be dummy-proofed to prevent human errors, emphasizing the need for stricter game rule enforcement.', "Adding game states to control game flow, ensuring turns are completed before dealing, automating bot player's moves after user stands.", 'Enabling asynchronous code execution to prevent the browser from freezing during the delay, ensuring a smooth user experience.']}