title
Build A Speed Typing Game In JavaScript

description
In this project we will build a speed typing game in JavaScript. Even if you are a beginner in JavaScript and programming I would encourage you to follow along. We are not using any frameworks or libraries. Sponsor: Ultimate Freelancing Bundle https://studywebdevelopment.com/freelancing.html Code: https://github.com/bradtraversy/wordbeater Play: https://bradtraversy.github.io/wordbeater 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Courses http://www.traversymedia.com Follow Traversy Media: https://www.facebook.com/traversymedia https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia

detail
{'title': 'Build A Speed Typing Game In JavaScript', 'heatmap': [{'end': 569.398, 'start': 521.224, 'weight': 0.711}, {'end': 941.965, 'start': 915.507, 'weight': 1}, {'end': 979.947, 'start': 957.376, 'weight': 0.824}], 'summary': "Tutorial series 'build a speed typing game in javascript' covers building the wordbeater app with a freelancing bundle guide and a 25% discount, implementing features like high score storage, api integration, and difficulty levels, creating a bootstrap webpage, initializing the game, implementing a countdown timer, explaining typing game logic, adjusting game score display, and enhancing the game with dynamic levels, local storage, and improved ux.", 'chapters': [{'end': 193.555, 'segs': [{'end': 35.008, 'src': 'embed', 'start': 7.335, 'weight': 1, 'content': [{'end': 11.937, 'text': 'This video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com,', 'start': 7.335, 'duration': 4.602}, {'end': 19.62, 'text': 'which gives you everything you need to start a freelancing business, including 130-page in-depth guide invoicing and client proposal templates,', 'start': 11.937, 'duration': 7.683}, {'end': 22.742, 'text': 'website templates, an SEO checklist and much more.', 'start': 19.62, 'duration': 3.122}, {'end': 26.183, 'text': 'So visit the link in the description below and use the code BRAD25 to get 25% off.', 'start': 22.822, 'duration': 3.361}, {'end': 28.845, 'text': "Hey, what's going on, guys?", 'start': 27.944, 'duration': 0.901}, {'end': 35.008, 'text': "In this project, we're going to build a speed typing application called WordBeater and we're going to build it in pure JavaScript,", 'start': 28.885, 'duration': 6.123}], 'summary': 'Promotion of ultimate freelancing bundle with 25% off, and project to build wordbeater speed typing app in javascript.', 'duration': 27.673, 'max_score': 7.335, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0287335.jpg'}, {'end': 76.845, 'src': 'embed', 'start': 47.875, 'weight': 0, 'content': [{'end': 51.156, 'text': 'And once you type it in, if you, if you make it in that amount of time,', 'start': 47.875, 'duration': 3.281}, {'end': 58.119, 'text': "you'll get a point added to your score and you just keep going until you fumble up and you mess up and you don't do it in that amount of time.", 'start': 51.156, 'duration': 6.963}, {'end': 59.479, 'text': "And then the game's over.", 'start': 58.419, 'duration': 1.06}, {'end': 63.08, 'text': "And then if you want to play again, you just simply type in the word that's shown.", 'start': 59.839, 'duration': 3.241}, {'end': 65.641, 'text': 'So you can see I already play to go to score five.', 'start': 63.52, 'duration': 2.121}, {'end': 69.322, 'text': 'So if I go ahead and type in river, the game will start again.', 'start': 66.041, 'duration': 3.281}, {'end': 72.183, 'text': 'And now you can see the timer is counting down.', 'start': 69.362, 'duration': 2.821}, {'end': 76.845, 'text': 'So basically it gives me five seconds for each word.', 'start': 72.563, 'duration': 4.282}], 'summary': 'Type words in time limit to score points. game ends if time runs out. each word has 5-second limit.', 'duration': 28.97, 'max_score': 47.875, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-02847875.jpg'}, {'end': 127.997, 'src': 'embed', 'start': 97.465, 'weight': 2, 'content': [{'end': 97.746, 'text': 'All right.', 'start': 97.465, 'duration': 0.281}, {'end': 98.586, 'text': 'So pretty simple.', 'start': 97.786, 'duration': 0.8}, {'end': 102.149, 'text': 'When you come to the page, the game automatically starts.', 'start': 99.387, 'duration': 2.762}, {'end': 104.992, 'text': "You can see it starts the timer and it's auto focus.", 'start': 102.189, 'duration': 2.803}, {'end': 106.192, 'text': 'So it puts you right in there.', 'start': 105.012, 'duration': 1.18}, {'end': 111.577, 'text': "And then, of course, if you want to play again, you just put in the word and it'll start again.", 'start': 107.133, 'duration': 4.444}, {'end': 115.03, 'text': 'OK, so pretty simple,', 'start': 113.129, 'duration': 1.901}, {'end': 121.714, 'text': "but I think it's a fun little project and what I'd like to do is kind of give a little homework assignment and I've done this in a couple of videos,", 'start': 115.03, 'duration': 6.684}, {'end': 127.997, 'text': "but I haven't done it lately where you take this application and add on to it, make it more interactive.", 'start': 121.714, 'duration': 6.283}], 'summary': 'A simple game starts automatically, has a timer, and can be replayed with added interactivity.', 'duration': 30.532, 'max_score': 97.465, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-02897465.jpg'}, {'end': 174.809, 'src': 'embed', 'start': 130.398, 'weight': 3, 'content': [{'end': 137.924, 'text': "And then what I'll do is I'll look at the URLs if you want to throw it up on GitHub pages or something and put the URL in the comments.", 'start': 130.398, 'duration': 7.526}, {'end': 144.629, 'text': "I'll go through them and in a couple weeks I'll announce a winner and I'll show your work in a future video.", 'start': 138.344, 'duration': 6.285}, {'end': 152.055, 'text': "And I think it's a good way to learn, aside from just watching a tutorial and copying the code.", 'start': 145.409, 'duration': 6.646}, {'end': 155.157, 'text': 'you can actually be creative and come up with your own stuff.', 'start': 152.055, 'duration': 3.102}, {'end': 162.023, 'text': 'So some ideas would be maybe to have a high score and store it in local storage and have that show and change when you beat it.', 'start': 155.798, 'duration': 6.225}, {'end': 165.726, 'text': 'Maybe you could fetch random words from an API.', 'start': 162.843, 'duration': 2.883}, {'end': 174.809, 'text': "or use like a module or something like that because right now it's just static text or just a static array of like 30 words.", 'start': 166.706, 'duration': 8.103}], 'summary': 'Participants can submit urls for github pages, and a winner will be announced in a couple weeks to showcase their work in a future video, promoting creativity and learning beyond tutorials.', 'duration': 44.411, 'max_score': 130.398, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028130398.jpg'}], 'start': 7.335, 'title': 'Building interactive applications', 'summary': 'Includes building a speed typing application in javascript called wordbeater with a 130-page freelancing bundle guide and a 25% discount, and an interactive enhancement challenge for viewers to add features like high score storage, api integration, and difficulty levels, with the best submission to be showcased in a future video.', 'chapters': [{'end': 115.03, 'start': 7.335, 'title': 'Build a speed typing application in javascript', 'summary': 'Introduces a speed typing application called wordbeater built in pure javascript, with a 130-page freelancing bundle guide and a 25% discount, a game that gives five seconds per word and adds a point for each correct word, with a feature to restart the game.', 'duration': 107.695, 'highlights': ['The chapter introduces a speed typing application called WordBeater built in pure JavaScript, with a 130-page freelancing bundle guide and a 25% discount.', 'The game provides five seconds to type each word and adds a point to the score for each correct word, with the ability to restart the game by typing the word shown.', 'The video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com, which includes a 130-page in-depth guide invoicing and client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'The game automatically starts when coming to the page, with the timer and auto focus feature, making it simple to play and restart the game.']}, {'end': 193.555, 'start': 115.03, 'title': 'Interactive application enhancement challenge', 'summary': 'Introduces a challenge for viewers to enhance an application by adding interactive features such as high score storage, api integration for fetching random words, and user-selectable difficulty levels, with the best submission to be showcased in a future video.', 'duration': 78.525, 'highlights': ['Viewers are encouraged to enhance an application by adding interactive features such as high score storage, API integration, and user-selectable difficulty levels. The chapter introduces a challenge for viewers to enhance an application by adding interactive features such as high score storage, API integration for fetching random words, and user-selectable difficulty levels.', 'The best submission will be showcased in a future video. The best submission to the challenge will be announced as the winner and showcased in a future video.', 'Suggestions for enhancement include adding high score storage, fetching random words from an API, and enabling user-selectable difficulty levels. Suggestions for enhancement include adding high score storage, fetching random words from an API, and enabling user-selectable difficulty levels to improve the application.']}], 'duration': 186.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0287335.jpg', 'highlights': ['The game provides five seconds to type each word and adds a point to the score for each correct word, with the ability to restart the game by typing the word shown.', 'The video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com, which includes a 130-page in-depth guide invoicing and client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'The game automatically starts when coming to the page, with the timer and auto focus feature, making it simple to play and restart the game.', 'Viewers are encouraged to enhance an application by adding interactive features such as high score storage, API integration, and user-selectable difficulty levels. The chapter introduces a challenge for viewers to enhance an application by adding interactive features such as high score storage, API integration for fetching random words, and user-selectable difficulty levels.', 'The best submission will be showcased in a future video. The best submission to the challenge will be announced as the winner and showcased in a future video.', 'Suggestions for enhancement include adding high score storage, fetching random words from an API, and enabling user-selectable difficulty levels. Suggestions for enhancement include adding high score storage, fetching random words from an API, and enabling user-selectable difficulty levels to improve the application.']}, {'end': 454.066, 'segs': [{'end': 255.328, 'src': 'embed', 'start': 193.935, 'weight': 2, 'content': [{'end': 198.697, 'text': "So those are just some ideas that I had, but I'm sure that you guys can come up with some of your own.", 'start': 193.935, 'duration': 4.762}, {'end': 207.521, 'text': "But I know a lot of people don't have time, but if you want to submit a URL in the comments, I will look at it.", 'start': 199.637, 'duration': 7.884}, {'end': 209.922, 'text': 'It will come up as spam, but I will accept it.', 'start': 207.661, 'duration': 2.261}, {'end': 212.603, 'text': "All right, so let's go ahead and get started.", 'start': 210.642, 'duration': 1.961}, {'end': 216.72, 'text': "All right, guys, so I'm not going to type out the HTML.", 'start': 213.499, 'duration': 3.221}, {'end': 218.401, 'text': "I'm just going to go over it real quick.", 'start': 216.74, 'duration': 1.661}, {'end': 220.982, 'text': "It's very simple, very simple bootstrap layout.", 'start': 218.481, 'duration': 2.501}, {'end': 223.403, 'text': 'And I have VS Code open.', 'start': 221.662, 'duration': 1.741}, {'end': 230.306, 'text': "We have an index HTML with the markup and then a main JS file inside of a JS folder that's completely blank.", 'start': 223.423, 'duration': 6.883}, {'end': 232.287, 'text': 'So this is where all of our code will go.', 'start': 230.626, 'duration': 1.661}, {'end': 233.287, 'text': 'All right.', 'start': 232.987, 'duration': 0.3}, {'end': 243.637, 'text': "And I'm using a Visual Studio Code extension called Live Server, which you can get if you just click here and search for live server and install it.", 'start': 233.608, 'duration': 10.029}, {'end': 250.303, 'text': "And then you can simply just go open with live server and it'll open on your local host and you have auto refresh.", 'start': 243.957, 'duration': 6.346}, {'end': 255.328, 'text': "So as soon as you save, your browser will refresh, whether it's HTML or JavaScript.", 'start': 250.743, 'duration': 4.585}], 'summary': 'Demonstrating a simple bootstrap layout using vs code and live server for auto refresh.', 'duration': 61.393, 'max_score': 193.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028193935.jpg'}, {'end': 304.604, 'src': 'embed', 'start': 274.826, 'weight': 0, 'content': [{'end': 277.508, 'text': "So in the head, I'm just including the bootstrap CDN.", 'start': 274.826, 'duration': 2.682}, {'end': 279.209, 'text': "I'm only using the CSS.", 'start': 277.868, 'duration': 1.341}, {'end': 282.472, 'text': "I'm not including the bootstrap JavaScript file or anything like that.", 'start': 279.249, 'duration': 3.223}, {'end': 288.177, 'text': 'Then we just have a body with BG dark class because I want the dark background.', 'start': 283.073, 'duration': 5.104}, {'end': 291.319, 'text': 'We have a simple header with some background and padding.', 'start': 288.557, 'duration': 2.762}, {'end': 292.886, 'text': 'We have a container.', 'start': 292.025, 'duration': 0.861}, {'end': 294.969, 'text': 'Everything is aligned to the center.', 'start': 292.966, 'duration': 2.003}, {'end': 299.817, 'text': 'And then we have a row where we have a six column div.', 'start': 295.49, 'duration': 4.327}, {'end': 302.06, 'text': 'Basically, everything is in the six column div.', 'start': 299.877, 'duration': 2.183}, {'end': 304.604, 'text': 'And then we move it to the middle with MX auto.', 'start': 302.16, 'duration': 2.444}], 'summary': 'Using bootstrap css for dark background, aligned center with a 6 column div.', 'duration': 29.778, 'max_score': 274.826, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028274826.jpg'}, {'end': 433.392, 'src': 'embed', 'start': 382.283, 'weight': 1, 'content': [{'end': 388.408, 'text': 'You could copy it, but I would suggest just going to the GitHub page in the description and grabbing it there.', 'start': 382.283, 'duration': 6.125}, {'end': 389.509, 'text': 'All right.', 'start': 388.428, 'duration': 1.081}, {'end': 392.272, 'text': "So let's jump over to our JavaScript and get started.", 'start': 389.529, 'duration': 2.743}, {'end': 396.314, 'text': "First thing I'm going to do is just create some global variables.", 'start': 393.473, 'duration': 2.841}, {'end': 400.174, 'text': "So we're going to need a time variable.", 'start': 397.394, 'duration': 2.78}, {'end': 401.815, 'text': "So I'm going to say let time.", 'start': 400.294, 'duration': 1.521}, {'end': 404.575, 'text': "And I'm using let because this is going to actually change.", 'start': 401.855, 'duration': 2.72}, {'end': 407.236, 'text': "We're going to just set it to 5 for now.", 'start': 405.035, 'duration': 2.201}, {'end': 412.097, 'text': "And obviously, it'll go 5, 4, 3, 2, 1, 0.", 'start': 408.056, 'duration': 4.041}, {'end': 417.378, 'text': "So we want to make sure we use let because const is for variables that you're not going to reassign.", 'start': 412.097, 'duration': 5.281}, {'end': 419.378, 'text': "So let's do that.", 'start': 417.398, 'duration': 1.98}, {'end': 422.399, 'text': "Let's also create a score variable.", 'start': 419.838, 'duration': 2.561}, {'end': 426.811, 'text': 'And score is obviously going to be set to zero at first.', 'start': 423.893, 'duration': 2.918}, {'end': 433.392, 'text': "Then we also want a variable called is playing, and I'm not going to set it to anything,", 'start': 427.988, 'duration': 5.404}], 'summary': 'Javascript tutorial: creating global variables for time, score, and gameplay.', 'duration': 51.109, 'max_score': 382.283, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028382283.jpg'}], 'start': 193.935, 'title': 'Setting up and building a simple bootstrap webpage', 'summary': 'Provides a quick overview of setting up a simple bootstrap layout using html and javascript, and covers building a simple webpage using bootstrap, focusing on global variables such as time, score, and isplaying. it also encourages interaction from viewers by inviting them to submit their own ideas and urls for review.', 'chapters': [{'end': 274.345, 'start': 193.935, 'title': 'Setting up a simple bootstrap layout', 'summary': 'Provides a quick overview of setting up a simple bootstrap layout using html and javascript, along with a recommendation to use the visual studio code extension live server for auto refresh. the chapter also encourages viewers to submit their own ideas and urls for review.', 'duration': 80.41, 'highlights': ['The chapter provides a quick overview of setting up a simple bootstrap layout using HTML and JavaScript. Simple bootstrap layout, using HTML and JavaScript', 'The chapter recommends using the Visual Studio Code extension Live Server for auto refresh. Recommendation to use Live Server for auto refresh', 'The chapter encourages viewers to submit their own ideas and URLs for review. Encouragement for viewers to submit their ideas and URLs']}, {'end': 454.066, 'start': 274.826, 'title': 'Building a simple bootstrap webpage', 'summary': 'Covers building a simple webpage using bootstrap, including the structure of the html and javascript files, with a focus on global variables such as time, score, and isplaying.', 'duration': 179.24, 'highlights': ['The chapter covers building a simple webpage using Bootstrap The transcript details the process of building a simple webpage using Bootstrap, including the inclusion of the bootstrap CDN and the structure of the HTML.', 'Global variables such as time, score, and isPlaying The chapter emphasizes the declaration and initialization of global variables like time, score, and isPlaying, which are essential elements for the functionality of the JavaScript file.', "Explanation of using let over const for variables that will change The speaker explains the use of 'let' instead of 'const' for the time variable, highlighting the importance of 'let' for variables that will be reassigned during the program's execution."]}], 'duration': 260.131, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028193935.jpg', 'highlights': ['The chapter covers building a simple webpage using Bootstrap, including the inclusion of the bootstrap CDN and the structure of the HTML.', 'The chapter emphasizes the declaration and initialization of global variables like time, score, and isPlaying, which are essential elements for the functionality of the JavaScript file.', 'Recommendation to use Live Server for auto refresh.', 'The chapter provides a quick overview of setting up a simple bootstrap layout using HTML and JavaScript.', "The speaker explains the use of 'let' instead of 'const' for the time variable, highlighting the importance of 'let' for variables that will be reassigned during the program's execution.", 'Encouragement for viewers to submit their ideas and URLs.']}, {'end': 763.347, 'segs': [{'end': 521.164, 'src': 'embed', 'start': 472.491, 'weight': 1, 'content': [{'end': 479.475, 'text': 'We have the current word, which is the word that shows here, the score display, and the time display, which are these two numbers.', 'start': 472.491, 'duration': 6.984}, {'end': 481.778, 'text': 'message, which is right here.', 'start': 480.135, 'duration': 1.643}, {'end': 484.502, 'text': "That'll show if it's correct or game over.", 'start': 481.838, 'duration': 2.664}, {'end': 490.931, 'text': 'And then seconds is this right here, this number, because we want this to reflect whatever is going to be here.', 'start': 484.862, 'duration': 6.069}, {'end': 492.694, 'text': 'So we need to grab onto those elements.', 'start': 490.951, 'duration': 1.743}, {'end': 498.295, 'text': "Next thing I'm going to do is put the words array in.", 'start': 495.754, 'duration': 2.541}, {'end': 501.576, 'text': "We're just using a hard coded array of words.", 'start': 499.135, 'duration': 2.441}, {'end': 504.197, 'text': "I don't know, I think there's like 30 or something like that.", 'start': 501.956, 'duration': 2.241}, {'end': 508.119, 'text': "So it's just a variable called words and set to an array.", 'start': 505.138, 'duration': 2.981}, {'end': 510.32, 'text': 'And you can change up the words if you want.', 'start': 508.139, 'duration': 2.181}, {'end': 515.621, 'text': 'And next thing we want to do is have an init function.', 'start': 511.76, 'duration': 3.861}, {'end': 521.164, 'text': 'So basically, when the window loads, I want an init function to fire off.', 'start': 515.722, 'duration': 5.442}], 'summary': 'The transcript discusses displaying scores, time, and messages, using a hardcoded array of words, and firing an init function on window load.', 'duration': 48.673, 'max_score': 472.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028472491.jpg'}, {'end': 638.95, 'src': 'heatmap', 'start': 521.224, 'weight': 0, 'content': [{'end': 529.195, 'text': "So I'm going to go down here and let's say initialize game and we'll say function init.", 'start': 521.224, 'duration': 7.971}, {'end': 534.344, 'text': "okay, actually, I don't know why I put a space there.", 'start': 529.195, 'duration': 5.149}, {'end': 536.247, 'text': "I don't do that.", 'start': 534.344, 'duration': 1.903}, {'end': 544.948, 'text': "so let's just console dot, log init and I want this to fire off, as I said, when the window loads.", 'start': 536.247, 'duration': 8.701}, {'end': 546.53, 'text': "so I'm going to go up to the top.", 'start': 544.948, 'duration': 1.582}, {'end': 549.054, 'text': 'here you could do window load, dot load.', 'start': 546.53, 'duration': 2.524}, {'end': 557.146, 'text': "I'm going to do window dot, add event listener and we're going to listen for the load event and as soon as that happens, we want to fire off init.", 'start': 549.054, 'duration': 8.092}, {'end': 559.215, 'text': "Okay, so I'll save that.", 'start': 557.995, 'duration': 1.22}, {'end': 565.657, 'text': "Let's open up our Chrome tools, and you can see that it's outputting init, which is good.", 'start': 559.275, 'duration': 6.382}, {'end': 569.398, 'text': "Now, there's a few things that's going to happen inside init.", 'start': 566.517, 'duration': 2.881}, {'end': 578.339, 'text': 'The first thing that I want to put in here is I want to call a function to load a word from the array, basically a random word.', 'start': 570.118, 'duration': 8.221}, {'end': 580.14, 'text': "So let's put a comment here.", 'start': 578.82, 'duration': 1.32}, {'end': 589.575, 'text': "And let's say load word from array and we're going to call that show word.", 'start': 581.722, 'duration': 7.853}, {'end': 593.622, 'text': "And then that's going to take in the whole array of words.", 'start': 589.595, 'duration': 4.027}, {'end': 597.713, 'text': 'So we need to create that function.', 'start': 596.152, 'duration': 1.561}, {'end': 608.622, 'text': "And let's just say pick and show random word.", 'start': 597.733, 'duration': 10.889}, {'end': 610.603, 'text': "And we'll say function show word.", 'start': 609.322, 'duration': 1.281}, {'end': 620.031, 'text': "Again, it's going to take in words, which will be an array.", 'start': 616.266, 'duration': 3.765}, {'end': 630.825, 'text': 'And the idea here is that we want to create a random index because we can access the words in the array by..', 'start': 620.051, 'duration': 10.774}, {'end': 638.95, 'text': 'index. so 0 would be the first one, that would be the second, third and so on, because arrays are zero based.', 'start': 632.246, 'duration': 6.704}], 'summary': "Initializing game, loading random word from array, and outputting 'init' on window load event.", 'duration': 89.896, 'max_score': 521.224, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028521224.jpg'}, {'end': 766.069, 'src': 'embed', 'start': 740.46, 'weight': 5, 'content': [{'end': 746.482, 'text': "We get a random word from the array and every time I reload we're going to get a new word and they might repeat,", 'start': 740.46, 'duration': 6.022}, {'end': 750.483, 'text': 'because it is just random and you could get the same one twice in a row.', 'start': 746.482, 'duration': 4.001}, {'end': 752.124, 'text': "But that's that's how it is.", 'start': 750.563, 'duration': 1.561}, {'end': 760.047, 'text': "And if you add more words, whether it's here or whether you find some kind of API or something, the more words, the better.", 'start': 753.224, 'duration': 6.823}, {'end': 763.347, 'text': "OK, so that's the show word.", 'start': 761.525, 'duration': 1.822}, {'end': 766.069, 'text': "That's the first thing I want to do in the unit.", 'start': 763.947, 'duration': 2.122}], 'summary': 'Random word from array, may repeat, add more for better results.', 'duration': 25.609, 'max_score': 740.46, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028740460.jpg'}], 'start': 454.066, 'title': 'Game initialization and word generator', 'summary': 'Explains setting up dom element variables, creating a hard-coded array of words, and initializing the game with a load event listener, as well as creating a javascript function to load a random word from an array using math functions and updating the html to display the word, with potential for scalability.', 'chapters': [{'end': 569.398, 'start': 454.066, 'title': 'Setting up game initialization and dom element variables', 'summary': 'Explains setting up dom element variables, creating a hard-coded array of words, and initializing the game with a load event listener, aiming to fire off an init function.', 'duration': 115.332, 'highlights': ['Initializing game with a load event listener Adding a load event listener to fire off the init function when the window loads.', "Setting DOM element variables Explaining the process of grabbing various DOM elements like input, current word, score display, time display, message, and seconds to reflect the game's status.", "Creating a hard-coded array of words Mentioning the use of a hard-coded array of words, approximately 30 in number, as a variable called 'words' which can be modified."]}, {'end': 763.347, 'start': 570.118, 'title': 'Creating a random word generator', 'summary': 'Explains the process of creating a javascript function to load a random word from an array, using math functions to generate a random index, and updating the html to display the word, with potential for repetition and scalability with more words or an api.', 'duration': 193.229, 'highlights': ['Explaining the process of creating a JavaScript function to load a random word from an array. ', 'Using math functions to generate a random index for accessing words in the array. ', 'Updating the HTML to display the loaded random word and its potential for repetition. ', 'Emphasizing scalability by adding more words or integrating an API for expansion. ']}], 'duration': 309.281, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028454066.jpg', 'highlights': ['Initializing game with a load event listener Adding a load event listener to fire off the init function when the window loads.', "Setting DOM element variables Explaining the process of grabbing various DOM elements like input, current word, score display, time display, message, and seconds to reflect the game's status.", "Creating a hard-coded array of words Mentioning the use of a hard-coded array of words, approximately 30 in number, as a variable called 'words' which can be modified.", 'Explaining the process of creating a JavaScript function to load a random word from an array.', 'Using math functions to generate a random index for accessing words in the array.', 'Updating the HTML to display the loaded random word and its potential for repetition.', 'Emphasizing scalability by adding more words or integrating an API for expansion.']}, {'end': 986.011, 'segs': [{'end': 824.981, 'src': 'embed', 'start': 763.947, 'weight': 0, 'content': [{'end': 766.069, 'text': "That's the first thing I want to do in the unit.", 'start': 763.947, 'duration': 2.122}, {'end': 767.61, 'text': "Let's see.", 'start': 767.25, 'duration': 0.36}, {'end': 771.493, 'text': 'The next thing I want to do is the the countdown.', 'start': 767.65, 'duration': 3.843}, {'end': 777.478, 'text': 'OK, so we want this timer to count down from whatever we put here, in this case, five.', 'start': 771.513, 'duration': 5.965}, {'end': 779.82, 'text': "So let's see.", 'start': 778.479, 'duration': 1.341}, {'end': 783.403, 'text': "We're going to say call countdown.", 'start': 779.84, 'duration': 3.563}, {'end': 786.963, 'text': 'every second.', 'start': 785.183, 'duration': 1.78}, {'end': 794.105, 'text': 'so to to repeat something, we can use a javascript function called set interval and we can pass in a function.', 'start': 786.963, 'duration': 7.142}, {'end': 799.527, 'text': "i'm going to pass in a function called countdown, which we haven't created yet, and i want to run every second.", 'start': 794.105, 'duration': 5.422}, {'end': 800.887, 'text': 'so this is milliseconds.', 'start': 799.527, 'duration': 1.36}, {'end': 805.888, 'text': "so a thousand milliseconds is one second and then we're going to create that function.", 'start': 800.887, 'duration': 5.001}, {'end': 812.11, 'text': "i'll say countdown, timer.", 'start': 805.888, 'duration': 6.222}, {'end': 815.71, 'text': 'so function Countdown.', 'start': 812.11, 'duration': 3.6}, {'end': 824.981, 'text': 'OK, now again, this will run every second, so we want to first make sure that the time is not run out.', 'start': 815.73, 'duration': 9.251}], 'summary': 'Creating a countdown timer to run every second with a set interval and a function called countdown.', 'duration': 61.034, 'max_score': 763.947, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028763947.jpg'}, {'end': 986.011, 'src': 'heatmap', 'start': 957.376, 'weight': 1, 'content': [{'end': 964.898, 'text': "So let's say check status and let's set it to 50.", 'start': 957.376, 'duration': 7.522}, {'end': 967.039, 'text': "And then we'll create that function down here.", 'start': 964.898, 'duration': 2.141}, {'end': 970.522, 'text': 'So check game status.', 'start': 968.04, 'duration': 2.482}, {'end': 979.947, 'text': 'Oops Okay.', 'start': 977.386, 'duration': 2.561}, {'end': 982.269, 'text': 'Now in here we just want to do one thing.', 'start': 980.168, 'duration': 2.101}, {'end': 983.87, 'text': 'We want to do an if statement.', 'start': 982.309, 'duration': 1.561}, {'end': 986.011, 'text': 'Well we actually want to check for two things.', 'start': 984.33, 'duration': 1.681}], 'summary': 'Creating a function to check game status and setting it to 50.', 'duration': 70.504, 'max_score': 957.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028957376.jpg'}], 'start': 763.947, 'title': 'Countdown timer implementation', 'summary': 'Covers the creation of a countdown timer in javascript using the set interval function to update the timer every second, and its application in a game involving time decrement and status checking at intervals of 50 milliseconds.', 'chapters': [{'end': 824.981, 'start': 763.947, 'title': 'Creating countdown timer in javascript', 'summary': 'Discusses creating a countdown timer in javascript, featuring the use of set interval function to update the timer every second and prevent the time from running out.', 'duration': 61.034, 'highlights': ['Using set interval function to update the timer every second', 'Preventing the time from running out by checking for remaining time in the countdown function', 'Explaining the use of milliseconds for time intervals']}, {'end': 986.011, 'start': 825.202, 'title': 'Countdown timer and game status', 'summary': 'Discusses the implementation of a countdown timer in a game, involving conditions for time decrement and checking game status at frequent intervals of 50 milliseconds.', 'duration': 160.809, 'highlights': ['The chapter explains the logic for implementing a countdown timer in a game, where time is decremented and game status is checked at intervals of 50 milliseconds.', "The code demonstrates decrementing the time when it is greater than zero, and setting the 'is playing' status to false when the time equals zero.", "An interval of 50 milliseconds is set to continuously check the game status, ensuring prompt updates in the game's progression."]}], 'duration': 222.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028763947.jpg', 'highlights': ['Covers the creation of a countdown timer in javascript using the set interval function to update the timer every second', 'The chapter explains the logic for implementing a countdown timer in a game, where time is decremented and game status is checked at intervals of 50 milliseconds', 'Preventing the time from running out by checking for remaining time in the countdown function', "An interval of 50 milliseconds is set to continuously check the game status, ensuring prompt updates in the game's progression", 'Explaining the use of milliseconds for time intervals', "The code demonstrates decrementing the time when it is greater than zero, and setting the 'is playing' status to false when the time equals zero"]}, {'end': 1373.428, 'segs': [{'end': 1126.414, 'src': 'embed', 'start': 986.031, 'weight': 0, 'content': [{'end': 988.553, 'text': 'We want to check to see if not is playing.', 'start': 986.031, 'duration': 2.522}, {'end': 994.51, 'text': "if that's false and we want to check if time is equal to zero.", 'start': 989.426, 'duration': 5.084}, {'end': 997.813, 'text': "if that's true, then that means obviously the game is over.", 'start': 994.51, 'duration': 3.303}, {'end': 1010.082, 'text': 'so we want to take the message and we want to output so inner HTML and we want to output the text game over like that.', 'start': 997.813, 'duration': 12.269}, {'end': 1016.665, 'text': "so let's save that and as soon as this runs out, We get game over.", 'start': 1010.082, 'duration': 6.583}, {'end': 1017.926, 'text': 'All right.', 'start': 1016.685, 'duration': 1.241}, {'end': 1026.549, 'text': "So up to this point, we have the functionality of this changing the timer counting down and then game over when it's over.", 'start': 1018.006, 'duration': 8.543}, {'end': 1035.571, 'text': "So let's see, what do we want to do next? Let's start to work on when we actually type something in here.", 'start': 1028.449, 'duration': 7.122}, {'end': 1053.839, 'text': "So in the init, I'm going to go under show words or show word and let's say Start matching on word input.", 'start': 1036.352, 'duration': 17.487}, {'end': 1061.242, 'text': 'So every time we type, whenever we type something in here, we want to fire off an event, which will fire off a function.', 'start': 1055.44, 'duration': 5.802}, {'end': 1062.983, 'text': "So let's take the word input.", 'start': 1061.342, 'duration': 1.641}, {'end': 1066.401, 'text': "And let's say add event listener.", 'start': 1064.6, 'duration': 1.801}, {'end': 1068.762, 'text': 'We want to listen for any input.', 'start': 1066.981, 'duration': 1.781}, {'end': 1075.244, 'text': "And then when that happens, we want to run a function and we'll call it start match.", 'start': 1069.822, 'duration': 5.422}, {'end': 1085.207, 'text': "OK, so we'll go right under here and start match.", 'start': 1077.725, 'duration': 7.482}, {'end': 1086.488, 'text': 'So function.', 'start': 1085.648, 'duration': 0.84}, {'end': 1092.069, 'text': 'Start match.', 'start': 1091.169, 'duration': 0.9}, {'end': 1098.891, 'text': "Now we're going to have another function that is dedicated to matching this to whatever the user types in.", 'start': 1092.609, 'duration': 6.282}, {'end': 1110.454, 'text': "So I'm going to call that we'll call that match words and that's going to either return true or false.", 'start': 1099.611, 'duration': 10.843}, {'end': 1116.276, 'text': "So right under this we'll say it's going to match the current word.", 'start': 1111.215, 'duration': 5.061}, {'end': 1121.01, 'text': 'to the word input.', 'start': 1118.248, 'duration': 2.762}, {'end': 1122.912, 'text': 'All right.', 'start': 1121.05, 'duration': 1.862}, {'end': 1126.414, 'text': "So let's say function match words.", 'start': 1123.032, 'duration': 3.382}], 'summary': 'The code checks for game over and starts matching user input with a function called match words.', 'duration': 140.383, 'max_score': 986.031, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028986031.jpg'}, {'end': 1225.532, 'src': 'embed', 'start': 1183.702, 'weight': 11, 'content': [{'end': 1192.464, 'text': "Now, if those match, then let's take the message and let's do inner HTML equals and let's say correct.", 'start': 1183.702, 'duration': 8.762}, {'end': 1195.341, 'text': "OK, because it's correct.", 'start': 1194.121, 'duration': 1.22}, {'end': 1199.502, 'text': 'And then we also want to return true else.', 'start': 1195.841, 'duration': 3.661}, {'end': 1209.764, 'text': "Then we'll say message dot inner HTML equals nothing and we'll say return false.", 'start': 1201.643, 'duration': 8.121}, {'end': 1212.805, 'text': "OK, so we'll save that.", 'start': 1211.265, 'duration': 1.54}, {'end': 1216.606, 'text': "And now let's go back.", 'start': 1215.086, 'duration': 1.52}, {'end': 1221.749, 'text': 'Oh, I put this in the wrong area, guys.', 'start': 1219.548, 'duration': 2.201}, {'end': 1222.45, 'text': "I'm sorry.", 'start': 1221.789, 'duration': 0.661}, {'end': 1225.532, 'text': 'This is the match words function.', 'start': 1223.311, 'duration': 2.221}], 'summary': 'Code checks for message match, returns true or false.', 'duration': 41.83, 'max_score': 1183.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281183702.jpg'}, {'end': 1373.428, 'src': 'embed', 'start': 1256.668, 'weight': 4, 'content': [{'end': 1262.252, 'text': "So I'm going to just reload and say laughter and there it goes, match.", 'start': 1256.668, 'duration': 5.584}, {'end': 1263.973, 'text': 'And we get correct here as well.', 'start': 1262.412, 'duration': 1.561}, {'end': 1267.916, 'text': "So I guess I didn't really have to do the console log.", 'start': 1265.374, 'duration': 2.542}, {'end': 1279.097, 'text': 'So what we want to happen now if this matches is we want to set the variable is playing to true.', 'start': 1269.955, 'duration': 9.142}, {'end': 1280.918, 'text': "It's the first thing we want to do.", 'start': 1279.117, 'duration': 1.801}, {'end': 1287.76, 'text': "We want to set the time and we're actually going to set the time to six.", 'start': 1282.198, 'duration': 5.562}, {'end': 1292.001, 'text': 'because of the page load, which takes a second.', 'start': 1288.76, 'duration': 3.241}, {'end': 1298.163, 'text': 'So we want to set this we just want to set this to one above whatever the initial time is.', 'start': 1292.121, 'duration': 6.042}, {'end': 1304.165, 'text': "And later on, we're going to change this up a little because we're going to make the time a little more dynamic.", 'start': 1299.104, 'duration': 5.061}, {'end': 1306.706, 'text': "But for now, we're just going to set this to six.", 'start': 1304.646, 'duration': 2.06}, {'end': 1312.448, 'text': 'OK, and then we want to show a new word, obviously, to type.', 'start': 1307.827, 'duration': 4.621}, {'end': 1316.79, 'text': "So let's say show word and we'll pass in words.", 'start': 1312.528, 'duration': 4.262}, {'end': 1323.562, 'text': 'And then we also want to clear the input because as you can see that the text is still in there.', 'start': 1319.117, 'duration': 4.445}, {'end': 1332.711, 'text': 'So we want to take the word input and we want to say dot value and set it equal to nothing.', 'start': 1323.702, 'duration': 9.009}, {'end': 1336.314, 'text': 'And the last thing we want to do is increment the score.', 'start': 1333.711, 'duration': 2.603}, {'end': 1341.519, 'text': "So we'll say score plus plus which will increment it by one.", 'start': 1336.734, 'duration': 4.785}, {'end': 1343.932, 'text': "Now that's all well and good.", 'start': 1342.751, 'duration': 1.181}, {'end': 1347.355, 'text': "the score will be incremented, but it's not going to reflect in the dawn.", 'start': 1343.932, 'duration': 3.423}, {'end': 1350.639, 'text': "we have to do that, so let's go outside of this if.", 'start': 1347.355, 'duration': 3.284}, {'end': 1363.551, 'text': "And let's say score display, which is what we set that dawn element to and then dot in our html and set it to whatever the score is all right.", 'start': 1352.2, 'duration': 11.351}, {'end': 1364.612, 'text': 'so now, if I save.', 'start': 1363.551, 'duration': 1.061}, {'end': 1371.487, 'text': 'You can see now my score is going to improve with each one that I get.', 'start': 1367.625, 'duration': 3.862}, {'end': 1372.808, 'text': 'Correct OK.', 'start': 1371.567, 'duration': 1.241}, {'end': 1373.428, 'text': "There's three.", 'start': 1372.828, 'duration': 0.6}], 'summary': 'Setting isplaying to true, time to 6, showing new word, and incrementing score in a word typing game.', 'duration': 116.76, 'max_score': 1256.668, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281256668.jpg'}], 'start': 986.031, 'title': 'Typing game logic', 'summary': 'Explains the logic behind a typing game, including capturing user input, validating against the expected word, updating the message based on correctness, setting playing status, time, and score, and displaying the score on the ui.', 'chapters': [{'end': 1126.414, 'start': 986.031, 'title': 'Game over message and word matching', 'summary': "Discusses the functionality of displaying a 'game over' message when the timer reaches zero and the implementation of word matching functionality that fires off an event when a user types something, triggering the start of a matching function.", 'duration': 140.383, 'highlights': ["The functionality of displaying a 'game over' message when the timer reaches zero Checking if time is equal to zero triggers the 'game over' message to be displayed", 'Implementation of word matching functionality that fires off an event when a user types something Adding an event listener to the word input triggers the start of a matching function when any input is detected']}, {'end': 1373.428, 'start': 1126.434, 'title': 'Typing game logic', 'summary': 'Explains the logic behind a typing game, including capturing user input, validating against the expected word, updating the message based on correctness, setting playing status, time, and score, and displaying the score on the ui.', 'duration': 246.994, 'highlights': ['The logic behind capturing user input and validating it against the expected word is explained, with usage of dot value for input elements and innerHTML for content comparison. N/A', "The process of updating the message based on correctness is described, where 'correct' message is displayed upon a match and 'nothing' message is shown for a mismatch. N/A", 'The setting of playing status to true upon correct word match and adjusting the time by setting it to six is explained. Time set to six seconds.', 'The logic for displaying a new word to type, clearing the input field, and incrementing the score by one is outlined. Score incremented by one.', 'The process of updating and displaying the score on the UI is detailed, ensuring that the score reflects the correct value based on user performance. Score displayed and improved with correct word matches.']}], 'duration': 387.397, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-028986031.jpg', 'highlights': ["The functionality of displaying a 'game over' message when the timer reaches zero", "Checking if time is equal to zero triggers the 'game over' message to be displayed", 'Implementation of word matching functionality that fires off an event when a user types something', 'Adding an event listener to the word input triggers the start of a matching function when any input is detected', 'The setting of playing status to true upon correct word match and adjusting the time by setting it to six is explained', 'Time set to six seconds', 'The logic for displaying a new word to type, clearing the input field, and incrementing the score by one is outlined', 'Score incremented by one', 'The process of updating and displaying the score on the UI is detailed', 'Score displayed and improved with correct word matches', 'The logic behind capturing user input and validating it against the expected word is explained', 'The process of updating the message based on correctness is described', 'The process of updating the message based on correctness is described', "Where 'correct' message is displayed upon a match and 'nothing' message is shown for a mismatch"]}, {'end': 1600.883, 'segs': [{'end': 1435.759, 'src': 'embed', 'start': 1403.647, 'weight': 3, 'content': [{'end': 1406.49, 'text': "Or it's at 6 because I just added to it.", 'start': 1403.647, 'duration': 2.843}, {'end': 1409.493, 'text': 'So we want to go down to check status.', 'start': 1407.05, 'duration': 2.443}, {'end': 1412.395, 'text': 'And if the game is over, we want to reset the score.', 'start': 1409.613, 'duration': 2.782}, {'end': 1415.639, 'text': "Now you would think we'd set it to 0.", 'start': 1412.976, 'duration': 2.663}, {'end': 1416.72, 'text': 'But if I do that..', 'start': 1415.639, 'duration': 1.081}, {'end': 1423.246, 'text': "Let's first test it out make sure that so magic magic.", 'start': 1418.921, 'duration': 4.325}, {'end': 1425.608, 'text': "Let's make sure that the score resets.", 'start': 1423.766, 'duration': 1.842}, {'end': 1435.759, 'text': "Okay. so if we lose As soon as I start to type, this score should reset, so I'll start to type and there goes down to zero.", 'start': 1425.608, 'duration': 10.151}], 'summary': 'Testing score reset function. score should reset to zero when game is over.', 'duration': 32.112, 'max_score': 1403.647, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281403647.jpg'}, {'end': 1478.604, 'src': 'embed', 'start': 1452.138, 'weight': 2, 'content': [{'end': 1457.54, 'text': "I don't think that that's very fair, because you have all the time in the world to type that first word in,", 'start': 1452.138, 'duration': 5.402}, {'end': 1460.461, 'text': "Because that's what starts through the restarts the game.", 'start': 1457.54, 'duration': 2.921}, {'end': 1462.342, 'text': "so we don't we shouldn't get a point for that.", 'start': 1460.461, 'duration': 1.881}, {'end': 1467.003, 'text': "So what I'm gonna do is I'm gonna set this score to negative one instead of zero.", 'start': 1462.342, 'duration': 4.661}, {'end': 1469.364, 'text': 'That way the first one I put in.', 'start': 1467.003, 'duration': 2.361}, {'end': 1473.106, 'text': 'because once I lose, let me just let it run out.', 'start': 1469.364, 'duration': 3.742}, {'end': 1478.604, 'text': 'once I lose, I I can take forever to type in siblings for the game to start.', 'start': 1473.106, 'duration': 5.498}], 'summary': 'Proposing to set the score to negative one instead of zero to account for unfair advantage in game start.', 'duration': 26.466, 'max_score': 1452.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281452138.jpg'}, {'end': 1600.883, 'src': 'embed', 'start': 1499.449, 'weight': 0, 'content': [{'end': 1507.33, 'text': "So we're just showing the score but we want to do an if statement saying if the score is negative one then display zero.", 'start': 1499.449, 'duration': 7.881}, {'end': 1509.25, 'text': "So that's pretty easy.", 'start': 1508.41, 'duration': 0.84}, {'end': 1512.831, 'text': "We're just going to say let's put a comment here we'll say if.", 'start': 1509.27, 'duration': 3.561}, {'end': 1520.383, 'text': 'Score is negative one, display zero.', 'start': 1515.382, 'duration': 5.001}, {'end': 1530.686, 'text': "Okay, this is gonna be an if else, and we'll just move this up here.", 'start': 1520.403, 'duration': 10.283}, {'end': 1540.029, 'text': "And let's say if the score is equal to negative one, then let's actually copy this.", 'start': 1530.706, 'duration': 9.323}, {'end': 1543.482, 'text': 'and just change this to zero.', 'start': 1541.761, 'duration': 1.721}, {'end': 1545.883, 'text': "That way it doesn't actually show negative one.", 'start': 1543.602, 'duration': 2.281}, {'end': 1557.147, 'text': "So let's just lose on purpose and then the first word we type shouldn't give us a point.", 'start': 1546.543, 'duration': 10.604}, {'end': 1564.109, 'text': "OK now I'll start to type score goes to zero and I can take forever to type in echo to start the game.", 'start': 1557.167, 'duration': 6.942}, {'end': 1568.991, 'text': "So when I type in echo the first time no score I don't get a point for that.", 'start': 1564.189, 'duration': 4.802}, {'end': 1570.612, 'text': 'However the next one I do.', 'start': 1569.431, 'duration': 1.181}, {'end': 1573.837, 'text': 'Okay, hopefully that makes sense.', 'start': 1572.517, 'duration': 1.32}, {'end': 1577.518, 'text': 'There we go.', 'start': 1577.078, 'duration': 0.44}, {'end': 1581.099, 'text': 'Okay, so that should be good.', 'start': 1578.638, 'duration': 2.461}, {'end': 1586.92, 'text': "I think that we're just about there.", 'start': 1582.739, 'duration': 4.181}, {'end': 1591.541, 'text': 'Now this, actually, hold on a second.', 'start': 1587.5, 'duration': 4.041}, {'end': 1595.482, 'text': 'All right.', 'start': 1595.242, 'duration': 0.24}, {'end': 1600.883, 'text': 'So right now we just have the time set hard coded to five.', 'start': 1596.322, 'duration': 4.561}], 'summary': 'Implementing a condition to display zero if the score is negative one in a coding exercise.', 'duration': 101.434, 'max_score': 1499.449, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281499449.jpg'}], 'start': 1373.888, 'title': 'Game score and display adjustment', 'summary': 'Discusses resolving the game score reset issue by setting it to -1 instead of 0 and implementing an if-else statement to display 0 instead of -1, enhancing the user experience. the time is currently hard coded to 5.', 'chapters': [{'end': 1499.369, 'start': 1373.888, 'title': 'Game score reset and start match', 'summary': 'Discusses the issue of game score not resetting to zero and the unfairness of receiving a point for the first word input, proposing a solution to set the score to negative one instead of zero to address the problem.', 'duration': 125.481, 'highlights': ['The score never reset and continued at 6, even after adding to it.', 'The proposed solution is to set the score to negative one instead of zero, to address the issue of receiving a point for the first word input.', "The game doesn't start until the full word is typed in, allowing unlimited time to restart, leading to the unfairness of receiving a point for the first input."]}, {'end': 1600.883, 'start': 1499.449, 'title': 'Adjusting score display', 'summary': 'Involves implementing an if-else statement to display 0 instead of -1 as the score, allowing for a more user-friendly experience. the time is currently hard coded to 5.', 'duration': 101.434, 'highlights': ['Implementing if-else statement to display 0 instead of -1 as the score, improving user experience.', 'Time is hard coded to 5, lacking flexibility for adjustments.']}], 'duration': 226.995, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281373888.jpg', 'highlights': ['The proposed solution is to set the score to negative one instead of zero, to address the issue of receiving a point for the first word input.', 'Implementing if-else statement to display 0 instead of -1 as the score, improving user experience.', "The game doesn't start until the full word is typed in, allowing unlimited time to restart, leading to the unfairness of receiving a point for the first input.", 'The score never reset and continued at 6, even after adding to it.', 'Time is hard coded to 5, lacking flexibility for adjustments.']}, {'end': 1954.835, 'segs': [{'end': 1718.693, 'src': 'embed', 'start': 1641.353, 'weight': 0, 'content': [{'end': 1649.554, 'text': 'OK We also want to have a variable for to change the level.', 'start': 1641.353, 'duration': 8.201}, {'end': 1652.255, 'text': "So we'll say to change level.", 'start': 1649.634, 'duration': 2.621}, {'end': 1664.083, 'text': "Const Current level equals levels and it's an object, so we'll say levels dot easy, set it to that, which will be five.", 'start': 1654.197, 'duration': 9.886}, {'end': 1665.764, 'text': 'OK And the time.', 'start': 1664.103, 'duration': 1.661}, {'end': 1677.957, 'text': "We don't want to hard code it to five because if we set this to like medium or hard, we want it to we just want this to equal the current level.", 'start': 1670.652, 'duration': 7.305}, {'end': 1681.079, 'text': 'Like that.', 'start': 1680.619, 'duration': 0.46}, {'end': 1683.161, 'text': 'All right.', 'start': 1681.099, 'duration': 2.062}, {'end': 1690.786, 'text': 'And then down here, when we do the reset, where is it? We actually we hard coded it to six.', 'start': 1683.361, 'duration': 7.425}, {'end': 1694.343, 'text': 'Right here.', 'start': 1693.663, 'duration': 0.68}, {'end': 1702.206, 'text': "It's not going to make sense if we choose medium or hard because those are those aren't going to be five.", 'start': 1695.544, 'duration': 6.662}, {'end': 1706.348, 'text': 'So this needs to be just one more than what the current level is.', 'start': 1702.306, 'duration': 4.042}, {'end': 1710.97, 'text': 'So what we can do is just say current level plus one.', 'start': 1706.448, 'duration': 4.522}, {'end': 1715.572, 'text': 'That should make it more dynamic and.', 'start': 1712.07, 'duration': 3.502}, {'end': 1718.693, 'text': "I'm pretty sure that's it.", 'start': 1715.592, 'duration': 3.101}], 'summary': 'Code update to make level and time dynamic in the game.', 'duration': 77.34, 'max_score': 1641.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281641353.jpg'}, {'end': 1813.853, 'src': 'embed', 'start': 1782.967, 'weight': 3, 'content': [{'end': 1783.848, 'text': 'But you get the point.', 'start': 1782.967, 'duration': 0.881}, {'end': 1785.91, 'text': "So that's pretty much it, guys.", 'start': 1784.088, 'duration': 1.822}, {'end': 1787.131, 'text': 'We have the game.', 'start': 1785.95, 'duration': 1.181}, {'end': 1787.892, 'text': "It's working.", 'start': 1787.151, 'duration': 0.741}, {'end': 1789.614, 'text': 'Oh, one last thing.', 'start': 1788.753, 'duration': 0.861}, {'end': 1793.578, 'text': "This should reflect whatever level it's on, whatever seconds.", 'start': 1789.714, 'duration': 3.864}, {'end': 1796.041, 'text': "Right now it's on hard, so this should actually be a one.", 'start': 1793.638, 'duration': 2.403}, {'end': 1797.602, 'text': "So that's pretty easy.", 'start': 1796.741, 'duration': 0.861}, {'end': 1799.044, 'text': "We'll just do this in the init.", 'start': 1797.642, 'duration': 1.402}, {'end': 1802.067, 'text': "So let's go to..", 'start': 1800.906, 'duration': 1.161}, {'end': 1813.853, 'text': "We'll just do it right at the top here, and we'll say show number of seconds in UI.", 'start': 1803.37, 'duration': 10.483}], 'summary': 'Game is working; level set to hard takes one second.', 'duration': 30.886, 'max_score': 1782.967, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281782967.jpg'}, {'end': 1921.954, 'src': 'embed', 'start': 1877.034, 'weight': 4, 'content': [{'end': 1882.576, 'text': 'set item, high score, and then set it, and then local storage dot get item to get it.', 'start': 1877.034, 'duration': 5.542}, {'end': 1889.699, 'text': "And whenever a game is finished, you could match the score to the local storage, and if it's higher, then replace it.", 'start': 1883.357, 'duration': 6.342}, {'end': 1896.102, 'text': 'And of course, you could do stuff with the words if you want to fetch them from an API or something like that.', 'start': 1891.06, 'duration': 5.042}, {'end': 1899.263, 'text': 'You could make the UX better.', 'start': 1896.482, 'duration': 2.781}, {'end': 1905.326, 'text': "You could maybe make the game over red or make the border around the input red when the game's over.", 'start': 1899.343, 'duration': 5.983}, {'end': 1909.968, 'text': "But you just have to make sure you reset it when the game starts again or it'll just stay red.", 'start': 1905.686, 'duration': 4.282}, {'end': 1911.369, 'text': 'So things like that.', 'start': 1910.388, 'duration': 0.981}, {'end': 1918.552, 'text': 'Or if you wanted to recreate the application in React or Vue or something like that, you could do that as well.', 'start': 1912.869, 'duration': 5.683}, {'end': 1920.173, 'text': "And I'll take a look at that.", 'start': 1918.592, 'duration': 1.581}, {'end': 1921.954, 'text': "But that's going to be it, guys.", 'start': 1920.813, 'duration': 1.141}], 'summary': 'Use local storage to store high scores and improve game ux and functionality.', 'duration': 44.92, 'max_score': 1877.034, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281877034.jpg'}], 'start': 1601.883, 'title': 'Game enhancement and level setting', 'summary': 'Covers setting dynamic game levels with quantified timeframes, updating ui, addressing bugs, and enhancing the game with user-selected levels, local storage, improved ux, and potential migration to react or vue.', 'chapters': [{'end': 1718.693, 'start': 1601.883, 'title': 'Setting dynamic levels and time', 'summary': 'Discusses setting dynamic levels and time for a game, with easy being 5 seconds, medium being 3 seconds, and hard being 2 seconds, and adjusting the time based on the chosen level.', 'duration': 116.81, 'highlights': ['Setting the levels object with easy as 5, medium as 3, and hard as 2, making the game dynamic based on the chosen level.', 'Creating a variable for the current level and dynamically changing the time based on the selected level to ensure flexibility in the game.', 'Adjusting the reset function to dynamically set the time based on the current level, ensuring adaptability to different levels.']}, {'end': 1848.538, 'start': 1721.585, 'title': 'Game level change and ui update', 'summary': 'Discusses changing game levels from easy to hard, updating the ui to reflect the level and seconds, and addressing potential bugs in the game creation process.', 'duration': 126.953, 'highlights': ['Changing game levels from easy to hard and setting the time to one second should be considered for enhanced gameplay.', 'Updating the UI to reflect the current game level and seconds is crucial for a better user experience.', "Addressing potential bugs and improvements in the game creation process is important for refining the game's functionality."]}, {'end': 1954.835, 'start': 1848.618, 'title': 'Enhancing a simple game', 'summary': 'Discusses enhancing a simple game by adding user-selected levels, implementing local storage for high scores, improving ux, and the possibility of recreating the game in react or vue.', 'duration': 106.217, 'highlights': ['You could add a user-selectable level using a select list and an event listener to change the level.', 'Implementing local storage for high scores, using localStorage.setItem and localStorage.getItem, and replacing the high score if the current score is higher.', 'Improving the UX by adding visual cues for game over, such as making the game over screen or input border red and resetting it when the game starts again.', 'The recommendation of studywebdevelopment.com for resources on starting a freelance business, including a 130-page guide, invoice templates, client proposals, html and css templates, a portfolio website, and access to a private community.']}], 'duration': 352.952, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Yw-SYSG-028/pics/Yw-SYSG-0281601883.jpg', 'highlights': ['Setting the levels object with easy as 5, medium as 3, and hard as 2, making the game dynamic based on the chosen level.', 'Creating a variable for the current level and dynamically changing the time based on the selected level to ensure flexibility in the game.', 'Adjusting the reset function to dynamically set the time based on the current level, ensuring adaptability to different levels.', 'Updating the UI to reflect the current game level and seconds is crucial for a better user experience.', 'Implementing local storage for high scores, using localStorage.setItem and localStorage.getItem, and replacing the high score if the current score is higher.', 'Improving the UX by adding visual cues for game over, such as making the game over screen or input border red and resetting it when the game starts again.']}], 'highlights': ['The game provides five seconds to type each word and adds a point to the score for each correct word, with the ability to restart the game by typing the word shown.', 'The video is sponsored by the Ultimate Freelancing Bundle by StudyWebDevelopment.com, which includes a 130-page in-depth guide invoicing and client proposal templates, website templates, and an SEO checklist, with a 25% discount using the code BRAD25.', 'The game automatically starts when coming to the page, with the timer and auto focus feature, making it simple to play and restart the game.', 'Initializing game with a load event listener Adding a load event listener to fire off the init function when the window loads.', "Setting DOM element variables Explaining the process of grabbing various DOM elements like input, current word, score display, time display, message, and seconds to reflect the game's status.", 'Covers the creation of a countdown timer in javascript using the set interval function to update the timer every second', "The functionality of displaying a 'game over' message when the timer reaches zero", 'Setting the levels object with easy as 5, medium as 3, and hard as 2, making the game dynamic based on the chosen level.', 'Implementing local storage for high scores, using localStorage.setItem and localStorage.getItem, and replacing the high score if the current score is higher.']}