title
4 JavaScript Projects under 4 Hours | JavaScript Projects For Beginners | JavaScript | Simplilearn

description
🔥 IITM Pravartak Professional Certificate Program In Full Stack Development - MERN (India Only): https://www.simplilearn.com/full-stack-developer-course-and-certification-iitm-pravartak?utm_campaign=SCE-FullstackIITM&utm_medium=DescriptionFF&utm_source=youtube 🔥Post Graduate Program In Full Stack Web Development: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=JSProjectsAug16&utm_medium=DescriptionFirstFold&utm_source=youtube 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=JSProjectsAug16&utm_medium=DescriptionFirstFold&utm_source=youtube 🔥Full Stack Java Developer (India Only) - https://www.simplilearn.com/java-full-stack-developer-certification-training-course?utm_campaign=JSProjectsAug16&utm_medium=DescriptionFirstFold&utm_source=youtube In this JavaScript projects tutorial, we will cover 4 projects along with hands-on demos. ✅Subscribe to our Channel to learn more about the top Technologies: https://bit.ly/2VT4WtH ⏩ Check out our JavaScript training videos playlist: https://www.youtube.com/watch?v=LO5eTH4Pe8E&list=PLEiEAq2VkUULeP75xLYYnY1wqddxPdSXj #JavaScriptProject #JavaScriptProjectsForPractice #JavaScriptProjectsForBeginners #LearnJavaScript #JavaScriptTraining #JavaScriptForBeginner #JavaScriptTutorial #JavaScript #JavaScriptTutorialForBeginners #Simplilearn #SimpliCode Introduction to JavaScript: JavaScript is a scripting language that is used to create and manage dynamic web pages, basically anything that moves on your screen without requiring you to refresh your browser. It can be anything from animated graphics to an automatically generated Facebook timeline. When most people get interested in web development, they start with good old HTML and CSS. From there, they move on to JavaScript, which makes sense, because, these three elements together form the backbone of web development. HTML is the structure of your page like the headers, the body text, any images you want to include. It basically defines the contents of a web page. CSS controls how that page looks (it’s what you’ll use to customize fonts, background colors, etc.). JavaScript is the third element. Once you’ve created your structure (HTML) and your aesthetic vibe (CSS), JavaScript makes your site dynamic (automatically updateable). ➡️ About Post Graduate Program In Full Stack Web Development This program will give you the foundation for building full-stack web apps using the Java programming language. You'll begin with the basics of JavaScript, and then venture into some of the more advanced concepts like Angular, Spring Boot, Hibernate, JSPs, and MVC. Now is the perfect time to get started on your career as a full-stack web developer! ✅ Key Features - Caltech CTME Post Graduate Certificate - Enrolment in Simplilearn’s JobAssist - Receive up to 25 CEUs from Caltech CTME - Simplilearn's JobAssist helps you get noticed by top hiring companies - Attend Masterclasses from Caltech CTME instructors - Live virtual classes led by industry experts, hands-on projects and integrated labs - Online Convocation by Caltech CTME Program Director - 20 lesson-end and 5 phase-end projects - Capstone Project in 4 domains - Caltech CTME Circle Membership - Build your own portfolio on GitHub ✅ Skills Covered - Agile - JAVA - Hibernate and JPA - Spring Core 50 - DevOps - HTML5 and CSS3 - AWS - JavaScript ES6 - Servlets - SOAP and REST - JSP To learn more about JavaScript, check our Full Stack Web Developer program: https://www.simplilearn.com/full-stack-web-developer-mean-stack-certification-training?utm_campaign=JSProjectsAug16&utm_medium=Description&utm_source=youtube 🔥Free JavaScript Course: https://www.simplilearn.com/learn-javascript-basics-free-course-skillup?utm_campaign=JSProjectsAug16&utm_medium=Description&utm_source=youtube 🔥🔥 Interested in Attending Live Classes? Call Us: IN - 18002127688 / US - +18445327688

detail
{'title': '4 JavaScript Projects under 4 Hours | JavaScript Projects For Beginners | JavaScript | Simplilearn', 'heatmap': [{'end': 13447.111, 'start': 13317.359, 'weight': 1}], 'summary': 'Learn to create 4 javascript projects including a calculator app, weather app, tic tac toe game, and snake game application, with detailed emphasis on css styling, javascript functionality, and api integration for real-time data, aimed at beginners. the course also provides insights into table organization, css framework implementation, game logic development, and interactive user interface design.', 'chapters': [{'end': 849.893, 'segs': [{'end': 241.291, 'src': 'embed', 'start': 205.885, 'weight': 3, 'content': [{'end': 213.492, 'text': "Remember, I haven't created those CSS classes, but we're giving some names, but later on we can utilize it while creating those CSS classes.", 'start': 205.885, 'duration': 7.607}, {'end': 215.694, 'text': 'Table data is getting closed.', 'start': 214.473, 'duration': 1.221}, {'end': 217.495, 'text': "Let's get started with another TD.", 'start': 215.994, 'duration': 1.501}, {'end': 221.179, 'text': 'Now inside this TD, we need another text box.', 'start': 218.656, 'duration': 2.523}, {'end': 241.291, 'text': "input type equal to text and here with this input type text, sorry, i would like to better say button, because i'll be having buttons okay,", 'start': 223.692, 'duration': 17.599}], 'summary': 'Discussion about creating css classes and adding input elements.', 'duration': 35.406, 'max_score': 205.885, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD48205885.jpg'}, {'end': 380.138, 'src': 'embed', 'start': 313.326, 'weight': 0, 'content': [{'end': 318.069, 'text': 'now. input equal to button, value equal to one.', 'start': 313.326, 'duration': 4.743}, {'end': 319.349, 'text': 'onClick equal to.', 'start': 318.069, 'duration': 1.28}, {'end': 321.631, 'text': "I'll be calling another function called display.", 'start': 319.349, 'duration': 2.282}, {'end': 327.574, 'text': "Okay And inside this, we're giving the value called one.", 'start': 324.412, 'duration': 3.162}, {'end': 343.307, 'text': 'and class equal to number, class equal to number and here, after that, a td tag is getting closed.', 'start': 331.022, 'duration': 12.285}, {'end': 347.148, 'text': 'okay, now we have to start another td tag here.', 'start': 343.307, 'duration': 3.841}, {'end': 349.809, 'text': 'okay, like that, we have to keep on creating the multiple buttons.', 'start': 347.148, 'duration': 2.661}, {'end': 364.968, 'text': 'so let me copy and paste another table data now here Again value equal to 2, onCreate equal to display, give the value called 2, and class equal to 1,', 'start': 349.809, 'duration': 15.159}, {'end': 365.288, 'text': 'number.', 'start': 364.968, 'duration': 0.32}, {'end': 370.392, 'text': "Like that, I'll keep on creating multiple buttons, but first check how it actually looks like.", 'start': 365.949, 'duration': 4.443}, {'end': 380.138, 'text': "Now I can see the buttons, I can see 1, 2, 3, but yes, I'm going to create few more buttons, one after another.", 'start': 370.492, 'duration': 9.646}], 'summary': 'Creating multiple buttons with values 1, 2, 3.', 'duration': 66.812, 'max_score': 313.326, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD48313326.jpg'}, {'end': 621.127, 'src': 'embed', 'start': 580.852, 'weight': 1, 'content': [{'end': 585.372, 'text': "so here the decimal value we've given it, td, is getting closed.", 'start': 580.852, 'duration': 4.52}, {'end': 599.543, 'text': 'let me have another one zero, zero.', 'start': 585.372, 'duration': 14.171}, {'end': 601.104, 'text': 'so like that, we have to give this now.', 'start': 599.543, 'duration': 1.561}, {'end': 605.464, 'text': "after that we'll be once again taking this.", 'start': 601.104, 'duration': 4.36}, {'end': 619.027, 'text': "this time, rather than giving this zero, we'll be using this call as a button and value equal to, equal to or click equal to solve.", 'start': 605.464, 'duration': 13.563}, {'end': 621.127, 'text': 'okay, and then this song will not be passing anything.', 'start': 619.027, 'duration': 2.1}], 'summary': "The decimal value 'td' is closed, another 'zero' is given, followed by a button with 'value' as 'equal to' or 'click' as 'solve', with no passing of anything.", 'duration': 40.275, 'max_score': 580.852, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD48580852.jpg'}], 'start': 13.154, 'title': 'Javascript projects and creating a calculator interface', 'summary': 'Provides an overview of creating beginner to advanced level javascript projects, including a calculator app, weather app, tic tac toe game, and a snake game application. it also focuses on creating a calculator interface using html, discussing the process of adding buttons, input fields, and applying css and javascript for layout and functionality.', 'chapters': [{'end': 172.039, 'start': 13.154, 'title': 'Javascript projects overview', 'summary': 'Discusses creating beginner to advanced level javascript projects like a calculator app, weather app, tic tac toe game, and a snake game application, providing insights into the development process and the use of javascript, html, and css.', 'duration': 158.885, 'highlights': ['Creating beginner to advanced level JavaScript projects The chapter covers creating projects like a calculator app, weather app, tic tac toe game, and a snake game application.', 'Use of JavaScript, HTML, and CSS in project development Insights into the development process and the use of JavaScript, HTML, and CSS are provided during the project creation.', 'Encouraging subscription to the channel for tech video updates Encourages viewers to subscribe to the channel for tech video updates.', 'Organizing code using classes and tags in HTML and CSS The chapter discusses organizing code using classes and tags in HTML and CSS during project development.', 'Importance of programming in mastering a language Emphasizes that the best way to master a language is by programming in it.']}, {'end': 849.893, 'start': 172.039, 'title': 'Creating calculator interface', 'summary': 'Focuses on creating a calculator interface using html and discusses the process of adding buttons, input fields, and applying css and javascript to achieve the desired layout and functionality.', 'duration': 677.854, 'highlights': ['Creating buttons and input fields for the calculator interface The transcript discusses the creation of buttons and input fields for the calculator interface, including specifying attributes such as type, value, and event handling functions.', 'Planning the layout and organization of buttons and input fields The speaker outlines the organization and layout of buttons and input fields, emphasizing the need for an organized and structured arrangement of elements to achieve the desired visual and functional outcome.', 'Discussing the final layout of the calculator interface The speaker reviews the final layout and behavior of the calculator, emphasizing the placement and behavior of buttons, input fields, and mathematical operators.']}], 'duration': 836.739, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4813154.jpg', 'highlights': ['Creating beginner to advanced level JavaScript projects The chapter covers creating projects like a calculator app, weather app, tic tac toe game, and a snake game application.', 'Creating buttons and input fields for the calculator interface The transcript discusses the creation of buttons and input fields for the calculator interface, including specifying attributes such as type, value, and event handling functions.', 'Use of JavaScript, HTML, and CSS in project development Insights into the development process and the use of JavaScript, HTML, and CSS are provided during the project creation.', 'Planning the layout and organization of buttons and input fields The speaker outlines the organization and layout of buttons and input fields, emphasizing the need for an organized and structured arrangement of elements to achieve the desired visual and functional outcome.', 'Discussing the final layout of the calculator interface The speaker reviews the final layout and behavior of the calculator, emphasizing the placement and behavior of buttons, input fields, and mathematical operators.']}, {'end': 1976.324, 'segs': [{'end': 1222.338, 'src': 'embed', 'start': 1118.186, 'weight': 1, 'content': [{'end': 1130.555, 'text': 'now we will be talking about called input input type equal to button.', 'start': 1118.186, 'duration': 12.369}, {'end': 1136.839, 'text': 'or input type equal to button.', 'start': 1130.555, 'duration': 6.284}, {'end': 1139.541, 'text': 'input type equal to button of time.', 'start': 1136.839, 'duration': 2.702}, {'end': 1142.563, 'text': 'mod over.', 'start': 1139.541, 'duration': 3.022}, {'end': 1158.801, 'text': 'so once again over on the button i say background color change to white, or else I can say white smoke.', 'start': 1142.563, 'duration': 16.238}, {'end': 1163.682, 'text': 'ok, and when the button is active, what I want?', 'start': 1158.801, 'duration': 4.881}, {'end': 1174.084, 'text': 'let me copy, input a blue button and here I say active, and this color should be orange, red.', 'start': 1163.682, 'duration': 10.402}, {'end': 1185.765, 'text': 'like this, you can see now how it is basically looking like.', 'start': 1179.881, 'duration': 5.884}, {'end': 1190.107, 'text': 'okay, active, the color will be like this.', 'start': 1185.765, 'duration': 4.342}, {'end': 1192.929, 'text': "okay, I'll be talking about color operators.", 'start': 1190.107, 'duration': 2.822}, {'end': 1194.45, 'text': 'operators should behave different.', 'start': 1192.929, 'duration': 1.521}, {'end': 1199.573, 'text': "so I'm saying dot operator.", 'start': 1194.45, 'duration': 5.123}, {'end': 1207.258, 'text': 'in this operator we are saying background color, background color orange.', 'start': 1199.573, 'duration': 7.685}, {'end': 1208.319, 'text': 'okay, then padding.', 'start': 1207.258, 'duration': 1.061}, {'end': 1215.453, 'text': 'I want 5 pixels.', 'start': 1210.589, 'duration': 4.864}, {'end': 1222.338, 'text': 'ok, then I want color that should be black.', 'start': 1215.453, 'duration': 6.885}], 'summary': 'Discussed styling input type buttons with specific colors and behaviors.', 'duration': 104.152, 'max_score': 1118.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD481118186.jpg'}, {'end': 1708.465, 'src': 'embed', 'start': 1673.123, 'weight': 0, 'content': [{'end': 1686.052, 'text': "let's bring it below, then align self display block ok, margin ok and border radius and fine.", 'start': 1673.123, 'duration': 12.929}, {'end': 1688.133, 'text': 'so I think we are all good now.', 'start': 1686.052, 'duration': 2.081}, {'end': 1689.775, 'text': "so that's it.", 'start': 1688.133, 'duration': 1.642}, {'end': 1692.557, 'text': 'so we will try and implement the JavaScript part.', 'start': 1689.775, 'duration': 2.782}, {'end': 1693.477, 'text': 'well, everyone.', 'start': 1692.557, 'duration': 0.92}, {'end': 1697.3, 'text': 'so our CSS file is ready, our HTML is ready.', 'start': 1693.477, 'duration': 3.823}, {'end': 1703.101, 'text': "it's time to just go ahead and talk about my final portion.", 'start': 1697.3, 'duration': 5.801}, {'end': 1708.465, 'text': 'that is called GS part, where I want to basically pop up some calculators.', 'start': 1703.101, 'duration': 5.364}], 'summary': 'Preparing for javascript implementation after completing css and html setup for calculator feature.', 'duration': 35.342, 'max_score': 1673.123, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD481673123.jpg'}, {'end': 1876.626, 'src': 'embed', 'start': 1829.605, 'weight': 2, 'content': [{'end': 1833.368, 'text': 'and here we say document dot.', 'start': 1829.605, 'duration': 3.763}, {'end': 1835.149, 'text': 'get it in by id.', 'start': 1833.368, 'duration': 1.781}, {'end': 1847.938, 'text': 'here we say result dot value equal to like that.', 'start': 1835.149, 'duration': 12.789}, {'end': 1853.421, 'text': 'so clear screen, solve and display.', 'start': 1847.938, 'duration': 5.483}, {'end': 1862.12, 'text': "three functions are associated with me and these three functions are the part of this javascript file which i'll be calling it at the end,", 'start': 1853.421, 'duration': 8.699}, {'end': 1864.741, 'text': 'before the model tag get closed.', 'start': 1862.12, 'duration': 2.621}, {'end': 1875.646, 'text': 'so here script equal to app dot, use.', 'start': 1864.741, 'duration': 10.905}, {'end': 1876.626, 'text': "that's it.", 'start': 1875.646, 'duration': 0.98}], 'summary': "Javascript file contains three functions associated with 'document.getelementbyid' and 'result.value'.", 'duration': 47.021, 'max_score': 1829.605, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD481829605.jpg'}, {'end': 1962.435, 'src': 'embed', 'start': 1935.142, 'weight': 3, 'content': [{'end': 1940.566, 'text': 'it is in a continuation to the series of the previous project, what we have developed in javascript,', 'start': 1935.142, 'duration': 5.424}, {'end': 1943.068, 'text': 'and this is once again a very competitive project.', 'start': 1940.566, 'duration': 2.502}, {'end': 1951.794, 'text': "i'm going to present you, which is called weather pro, where i would like to offer you the real-time weather application into your browser,", 'start': 1943.068, 'duration': 8.726}, {'end': 1955.596, 'text': 'taken from the real-time weather applications.', 'start': 1951.794, 'duration': 3.802}, {'end': 1962.435, 'text': "okay, so let's get started with the new development of our application, which is called a weather probe.", 'start': 1955.596, 'duration': 6.839}], 'summary': 'Continuation of previous project in javascript, presenting weather pro for real-time weather application in browser.', 'duration': 27.293, 'max_score': 1935.142, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD481935142.jpg'}], 'start': 849.893, 'title': 'Table organization and css framework implementation', 'summary': 'Discusses organizing a table and enhancing an application by adding 8 to the table and implementing multiplication. it also covers the implementation of a css framework, detailing font families, background colors, screen layout, button styling, and input field styling with specific css properties and values mentioned and applied.', 'chapters': [{'end': 904.61, 'start': 849.893, 'title': 'Table organization and application enhancement', 'summary': 'Focuses on organizing a table and enhancing an application, discussing the addition of 8 to the table and the implementation of multiplication, aiming to improve the overall look and feel.', 'duration': 54.717, 'highlights': ['The addition of 8 to the table for better organization', 'The implementation of multiplication to enhance the application', 'The focus on improving the overall look and feel']}, {'end': 1976.324, 'start': 905.271, 'title': 'Css framework implementation', 'summary': 'Covers the implementation of a css framework, including details on font families, background colors, screen layout, button styling, and input field styling, with specific css properties and values mentioned and applied to achieve the desired look and functionality of the web application.', 'duration': 1071.053, 'highlights': ['Implementation of CSS framework including font families, background colors, and screen layout The speaker discusses the initial steps of working with a CSS framework, focusing on font families and background colors, and details the styling for the screen layout.', 'Styling of buttons and input fields with specific CSS properties and values The speaker provides detailed instructions for styling buttons and input fields, specifying CSS properties such as background color, padding, border, width, height, cursor, and color for different button and input types.', 'Implementation of JavaScript functionality for a calculator application The speaker explains the JavaScript functions for displaying, solving, and clearing the calculator screen, demonstrating the functionality of the calculator application with specific code snippets and sample calculations.', "Introduction to the 'Weather Pro' project in JavaScript The speaker introduces a new project called 'Weather Pro' and highlights its real-time weather application nature, emphasizing its difference from previous static projects and the competitive aspect of the development."]}], 'duration': 1126.431, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD48849893.jpg', 'highlights': ['The implementation of multiplication to enhance the application', 'The addition of 8 to the table for better organization', 'The focus on improving the overall look and feel', 'Implementation of CSS framework including font families, background colors, and screen layout', 'Styling of buttons and input fields with specific CSS properties and values', 'Implementation of JavaScript functionality for a calculator application', "Introduction to the 'Weather Pro' project in JavaScript"]}, {'end': 2884.804, 'segs': [{'end': 2416.195, 'src': 'embed', 'start': 2390.761, 'weight': 5, 'content': [{'end': 2398.685, 'text': "so there are some png files here which i've downloaded from the internet just to bring more beautiful experience towards my application development.", 'start': 2390.761, 'duration': 7.924}, {'end': 2408.37, 'text': 'Well, this is another background image which is called pg.jpg, which I would like to make it as a background of my existing application.', 'start': 2399.585, 'duration': 8.785}, {'end': 2416.195, 'text': "So I'll start with my CSS and see how this CSS can really bring some new features to my code.", 'start': 2408.791, 'duration': 7.404}], 'summary': 'Using downloaded png and jpg files to enhance app visuals and css features.', 'duration': 25.434, 'max_score': 2390.761, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD482390761.jpg'}, {'end': 2884.804, 'src': 'embed', 'start': 2757.314, 'weight': 0, 'content': [{'end': 2763.98, 'text': 'now we need to use it for paragraph inside my app title, what should be alignment for my paragraph.', 'start': 2757.314, 'duration': 6.666}, {'end': 2777.131, 'text': 'so here this app title, app title, space p.', 'start': 2763.98, 'duration': 13.151}, {'end': 2778.112, 'text': 'but it should be the class.', 'start': 2777.131, 'duration': 0.981}, {'end': 2789.768, 'text': 'so we are saying dot and there also we have to use what dot, because both have to be the class type.', 'start': 2778.112, 'duration': 11.656}, {'end': 2795.253, 'text': 'okay, so here you can see.', 'start': 2789.768, 'duration': 5.485}, {'end': 2797.155, 'text': 'now there is a difference.', 'start': 2795.253, 'duration': 1.902}, {'end': 2803, 'text': 'i forgot to add dot and now you can see it looks better comparatively paragraph.', 'start': 2797.155, 'duration': 5.845}, {'end': 2812.665, 'text': "so once again, in my paragraph i'll be having text align center padding.", 'start': 2803, 'duration': 9.665}, {'end': 2816.709, 'text': 'i want 15 pixels.', 'start': 2812.665, 'duration': 4.044}, {'end': 2819.732, 'text': 'then i need margin.', 'start': 2816.709, 'duration': 3.023}, {'end': 2826.858, 'text': 'margin would be 0 and auto followed by font size.', 'start': 2819.732, 'duration': 7.126}, {'end': 2828.159, 'text': 'font size.', 'start': 2826.858, 'duration': 1.301}, {'end': 2830.962, 'text': "this i'm saying is called 1.2.", 'start': 2828.159, 'duration': 2.803}, {'end': 2834.225, 'text': 'here this position, then color.', 'start': 2830.962, 'duration': 3.263}, {'end': 2839.891, 'text': 'here giving hash value.', 'start': 2836.069, 'duration': 3.822}, {'end': 2843.033, 'text': 'call 333.', 'start': 2839.891, 'duration': 3.142}, {'end': 2851.718, 'text': 'okay now here, okay, so some changes in a paragraph.', 'start': 2843.033, 'duration': 8.685}, {'end': 2858.44, 'text': 'well, going forward for the search, because if you remember, we have an index.html file.', 'start': 2851.718, 'duration': 6.722}, {'end': 2861.642, 'text': 'we have a call id equal to what search.', 'start': 2858.44, 'duration': 3.202}, {'end': 2872.389, 'text': 'so here in my app.css i have to use hash search.', 'start': 2861.642, 'duration': 10.747}, {'end': 2874.211, 'text': 'okay, so this search conditions.', 'start': 2872.389, 'duration': 1.822}, {'end': 2879.134, 'text': 'i want to use it now inside my search.', 'start': 2874.211, 'duration': 4.923}, {'end': 2880.194, 'text': 'i need few things.', 'start': 2879.134, 'duration': 1.06}, {'end': 2881.055, 'text': 'one is called display.', 'start': 2880.194, 'duration': 0.861}, {'end': 2884.804, 'text': 'I need block.', 'start': 2883.163, 'duration': 1.641}], 'summary': 'Styling the app paragraph with text align, padding, margin, font size, and color in app.css.', 'duration': 127.49, 'max_score': 2757.314, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD482757314.jpg'}], 'start': 1976.324, 'title': 'Developing real-time weather application', 'summary': 'Covers creating a real-time weather application using javascript, html, and css, with an emphasis on asynchronous rest api calls and dynamic data representation. it also discusses creating a city details display and integrating custom fonts, background images, and styles using css, resulting in a visually enhanced application design.', 'chapters': [{'end': 2170.219, 'start': 1976.324, 'title': 'Real-time weather application using javascript', 'summary': 'Introduces a project to create a real-time weather application using javascript, html, and css, emphasizing the use of asynchronous rest api calls and dynamic data representation.', 'duration': 193.895, 'highlights': ['The project involves creating a real-time weather application by making asynchronous REST API calls and representing the data dynamically using JavaScript, HTML, and CSS. The project focuses on making one asynchronous REST API call for real-time weather data and dynamically representing the records using JavaScript, HTML, and CSS.', "Emphasizes the importance of using JavaScript's asynchronous nature to communicate with the backend, load data, and represent records beautifully. JavaScript's pure asynchronous nature is highlighted in communicating with the backend, loading data, and representing records in a visually appealing manner.", 'The use of HTML for the presentation part and CSS for formatting, with the need for a total of three files: index.html, app.css, and app.js. HTML is used for the presentation part, CSS for formatting, and a total of three files are needed: index.html, app.css, and app.js.']}, {'end': 2371.028, 'start': 2170.219, 'title': 'Creating city details display', 'summary': 'Discusses creating a city details display by inputting properties like id and type, and displaying location and temperature details for the specified city.', 'duration': 200.809, 'highlights': ['Input properties like ID equal to search and type equal to text for the city details input, with autocomplete off to prevent previous value visibility. The speaker discusses input properties for the city details input, including ID and type, with a focus on disabling autocomplete to enhance user privacy.', 'Displaying location and temperature details for the specified city using div tags and paragraph and span tags. The chapter covers the use of div tags, paragraph tags, and span tags to display location and temperature details for the specified city.', 'Defining the temperature description using div class and paragraph tags for displaying temperature details. The speaker explains the process of defining the temperature description using div class and paragraph tags for displaying temperature details.']}, {'end': 2884.804, 'start': 2371.028, 'title': 'Css features integration', 'summary': 'Covers integrating custom fonts, background images, and styles using css, including setting font face, background image properties, and element styling, resulting in a visually enhanced application design.', 'duration': 513.776, 'highlights': ["Custom font integration with font face declaration and font family usage, including the use of 'mod_set.ttf' file and 'Monster' font family, is demonstrated.", 'Incorporation of background image properties such as URL, background color, height, position, repeat, and size in the body element leads to an improved visual presentation of the application.', 'Styling of the container element with properties like width, background color, align self, display, margin, border-radius, padding-bottom, and box-shadow significantly enhances the design and layout of the application.']}], 'duration': 908.48, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD481976324.jpg', 'highlights': ['The project involves creating a real-time weather application using JavaScript, HTML, and CSS.', "Emphasizes the importance of using JavaScript's asynchronous nature to communicate with the backend and represent records beautifully.", 'HTML is used for the presentation part, CSS for formatting, with three required files: index.html, app.css, and app.js.', 'Input properties for the city details input include ID, type, and disabling autocomplete for user privacy.', 'Uses div, paragraph, and span tags to display location and temperature details for the specified city.', "Demonstrates custom font integration with font face declaration and 'Monster' font family usage.", 'Incorporates background image properties in the body element for an improved visual presentation of the application.', 'Styling of the container element significantly enhances the design and layout of the application.']}, {'end': 4344.234, 'segs': [{'end': 2952.932, 'src': 'embed', 'start': 2884.804, 'weight': 1, 'content': [{'end': 2908.733, 'text': "after that I need margin-left, auto, margin-right, conto width I'm looking forward for 5 pixels, height that I'm looking forward for 20 pixels.", 'start': 2884.804, 'duration': 23.929}, {'end': 2913.276, 'text': 'then border-radius.', 'start': 2911.775, 'duration': 1.501}, {'end': 2920.119, 'text': "I'm looking for 5 pixels.", 'start': 2913.276, 'duration': 6.843}, {'end': 2926.822, 'text': "then outline, let's call none.", 'start': 2920.119, 'duration': 6.703}, {'end': 2934.126, 'text': 'let me say border okay in this border, what we can say?', 'start': 2926.822, 'duration': 7.304}, {'end': 2943.045, 'text': "3 pixels space solid, okay, and once again, That's what.", 'start': 2934.126, 'duration': 8.919}, {'end': 2944.626, 'text': "Let's check.", 'start': 2944.126, 'duration': 0.5}, {'end': 2952.932, 'text': 'So, this is actually the text box.', 'start': 2951.251, 'duration': 1.681}], 'summary': 'Styling requirements include margin, border radius, and border width of 3 pixels for a text box.', 'duration': 68.128, 'max_score': 2884.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD482884804.jpg'}, {'end': 3580.579, 'src': 'embed', 'start': 3538.633, 'weight': 3, 'content': [{'end': 3552.319, 'text': 'after this color, just a text align center, font size 1.2.', 'start': 3538.633, 'duration': 13.686}, {'end': 3554.36, 'text': 'this is for temperature description.', 'start': 3552.319, 'duration': 2.041}, {'end': 3560.991, 'text': 'okay, last, which is available for your location.', 'start': 3556.829, 'duration': 4.162}, {'end': 3568.914, 'text': 'so let me give the location now, dot location, space p.', 'start': 3560.991, 'duration': 7.923}, {'end': 3580.579, 'text': 'here we can say margin zero, then padding zero, then color same color.', 'start': 3568.914, 'duration': 11.665}], 'summary': 'Temperature description and location formatting for a specific location.', 'duration': 41.946, 'max_score': 3538.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD483538633.jpg'}, {'end': 3699.288, 'src': 'embed', 'start': 3665.174, 'weight': 2, 'content': [{'end': 3669.197, 'text': 'Okay, so we have seen some of the CSS classes we have introduced.', 'start': 3665.174, 'duration': 4.023}, {'end': 3679.185, 'text': 'In my HTML, we have used this autocomplete equal to off, then we have used div class equal to temperature value.', 'start': 3670.038, 'duration': 9.147}, {'end': 3687.151, 'text': 'Okay, if you just check carefully, we have used this temperature and div we have used temperature hyphen value.', 'start': 3680.045, 'duration': 7.106}, {'end': 3691.114, 'text': 'But before that, we would like to use some other properties too.', 'start': 3687.811, 'duration': 3.303}, {'end': 3699.288, 'text': 'Okay After this auto complete equal to off, we want to use another div class.', 'start': 3692.324, 'duration': 6.964}], 'summary': 'Introduction of css classes in html, including autocomplete and div class usage.', 'duration': 34.114, 'max_score': 3665.174, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD483665174.jpg'}, {'end': 4302.605, 'src': 'embed', 'start': 4260.197, 'weight': 0, 'content': [{'end': 4271.325, 'text': 'i yet to create this and pass it here as a what city and we say console, dot, log, city, whatever.', 'start': 4260.197, 'duration': 11.128}, {'end': 4274.899, 'text': 'we are basically printing it Okay.', 'start': 4271.325, 'duration': 3.574}, {'end': 4276.759, 'text': 'So that is the first thing.', 'start': 4275.739, 'duration': 1.02}, {'end': 4279, 'text': 'Later on, we need to get the data.', 'start': 4277.42, 'duration': 1.58}, {'end': 4292.903, 'text': 'So to get the data, we are just using this variable name called const weather equal to const weather equal to curly braces.', 'start': 4279.26, 'duration': 13.643}, {'end': 4302.605, 'text': 'After that, we are saying weather dot temperature.', 'start': 4293.923, 'duration': 8.682}], 'summary': 'Creating and printing city data, accessing weather temperature.', 'duration': 42.408, 'max_score': 4260.197, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD484260197.jpg'}], 'start': 2884.804, 'title': 'Css styling and html elements', 'summary': 'Covers css styling for text boxes, notifications, weather containers, and temperature display, with specific properties and values provided for each element to achieve enhanced visual presentation and functionality in the web application. additionally, it includes the usage of html div and img elements, along with javascript event listeners and data initialization for interactive functionality.', 'chapters': [{'end': 2995.926, 'start': 2884.804, 'title': 'Css styling for text box', 'summary': 'Covers the styling of a text box using css, setting the width to 40% and padding to 5 pixels, achieving a visually improved text box.', 'duration': 111.122, 'highlights': ['The text box width should be set to 40%, making it visually smaller (40%).', 'Padding should be set to 5 pixels for a uniform spacing around the text box (5 pixels).', 'The chapter demonstrates setting the margin-left and margin-right to auto, achieving a centered alignment of the text box.']}, {'end': 3329.636, 'start': 2997.107, 'title': 'Css styling for notifications and weather', 'summary': 'Covers the css styling for notifications and weather container, including properties like background color, font size, width, height, and display, with specific values and dimensions provided for each property.', 'duration': 332.529, 'highlights': ['The CSS styling includes properties like background color, font size, width, height, and display, with specific values and dimensions provided for each property.', 'For notifications, the background color is set to white, the font color is set to red, and the font size is 1.2 am, with a margin of 0 and text aligned to the center.', 'The weather container is styled with a width and height of 100%, a background color of white, a margin top of 20 pixels, and a weather icon with a width of 100% and a height of 128 pixels.', 'The location icon is given a width of 100%, a height of 40 pixels, and specific padding, border, border color, border radius, and cursor values for styling.']}, {'end': 3664.045, 'start': 3330.777, 'title': 'Css properties for temperature display', 'summary': 'Describes the css properties for temperature display, including temperature value, color, font size, and alignment, with specific values provided for each property to enhance the display of temperature values and descriptions.', 'duration': 333.268, 'highlights': ['The chapter details the CSS properties for temperature display, specifying the width as 100%, height as 60 pixels, color as hash 293, font size as 4em, and text alignment as Center for temperature value, aiming to enhance the visual presentation of temperature values.', 'The transcript provides specific CSS properties for temperature description, including padding of 8 pixels, margin of 0, color, text alignment as Center, and font size of 1.2, to improve the appearance of temperature descriptions.', 'The use of relative and absolute positioning, with top positioned at 600 pixels and right positioned at 120 pixels, is highlighted to demonstrate the positioning of the temperature display on the webpage.', 'The chapter emphasizes the application of CSS properties to enhance the visual representation of temperature values and descriptions, aiming to improve the overall display of temperature information on the webpage.']}, {'end': 4344.234, 'start': 3665.174, 'title': 'Html and javascript elements', 'summary': 'Covers the usage of various html div and img elements, along with the selection of individual properties in javascript and the application of event listeners, including the logic for handling input and avoiding page refresh, followed by the initialization of coordinates and temperature data.', 'duration': 679.06, 'highlights': ['The chapter covers the usage of various HTML div and img elements. The speaker discusses the usage of div and img elements, such as div classes for temperature, location, notification, and weather conditions, along with img sources for icons, providing a detailed breakdown of the HTML structure.', 'The selection of individual properties in JavaScript and the application of event listeners, including the logic for handling input and avoiding page refresh. The transcript details the selection of individual properties using document.querySelector and the application of event listeners using addEventListener, with a focus on avoiding page refresh, and handling the input logic using the keyup event and event.keyCode for the Enter key.', 'Initialization of coordinates and temperature data. The speaker initializes the coordinates for latitude and longitude as 0.0 and discusses the specification of temperature data in Celsius and Kelvin, providing insights into the data initialization process.']}], 'duration': 1459.43, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD482884804.jpg', 'highlights': ['The chapter emphasizes the application of CSS properties to enhance the visual representation of temperature values and descriptions, aiming to improve the overall display of temperature information on the webpage.', 'The CSS styling includes properties like background color, font size, width, height, and display, with specific values and dimensions provided for each property.', 'The chapter covers the usage of various HTML div and img elements. The speaker discusses the usage of div and img elements, such as div classes for temperature, location, notification, and weather conditions, along with img sources for icons, providing a detailed breakdown of the HTML structure.', 'The selection of individual properties in JavaScript and the application of event listeners, including the logic for handling input and avoiding page refresh. The transcript details the selection of individual properties using document.querySelector and the application of event listeners using addEventListener, with a focus on avoiding page refresh, and handling the input logic using the keyup event and event.keyCode for the Enter key.']}, {'end': 5543.105, 'segs': [{'end': 5291.721, 'src': 'embed', 'start': 5254.801, 'weight': 0, 'content': [{'end': 5269.847, 'text': 'we are using negative, okay, and app-id equal to what key.', 'start': 5254.801, 'duration': 15.046}, {'end': 5273.069, 'text': 'so this is the variable which we have it now.', 'start': 5269.847, 'duration': 3.222}, {'end': 5279.474, 'text': 'okay. now, similar thing which we have used it on the top, okay, called fetch api.', 'start': 5273.069, 'duration': 6.405}, {'end': 5287.199, 'text': "so i just copy this same fetch api again, because i really don't want to waste time on keep on typing the code when we know it very well.", 'start': 5279.474, 'duration': 7.725}, {'end': 5288.44, 'text': 'it can be similarly done.', 'start': 5287.199, 'duration': 1.241}, {'end': 5291.721, 'text': 'i just copy and pasted it here.', 'start': 5288.44, 'duration': 3.281}], 'summary': 'Implementing fetch api for efficiency in code repetition.', 'duration': 36.92, 'max_score': 5254.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD485254801.jpg'}, {'end': 5377.775, 'src': 'embed', 'start': 5323.53, 'weight': 2, 'content': [{'end': 5332.936, 'text': "I'll be using img src equal to icons.", 'start': 5323.53, 'duration': 9.406}, {'end': 5340.381, 'text': "slash dollar and we'll be passing what together.", 'start': 5332.936, 'duration': 7.445}, {'end': 5351.114, 'text': 'okay dot icon id okay dot png okay.', 'start': 5340.381, 'duration': 10.733}, {'end': 5362.743, 'text': 'so that we are basically putting it here dot png and after that we are just closing that.', 'start': 5351.114, 'duration': 11.629}, {'end': 5366.066, 'text': 'okay, and this icon we also need to close here.', 'start': 5362.743, 'duration': 3.323}, {'end': 5371.05, 'text': 'so rather than closing this, I will be closing that and this.', 'start': 5366.066, 'duration': 4.984}, {'end': 5373.912, 'text': 'I will be closing it here.', 'start': 5371.05, 'duration': 2.862}, {'end': 5377.775, 'text': 'now we will be using top element.', 'start': 5373.912, 'duration': 3.863}], 'summary': 'Using img src to set icon id as .png, closing tags, and using top element.', 'duration': 54.245, 'max_score': 5323.53, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD485323530.jpg'}], 'start': 4344.234, 'title': 'Interacting with weather apis', 'summary': "Covers obtaining a unique api key from openweathermap.org, using the geolocation tool to retrieve user's position, and utilizing the fetch api for restful api calls, emphasizing the importance of unique api keys and addressing function definitions and error handling.", 'chapters': [{'end': 4447.953, 'start': 4344.234, 'title': 'Interacting with openweathermap api', 'summary': 'Covers the process of obtaining a unique api key from openweathermap.org, a popular backend api, which is essential for interacting with the updated weather applications, and emphasizes the importance of using a unique api key for third-party application interaction.', 'duration': 103.719, 'highlights': ['The chapter emphasizes the importance of obtaining a unique API key from openweathermap.org, which is required for interacting with the updated weather applications, and highlights the process of registration and obtaining the API key.', 'It is mentioned that openweathermap.org is a very popular and trusted app, used by many companies for accessing weather data.', 'The speaker explains the necessity of using a unique API key for third-party application interaction, as visitors cannot access the API key without registering themselves.']}, {'end': 4929.435, 'start': 4447.953, 'title': 'Geolocation tool and weather api', 'summary': "Explains using the geolocation tool in the browser's navigator object to get the user's position and develop functions to handle errors and retrieve weather information from an api, while also addressing issues related to function definitions and api calls.", 'duration': 481.482, 'highlights': ["Using navigator.geolocation.getCurrentPosition to get user's position and call showError in case of errors. The script utilizes navigator.geolocation.getCurrentPosition to obtain the user's position and handle errors by invoking the showError function.", "Developing the function to handle user's position and call the getWeather function with latitude and longitude parameters. A function for handling the user's position is developed, followed by a call to the getWeather function with latitude and longitude parameters.", 'Creating the getSearchWeather function to make API calls for weather data based on a city name. The creation of the getSearchWeather function is explained, responsible for making API calls to fetch weather data based on a specified city.']}, {'end': 5543.105, 'start': 4930.501, 'title': 'Using fetch api for restful api call', 'summary': 'Covers the usage of the fetch api to make restful api calls, including handling successful responses and displaying weather data using latitude and longitude, with an example of successful execution and output.', 'duration': 612.604, 'highlights': ['The chapter covers the usage of the Fetch API to make RESTful API calls The speaker demonstrates the process of using the Fetch API to make RESTful API calls, highlighting the functionality and purpose of the Fetch API.', 'Handling successful responses and displaying weather data using latitude and longitude The transcript explains the process of handling successful responses and displaying weather data using latitude and longitude, demonstrating the practical application of the Fetch API in retrieving and displaying weather information.', 'Example of successful execution and output The speaker provides examples of successful execution and output, showcasing the effectiveness of using the Fetch API for making RESTful API calls and displaying weather data.']}], 'duration': 1198.871, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD484344234.jpg', 'highlights': ['The chapter emphasizes the importance of obtaining a unique API key from openweathermap.org, required for interacting with weather applications.', "Using navigator.geolocation.getCurrentPosition to get user's position and call showError in case of errors.", 'The chapter covers the usage of the Fetch API to make RESTful API calls.']}, {'end': 6134.146, 'segs': [{'end': 5598.367, 'src': 'embed', 'start': 5566.973, 'weight': 4, 'content': [{'end': 5571.874, 'text': 'we have already played a lot in our childhood days and still my favorite game.', 'start': 5566.973, 'duration': 4.901}, {'end': 5579.456, 'text': 'so i have decided to basically offer you this tic-tac-toe game, developed in javascript, html plus css,', 'start': 5571.874, 'duration': 7.582}, {'end': 5583.417, 'text': 'which can create something really very great effects for the end users.', 'start': 5579.456, 'duration': 3.961}, {'end': 5586.478, 'text': "so let's go and start developing our next game.", 'start': 5583.417, 'duration': 3.061}, {'end': 5587.478, 'text': "that's called tic-tac-toe.", 'start': 5586.478, 'duration': 1}, {'end': 5598.367, 'text': "So in this tic-tac-toe I will start working with creating a folder called tic-tac and inside this I'm going to create a new file named called index.html.", 'start': 5588.258, 'duration': 10.109}], 'summary': 'Developing a tic-tac-toe game using javascript, html, and css for end users.', 'duration': 31.394, 'max_score': 5566.973, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD485566973.jpg'}, {'end': 5876.31, 'src': 'embed', 'start': 5845.848, 'weight': 0, 'content': [{'end': 5855.47, 'text': 'So here Yeah, we have this option called enter name, enter name after the stick tag too.', 'start': 5845.848, 'duration': 9.622}, {'end': 5863.297, 'text': 'So yeah, so here are the details we have taken.', 'start': 5856.691, 'duration': 6.606}, {'end': 5865.74, 'text': 'Input of a blue text and input of a blue text.', 'start': 5863.317, 'duration': 2.423}, {'end': 5871.205, 'text': 'Okay, so two values we are taking now and accordingly we go ahead now finally.', 'start': 5867.121, 'duration': 4.084}, {'end': 5876.31, 'text': 'After the form tag, we would like to start with working with the tape tag again.', 'start': 5872.206, 'duration': 4.104}], 'summary': 'The process involves entering two values and working with the tags.', 'duration': 30.462, 'max_score': 5845.848, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD485845848.jpg'}], 'start': 5543.546, 'title': 'Javascript game development', 'summary': 'Highlights free learning through skillup by simplylearn and the development of a javascript-based tic-tac-toe game, aiming to create a great user experience. it also covers the creation of a folder and index.html file for the game, including the addition of form elements and div tags, with a focus on creating classes, labels, inputs, and buttons for player interaction.', 'chapters': [{'end': 5587.478, 'start': 5543.546, 'title': 'Free learning and javascript game development', 'summary': 'Highlights the availability of free learning through skillup by simplylearn and the development of a javascript-based tic-tac-toe game, which aims to create a great user experience.', 'duration': 43.932, 'highlights': ['SkillUp by SimplyLearn offers free learning to help individuals kickstart their learning journey.', 'The plan to develop a JavaScript-based tic-tac-toe game is mentioned, indicating the focus on game development.', 'The game is expected to create great effects for the end users, emphasizing the aim to provide an excellent user experience.', "The chapter promotes SkillUp by SimplyLearn for free learning and announces the development of a JavaScript-based tic-tac-toe game, highlighting the potential impact on the end users' experience."]}, {'end': 6134.146, 'start': 5588.258, 'title': 'Creating tic-tac-toe game interface', 'summary': 'Covers the creation of a folder and index.html file for a tic-tac-toe game, including the addition of form elements and div tags, with a focus on creating classes, labels, inputs, and buttons for player interaction.', 'duration': 545.888, 'highlights': ['Creation of folder and index.html file for tic-tac-toe game The chapter starts with creating a folder named tic-tac and an index.html file for the tic-tac-toe game interface.', 'Addition of form elements and div tags Form elements like labels, inputs, and buttons are added within div tags to facilitate player interaction.', 'Focus on creating classes, labels, inputs, and buttons for player interaction The chapter emphasizes the creation of classes, labels, inputs, and buttons to enable player interaction and form submission in the game interface.']}], 'duration': 590.6, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD485543546.jpg', 'highlights': ['SkillUp by SimplyLearn offers free learning to help individuals kickstart their learning journey.', 'The plan to develop a JavaScript-based tic-tac-toe game is mentioned, indicating the focus on game development.', 'The game is expected to create great effects for the end users, emphasizing the aim to provide an excellent user experience.', 'Creation of folder and index.html file for tic-tac-toe game The chapter starts with creating a folder named tic-tac and an index.html file for the tic-tac-toe game interface.', 'Addition of form elements and div tags Form elements like labels, inputs, and buttons are added within div tags to facilitate player interaction.', 'Focus on creating classes, labels, inputs, and buttons for player interaction The chapter emphasizes the creation of classes, labels, inputs, and buttons to enable player interaction and form submission in the game interface.']}, {'end': 7170.342, 'segs': [{'end': 6165.689, 'src': 'embed', 'start': 6134.146, 'weight': 1, 'content': [{'end': 6137.787, 'text': 'okay, so we want to start with the javascript.', 'start': 6134.146, 'duration': 3.641}, {'end': 6140.788, 'text': "so let's get included a javascript with my code.", 'start': 6137.787, 'duration': 3.001}, {'end': 6157.203, 'text': "so here I can say here script tag, script equal to now, the file I haven't created.", 'start': 6140.788, 'duration': 16.415}, {'end': 6160.165, 'text': 'so let it be as it is.', 'start': 6157.203, 'duration': 2.962}, {'end': 6160.946, 'text': "that's it.", 'start': 6160.165, 'duration': 0.781}, {'end': 6165.689, 'text': 'so this is my script tag and let me try to include my style sheet also.', 'start': 6160.946, 'duration': 4.743}], 'summary': 'Javascript and stylesheet included in code.', 'duration': 31.543, 'max_score': 6134.146, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD486134146.jpg'}, {'end': 6286.522, 'src': 'embed', 'start': 6239.008, 'weight': 2, 'content': [{'end': 6241.95, 'text': 'second is the name of the function.', 'start': 6239.008, 'duration': 2.942}, {'end': 6249.937, 'text': "so the name of the function perhaps does not exist, but I can give the name called app, which I'm going to create it shortly now here.", 'start': 6241.95, 'duration': 7.987}, {'end': 6252.499, 'text': 'first of all, let me try to create a game board.', 'start': 6249.937, 'duration': 2.562}, {'end': 6259.507, 'text': "I'm saying let game board equal to now.", 'start': 6252.499, 'duration': 7.008}, {'end': 6286.522, 'text': 'let me have some of the values, because it is 8 digit, so we just make it like that and one more for making it 9.', 'start': 6259.507, 'duration': 27.015}], 'summary': "Creating a function named 'app' and initializing a game board with 9 values.", 'duration': 47.514, 'max_score': 6239.008, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD486239008.jpg'}, {'end': 6376.572, 'src': 'embed', 'start': 6322.935, 'weight': 3, 'content': [{'end': 6327.639, 'text': 'so create player.', 'start': 6322.935, 'duration': 4.704}, {'end': 6328.78, 'text': 'how do you gonna create a player?', 'start': 6327.639, 'duration': 1.141}, {'end': 6339.547, 'text': 'we say const player equal to what we gonna pass name, okay, equal to now.', 'start': 6328.78, 'duration': 10.767}, {'end': 6343.95, 'text': 'inside this we can say name equal to name.', 'start': 6339.547, 'duration': 4.403}, {'end': 6350.407, 'text': 'next we say return name.', 'start': 6343.95, 'duration': 6.457}, {'end': 6352.528, 'text': "that's it okay.", 'start': 6350.407, 'duration': 2.121}, {'end': 6375.052, 'text': "after that i'm defining lit player x equal to player with the empty value and again player y equal to player as an empty value.", 'start': 6352.528, 'duration': 22.524}, {'end': 6376.572, 'text': "now let's try to initialize the app.", 'start': 6375.052, 'duration': 1.52}], 'summary': 'Creating a player object with name and initializing the app.', 'duration': 53.637, 'max_score': 6322.935, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD486322935.jpg'}, {'end': 7085.553, 'src': 'embed', 'start': 7038.515, 'weight': 0, 'content': [{'end': 7054.99, 'text': 'here we are passing cell and after that we are using cell dot style, dot height equal to now.', 'start': 7038.515, 'duration': 16.475}, {'end': 7066.875, 'text': 'he will be using this back tick and use this dollar sign and say cell height and that too in a pixel.', 'start': 7054.99, 'duration': 11.885}, {'end': 7070.276, 'text': 'so this would be taking the dynamic values.', 'start': 7066.875, 'duration': 3.401}, {'end': 7071.376, 'text': "okay, that's it.", 'start': 7070.276, 'duration': 1.1}, {'end': 7072.737, 'text': "that's it over.", 'start': 7071.376, 'duration': 1.361}, {'end': 7078.759, 'text': 'now we have to just launch our build board now.', 'start': 7072.737, 'duration': 6.022}, {'end': 7082.951, 'text': 'build board, build board.', 'start': 7078.759, 'duration': 4.192}, {'end': 7085.553, 'text': 'So how are we going to build our board now?', 'start': 7083.512, 'duration': 2.041}], 'summary': 'Passing cell height in pixels for dynamic values. launching build board.', 'duration': 47.038, 'max_score': 7038.515, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD487038515.jpg'}], 'start': 6134.146, 'title': 'Javascript, css, game app, and tic-tac-toe functions', 'summary': 'Covers setting up javascript and css for a web page, initializing a game app, creating a game board, tracking player turns, adding players, and implementing functions for tic-tac-toe with detailed steps and sample code.', 'chapters': [{'end': 6239.008, 'start': 6134.146, 'title': 'Setting up javascript and css', 'summary': 'Discusses setting up javascript and css for a web page, including adding script and link tags in html and creating a new javascript file, emphasizing the need to attach a window load event listener.', 'duration': 104.862, 'highlights': ['The chapter emphasizes the need to attach a window load event listener to execute logic when the window loads.', 'The speaker discusses adding script and link tags in HTML to include JavaScript and CSS files, even if the files have not been created yet.']}, {'end': 6570.326, 'start': 6239.008, 'title': 'Creating a game app', 'summary': 'Explains the process of initializing a game app, creating a game board, tracking player turns, and adding players with sample code and detailed steps.', 'duration': 331.318, 'highlights': ['The chapter explains the process of initializing a game app, creating a game board, tracking player turns, and adding players with sample code and detailed steps.', "The function 'app' is initialized to create a game app, with steps including defining input fields, adding players, and incorporating a replay button.", 'The chapter details the creation of a game board and the tracking of player turns, alluding to the use of a variable to measure player turns and the initialization of player X and player Y.']}, {'end': 7170.342, 'start': 6570.326, 'title': 'Implementing tic-tac-toe functions', 'summary': 'Focuses on implementing functions for adding players, selecting players, returning current player, resizing squares on browser resize, and building the game board for tic-tac-toe.', 'duration': 600.016, 'highlights': ["Implementing function to resize squares based on browser resize The function 'resize' is added to dynamically adjust the size of the tic-tac-toe squares on browser resize.", "Creating function to add players and validate their names The 'add player' function is implemented to prompt the user to enter their names for both player1 and player2, and display an alert if the names are not entered.", "Defining function to return the current player The 'return current player' function is defined to determine the current player based on a variable's value and return it.", "Building the game board for Tic-Tac-Toe The 'build board' function is created to set up the game board and call other necessary functions such as 'on resize' and 'add self click listener'."]}], 'duration': 1036.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD486134146.jpg', 'highlights': ['The chapter details the creation of a game board and the tracking of player turns, alluding to the use of a variable to measure player turns and the initialization of player X and player Y.', "The function 'app' is initialized to create a game app, with steps including defining input fields, adding players, and incorporating a replay button.", 'The chapter emphasizes the need to attach a window load event listener to execute logic when the window loads.', "Implementing function to resize squares based on browser resize The function 'resize' is added to dynamically adjust the size of the tic-tac-toe squares on browser resize."]}, {'end': 8802.632, 'segs': [{'end': 7428.66, 'src': 'embed', 'start': 7384.189, 'weight': 4, 'content': [{'end': 7392.735, 'text': 'it is taking this value to the current cell dot, innerHTML console dot log and inside my console dot log we can set this.', 'start': 7384.189, 'duration': 8.546}, {'end': 7399.119, 'text': 'cell is already taken.', 'start': 7392.735, 'duration': 6.384}, {'end': 7405.984, 'text': 'so values are already taken for this and now we will be returning those values.', 'start': 7399.119, 'duration': 6.865}, {'end': 7424.459, 'text': 'after that we will be using else condition, and here we use once again if Current player is x.', 'start': 7405.984, 'duration': 18.475}, {'end': 7428.66, 'text': "Then we'll be using this option called sell.", 'start': 7424.459, 'duration': 4.201}], 'summary': 'The script logs and returns cell values, with conditional statements for player moves.', 'duration': 44.471, 'max_score': 7384.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD487384189.jpg'}, {'end': 7530.952, 'src': 'embed', 'start': 7486.359, 'weight': 3, 'content': [{'end': 7498.747, 'text': 'Okay And say game board current cell equal to like this.', 'start': 7486.359, 'duration': 12.388}, {'end': 7503.95, 'text': 'Okay So here we are adding the values like that.', 'start': 7501.268, 'duration': 2.682}, {'end': 7507.023, 'text': 'so it is closed.', 'start': 7505.663, 'duration': 1.36}, {'end': 7512.705, 'text': 'after that we can just use the function name for is winner to check whether the user is winner or not.', 'start': 7507.023, 'duration': 5.682}, {'end': 7520.046, 'text': 'so we are saying is winner okay?', 'start': 7512.705, 'duration': 7.341}, {'end': 7526.568, 'text': 'and after that we are saying turn plus plus.', 'start': 7520.046, 'duration': 6.522}, {'end': 7530.952, 'text': 'after that we are saying change.', 'start': 7526.568, 'duration': 4.384}], 'summary': 'Adding values to game board, checking winner, changing turn.', 'duration': 44.593, 'max_score': 7486.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD487486359.jpg'}, {'end': 7746.972, 'src': 'embed', 'start': 7696.933, 'weight': 0, 'content': [{'end': 7699.434, 'text': 'so these conditions we are adding it now.', 'start': 7696.933, 'duration': 2.501}, {'end': 7718.675, 'text': 'after this array we can say winning sequences, dot for each and give the name called winning combos, winning combos,', 'start': 7699.434, 'duration': 19.241}, {'end': 7728.159, 'text': 'and inside this winning combos we are giving, let cell1, equal to winning combos, position 0.', 'start': 7718.675, 'duration': 9.484}, {'end': 7746.972, 'text': 'then that copy and paste three times cell two, cell three, and here we get the value called what one, two,', 'start': 7728.159, 'duration': 18.813}], 'summary': 'Adding conditions and creating winning combos with cell values for a game.', 'duration': 50.039, 'max_score': 7696.933, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD487696933.jpg'}, {'end': 8361.509, 'src': 'embed', 'start': 8310.562, 'weight': 1, 'content': [{'end': 8322.549, 'text': 'and here we are saying dollar with this player x.name.', 'start': 8310.562, 'duration': 11.987}, {'end': 8326.472, 'text': 'and then close the span tag.', 'start': 8322.549, 'duration': 3.923}, {'end': 8334.878, 'text': 'and we say you are up like this.', 'start': 8326.472, 'duration': 8.406}, {'end': 8344.025, 'text': 'and after that we say div class equal to, which is going to create a class which later on we can apply the css style.', 'start': 8334.878, 'duration': 9.147}, {'end': 8350.983, 'text': 'on the top of that, you hyphen are hyphen winner.', 'start': 8344.025, 'duration': 6.958}, {'end': 8355.706, 'text': 'and here we say closing the div tag.', 'start': 8350.983, 'duration': 4.723}, {'end': 8357.507, 'text': 'so div tag is closed.', 'start': 8355.706, 'duration': 1.801}, {'end': 8358.467, 'text': "that's it.", 'start': 8357.507, 'duration': 0.96}, {'end': 8361.509, 'text': 'and now, after this line, what next?', 'start': 8358.467, 'duration': 3.042}], 'summary': 'The transcript discusses coding elements for creating a player interface.', 'duration': 50.947, 'max_score': 8310.562, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD488310562.jpg'}], 'start': 7170.823, 'title': 'Creating tic tac toe game logic and functions', 'summary': 'Focuses on creating game logic for a tic tac toe game, adding values to the game board, checking for a winner, and determining a tie condition, as well as developing javascript functions for checking conditions, updating values, and printing messages, including creating html elements and a reset function.', 'chapters': [{'end': 7482.717, 'start': 7170.823, 'title': 'Creating click event function', 'summary': 'Focuses on creating a click event function for player moves, using javascript to handle game board actions and conditions, and utilizing console logs for debugging.', 'duration': 311.894, 'highlights': ['We are creating a click event function for player moves, and using JavaScript to handle game board actions and conditions.', 'The code includes the usage of console logs for debugging and checking the current state of variables and values.', 'The function involves checking and setting values in the game board, including conditions for empty cells and handling player turns.']}, {'end': 7959.95, 'start': 7486.359, 'title': 'Tic tac toe game logic', 'summary': 'Discusses the implementation of the game logic for a tic tac toe game, including adding values to the game board, checking for a winner, and determining a tie condition, with a focus on the winning sequences and their associated conditions.', 'duration': 473.591, 'highlights': ['The chapter discusses the implementation of the game logic for a Tic Tac Toe game, including adding values to the game board, checking for a winner, and determining a tie condition, with a focus on the winning sequences and their associated conditions.', "The function 'isWinner' is used to check whether the user is a winner, and the 'turn' variable is incremented after each move.", "The function 'checkIfTie' is utilized to determine if the game is tied based on the condition 'turn greater than 7', and appropriate messages are displayed accordingly.", 'The implementation includes checking winning sequences defined in an array, with conditions such as 0, 1, 2 probability, 036, 147, 258, and 246, which are then iterated through and evaluated for a winning combination.', "The logic involves iterating through the winning combinations and checking the game board for specific cell positions to determine a winner, and applying the 'winner' class to the winning combination on the board."]}, {'end': 8274.379, 'start': 7959.95, 'title': 'Developing javascript functions', 'summary': 'Discusses developing javascript functions for checking conditions, updating values, and printing messages, including examples of using queryselector and innerhtml to manipulate html elements.', 'duration': 314.429, 'highlights': ['The chapter explains how to use querySelector to select HTML elements and update their innerHTML, allowing for dynamic content manipulation.', 'It demonstrates the use of conditions to check for a winner and update the board accordingly, showcasing practical implementation of JavaScript functions.', 'The speaker emphasizes the importance of properly defining and handling variables in JavaScript functions for efficient and accurate execution.']}, {'end': 8473.669, 'start': 8274.379, 'title': 'Creating html elements and reset function', 'summary': 'Covers creating html elements using backticks and implementing a reset board function, with the key points being the use of backticks for multi-line code and the implementation of a reset board function for console logging and reusing game board conditions.', 'duration': 199.29, 'highlights': ['Creating HTML elements using backticks allows for multi-line code and the implementation of span class for player names and winner conditions.', 'Implementing a reset board function includes console logging and reusing game board conditions.']}, {'end': 8802.632, 'start': 8473.669, 'title': 'Javascript game coding', 'summary': 'Covers coding a javascript game, defining variables, creating functions, and adding event listeners for cell clicks in a step-by-step manner, using selectors and queryselectorall.', 'duration': 328.963, 'highlights': ['The chapter covers coding a JavaScript game, defining variables, creating functions, and adding event listeners for cell clicks.', "Defining the turn value 'turn' as 0 and setting 'winner' as false.", "Adding event listeners for cell clicks using querySelectorAll and 'addCellClickListener' function."]}], 'duration': 1631.809, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD487170823.jpg', 'highlights': ['The chapter covers coding a JavaScript game, defining variables, creating functions, and adding event listeners for cell clicks.', 'The function involves checking and setting values in the game board, including conditions for empty cells and handling player turns.', 'The chapter discusses the implementation of the game logic for a Tic Tac Toe game, including adding values to the game board, checking for a winner, and determining a tie condition, with a focus on the winning sequences and their associated conditions.', 'The chapter explains how to use querySelector to select HTML elements and update their innerHTML, allowing for dynamic content manipulation.', 'Creating HTML elements using backticks allows for multi-line code and the implementation of span class for player names and winner conditions.']}, {'end': 10271.698, 'segs': [{'end': 8880.46, 'src': 'embed', 'start': 8847.22, 'weight': 8, 'content': [{'end': 8848.801, 'text': 'sorry, the css.', 'start': 8847.22, 'duration': 1.581}, {'end': 8853.706, 'text': 'so inside my tic tac i have got app.js and index.html ready.', 'start': 8848.801, 'duration': 4.905}, {'end': 8858.431, 'text': "now here i'm going to create another file here called app.css.", 'start': 8853.706, 'duration': 4.725}, {'end': 8863.816, 'text': 'see, you can basically put this app.css in either folder, like in static folder, but i have just kept it outside.', 'start': 8858.431, 'duration': 5.385}, {'end': 8870.417, 'text': 'now, from this point onwards, I would like to start with my basic functionalities.', 'start': 8865.595, 'duration': 4.822}, {'end': 8872.177, 'text': 'okay, what those are.', 'start': 8870.417, 'duration': 1.76}, {'end': 8880.46, 'text': "let's start with the first feature called body, with my body, some basic settings I would like to do, like in background image background color.", 'start': 8872.177, 'duration': 8.283}], 'summary': 'Creating app.css file and setting basic body features for the web application.', 'duration': 33.24, 'max_score': 8847.22, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD488847220.jpg'}, {'end': 9220.922, 'src': 'embed', 'start': 9169.221, 'weight': 10, 'content': [{'end': 9182.124, 'text': 'next padding, I can take four pixels, eight pixels, four pixels, eight pixels.', 'start': 9169.221, 'duration': 12.903}, {'end': 9185.025, 'text': 'now margin.', 'start': 9182.124, 'duration': 2.901}, {'end': 9191.387, 'text': 'we are saying zero, zero, ten pixels, okay.', 'start': 9185.025, 'duration': 6.362}, {'end': 9193.167, 'text': 'and finally four pixels.', 'start': 9191.387, 'duration': 1.78}, {'end': 9204.275, 'text': 'after smarging we say font-size 18px, okay.', 'start': 9195.652, 'duration': 8.623}, {'end': 9206.516, 'text': 'so that is your input field.', 'start': 9204.275, 'duration': 2.241}, {'end': 9220.922, 'text': 'next, we are talking about something called input field focus, input hyphen field, okay, colon focus.', 'start': 9206.516, 'duration': 14.406}], 'summary': 'Setting padding, margin, and font-size for input field, with specific pixel values and focus state.', 'duration': 51.701, 'max_score': 9169.221, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD489169221.jpg'}, {'end': 9372.864, 'src': 'embed', 'start': 9308.315, 'weight': 2, 'content': [{'end': 9320.699, 'text': 'ok. so this is the property now going forward.', 'start': 9308.315, 'duration': 12.384}, {'end': 9325.642, 'text': 'you can associate with your submit button active and submit button focus.', 'start': 9320.699, 'duration': 4.943}, {'end': 9337.129, 'text': 'so we are saying dot, submit, hyphen, btn, colon active.', 'start': 9325.642, 'duration': 11.487}, {'end': 9354.917, 'text': 'and two options we are taking, followed by condition outline none, outline none.', 'start': 9337.129, 'duration': 17.788}, {'end': 9355.737, 'text': 'next, border.', 'start': 9354.917, 'duration': 0.82}, {'end': 9370.363, 'text': 'we are talking about cultural pixels solid and the color red, okay.', 'start': 9355.737, 'duration': 14.626}, {'end': 9372.864, 'text': "so that's the one.", 'start': 9370.363, 'duration': 2.501}], 'summary': 'Setting submit button styles: active state with outline none, border and color red.', 'duration': 64.549, 'max_score': 9308.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD489308315.jpg'}, {'end': 9553.035, 'src': 'embed', 'start': 9497.609, 'weight': 1, 'content': [{'end': 9518.119, 'text': 'here we define width, which is 40 pixels we are taking, or sorry, 40 we can rather take after that, background colors that we can say coded blue.', 'start': 9497.609, 'duration': 20.51}, {'end': 9528.759, 'text': "okay, next, margin we're taking is a zero and auto.", 'start': 9518.119, 'duration': 10.64}, {'end': 9534.603, 'text': 'after that font size, font size we are taking zero.', 'start': 9528.759, 'duration': 5.844}, {'end': 9551.012, 'text': 'next border border, we are taking two pixels, then solid and then black, followed by box shadow.', 'start': 9534.603, 'duration': 16.409}, {'end': 9553.035, 'text': 'we remember this.', 'start': 9552.415, 'duration': 0.62}], 'summary': 'Width: 40px, background color: blue, margin: 0, font size: 0, border: 2px solid black, box shadow included.', 'duration': 55.426, 'max_score': 9497.609, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD489497609.jpg'}, {'end': 9674.258, 'src': 'embed', 'start': 9606.458, 'weight': 4, 'content': [{'end': 9620.98, 'text': 'now, in this width we are using calculation c, a, l, c, and in this calculation we are defining 100 percent.', 'start': 9606.458, 'duration': 14.522}, {'end': 9625.583, 'text': 'okay, divided by three this calculation.', 'start': 9620.98, 'duration': 4.603}, {'end': 9630.986, 'text': 'after this the next property will be display.', 'start': 9625.583, 'duration': 5.403}, {'end': 9634.408, 'text': 'display will be inline block.', 'start': 9630.986, 'duration': 3.422}, {'end': 9636.75, 'text': 'next font size.', 'start': 9634.408, 'duration': 2.342}, {'end': 9641.152, 'text': "we're taking 40 pixels.", 'start': 9636.75, 'duration': 4.402}, {'end': 9650.479, 'text': 'well, text align center border.', 'start': 9641.152, 'duration': 9.327}, {'end': 9674.258, 'text': 'we are taking two pixels solid and black, adding 20 pixels vertical align top.', 'start': 9650.479, 'duration': 23.779}], 'summary': 'Using 100% width, with 40px font, 2px border, and 20px vertical align top.', 'duration': 67.8, 'max_score': 9606.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD489606458.jpg'}, {'end': 9876.455, 'src': 'embed', 'start': 9817.275, 'weight': 6, 'content': [{'end': 9820.097, 'text': 'okay. so for this winner container, what are the values?', 'start': 9817.275, 'duration': 2.822}, {'end': 9823.598, 'text': "we want to use it, that's you want to basically do it.", 'start': 9820.097, 'duration': 3.501}, {'end': 9860.52, 'text': 'so for this winner container, what I would rather suggest is you can use reset text-align center margin 20px, that is for reset, and now reset hidden.', 'start': 9823.598, 'duration': 36.922}, {'end': 9869.027, 'text': 'inside this reset hidden, we will say display none, display none.', 'start': 9860.52, 'duration': 8.507}, {'end': 9876.455, 'text': "okay. after this, the replay button it's yeah.", 'start': 9870.632, 'duration': 5.823}], 'summary': 'Suggest using reset text-align center margin 20px and reset hidden for winner container.', 'duration': 59.18, 'max_score': 9817.275, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD489817275.jpg'}, {'end': 9977.625, 'src': 'embed', 'start': 9932.451, 'weight': 5, 'content': [{'end': 9936.093, 'text': 'after this outline, we say letter spacing.', 'start': 9932.451, 'duration': 3.642}, {'end': 9939.534, 'text': 'now this letter spacing would be again 0.', 'start': 9936.093, 'duration': 3.441}, {'end': 9941.415, 'text': 'after that text.', 'start': 9939.534, 'duration': 1.881}, {'end': 9945.277, 'text': 'transform this text.', 'start': 9941.415, 'duration': 3.862}, {'end': 9949.499, 'text': 'transform value we are talking about called upper case.', 'start': 9945.277, 'duration': 4.222}, {'end': 9955.521, 'text': 'next font size, font size.', 'start': 9949.499, 'duration': 6.022}, {'end': 9956.422, 'text': 'we are taking 16 pixels.', 'start': 9955.521, 'duration': 0.901}, {'end': 9963.075, 'text': 'then margin top.', 'start': 9959.693, 'duration': 3.382}, {'end': 9966.998, 'text': 'margin top would be 12 pixels.', 'start': 9963.075, 'duration': 3.923}, {'end': 9977.625, 'text': 'then word spacing that you are taking 3 pixels, followed by background color.', 'start': 9966.998, 'duration': 10.627}], 'summary': 'Text styling: letter spacing 0, transform to upper case, font size 16px, margin top 12px, word spacing 3px, background color.', 'duration': 45.174, 'max_score': 9932.451, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD489932451.jpg'}, {'end': 10271.698, 'src': 'embed', 'start': 10147.961, 'weight': 0, 'content': [{'end': 10154.365, 'text': "also, now it's time to go back to our index.html file and take care about the final finishing touch.", 'start': 10147.961, 'duration': 6.404}, {'end': 10161.249, 'text': 'so we have this index.html file with us and now the CSS class which we were using it in our application.', 'start': 10154.365, 'duration': 6.884}, {'end': 10165.162, 'text': 'that is known as called this permanent marker.', 'start': 10161.249, 'duration': 3.913}, {'end': 10171.147, 'text': 'this class is not by default available, so we have to include this using this external API.', 'start': 10165.162, 'duration': 5.985}, {'end': 10183.799, 'text': 'so here, where we have a call CSS with us before that, we want link.', 'start': 10171.147, 'duration': 12.652}, {'end': 10190.672, 'text': 'so within this link we want our variable name call href equal to.', 'start': 10183.799, 'duration': 6.873}, {'end': 10194.995, 'text': 'now we have to give the proper location by saying https colon.', 'start': 10190.672, 'duration': 4.323}, {'end': 10195.596, 'text': 'double forward.', 'start': 10194.995, 'duration': 0.601}, {'end': 10198.317, 'text': 'slash fonts dot.', 'start': 10195.596, 'duration': 2.721}, {'end': 10208.584, 'text': 'google apis okay, dot com.', 'start': 10198.317, 'duration': 10.267}, {'end': 10227.854, 'text': 'slash css question mark family equal to permanent plus marker okay.', 'start': 10208.584, 'duration': 19.27}, {'end': 10236.257, 'text': 'so if you just copy this into your browser, you will get to know where exactly it is using.', 'start': 10227.854, 'duration': 8.403}, {'end': 10239.198, 'text': 'okay, if I just copy and paste it.', 'start': 10236.257, 'duration': 2.941}, {'end': 10242.639, 'text': 'so I just need to say HTTPS before.', 'start': 10239.198, 'duration': 3.441}, {'end': 10246.521, 'text': 'yeah, HTTPS fonts dot.', 'start': 10242.639, 'duration': 3.882}, {'end': 10253.026, 'text': 'Google APIs.com.', 'start': 10250.222, 'duration': 2.804}, {'end': 10258.554, 'text': 'slash. Oh, spelling wrong.', 'start': 10253.026, 'duration': 5.528}, {'end': 10260.837, 'text': 'CSS family equal to permanent marker.', 'start': 10258.554, 'duration': 2.283}, {'end': 10266.685, 'text': 'That is the main URL from where I can take this kind of font.', 'start': 10261.658, 'duration': 5.027}, {'end': 10267.246, 'text': 'So here.', 'start': 10266.825, 'duration': 0.421}, {'end': 10271.698, 'text': "CSS So that's what I was cross-verifying it.", 'start': 10269.597, 'duration': 2.101}], 'summary': "Adding the 'permanent marker' css class to index.html using an external api for font location.", 'duration': 123.737, 'max_score': 10147.961, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810147961.jpg'}], 'start': 8802.632, 'title': 'Css implementation and styling', 'summary': 'Covers the implementation of javascript code and creation of app.css file, along with styling input fields, buttons, winner display, and basic css settings for body, including specific pixel values, color choices, and various styling properties with specific values provided for each property.', 'chapters': [{'end': 8872.177, 'start': 8802.632, 'title': 'Javascript code implementation and css preparation', 'summary': 'Covers the implementation of javascript code, the creation of an app.css file, and the preparation to start with basic functionalities in the html file.', 'duration': 69.545, 'highlights': ['The JavaScript code implementation is the primary focus at this stage, with the preparation to use CSS and apply everything to the HTML file.', 'The creation of the app.css file is mentioned, with the option to place it in the static folder, and the readiness to start with basic functionalities in the HTML file.']}, {'end': 9103.156, 'start': 8872.177, 'title': 'Css basic settings', 'summary': 'Covers the basic css settings for body, including background color, height, position, and font, with specific pixel values and color choices mentioned.', 'duration': 230.979, 'highlights': ['The body section includes settings for background color, height, position, background position, background repeat, and background size, with specific pixel values mentioned.', "The CSS class 'div.relative' is defined with absolute positioning and specific pixel values for top and right, and the class 'hide-container' is defined with 'display: none'.", "Specific color, text alignment, margin, and font family settings are mentioned for the 'header' and 'inter-players' classes."]}, {'end': 9606.458, 'start': 9106.874, 'title': 'Styling input fields and buttons', 'summary': 'Covers the styling properties for input fields and submit buttons, including border, padding, font size, width, and background color, with specific values provided for each property.', 'duration': 499.584, 'highlights': ['Styling properties for input fields and submit buttons The transcript provides detailed styling properties for input fields and submit buttons, including border, padding, font size, width, and background color.', 'Specific values for styling properties Specific values such as 2 pixels for border, 8 pixels for padding, 80 pixels for font size, and 250 pixels for width are provided for styling the submit button.', "Usage of classes and properties in JavaScript The use of classes like 'submit-btn' and 'board-container' in JavaScript for styling is mentioned, emphasizing the color and font size properties for specific classes."]}, {'end': 10271.698, 'start': 9606.458, 'title': 'Styling css for winner display', 'summary': 'Discusses the css styling for winner display, including properties like display, font size, border, font family, color, position, transform, margin, word spacing, background color, and applying external font using an api.', 'duration': 665.24, 'highlights': ['Applying CSS properties for winner display like font size, font family, and color Properties like display, font size, font family, and color are defined for the winner display, with font size set to 40 pixels and color as white.', 'Setting CSS properties for winner container and replay button CSS properties such as text-align, margin, display, and width are specified for the winner container, while the replay button is styled with width of 25%, padding of 10 pixels, and border radius of 5 pixels.', "Inclusion of external font using an API The process of including an external font using an API from 'https://fonts.googleapis.com/css?family=permanent+marker' is explained, enabling the use of the 'permanent marker' font in the CSS."]}], 'duration': 1469.066, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD488802632.jpg', 'highlights': ['The JavaScript code implementation is the primary focus at this stage, with the preparation to use CSS and apply everything to the HTML file.', 'The creation of the app.css file is mentioned, with the option to place it in the static folder, and the readiness to start with basic functionalities in the HTML file.', 'The body section includes settings for background color, height, position, background position, background repeat, and background size, with specific pixel values mentioned.', "The CSS class 'div.relative' is defined with absolute positioning and specific pixel values for top and right, and the class 'hide-container' is defined with 'display: none'.", "Specific color, text alignment, margin, and font family settings are mentioned for the 'header' and 'inter-players' classes.", 'Styling properties for input fields and submit buttons The transcript provides detailed styling properties for input fields and submit buttons, including border, padding, font size, width, and background color.', 'Specific values for styling properties Specific values such as 2 pixels for border, 8 pixels for padding, 80 pixels for font size, and 250 pixels for width are provided for styling the submit button.', "Usage of classes and properties in JavaScript The use of classes like 'submit-btn' and 'board-container' in JavaScript for styling is mentioned, emphasizing the color and font size properties for specific classes.", 'Applying CSS properties for winner display like font size, font family, and color Properties like display, font size, font family, and color are defined for the winner display, with font size set to 40 pixels and color as white.', 'Setting CSS properties for winner container and replay button CSS properties such as text-align, margin, display, and width are specified for the winner container, while the replay button is styled with width of 25%, padding of 10 pixels, and border radius of 5 pixels.', "Inclusion of external font using an API The process of including an external font using an API from 'https://fonts.googleapis.com/css?family=permanent+marker' is explained, enabling the use of the 'permanent marker' font in the CSS."]}, {'end': 10762.361, 'segs': [{'end': 10380.97, 'src': 'embed', 'start': 10299.139, 'weight': 0, 'content': [{'end': 10316.902, 'text': 'after that, if I just go back and check the final outcome of my code, which is index.html file, well, it pretty much look like in basic.', 'start': 10299.139, 'duration': 17.763}, {'end': 10318.402, 'text': 'nothing else has started.', 'start': 10316.902, 'duration': 1.5}, {'end': 10324.984, 'text': 'when we talk about call start game, okay, so it needs to start because there is no CSS class are attached.', 'start': 10318.402, 'duration': 6.582}, {'end': 10327.664, 'text': 'so I need to attach those classes within my code.', 'start': 10324.984, 'duration': 2.68}, {'end': 10337.731, 'text': 'so here onwards we have to start with offering those CSS classes so that at least I can apply those common behaviors to my application.', 'start': 10328.484, 'duration': 9.247}, {'end': 10340.974, 'text': 'okay, like here, we have a call div.', 'start': 10337.731, 'duration': 3.243}, {'end': 10343.516, 'text': "we haven't attached any class to this.", 'start': 10340.974, 'duration': 2.542}, {'end': 10350.561, 'text': 'after this body we have a call div h1 class equal to header tic tac toe.', 'start': 10343.516, 'duration': 7.045}, {'end': 10351.903, 'text': 'then we have a call div.', 'start': 10350.561, 'duration': 1.342}, {'end': 10356.23, 'text': 'we have a call body.', 'start': 10351.903, 'duration': 4.327}, {'end': 10358.512, 'text': 'under this we have a call, another div tag.', 'start': 10356.23, 'duration': 2.282}, {'end': 10361.955, 'text': 'so just imagine how many type of classes are available.', 'start': 10358.512, 'duration': 3.443}, {'end': 10364.957, 'text': 'one we have called div class equal to header.', 'start': 10361.955, 'duration': 3.002}, {'end': 10365.878, 'text': 'div class is closed.', 'start': 10364.957, 'duration': 0.921}, {'end': 10368.581, 'text': 'again we have called one more div tag.', 'start': 10366.539, 'duration': 2.042}, {'end': 10375.006, 'text': 'so like that, multiple css files are there where we have to apply the new css class to make it happen.', 'start': 10368.581, 'duration': 6.425}, {'end': 10380.97, 'text': 'so now we have to just go back and change our html and to apply our main class.', 'start': 10375.006, 'duration': 5.964}], 'summary': 'The code needs css classes attached to achieve the desired outcome.', 'duration': 81.831, 'max_score': 10299.139, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810299139.jpg'}, {'end': 10461.851, 'src': 'embed', 'start': 10428.779, 'weight': 6, 'content': [{'end': 10432.442, 'text': 'when i say start game, it says you must enter a name for each field.', 'start': 10428.779, 'duration': 3.663}, {'end': 10433.942, 'text': 'validation is working.', 'start': 10432.442, 'duration': 1.5}, {'end': 10439.526, 'text': 'let me try to add two names and say start game, awesome.', 'start': 10433.942, 'duration': 5.584}, {'end': 10442.427, 'text': 'so now you can see it is saying hey, you are up.', 'start': 10439.526, 'duration': 2.901}, {'end': 10451.999, 'text': 'now let me try to give the values Awesome.', 'start': 10442.427, 'duration': 9.572}, {'end': 10455.162, 'text': "Now you can see it's saying like, hey, you are a winner.", 'start': 10452.079, 'duration': 3.083}, {'end': 10458.066, 'text': 'Great So guys, congratulations on this.', 'start': 10455.803, 'duration': 2.263}, {'end': 10461.851, 'text': 'The first example of how the tic-tac-doe game is used.', 'start': 10458.146, 'duration': 3.705}], 'summary': 'Tic-tac-toe game successfully validates names, declares winner. first successful example.', 'duration': 33.072, 'max_score': 10428.779, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810428779.jpg'}, {'end': 10699.09, 'src': 'embed', 'start': 10646.882, 'weight': 3, 'content': [{'end': 10648.682, 'text': 'that means the increment value.', 'start': 10646.882, 'duration': 1.8}, {'end': 10653.28, 'text': 'that is well, that is the input type.', 'start': 10648.682, 'duration': 4.598}, {'end': 10654.881, 'text': 'and now another input.', 'start': 10653.28, 'duration': 1.601}, {'end': 10676.645, 'text': 'we are taking input type equal to button and value equal to start and then id equal to game start.', 'start': 10654.881, 'duration': 21.764}, {'end': 10680.086, 'text': "okay, so we're giving these values.", 'start': 10676.645, 'duration': 3.441}, {'end': 10689.983, 'text': 'after that I can give some bricks.', 'start': 10680.086, 'duration': 9.897}, {'end': 10690.564, 'text': 'so two bricks.', 'start': 10689.983, 'duration': 0.581}, {'end': 10692.825, 'text': 'we are giving it and start working with the div tag.', 'start': 10690.564, 'duration': 2.261}, {'end': 10699.09, 'text': 'now and in this div tag I will be using the canvas.', 'start': 10692.825, 'duration': 6.265}], 'summary': 'Using input type button with value start, and adding two bricks to work with the div tag and canvas.', 'duration': 52.208, 'max_score': 10646.882, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810646882.jpg'}], 'start': 10272.418, 'title': 'Implementing game designs with css and js', 'summary': 'Covers implementing css classes and javascript for a tic tac toe game, adding multiple css classes, applying dynamic css based on conditions, achieving functional validation, resulting in a successful implementation. it also discusses creating a snake game using html, css, and javascript, including the creation of folders, files, and the implementation of basic functionalities such as setting speed and start button.', 'chapters': [{'end': 10461.851, 'start': 10272.418, 'title': 'Implementing css and js for tic tac toe', 'summary': 'Discusses the process of implementing css classes and javascript for a tic tac toe game, including adding multiple css classes, applying dynamic css based on conditions, and achieving functional validation, resulting in a successful implementation of the game.', 'duration': 189.433, 'highlights': ['The final HTML includes CSS classes such as interplayer, player form, player container, label placeholder, and player container, which are applied for dynamic CSS based on certain conditions.', 'The chapter emphasizes the successful validation of the game, where entering two names and initiating the game results in functional validation, leading to a clear winner being announced.', 'The process of implementing CSS classes and JavaScript for the Tic Tac Toe game is discussed, including the addition of multiple CSS classes and the application of dynamic CSS based on certain conditions.', 'The need to attach CSS classes within the code is highlighted to apply common behaviors to the application, emphasizing the importance of integrating CSS and JavaScript for the game.']}, {'end': 10762.361, 'start': 10462.411, 'title': 'Creating snake game with html, css, and javascript', 'summary': 'Discusses the process of creating a snake game using html, css, and javascript, including the creation of folders, files, and the implementation of basic functionalities such as setting speed and start button.', 'duration': 299.95, 'highlights': ['The chapter discusses the process of creating a snake game using HTML, CSS, and JavaScript The chapter revolves around creating a snake game using HTML, CSS, and JavaScript, providing a practical example of integrating these technologies.', 'Creation of folders and files for the snake game The speaker outlines the creation of a new folder for the snake game, including the creation of subfolders for images and the files index.html and app.js.', 'Implementation of basic functionalities such as setting speed and start button The chapter details the implementation of basic functionalities, such as setting the speed using input tags and the start button using the button tag, with specific attributes and constraints.']}], 'duration': 489.943, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810272418.jpg', 'highlights': ['The chapter emphasizes the successful validation of the game, where entering two names and initiating the game results in functional validation, leading to a clear winner being announced.', 'The process of implementing CSS classes and JavaScript for the Tic Tac Toe game is discussed, including the addition of multiple CSS classes and the application of dynamic CSS based on certain conditions.', 'The need to attach CSS classes within the code is highlighted to apply common behaviors to the application, emphasizing the importance of integrating CSS and JavaScript for the game.', 'The final HTML includes CSS classes such as interplayer, player form, player container, label placeholder, and player container, which are applied for dynamic CSS based on certain conditions.', 'The chapter discusses the process of creating a snake game using HTML, CSS, and JavaScript, providing a practical example of integrating these technologies.', 'Creation of folders and files for the snake game The speaker outlines the creation of a new folder for the snake game, including the creation of subfolders for images and the files index.html and app.js.', 'Implementation of basic functionalities such as setting speed and start button The chapter details the implementation of basic functionalities, such as setting the speed using input tags and the start button using the button tag, with specific attributes and constraints.']}, {'end': 13449.818, 'segs': [{'end': 10800.414, 'src': 'embed', 'start': 10763.201, 'weight': 2, 'content': [{'end': 10764.602, 'text': 'Now this is almost ready for me.', 'start': 10763.201, 'duration': 1.401}, {'end': 10765.562, 'text': 'Let me check.', 'start': 10765.042, 'duration': 0.52}, {'end': 10774.719, 'text': 'OK, so I can see values.', 'start': 10772.102, 'duration': 2.617}, {'end': 10779.904, 'text': 'now it will go maximum 9.', 'start': 10778.163, 'duration': 1.741}, {'end': 10783.286, 'text': 'that is how we have given, and minimum is 1.', 'start': 10779.904, 'duration': 3.382}, {'end': 10789.769, 'text': 'start is the button which is not doing anything, but later on we can allow some logic inside this.', 'start': 10783.286, 'duration': 6.483}, {'end': 10800.414, 'text': 'now we have to start working with our main javascript tag this is my amp.js and here onwards we will use some of the properties, ok,', 'start': 10789.769, 'duration': 10.645}], 'summary': 'Preparing to work with javascript tag, values will range from 1 to 9.', 'duration': 37.213, 'max_score': 10763.201, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810763201.jpg'}, {'end': 11339.562, 'src': 'embed', 'start': 11305.49, 'weight': 3, 'content': [{'end': 11308.974, 'text': 'that means if it is less than 0, I will be making it a minimum to 1.', 'start': 11305.49, 'duration': 3.484}, {'end': 11315.641, 'text': "if it is greater than 9, I will be making it to 9 maximum, and that's it okay.", 'start': 11308.974, 'duration': 6.667}, {'end': 11322.788, 'text': 'so after this, else, if condition is getting closed, we are saying speed size equal to 1.', 'start': 11315.641, 'duration': 7.147}, {'end': 11331.68, 'text': 'so here we just say snake, snake equal to array.', 'start': 11322.788, 'duration': 8.892}, {'end': 11333.52, 'text': 'so that is my array for me.', 'start': 11331.68, 'duration': 1.84}, {'end': 11339.562, 'text': 'and after that we are saying snake dot push, because it needs to move ahead.', 'start': 11333.52, 'duration': 6.042}], 'summary': 'Conditionally setting speed within range 1 to 9 for snake movement.', 'duration': 34.072, 'max_score': 11305.49, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4811305490.jpg'}, {'end': 11481.271, 'src': 'embed', 'start': 11450.07, 'weight': 4, 'content': [{'end': 11457.334, 'text': 'clear interval will be just like in a typical function which is there using this option called create game area.', 'start': 11450.07, 'duration': 7.264}, {'end': 11462.717, 'text': 'so this will be available to me on which the value will be taken.', 'start': 11457.334, 'duration': 5.383}, {'end': 11476.108, 'text': 'that okay, and then we will be telling you how you can call this function create food and create game interval.', 'start': 11462.717, 'duration': 13.391}, {'end': 11481.271, 'text': 'so this create game timer is the one which we have to create it by our own.', 'start': 11476.108, 'duration': 5.163}], 'summary': 'Creating a game timer and functions for game area and food', 'duration': 31.201, 'max_score': 11450.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4811450070.jpg'}, {'end': 11860.961, 'src': 'embed', 'start': 11812.08, 'weight': 0, 'content': [{'end': 11814.142, 'text': 'we want to use it called stock style.', 'start': 11812.08, 'duration': 2.062}, {'end': 11826.347, 'text': 'let me take this game area context again dot stroke style, stroke style, equal to now.', 'start': 11814.142, 'duration': 12.205}, {'end': 11837.773, 'text': 'we give the another color here by saying hash, okay, and then the next option called same.', 'start': 11826.347, 'duration': 11.426}, {'end': 11844.71, 'text': 'give me the context dot stroke, react, stroke, react.', 'start': 11837.773, 'duration': 6.937}, {'end': 11860.961, 'text': 'and here we pass the values again 0, comma 0, comma game area width, comma game area height.', 'start': 11844.71, 'duration': 16.251}], 'summary': 'Using stock style for game area context with specified color and dimensions.', 'duration': 48.881, 'max_score': 11812.08, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4811812080.jpg'}, {'end': 12160.413, 'src': 'embed', 'start': 12124.204, 'weight': 1, 'content': [{'end': 12140.835, 'text': 'ok. and we are saying game start, dot disabled equal to false, and after that return.', 'start': 12124.204, 'duration': 16.631}, {'end': 12141.855, 'text': "that's it.", 'start': 12140.835, 'duration': 1.02}, {'end': 12147.998, 'text': 'so this is the logic, for we have written to this particular example.', 'start': 12141.855, 'duration': 6.143}, {'end': 12153.5, 'text': 'now we can use another, if more, conditions here, just to check the behavior of my code.', 'start': 12147.998, 'duration': 5.502}, {'end': 12158.211, 'text': 'If getting your learning started is half the battle, what if you could do that for free?', 'start': 12154.048, 'duration': 4.163}, {'end': 12160.413, 'text': 'Visit SkillUp by SimplyLearn.', 'start': 12158.771, 'duration': 1.642}], 'summary': 'Logic written for game start with disabled=false, additional conditions to check code behavior.', 'duration': 36.209, 'max_score': 12124.204, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4812124204.jpg'}, {'end': 12451.374, 'src': 'embed', 'start': 12408.623, 'weight': 5, 'content': [{'end': 12423.171, 'text': 'and here, rather than using this, we can say snake food dot x and snake food dot y.', 'start': 12408.623, 'duration': 14.548}, {'end': 12430.197, 'text': 'okay, so now this values has been added into my code.', 'start': 12425.293, 'duration': 4.904}, {'end': 12433.419, 'text': 'now we start working with your control.', 'start': 12430.197, 'duration': 3.222}, {'end': 12438.302, 'text': 'control needs to take three parameters x, y and the array.', 'start': 12433.419, 'duration': 4.883}, {'end': 12441.425, 'text': 'so we are passing this option called control.', 'start': 12438.302, 'duration': 3.123}, {'end': 12449.553, 'text': 'and in this control we are taking x, comma, y, comma, three parameters.', 'start': 12441.425, 'duration': 8.128}, {'end': 12451.374, 'text': 'we are taking it later on.', 'start': 12449.553, 'duration': 1.821}], 'summary': 'Code update: added x and y values for control parameters.', 'duration': 42.751, 'max_score': 12408.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4812408623.jpg'}, {'end': 13447.111, 'src': 'heatmap', 'start': 13317.359, 'weight': 1, 'content': [{'end': 13324.543, 'text': "but anyways, we have our created css and now, going forward, we'll be implementing the rest of the logic within my code.", 'start': 13317.359, 'duration': 7.184}, {'end': 13325.203, 'text': 'okay, everyone.', 'start': 13324.543, 'duration': 0.66}, {'end': 13328.986, 'text': 'so we have changed some names here because there was some value was mismatched.', 'start': 13325.203, 'duration': 3.783}, {'end': 13341.154, 'text': 'so we have basically changed those values with your properties and now, when i try to relaunch my application by this index.html file,', 'start': 13328.986, 'duration': 12.168}, {'end': 13346.745, 'text': 'So now in my index.html file that I am trying to add.', 'start': 13343.902, 'duration': 2.843}, {'end': 13350.51, 'text': "So it's just as usual same let me say start.", 'start': 13347.626, 'duration': 2.884}, {'end': 13352.572, 'text': 'And here you can see game start.', 'start': 13351.171, 'duration': 1.401}, {'end': 13355.275, 'text': "When I go up you see like it's starting right now.", 'start': 13352.592, 'duration': 2.683}, {'end': 13358.139, 'text': "Okay isn't this an amazing game right now friends.", 'start': 13356.156, 'duration': 1.983}, {'end': 13364.491, 'text': 'okay, that is the same game what you used to play it earlier.', 'start': 13360.529, 'duration': 3.962}, {'end': 13370.175, 'text': 'okay, you can just change the direction, go up and you can see the score title being placed here.', 'start': 13364.491, 'duration': 5.684}, {'end': 13370.635, 'text': "that's it.", 'start': 13370.175, 'duration': 0.46}, {'end': 13377.159, 'text': 'so this is where exactly the look and feel of your game has been taken and you can just increase the speed.', 'start': 13370.635, 'duration': 6.524}, {'end': 13380.281, 'text': 'suppose, if we just put a value called what zero?', 'start': 13377.159, 'duration': 3.122}, {'end': 13384.143, 'text': 'by default, set whatever value you want to take it with the start.', 'start': 13380.281, 'duration': 3.862}, {'end': 13390.007, 'text': 'now you can see, based on that, the speed can be justified and the example can be developed.', 'start': 13384.143, 'duration': 5.864}, {'end': 13395.971, 'text': 'okay, you can see the start button is disabled because right now the user is still going on.', 'start': 13391.228, 'duration': 4.743}, {'end': 13400.775, 'text': 'unless the user game is finished, this one is not going to work.', 'start': 13395.971, 'duration': 4.804}, {'end': 13405.178, 'text': 'fine. so, like that you can see and automatically this will be positioned.', 'start': 13400.775, 'duration': 4.403}, {'end': 13406.699, 'text': 'this one is called food.', 'start': 13405.178, 'duration': 1.521}, {'end': 13410.582, 'text': 'that is how we have used it in my example, now called app.js.', 'start': 13406.699, 'duration': 3.883}, {'end': 13417.192, 'text': 'you can see we are using this example name called food create food and create food of the specific interval time.', 'start': 13410.582, 'duration': 6.61}, {'end': 13423.115, 'text': 'this would be automatically created and the snake will eat and increase the size of the code.', 'start': 13417.192, 'duration': 5.923}, {'end': 13424.696, 'text': "okay, that's it.", 'start': 13423.115, 'duration': 1.581}, {'end': 13426.737, 'text': 'and now the CSS has been given.', 'start': 13424.696, 'duration': 2.041}, {'end': 13430.179, 'text': 'if you want to add certain image, certainly you can add it.', 'start': 13426.737, 'duration': 3.442}, {'end': 13436.162, 'text': 'otherwise this is the first game which we can see how it is running and giving you the better example.', 'start': 13430.179, 'duration': 5.983}, {'end': 13439.064, 'text': "and with that we've come to the end of this video.", 'start': 13436.162, 'duration': 2.902}, {'end': 13441.265, 'text': 'I hope you had fun building these applications.', 'start': 13439.064, 'duration': 2.201}, {'end': 13445.548, 'text': 'If you have any doubts or queries, let us know in the comment section below.', 'start': 13442.099, 'duration': 3.449}, {'end': 13447.111, 'text': 'Thank you for watching.', 'start': 13446.209, 'duration': 0.902}], 'summary': 'Implemented logic for game, changed values, and adjusted speed for better example.', 'duration': 129.752, 'max_score': 13317.359, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4813317359.jpg'}], 'start': 10763.201, 'title': 'Creating a javascript snake game', 'summary': 'Covers initializing game properties, writing logic, creating snake game logic, handling movement and boundaries, game start conditions, player score, and demonstrating game functionality with examples.', 'chapters': [{'end': 11157.773, 'start': 10763.201, 'title': 'Initializing game properties and writing logic', 'summary': 'Discusses initializing numerous game properties in javascript, including game start, game speed, game area, and others, and then proceeds to write the logic for the game start event and its subsequent function.', 'duration': 394.572, 'highlights': ['Initializing numerous game properties in JavaScript, including game start, game speed, game area, and others The speaker mentions initializing various game properties like game start, game speed, game area, cell width, play score, snake, and timer, among others, in JavaScript.', 'Proceeding to write the logic for the game start event and its subsequent function The discussion transitions to writing the logic for the game start event, including disabling certain elements and calling subsequent functions, such as on click event and its associated function.']}, {'end': 12124.204, 'start': 11157.773, 'title': 'Creating snake game logic', 'summary': 'Discusses the creation of the snake game logic, including defining initial variables, setting game speed, creating game area, and handling movement and boundaries.', 'duration': 966.431, 'highlights': ['The chapter discusses the creation of the snake game logic, including defining initial variables, setting game speed, creating game area, and handling movement and boundaries.', "The function startGame initializes the game by defining the initial score, setting the snake direction to 'right', and determining the speed size value.", 'The logic for handling the speed size is explained, where if the speed size is less than 0, it is set to 1, and if greater than 9, it is set to 9 as the maximum.', 'The process of creating the snake and pushing it to move ahead within the game area is detailed, including the x and y positions and cell width calculations.', "The creation of the 'create food' function is outlined, involving the calculation of random x and y coordinates within the game area boundaries.", 'Functions for creating game area, controlling movement, writing score, creating squares, and changing direction are mentioned, emphasizing the step-by-step approach to building the game logic.']}, {'end': 12830.818, 'start': 12124.204, 'title': 'Snake game logic and code structure', 'summary': 'Covers the logic and code structure of a snake game, including details on game start, conditions, player score, creating squares, writing scores, and changing directions in the game.', 'duration': 706.614, 'highlights': ['Details on game start, conditions, and code logic The chapter explains the logic and code structure for game start, conditions, and code logic for a snake game.', 'Explanation of creating squares and writing scores in the game The chapter provides details on creating squares and writing scores in the snake game, including the parameters and positioning.', 'Information on changing directions in the game based on key input The chapter discusses the function for changing directions in the game based on key input, including the four key parameters and their corresponding directions.']}, {'end': 13449.818, 'start': 12830.818, 'title': 'Creating a javascript snake game', 'summary': 'Details the process of creating a javascript snake game, including defining functions, integrating css, and demonstrating the functionality of the game with examples.', 'duration': 619, 'highlights': ["The chapter describes the process of creating a JavaScript Snake Game, including defining functions and integrating CSS to enhance the game's appearance and functionality.", "The transcript provides insight into the coding process, including the use of functions like 'start game,' 'snake.push,' 'create food,' and 'clear interval,' as well as the implementation of CSS styles to improve the game's visual presentation.", "The speaker demonstrates the functionality of the game by describing how to adjust the game speed, disable the start button during gameplay, and create and position the 'food' element within the game.", 'The chapter concludes with a message thanking the viewers and encouraging them to share any queries or feedback, indicating the end of the content.']}], 'duration': 2686.617, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/Iry8fAYMD48/pics/Iry8fAYMD4810763201.jpg', 'highlights': ['Initializing numerous game properties in JavaScript, including game start, game speed, game area, and others', 'The chapter discusses the creation of the snake game logic, including defining initial variables, setting game speed, creating game area, and handling movement and boundaries', "The function startGame initializes the game by defining the initial score, setting the snake direction to 'right', and determining the speed size value", 'The process of creating the snake and pushing it to move ahead within the game area is detailed, including the x and y positions and cell width calculations', 'The chapter explains the logic and code structure for game start, conditions, and code logic for a snake game', "The chapter describes the process of creating a JavaScript Snake Game, including defining functions and integrating CSS to enhance the game's appearance and functionality"]}], 'highlights': ['Creating beginner to advanced level JavaScript projects The chapter covers creating projects like a calculator app, weather app, tic tac toe game, and a snake game application.', 'The project involves creating a real-time weather application using JavaScript, HTML, and CSS.', 'The chapter emphasizes the application of CSS properties to enhance the visual representation of temperature values and descriptions, aiming to improve the overall display of temperature information on the webpage.', 'The chapter emphasizes the importance of obtaining a unique API key from openweathermap.org, required for interacting with weather applications.', 'The plan to develop a JavaScript-based tic-tac-toe game is mentioned, indicating the focus on game development.', 'The chapter covers coding a JavaScript game, defining variables, creating functions, and adding event listeners for cell clicks.', 'The JavaScript code implementation is the primary focus at this stage, with the preparation to use CSS and apply everything to the HTML file.', 'The chapter emphasizes the successful validation of the game, where entering two names and initiating the game results in functional validation, leading to a clear winner being announced.', 'The process of creating a snake game using HTML, CSS, and JavaScript, providing a practical example of integrating these technologies.', 'The chapter discusses the creation of the snake game logic, including defining initial variables, setting game speed, creating game area, and handling movement and boundaries']}