title
🔥4 JavaScript Projects under 4 Hours | JavaScript Tutorial 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=JSProjects12feb23-aWYZUoUo7V8&utm_medium=DescriptionFirstFold&utm_source=youtube 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=JSProjects12feb23-aWYZUoUo7V8&utm_medium=DescriptionFirstFold&utm_source=youtube This video, 4 Javascript Projects Under 4 hoursby Simplilearn, will take you through a hands-on demo of 4 Javascript Projects for beginners. In this JavaScript tutorial for beginners, we have covered different projects for you to master Javascript. You can also mention these projects in your CV to make it stand out from the competition. Below are the topics covered in this Javascript project for beginners video. 00:00:00 4 JavaScript Projects under 4 Hours 00:00:57 Calculator App in JavaScript 00:32:13 Weather App in JavaScript 01:32:50 Tic Tac Toe Game in JavaScript 02:54:35 Snake Game in JavaScript ✅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 ➡️ 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 👉 Learn More At: https://www.simplilearn.com/pgp-full-stack-web-development-certification-training-course?utm_campaign=JSProjects12feb23-aWYZUoUo7V8&utm_medium=Description&utm_source=youtubee 🔥Caltech Coding Bootcamp (US Only): https://www.simplilearn.com/coding-bootcamp?utm_campaign=JSProjects12feb23-aWYZUoUo7V8&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 Tutorial For Beginners | JavaScript | Simplilearn', 'heatmap': [{'end': 9913.091, 'start': 9755.225, 'weight': 1}], 'summary': 'This javascript tutorial covers beginner to advanced projects, including a calculator app, weather app, tic-tac-toe game, and snake game. it also discusses frontend and backend development, css integration, and game logic implementation, providing hands-on programming focus and practical examples.', 'chapters': [{'end': 858.637, 'segs': [{'end': 320.488, 'src': 'embed', 'start': 247.227, 'weight': 0, 'content': [{'end': 260.041, 'text': 'input time equal to button, value equal to C and one click equal to.', 'start': 247.227, 'duration': 12.814}, {'end': 266.183, 'text': 'I may not have any function right now, but yes, I can create a function, but let me give some dummy name here.', 'start': 260.041, 'duration': 6.142}, {'end': 270.264, 'text': "I'm saying clear screen.", 'start': 267.123, 'duration': 3.141}, {'end': 273.445, 'text': 'Okay So that will be the function you get called.', 'start': 271.405, 'duration': 2.04}, {'end': 279.127, 'text': 'And after that class equal to clear.', 'start': 274.265, 'duration': 4.862}, {'end': 283.928, 'text': 'Yeah So this is my button type.', 'start': 281.447, 'duration': 2.481}, {'end': 288.624, 'text': 'After this, the td tag is getting closed.', 'start': 286.522, 'duration': 2.102}, {'end': 292.087, 'text': 'After the td tag, the table row is also getting closed.', 'start': 289.224, 'duration': 2.863}, {'end': 297.531, 'text': "After the table row, which is getting closed, we're going to start working with another table row.", 'start': 292.907, 'duration': 4.624}, {'end': 303.076, 'text': "Okay And in this table row, I'm going to create one more td.", 'start': 299.273, 'duration': 3.803}, {'end': 308.3, 'text': "So let's go and create another td here.", 'start': 304.197, 'duration': 4.103}, {'end': 312.864, 'text': "And inside this td, I'll be having another button to be created.", 'start': 309.241, 'duration': 3.623}, {'end': 319.427, 'text': "So I'll just say, This is my another button now.", 'start': 313.925, 'duration': 5.502}, {'end': 320.488, 'text': 'Input equal to button.', 'start': 319.627, 'duration': 0.861}], 'summary': 'Creating functions and buttons in html table rows.', 'duration': 73.261, 'max_score': 247.227, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V8247227.jpg'}], 'start': 19.093, 'title': 'Javascript projects and creating a calculator webpage', 'summary': 'Covers beginner to advanced javascript projects, including a calculator app, weather app, tic tac toe game, and a snake game application, with a hands-on programming focus. it also discusses the step-by-step process of creating a calculator webpage using html elements like tables, buttons, and input fields.', 'chapters': [{'end': 114.401, 'start': 19.093, 'title': 'Javascript projects: beginner to advanced', 'summary': 'Will cover creating beginner to advanced javascript projects including a calculator app, weather app, tic tac toe game, and a snake game application, with a focus on learning through hands-on programming.', 'duration': 95.308, 'highlights': ['The chapter will cover creating beginner to advanced JavaScript projects including a calculator app, weather app, tic tac toe game, and a snake game application. The video will guide through the creation of simple beginner level projects like a calculator app, followed by more advanced apps like the weather app, tic tac toe game, and a snake game application.', 'The importance of hands-on programming for mastering a language is highlighted. The best way to master a language is by programming in it, emphasizing the significance of hands-on programming for learning.', 'Encouragement to subscribe to the channel for similar tech videos is given. The viewers are encouraged to subscribe to the channel and hit the bell icon to never miss an update on similar tech videos.']}, {'end': 858.637, 'start': 114.401, 'title': 'Creating a calculator webpage', 'summary': 'Discusses the step-by-step process of creating a calculator webpage, including the creation of html elements such as tables, buttons, and input fields, and the arrangement of these elements to achieve the desired visual layout.', 'duration': 744.236, 'highlights': ['The chapter discusses the step-by-step process of creating a calculator webpage This is the main focus and purpose of the transcript.', 'including the creation of HTML elements such as tables, buttons, and input fields Key detail about the specific HTML elements being created.', 'the arrangement of these elements to achieve the desired visual layout Emphasizes the importance of the visual layout of the webpage.']}], 'duration': 839.544, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V819093.jpg', 'highlights': ['Covers beginner to advanced JavaScript projects including a calculator app, weather app, tic tac toe game, and a snake game application.', 'The importance of hands-on programming for mastering a language is highlighted.', 'The chapter discusses the step-by-step process of creating a calculator webpage.', 'Encouragement to subscribe to the channel for similar tech videos is given.']}, {'end': 2241.748, 'segs': [{'end': 1011.865, 'src': 'embed', 'start': 948.584, 'weight': 0, 'content': [{'end': 954.89, 'text': 'I will be using this app.css in my HTML to see the look how it is being appeared right now.', 'start': 948.584, 'duration': 6.306}, {'end': 969.002, 'text': 'So, in my index.html file, on the top, under my head section, link, stylesheet.', 'start': 955.51, 'duration': 13.492}, {'end': 981.431, 'text': 'Okay, now see, it looks better now.', 'start': 979.13, 'duration': 2.301}, {'end': 989.136, 'text': 'Going forward, in my CSS, we want to use some H1 color too.', 'start': 982.452, 'duration': 6.684}, {'end': 1011.865, 'text': 'So here we would like to use the H1, text align center color white margin, top, margin-top.', 'start': 989.476, 'duration': 22.389}], 'summary': 'Using app.css in html to improve appearance, adjusting h1 color and alignment.', 'duration': 63.281, 'max_score': 948.584, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V8948584.jpg'}, {'end': 1695.721, 'src': 'embed', 'start': 1652.005, 'weight': 1, 'content': [{'end': 1665.788, 'text': "here we are saying width 100%, ok, that's it super.", 'start': 1652.005, 'duration': 13.783}, {'end': 1670.149, 'text': "so it's now giving me the proper look of how my application should behave.", 'start': 1665.788, 'duration': 4.361}, {'end': 1673.629, 'text': 'like just see about the container, what we have done.', 'start': 1670.149, 'duration': 3.48}, {'end': 1679.051, 'text': 'width 40% we are taking background color.', 'start': 1673.629, 'duration': 5.422}, {'end': 1692.077, 'text': "let's bring it below, then align self display, block margin okay, and border radius, and fine.", 'start': 1679.051, 'duration': 13.026}, {'end': 1694.079, 'text': "i think we're all good now.", 'start': 1692.077, 'duration': 2.002}, {'end': 1695.721, 'text': "so that's it.", 'start': 1694.079, 'duration': 1.642}], 'summary': 'Styling adjustments made for 40% width and other properties to achieve proper application behavior.', 'duration': 43.716, 'max_score': 1652.005, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V81652005.jpg'}, {'end': 1841.094, 'src': 'embed', 'start': 1786.006, 'weight': 2, 'content': [{'end': 1799.236, 'text': 'and say let y equal to perform the calculations for the beautiful function called var and type x is in parameter.', 'start': 1786.006, 'duration': 13.23}, {'end': 1803.498, 'text': 'now the next statement will be again document dot.', 'start': 1799.236, 'duration': 4.262}, {'end': 1821.407, 'text': 'get it given by id, result dot value equal to y.', 'start': 1803.498, 'duration': 17.909}, {'end': 1835.51, 'text': 'okay, now, later on I will write to use another function here function clear screen.', 'start': 1821.407, 'duration': 14.103}, {'end': 1839.313, 'text': 'and here we say document dot.', 'start': 1835.51, 'duration': 3.803}, {'end': 1841.094, 'text': 'get it written by id.', 'start': 1839.313, 'duration': 1.781}], 'summary': 'Calculating with var function and writing another function clear screen.', 'duration': 55.088, 'max_score': 1786.006, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V81786006.jpg'}], 'start': 858.637, 'title': 'Web development essentials', 'summary': 'Covers topics including css framework for styling, input elements styling, javascript calculator implementation, real-time weather application, and javascript back-end communication and presentation. it includes setting background color, font family, and alignment for elements, styling input elements, implementing a simple calculator application using javascript, creating a real-time weather application, and using javascript to communicate with the backend and format records. the chapter also discusses organizing a table, performing calculations, and developing code using vs code, html, and css.', 'chapters': [{'end': 1123.574, 'start': 858.637, 'title': 'Css framework and styling', 'summary': 'Discusses organizing a table, performing calculations, and implementing a css framework for styling, including setting background color, font family, and alignment for elements.', 'duration': 264.937, 'highlights': ['The chapter explains the process of organizing a table and performing calculations, specifically mentioning the addition of missing elements, resulting in a more organized layout.', 'The speaker emphasizes the need to utilize a CSS framework for proper styling, detailing the implementation of font family, body background color, and H1 styling for improved visual appearance.', 'The detailed steps for implementing CSS styling are provided, including setting background color, border, font size, width, cursor, padding, and margins for proper alignment and visual outcome.']}, {'end': 1695.721, 'start': 1124.254, 'title': 'Styling input elements', 'summary': 'Focuses on styling various types of input elements including buttons, numbers, decimals, clears, equals, and containers, specifying their background colors, padding, color, border, width, height, cursor, and other styling properties.', 'duration': 571.467, 'highlights': ['Styling different input types including buttons, numbers, decimals, clears, equals, and containers with specific background colors, padding, color, border, width, height, cursor, and other styling properties. Various input elements styled with specific properties.', 'Details the specific styling properties for each input type, such as background color, padding, color, border, width, height, cursor, and other styling elements. Specific styling properties detailed for each input type.', 'Emphasizes the importance of aligning the styling properties to achieve the desired look and behavior of the application, including the use of percentages, display blocks, margins, and borders. Importance of aligning styling properties for desired application behavior.']}, {'end': 1916.691, 'start': 1695.721, 'title': 'Implementing javascript calculator', 'summary': 'Covers implementing a simple calculator application using javascript, with functions for display, solving, and clearing the screen, resulting in a basic calculator that can perform addition, subtraction, multiplication, and division operations.', 'duration': 220.97, 'highlights': ['The chapter covers implementing a simple calculator application using JavaScript The transcript discusses the implementation of a simple calculator application using JavaScript to perform basic arithmetic operations.', 'Functions for display, solving, and clearing the screen are defined in the JavaScript code The transcript outlines the creation of functions for display, solving, and clearing the screen within the JavaScript code, enabling the calculator to perform various operations.', 'The calculator can perform addition, subtraction, multiplication, and division operations The transcript demonstrates the functionality of the developed calculator, showcasing its ability to perform addition, subtraction, multiplication, and division operations.']}, {'end': 2003.738, 'start': 1916.691, 'title': 'Real-time weather application in javascript', 'summary': "Introduces a new project, 'weather pro', in javascript that aims to develop a real-time weather application by making asynchronous rest api calls, in contrast to previous static projects.", 'duration': 87.047, 'highlights': ["The project 'Weather Pro' is introduced as a real-time weather application in JavaScript, aiming to make asynchronous REST API calls for real-time data, in contrast to previous static projects.", 'The project is a continuation of previous JavaScript projects and is described as competitive and dynamic in nature.', 'The CSS and JS components are briefly mentioned, with JS highlighted as a smaller but meaningful logic in the project.']}, {'end': 2241.748, 'start': 2003.738, 'title': 'Javascript back-end communication and presentation', 'summary': 'Discusses using javascript to communicate with the backend, load data, and represent records beautifully, with a focus on developing code using vs code, using html for presentation, and css for formatting. it also covers creating three files (index.html, app.css, app.js) and building an html template with css and input fields for weather information.', 'duration': 238.01, 'highlights': ['Developing code using VS Code, using HTML for presentation, and CSS for formatting The chapter emphasizes using VS Code for code development and HTML for presentation, along with CSS for formatting.', 'Creating three files (index.html, app.css, app.js) for development The chapter mentions creating three files (index.html, app.css, app.js) for the development process.', 'Building an HTML template with CSS and input fields for weather information The chapter covers building an HTML template with CSS and input fields for weather information.']}], 'duration': 1383.111, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V8858637.jpg', 'highlights': ['The chapter covers implementing a simple calculator application using JavaScript.', "The project 'Weather Pro' is introduced as a real-time weather application in JavaScript.", 'The chapter emphasizes using VS Code for code development and HTML for presentation, along with CSS for formatting.', 'Styling different input types including buttons, numbers, decimals, clears, equals, and containers with specific background colors, padding, color, border, width, height, cursor, and other styling properties.', 'The detailed steps for implementing CSS styling are provided, including setting background color, border, font size, width, cursor, padding, and margins for proper alignment and visual outcome.']}, {'end': 4817.015, 'segs': [{'end': 2738.31, 'src': 'embed', 'start': 2680.702, 'weight': 1, 'content': [{'end': 2706.86, 'text': 'inside this we will say width will be 100%, then height will be 150 pixels, then border radius 10 pixels 10 pixels.', 'start': 2680.702, 'duration': 26.158}, {'end': 2719.57, 'text': 'then we need display, display, we need flex and then we need align items.', 'start': 2706.86, 'duration': 12.71}, {'end': 2723.333, 'text': 'this align items we are just saying center.', 'start': 2719.57, 'duration': 3.763}, {'end': 2726.695, 'text': 'next we need justify content.', 'start': 2723.333, 'duration': 3.362}, {'end': 2727.616, 'text': 'that will be the justify.', 'start': 2726.695, 'duration': 0.921}, {'end': 2738.31, 'text': 'content will be just center, then flex direction would be column.', 'start': 2727.616, 'duration': 10.694}], 'summary': 'Set width to 100%, height to 150px, border radius 10px, use flexbox with align items and justify content centered, and flex direction as column.', 'duration': 57.608, 'max_score': 2680.702, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V82680702.jpg'}, {'end': 3322.596, 'src': 'embed', 'start': 3269.437, 'weight': 4, 'content': [{'end': 3281.222, 'text': 'margin would be 10 pixels and auto then cursor.', 'start': 3269.437, 'duration': 11.785}, {'end': 3284.303, 'text': 'so cursor will be pointer for sure.', 'start': 3281.222, 'duration': 3.081}, {'end': 3287.484, 'text': 'and then we required padding.', 'start': 3284.303, 'duration': 3.181}, {'end': 3296.362, 'text': "padding we're looking forward for five pixels, followed by border border.", 'start': 3287.484, 'duration': 8.878}, {'end': 3305.867, 'text': 'we are looking forward for steel blue, steel, blue, solid and 2 pixels.', 'start': 3296.362, 'duration': 9.505}, {'end': 3311.97, 'text': 'then border radius.', 'start': 3305.867, 'duration': 6.103}, {'end': 3316.032, 'text': 'border radius.', 'start': 3311.97, 'duration': 4.062}, {'end': 3322.596, 'text': 'we are looking forward for 10 pixels and followed by your color.', 'start': 3316.032, 'duration': 6.564}], 'summary': 'Styling includes 10px margin, 5px padding, steel blue border, 2px solid, and 10px border radius.', 'duration': 53.159, 'max_score': 3269.437, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V83269437.jpg'}, {'end': 3494.214, 'src': 'embed', 'start': 3454.478, 'weight': 0, 'content': [{'end': 3460.782, 'text': "we haven't used much, but you can see now it looks somewhere in much more better way.", 'start': 3454.478, 'duration': 6.304}, {'end': 3462.983, 'text': 'okay, that is called temperature value p.', 'start': 3460.782, 'duration': 2.201}, {'end': 3467.246, 'text': 'then you can use a temperature value span.', 'start': 3462.983, 'duration': 4.263}, {'end': 3476.467, 'text': 'here dot temperature value span, space span.', 'start': 3467.246, 'duration': 9.221}, {'end': 3480.909, 'text': 'and here we need the additional dot.', 'start': 3476.467, 'duration': 4.442}, {'end': 3494.214, 'text': 'now, within this span, say color, once again save and font size.', 'start': 3480.909, 'duration': 13.305}], 'summary': 'Improvement in appearance with temperature value p and span for color and font size.', 'duration': 39.736, 'max_score': 3454.478, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V83454478.jpg'}, {'end': 4443.489, 'src': 'embed', 'start': 4405.315, 'weight': 3, 'content': [{'end': 4408.362, 'text': 'so I have my API key with me.', 'start': 4405.315, 'duration': 3.047}, {'end': 4410.006, 'text': "so I'll go here.", 'start': 4408.362, 'duration': 1.644}, {'end': 4411.329, 'text': "it'll ask me for the registration.", 'start': 4410.006, 'duration': 1.323}, {'end': 4425.94, 'text': 'so i already signed up.', 'start': 4424.099, 'duration': 1.841}, {'end': 4427.821, 'text': "so if you're not, you need to sign it.", 'start': 4425.94, 'duration': 1.881}, {'end': 4434.925, 'text': "there's an api key for me which i need to copy, and this api key i'll be using it in my project.", 'start': 4427.821, 'duration': 7.104}, {'end': 4443.489, 'text': 'so i just use this property called const key equal to to paste my key here.', 'start': 4434.925, 'duration': 8.564}], 'summary': 'Using api key for project registration and implementation.', 'duration': 38.174, 'max_score': 4405.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V84405315.jpg'}], 'start': 2241.748, 'title': 'Frontend development', 'summary': 'Covers displaying city records, css styling and designing, html and css class implementation, and javascript frontend development for an application, including specific attributes, dimensions, and api interaction.', 'chapters': [{'end': 2361.683, 'start': 2241.748, 'title': 'Display city records in application', 'summary': 'Discusses the process of displaying city records in an application using div tags and specifying the details to be shown, including temperature and description.', 'duration': 119.935, 'highlights': ['Using div tags to display city records and details such as temperature and description in the application.', 'Implementing div class and paragraph tags for specifying temperature value and description.', 'Utilizing span tag to show the degree centigrade for temperature display.']}, {'end': 3322.596, 'start': 2361.683, 'title': 'Css styling and designing elements', 'summary': 'Discusses the implementation of css for styling and designing various elements including fonts, background images, containers, text boxes, and notifications, with specific attributes and dimensions, aiming to enhance the visual experience of the application.', 'duration': 960.913, 'highlights': ['Implementation of CSS for styling and designing various elements including fonts, background images, containers, text boxes, and notifications CSS applied for diverse elements', 'Specific attributes and dimensions provided for styling including font family, background image, height, width, padding, border-radius, box-shadow, and color Specific CSS attributes and dimensions', 'Usage of specific classes and IDs for targeting and styling individual elements such as app-title, search, and notifications Targeting and styling individual elements using classes and IDs']}, {'end': 3660.452, 'start': 3327.561, 'title': 'Css styling for application', 'summary': 'Discusses the css styling specifications for the application, including temperature and location details, with specific values such as 100% width, 60 pixels height, color hash 293, and font sizes 4em, 1.2em, and 0.8.', 'duration': 332.891, 'highlights': ['The chapter discusses the CSS styling specifications for the application, including temperature and location details, with specific values such as 100% width, 60 pixels height, color hash 293, and font sizes 4em, 1.2em, and 0.8.', 'The properties for temperature values include a width of 100% and a height of 60 pixels.', 'The specific color for temperature values is hash 293, with font sizes specified as 4em, 1.2em, and 0.8.', 'The CSS specifications also include details for location, with the margin and padding set to 0 and the font size specified as 0.8.', 'The use of CSS for the application aims to enhance the look and feel of the pictures and demonstrates the application of CSS into HTML for visual representation.']}, {'end': 3920.962, 'start': 3661.093, 'title': 'Html and css class implementation', 'summary': 'Covers the implementation of various css classes in html, including the usage of div tags and image sources, with a total of three div tags closed and multiple css class implementations.', 'duration': 259.869, 'highlights': ['The chapter focuses on the implementation of CSS classes in HTML, including auto complete, temperature value, location icon, notification, weather condition, and weather icon.', 'The usage of div tags and image sources is demonstrated, such as using img src for icons like location.png and unknown.png.', 'A total of three div tags are closed during the implementation process.']}, {'end': 4817.015, 'start': 3921.602, 'title': 'Javascript frontend development', 'summary': 'Covers selecting elements, getting input fields, applying events, interacting with the openweathermap api, and defining functions for setting user position and error handling.', 'duration': 895.413, 'highlights': ['The chapter covers selecting elements, getting input fields, and applying events for the JavaScript frontend development.', 'The transcript discusses interacting with the OpenWeatherMap API and obtaining the API key for accessing weather data.', "The chapter details defining functions for setting the user's position and handling errors during the JavaScript frontend development."]}], 'duration': 2575.267, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V82241748.jpg', 'highlights': ['Using div tags to display city records and details such as temperature and description in the application.', 'Implementation of CSS for styling and designing various elements including fonts, background images, containers, text boxes, and notifications CSS applied for diverse elements', 'The chapter discusses the CSS styling specifications for the application, including temperature and location details, with specific values such as 100% width, 60 pixels height, color hash 293, and font sizes 4em, 1.2em, and 0.8.', 'The chapter focuses on the implementation of CSS classes in HTML, including auto complete, temperature value, location icon, notification, weather condition, and weather icon.', 'The chapter covers selecting elements, getting input fields, and applying events for the JavaScript frontend development.']}, {'end': 5549.078, 'segs': [{'end': 5225.355, 'src': 'embed', 'start': 5189.445, 'weight': 4, 'content': [{'end': 5193.848, 'text': "and I'm giving the name call function getWeather.", 'start': 5189.445, 'duration': 4.403}, {'end': 5199.495, 'text': 'Okay, it takes two parameters.', 'start': 5198.154, 'duration': 1.341}, {'end': 5201.036, 'text': 'One is called what? Latitude.', 'start': 5199.695, 'duration': 1.341}, {'end': 5206.52, 'text': 'And second is called longitude.', 'start': 5202.157, 'duration': 4.363}, {'end': 5209.823, 'text': 'So we have two things called latitude and longitude.', 'start': 5207.181, 'duration': 2.642}, {'end': 5216.368, 'text': "And here I'm using this property called what? Let API equal to.", 'start': 5210.644, 'duration': 5.724}, {'end': 5221.332, 'text': "Once again, if you remember, I've used this statement.", 'start': 5217.189, 'duration': 4.143}, {'end': 5225.355, 'text': "I'll just copy the same and pass it here.", 'start': 5221.512, 'duration': 3.843}], 'summary': 'The getweather function requires latitude and longitude parameters to make an api call.', 'duration': 35.91, 'max_score': 5189.445, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V85189445.jpg'}, {'end': 5297.022, 'src': 'embed', 'start': 5260.782, 'weight': 0, 'content': [{'end': 5275.82, 'text': 'we are using longitude, okay, and app-id equal to what key.', 'start': 5260.782, 'duration': 15.038}, {'end': 5279.044, 'text': 'so this is the variable which we have it now.', 'start': 5275.82, 'duration': 3.224}, {'end': 5285.452, 'text': 'okay, now, similar thing which we have used it on the top, okay, called fetch API.', 'start': 5279.044, 'duration': 6.408}, {'end': 5293.161, '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': 5285.452, 'duration': 7.709}, {'end': 5294.301, 'text': 'it can be similarly done.', 'start': 5293.161, 'duration': 1.14}, {'end': 5297.022, 'text': 'I just copy and pasted it here.', 'start': 5294.381, 'duration': 2.641}], 'summary': 'Using longitude and app-id for fetch api, saving time by copying code.', 'duration': 36.24, 'max_score': 5260.782, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V85260782.jpg'}], 'start': 4818.036, 'title': 'Weather api function and data display', 'summary': 'Covers the development of a weather api function, including the usage of fetch for making restful api calls and constructing api urls with dynamic city input. it also explains retrieving and displaying weather data using the fetch api in javascript, handling response data, and displaying temperature, weather description, and location, with examples of successful outputs.', 'chapters': [{'end': 4951.902, 'start': 4818.036, 'title': 'Developing weather api function', 'summary': 'Discusses the process of developing a weather api function, including the usage of fetch for making the restful api call and the construction of the api url with dynamic city input.', 'duration': 133.866, 'highlights': ['The process involves developing a function called get search weather to pass the city name as a parameter.', "The construction of the API URL includes the use of 'fetch' for making the RESTful API call and the dynamic input of the city name.", "The speaker mentions using the API URL format including 'http://api.openweathermap.org/data/2.5/weather?q=city&appid=app_id' for making the API call."]}, {'end': 5549.078, 'start': 4952.731, 'title': 'Display weather from api', 'summary': 'Explains the process of retrieving and displaying weather data from an api using the fetch api in javascript, including handling the response data and displaying the temperature, weather description, and location, with examples of successful outputs.', 'duration': 596.347, 'highlights': ['Retrieving and processing weather data from an API using the fetch API in JavaScript The transcript details the process of retrieving weather data from an API using the fetch API in JavaScript to display weather information on a web application.', 'Handling the response data and extracting temperature, weather description, and location The speaker explains the process of handling the response data and extracting specific weather details such as temperature, weather description, and location for display on the web application.', "Demonstrating successful outputs of the weather display functionality The transcript includes examples of successful outputs, showing the displayed weather information for different cities such as '27 broken clouds, globe undefined' and 'smoke 28 degree centigrade' with a demonstration of the application's functionality."]}], 'duration': 731.042, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V84818036.jpg', 'highlights': ['The process involves developing a function called get search weather to pass the city name as a parameter.', 'Retrieving and processing weather data from an API using the fetch API in JavaScript.', 'Handling the response data and extracting temperature, weather description, and location.', "The construction of the API URL includes the use of 'fetch' for making the RESTful API call and the dynamic input of the city name.", 'Demonstrating successful outputs of the weather display functionality.']}, {'end': 6215.44, 'segs': [{'end': 5577.849, 'src': 'embed', 'start': 5549.519, 'weight': 1, 'content': [{'end': 5555.884, 'text': 'If getting your learning started is half the battle, what if you could do that for free? Visit SkillUp by SimplyLearn.', 'start': 5549.519, 'duration': 6.365}, {'end': 5558.446, 'text': 'Click on the link in the description to know more.', 'start': 5556.204, 'duration': 2.242}, {'end': 5564.831, 'text': 'And now we are planning to develop one very special game for you in JavaScript.', 'start': 5559.48, 'duration': 5.351}, {'end': 5568.679, 'text': "And now it's time to talk about another very interesting game that is known as Tic Tac.", 'start': 5565.011, 'duration': 3.668}, {'end': 5572.946, 'text': "tic-tac-toe is word's favorite game.", 'start': 5569.724, 'duration': 3.222}, {'end': 5577.849, 'text': 'we have already played a lot in our childhood days and still my favorite game.', 'start': 5572.946, 'duration': 4.903}], 'summary': 'Skillup offers free learning, plans to develop a special javascript game, and discusses the popular game tic tac toe.', 'duration': 28.33, 'max_score': 5549.519, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V85549519.jpg'}, {'end': 5850.997, 'src': 'embed', 'start': 5742.381, 'weight': 0, 'content': [{'end': 5748.706, 'text': 'next name equal to player1.', 'start': 5742.381, 'duration': 6.325}, {'end': 5757.593, 'text': 'next we want id equal to player1 and then any class, if I want to apply.', 'start': 5748.706, 'duration': 8.887}, {'end': 5760.135, 'text': "Anyways, we're going to close this.", 'start': 5758.874, 'duration': 1.261}, {'end': 5761.596, 'text': 'This is my first text box.', 'start': 5760.415, 'duration': 1.181}, {'end': 5765.4, 'text': 'And same thing I would like to create for my another one.', 'start': 5762.457, 'duration': 2.943}, {'end': 5767.581, 'text': 'So the first div tag we have used.', 'start': 5766.1, 'duration': 1.481}, {'end': 5769.843, 'text': 'Let me go and create another div tag.', 'start': 5767.842, 'duration': 2.001}, {'end': 5776.509, 'text': "In this div tag, I'll use the same label.", 'start': 5774.327, 'duration': 2.182}, {'end': 5779.191, 'text': 'Copy the same.', 'start': 5778.531, 'duration': 0.66}, {'end': 5781.433, 'text': 'Paste it here.', 'start': 5780.673, 'duration': 0.76}, {'end': 5792.435, 'text': 'And this is for layer 2.', 'start': 5782.114, 'duration': 10.321}, {'end': 5798.759, 'text': "So we have this two players with me and after this div tag, I'll offer the submit button now.", 'start': 5792.435, 'duration': 6.324}, {'end': 5807.025, 'text': 'Input of the submit.', 'start': 5805.944, 'duration': 1.081}, {'end': 5815.711, 'text': 'Start game.', 'start': 5815.231, 'duration': 0.48}, {'end': 5818.969, 'text': 'Now the form tag is closed here.', 'start': 5817.287, 'duration': 1.682}, {'end': 5821.091, 'text': 'Div tag is also closed.', 'start': 5819.91, 'duration': 1.181}, {'end': 5826.317, 'text': 'So you want the div tag to be closed before that.', 'start': 5822.193, 'duration': 4.124}, {'end': 5827.258, 'text': "It's up to you now.", 'start': 5826.437, 'duration': 0.821}, {'end': 5829.541, 'text': 'So here we have a div class.', 'start': 5828.019, 'duration': 1.522}, {'end': 5831.988, 'text': 'whichever we have taken.', 'start': 5831.007, 'duration': 0.981}, {'end': 5835.669, 'text': 'So if you want, you can basically put it later or before whatever.', 'start': 5832.008, 'duration': 3.661}, {'end': 5838.111, 'text': 'So we have a basically form tag with us.', 'start': 5836.53, 'duration': 1.581}, {'end': 5844.834, 'text': 'So form tag is there later on, you can just show some containers where the details will be visible to me.', 'start': 5839.091, 'duration': 5.743}, {'end': 5850.997, 'text': 'So here after the form tag, let me try to offer but first check whether it is really working fine.', 'start': 5845.514, 'duration': 5.483}], 'summary': 'Creating two players with div tags and a form for game interaction.', 'duration': 108.616, 'max_score': 5742.381, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V85742381.jpg'}, {'end': 6171.627, 'src': 'embed', 'start': 6140.12, 'weight': 3, 'content': [{'end': 6143.76, 'text': 'okay, so we want to start with the javascript.', 'start': 6140.12, 'duration': 3.64}, {'end': 6146.761, 'text': "so let's get included a javascript with my code.", 'start': 6143.76, 'duration': 3.001}, {'end': 6163.159, 'text': "so here I can say here script tag, script equal to now, file I haven't created.", 'start': 6146.761, 'duration': 16.398}, {'end': 6166.102, 'text': 'so let it be as it is.', 'start': 6163.159, 'duration': 2.943}, {'end': 6166.902, 'text': "that's it.", 'start': 6166.102, 'duration': 0.8}, {'end': 6171.627, 'text': 'so this is my script tag and let me try to include my style sheet also.', 'start': 6166.902, 'duration': 4.725}], 'summary': 'Starting with javascript inclusion and trying to include a style sheet.', 'duration': 31.507, 'max_score': 6140.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86140120.jpg'}], 'start': 5549.519, 'title': 'Learning and creating javascript game', 'summary': 'Introduces a free learning platform for javascript game development and announces the creation of a user-friendly tic-tac-toe game. it details the process of creating the game using html, form tags, input fields, and div tags, and plans to incorporate javascript and css for a complete game development.', 'chapters': [{'end': 5593.459, 'start': 5549.519, 'title': 'Free learning with javascript game development', 'summary': 'Introduces a free learning platform and announces the development of a javascript-based tic-tac-toe game, aiming to provide a great user experience.', 'duration': 43.94, 'highlights': ['The chapter introduces SkillUp by SimplyLearn, a free learning platform, followed by the announcement of the development of a JavaScript-based tic-tac-toe game.', 'The game development will utilize JavaScript, HTML, and CSS to create a great user experience.', 'The speaker expresses the significance of tic-tac-toe as a favorite childhood game, indicating a high potential user engagement.']}, {'end': 6215.44, 'start': 5594.239, 'title': 'Creating tic tac toe game', 'summary': 'Focuses on creating a tic tac toe game through the development of an html file, with the inclusion of form tags, input fields, and div tags for game elements and user interaction, and plans to incorporate javascript and css for a complete game development.', 'duration': 621.201, 'highlights': ['Creating HTML file and incorporating form tags, input fields, and div tags for game elements and user interaction. HTML file creation, form tags, input fields, div tags', 'Inclusion of specific attributes for input fields such as type, placeholder, name, id, and class. Attributes for input fields: type, placeholder, name, id, class', 'Planned integration of JavaScript and CSS for the complete development of the game. Integration of JavaScript and CSS for game development']}], 'duration': 665.921, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V85549519.jpg', 'highlights': ['The game development will utilize JavaScript, HTML, and CSS to create a great user experience.', 'Creating HTML file and incorporating form tags, input fields, and div tags for game elements and user interaction.', 'Inclusion of specific attributes for input fields such as type, placeholder, name, id, and class.', 'The chapter introduces SkillUp by SimplyLearn, a free learning platform, followed by the announcement of the development of a JavaScript-based tic-tac-toe game.', 'Planned integration of JavaScript and CSS for the complete development of the game.', 'The speaker expresses the significance of tic-tac-toe as a favorite childhood game, indicating a high potential user engagement.']}, {'end': 6904.931, 'segs': [{'end': 6244.957, 'src': 'embed', 'start': 6215.44, 'weight': 0, 'content': [{'end': 6224.908, 'text': "we're going to create a new file now with the name called app.js, and inside this we will start writing the logic with our main application.", 'start': 6215.44, 'duration': 9.468}, {'end': 6228.671, 'text': "okay, now, the first thing is how we're going to start now.", 'start': 6224.908, 'duration': 3.763}, {'end': 6241.416, 'text': 'yeah, so first thing what we need to do is we need to attach window dot, add event listener and when the window will load, some logic should happen.', 'start': 6228.671, 'duration': 12.745}, {'end': 6244.957, 'text': "so i'm saying load.", 'start': 6241.416, 'duration': 3.541}], 'summary': 'Creating a new file named app.js and adding logic for main application with window event listener', 'duration': 29.517, 'max_score': 6215.44, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86215440.jpg'}, {'end': 6328.889, 'src': 'embed', 'start': 6292.481, 'weight': 7, 'content': [{'end': 6298.023, 'text': "okay, so that's how we're going to create it now.", 'start': 6292.481, 'duration': 5.542}, {'end': 6301.024, 'text': 'okay, now, this is all empty right now.', 'start': 6298.023, 'duration': 3.001}, {'end': 6310.006, 'text': "after that, we're going to create, let turn, just a new variable equal to zero.", 'start': 6301.024, 'duration': 8.982}, {'end': 6310.946, 'text': 'what this is?', 'start': 6310.006, 'duration': 0.94}, {'end': 6316.308, 'text': "it keep tracking if x or zero player it's done, like which player turns.", 'start': 6310.946, 'duration': 5.362}, {'end': 6316.868, 'text': 'it will be.', 'start': 6316.308, 'duration': 0.56}, {'end': 6318.689, 'text': 'so just it is trying to measure it.', 'start': 6316.868, 'duration': 1.821}, {'end': 6325.848, 'text': "i'm saying let winner equal to false.", 'start': 6318.689, 'duration': 7.159}, {'end': 6328.889, 'text': "ok, now let's go and create the player.", 'start': 6325.848, 'duration': 3.041}], 'summary': 'Creating new variable to track player turns and setting initial values.', 'duration': 36.408, 'max_score': 6292.481, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86292481.jpg'}, {'end': 6434.832, 'src': 'embed', 'start': 6388.348, 'weight': 4, 'content': [{'end': 6393.39, 'text': 'okay, initialize now.', 'start': 6388.348, 'duration': 5.042}, {'end': 6394.791, 'text': 'inside this, initialize the app.', 'start': 6393.39, 'duration': 1.401}, {'end': 6404.175, 'text': "we're going to create a new function function app and inside this we're going to create a variable,", 'start': 6394.791, 'duration': 9.384}, {'end': 6413.343, 'text': 'likewise saying let input feed equal to first of all.', 'start': 6404.175, 'duration': 9.168}, {'end': 6417.245, 'text': 'document dot, get element by id.', 'start': 6413.343, 'duration': 3.902}, {'end': 6423.687, 'text': "here we're going to take the class name of this particular text field.", 'start': 6417.245, 'duration': 6.442}, {'end': 6431.25, 'text': 'so we are saying input hyphen field.', 'start': 6423.687, 'duration': 7.563}, {'end': 6434.832, 'text': 'okay, dot focus.', 'start': 6431.25, 'duration': 3.582}], 'summary': 'Initializing app, creating function app, and setting input focus.', 'duration': 46.484, 'max_score': 6388.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86388348.jpg'}, {'end': 6698.717, 'src': 'embed', 'start': 6576.289, 'weight': 1, 'content': [{'end': 6585.26, 'text': 'here we have to just define the function add, okay.', 'start': 6576.289, 'duration': 8.971}, {'end': 6601.79, 'text': "so we'll take event as a parameter and say event dot, prevent, prevent default.", 'start': 6585.26, 'duration': 16.53}, {'end': 6605.392, 'text': 'this prevent default will try to prevent the default.', 'start': 6601.79, 'duration': 3.602}, {'end': 6610.475, 'text': 'you know, behavior which is submitting to be get avoided.', 'start': 6605.392, 'duration': 5.083}, {'end': 6622.458, 'text': 'and now here we say if this dot player1, so we just define the property called player1.', 'start': 6610.475, 'duration': 11.983}, {'end': 6628.9, 'text': 'if this dot player1, dot, what value?', 'start': 6622.458, 'duration': 6.442}, {'end': 6650.155, 'text': 'okay, is blank, okay, or this dot player2, this.player2.', 'start': 6628.9, 'duration': 21.255}, {'end': 6652.016, 'text': 'now I just want to find it out.', 'start': 6650.155, 'duration': 1.861}, {'end': 6658.801, 'text': 'its value also value black.', 'start': 6652.016, 'duration': 6.785}, {'end': 6660.823, 'text': 'then what I should do in this case?', 'start': 6658.801, 'duration': 2.022}, {'end': 6674.853, 'text': 'I am saying alert, you must enter a name for each.', 'start': 6660.823, 'duration': 14.03}, {'end': 6684.506, 'text': 'The user has to add the values and after that return.', 'start': 6676.34, 'duration': 8.166}, {'end': 6698.717, 'text': 'Now the next thing is like we would like to select the players in this insight is by saying const player form container.', 'start': 6685.107, 'duration': 13.61}], 'summary': "Define 'add' function with event parameter, prevent default, and input validation", 'duration': 122.428, 'max_score': 6576.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86576289.jpg'}, {'end': 6830.52, 'src': 'embed', 'start': 6770.918, 'weight': 2, 'content': [{'end': 6773.999, 'text': 'hide iphone.', 'start': 6770.918, 'duration': 3.081}, {'end': 6789.202, 'text': 'add container and after that we just say board main board main dot classlist dot.', 'start': 6773.999, 'duration': 15.203}, {'end': 6795.238, 'text': 'remove hide hyphen table.', 'start': 6789.202, 'duration': 6.036}, {'end': 6801.941, 'text': 'ok, so we have basically taken that and after this, what I will do?', 'start': 6795.238, 'duration': 6.703}, {'end': 6812.205, 'text': 'I will just say player x dot name equal to this dot.', 'start': 6801.941, 'duration': 10.264}, {'end': 6816.887, 'text': 'player1 dot value.', 'start': 6812.205, 'duration': 4.682}, {'end': 6818.328, 'text': 'ok, this is for player x.', 'start': 6816.887, 'duration': 1.441}, {'end': 6828.64, 'text': "copy this and after that that's it.", 'start': 6818.328, 'duration': 10.312}, {'end': 6830.52, 'text': 'so we have done it now.', 'start': 6828.64, 'duration': 1.88}], 'summary': 'Code manipulation performed to show and modify elements.', 'duration': 59.602, 'max_score': 6770.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86770918.jpg'}], 'start': 6215.44, 'title': 'Initializing and building a game app', 'summary': 'Covers creating an app.js file, initializing the application, adding game players, and implementing player selection with a focus on javascript code. it involves creating a game board, initializing player variables, defining functions, attaching event listeners, and determining the current player based on a turn variable.', 'chapters': [{'end': 6434.832, 'start': 6215.44, 'title': 'Creating an app.js file and initializing the application', 'summary': 'Covers the creation of a new app.js file, the logic for the main application, the creation of a game board, the initialization of player variables, and the initialization of the app with a focus on a specific input field.', 'duration': 219.392, 'highlights': ['The chapter covers the creation of a new app.js file, the logic for the main application, the creation of a game board, the initialization of player variables, and the initialization of the app with a focus on a specific input field.', 'The logic for the main application includes attaching a window event listener for when the window loads and defining variables such as game board, turn, winner, player x, and player y.', 'The game board is created with 9 values to represent the game grid.', "Player variables are initialized with empty values, and an 'initialize' function is defined to focus on a specific input field."]}, {'end': 6628.9, 'start': 6438.311, 'title': 'Initializing and adding players for a game', 'summary': 'Discusses the process of initializing and adding players for a game, including defining functions, attaching event listeners, and preventing default behavior, with a focus on javascript code.', 'duration': 190.589, 'highlights': ['Defining the function to add players by preventing default behavior when submitting Describing the function to add players and prevent default behavior when submitting', "Attaching an event listener for the 'click' event on the replay button Attaching an event listener for the 'click' event on the replay button", "Attaching an event listener for the 'submit' event to add players Attaching an event listener for the 'submit' event to add players"]}, {'end': 6904.931, 'start': 6628.9, 'title': 'Implementing player selection', 'summary': 'Discusses implementing the functionality for player selection and retrieving the current player, involving code for adding players, hiding containers, and determining the current player based on a turn variable.', 'duration': 276.031, 'highlights': ['The code involves adding functionality for player selection, including adding players and hiding containers.', 'The implementation also includes determining the current player based on a turn variable.', "The function 'addPlayer' is implemented to add players, and a function is added to return the current player based on a turn variable."]}], 'duration': 689.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86215440.jpg', 'highlights': ['The chapter covers the creation of a new app.js file, the logic for the main application, and the initialization of player variables with a focus on a specific input field.', 'The logic for the main application includes attaching a window event listener for when the window loads and defining variables such as game board, turn, winner, player x, and player y.', 'The game board is created with 9 values to represent the game grid.', "Player variables are initialized with empty values, and an 'initialize' function is defined to focus on a specific input field.", 'The code involves adding functionality for player selection, including adding players and hiding containers.', 'The implementation also includes determining the current player based on a turn variable.', 'Defining the function to add players by preventing default behavior when submitting.', "Attaching an event listener for the 'click' event on the replay button.", "Attaching an event listener for the 'submit' event to add players.", "The function 'addPlayer' is implemented to add players, and a function is added to return the current player based on a turn variable."]}, {'end': 8808.565, 'segs': [{'end': 7438.954, 'src': 'embed', 'start': 7394.633, 'weight': 1, 'content': [{'end': 7398.694, 'text': 'and inside my console dot log we can set this.', 'start': 7394.633, 'duration': 4.061}, {'end': 7405.055, 'text': 'cell is already taken.', 'start': 7398.694, 'duration': 6.361}, {'end': 7411.918, 'text': 'so values are already taken for this and now we will be returning those values.', 'start': 7405.055, 'duration': 6.863}, {'end': 7416.48, 'text': 'after that we will be using else condition.', 'start': 7411.918, 'duration': 4.562}, {'end': 7434.59, 'text': "and here we use once again if current player okay is x, Then we'll be using this option called sell.", 'start': 7416.48, 'duration': 18.11}, {'end': 7438.954, 'text': 'See, we have this property option available called sell to add token.', 'start': 7436.191, 'duration': 2.763}], 'summary': 'Console logs values, returns them, and uses conditional statements for x player.', 'duration': 44.321, 'max_score': 7394.633, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V87394633.jpg'}, {'end': 7757.073, 'src': 'embed', 'start': 7577.964, 'weight': 0, 'content': [{'end': 7597.337, 'text': 'so here we say if the condition is turn greater than 7, alert, game over, ok, we can say game over.', 'start': 7577.964, 'duration': 19.373}, {'end': 7601.641, 'text': 'else we can say a time, ok.', 'start': 7597.337, 'duration': 4.304}, {'end': 7613.591, 'text': 'well, after that we are saying winner, function is winner.', 'start': 7601.641, 'duration': 11.95}, {'end': 7627.98, 'text': 'now what we will check is we will check const winning sequences, winning sequences and here, sorry,', 'start': 7613.591, 'duration': 14.389}, {'end': 7633.301, 'text': 'here we are having this array and having the different conditions associated.', 'start': 7627.98, 'duration': 5.321}, {'end': 7636.702, 'text': 'we say 0, 1, 2, probability.', 'start': 7633.301, 'duration': 3.401}, {'end': 7679.538, 'text': 'we are checking it and then I just copy well, we are saying 012 and here we are saying 3, 4, 5, 6, 7, 8 and 036, again 0, 3, 6 and once again 147, 7,', 'start': 7636.702, 'duration': 42.836}, {'end': 7687.242, 'text': 'and next we have a call 258, 8.', 'start': 7679.538, 'duration': 7.704}, {'end': 7695.527, 'text': 'then we are checking the vertical 048, 8.', 'start': 7687.242, 'duration': 8.285}, {'end': 7702.25, 'text': 'and one more last option we will put is called 246, 6.', 'start': 7695.527, 'duration': 6.723}, {'end': 7704.351, 'text': 'so these conditions, we are adding it.', 'start': 7702.25, 'duration': 2.101}, {'end': 7724.612, 'text': 'now. after this array we can say winning sequences, dot for each and given a name called winning combos, winning combos,', 'start': 7704.351, 'duration': 20.261}, {'end': 7734.095, 'text': 'and inside this winning combos we are given let cell1 equal to winning combos, position 0.', 'start': 7724.612, 'duration': 9.483}, {'end': 7753.37, 'text': 'then that copy and paste three times cell two, cell three, and here we get the value called what one, two, three values.', 'start': 7734.095, 'duration': 19.275}, {'end': 7757.073, 'text': 'we are giving it and after that we are checking the condition.', 'start': 7753.37, 'duration': 3.703}], 'summary': 'Analyzing winning sequences for game condition check.', 'duration': 179.109, 'max_score': 7577.964, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V87577964.jpg'}, {'end': 8340.812, 'src': 'embed', 'start': 8284.758, 'weight': 2, 'content': [{'end': 8286.739, 'text': "that's the benefit of this backtick.", 'start': 8284.758, 'duration': 1.981}, {'end': 8304.612, 'text': 'and here we say in our innerHTML span class equal to name hyphen, hyphen style, close this.', 'start': 8286.739, 'duration': 17.873}, {'end': 8313.118, 'text': 'and here we want to use the statement now this value.', 'start': 8304.612, 'duration': 8.506}, {'end': 8315.54, 'text': 'we want to write it with name attribute.', 'start': 8313.118, 'duration': 2.422}, {'end': 8316.52, 'text': 'so it is getting closed.', 'start': 8315.54, 'duration': 0.98}, {'end': 8328.503, 'text': 'and here we are saying dollar with this player x.name.', 'start': 8316.52, 'duration': 11.983}, {'end': 8332.406, 'text': 'and then close the span tag.', 'start': 8328.503, 'duration': 3.903}, {'end': 8340.812, 'text': 'and we say u r up like this.', 'start': 8332.406, 'duration': 8.406}], 'summary': "Using backticks for html generation, accessing player name with innerhtml, and appending 'u r up'.", 'duration': 56.054, 'max_score': 8284.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V88284758.jpg'}], 'start': 6906.024, 'title': 'Tic-tac-toe game development', 'summary': 'Covers resizing the game board, javascript conditions and variables, creating game logic, and developing event listeners for a tic-tac-toe application.', 'chapters': [{'end': 7236.336, 'start': 6906.024, 'title': 'Tic-tac-toe board resizing and function creation', 'summary': 'Covers the addition of functions for returning the current player, resizing the square upon browser event, and building the game board in a tic-tac-toe application.', 'duration': 330.312, 'highlights': ['The chapter covers the addition of functions for returning the current player, resizing the square upon browser event, and building the game board in a tic-tac-toe application. It includes adding a function to return the current player, resizing the square when the browser is resized, and building the game board.', 'The square size of the tic-tac-toe board should automatically increase when the browser is resized. The square size of the tic-tac-toe board should automatically increase when the browser is resized.', "A function called 'on resize' is added to handle the resizing of the tic-tac-toe board squares. A function called 'on resize' is added to handle the resizing of the tic-tac-toe board squares.", "The 'build board' function is introduced to create the game board, and a 'reset container' is used to remove a hidden class. The 'build board' function is introduced to create the game board, and a 'reset container' is used to remove a hidden class.", "A 'sell click event' function is mentioned for allowing players to make moves, and a function 'make move' is referenced. A 'sell click event' function is mentioned for allowing players to make moves, and a function 'make move' is referenced."]}, {'end': 7507.865, 'start': 7236.336, 'title': 'Javascript condition and variable usage', 'summary': 'Explores javascript conditions and variable usage, including reading values, using query selector, setting innerhtml, console log, and setting text content for game board.', 'duration': 271.529, 'highlights': ["The chapter covers reading values from event.current target's first element child's data set id and using it to add token.", 'Demonstrates usage of query selector and back ticks to take values and set innerHTML for a cell to add token.', 'Explains the use of console log and setting text content for game board based on conditions and current player.']}, {'end': 8100.776, 'start': 7507.865, 'title': 'Creating tic tac toe game logic', 'summary': 'Covers the process of creating the logic for a tic tac toe game, including the functions to check for a winner and tie, as well as the conditions and sequences for winning the game.', 'duration': 592.911, 'highlights': ['The chapter covers the process of creating the logic for a Tic Tac Toe game It includes functions to check for a winner and tie, as well as the conditions and sequences for winning the game.', 'Checking if the game is a tie A function is implemented to check if the game is a tie, with a condition that the turn is greater than 7.', 'Defining winning sequences and associated conditions Various winning sequences and their associated conditions are defined, including horizontal, vertical, and diagonal sequences.', 'Implementing logic to determine the winner The logic for determining the winner is implemented, involving checking the game board for specific winning combinations and updating the UI accordingly.']}, {'end': 8459.577, 'start': 8100.776, 'title': 'Javascript functions and conditions', 'summary': 'Discusses the development of javascript functions for checking the winner, updating the board header names, and resetting the game board.', 'duration': 358.801, 'highlights': ['Developing a JavaScript function to check if the player is a winner or not, and updating the board header names based on the winner condition.', 'Creating a function to reset the game board by logging a message and utilizing the game board.', "Demonstrating the use of 'querySelector' to select specific elements and updating their innerHTML with conditional statements."]}, {'end': 8808.565, 'start': 8459.577, 'title': 'Creating game board and event listeners', 'summary': 'Discusses creating a game board with specific conditions, setting initial values for turn and winner, defining event listeners for cell clicks, and creating functions to add and remove cell click listeners for the game board.', 'duration': 348.988, 'highlights': ['The chapter starts by discussing the usage of the same game board conditions and creating a game board with specific conditions, emphasizing the reuse of existing conditions for consistency.', 'The definition of initial values for turn and winner is explained, with turn being set to 0 and winner being set to false, establishing the starting state of the game.', "Event listeners for cell clicks are defined using the 'addCellClickListener' function, enabling the detection of player moves on the game board for interactivity and gameplay.", "The 'removeCellClickListener' function is introduced, outlining the process of removing cell click event listeners for the game board, ensuring proper management of user interactions."]}], 'duration': 1902.541, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V86906024.jpg', 'highlights': ['The chapter covers the process of creating the logic for a Tic Tac Toe game It includes functions to check for a winner and tie, as well as the conditions and sequences for winning the game.', 'Developing a JavaScript function to check if the player is a winner or not, and updating the board header names based on the winner condition.', "Event listeners for cell clicks are defined using the 'addCellClickListener' function, enabling the detection of player moves on the game board for interactivity and gameplay.", "The chapter covers reading values from event.current target's first element child's data set id and using it to add token.", 'The definition of initial values for turn and winner is explained, with turn being set to 0 and winner being set to false, establishing the starting state of the game.']}, {'end': 10121.865, 'segs': [{'end': 9245.879, 'src': 'embed', 'start': 9182.919, 'weight': 3, 'content': [{'end': 9188.08, 'text': '4 pixels, 8 pixels.', 'start': 9182.919, 'duration': 5.161}, {'end': 9190.961, 'text': 'now margin.', 'start': 9188.08, 'duration': 2.881}, {'end': 9197.343, 'text': 'we are saying 0, 0, 10 pixels, ok.', 'start': 9190.961, 'duration': 6.382}, {'end': 9199.103, 'text': 'and finally 4 pixels.', 'start': 9197.343, 'duration': 1.76}, {'end': 9210.211, 'text': 'after smarging we say font size 18px, okay.', 'start': 9201.607, 'duration': 8.604}, {'end': 9212.452, 'text': 'so that is your input field.', 'start': 9210.211, 'duration': 2.241}, {'end': 9215.093, 'text': 'next, we are talking about something called input field.', 'start': 9212.452, 'duration': 2.641}, {'end': 9222.236, 'text': 'focus, input, hyphen field.', 'start': 9215.093, 'duration': 7.143}, {'end': 9226.858, 'text': 'okay, colon focus.', 'start': 9222.236, 'duration': 4.622}, {'end': 9242.838, 'text': 'now here border 2px solid, red or any other color which you want to use it.', 'start': 9226.858, 'duration': 15.98}, {'end': 9245.879, 'text': 'next, how you want your submit button to be.', 'start': 9242.838, 'duration': 3.041}], 'summary': 'Setting 4px margin, 10px padding, 18px font size, and 2px border for input field and discussing submit button style.', 'duration': 62.96, 'max_score': 9182.919, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V89182919.jpg'}, {'end': 9503.564, 'src': 'embed', 'start': 9459.216, 'weight': 0, 'content': [{'end': 9463.619, 'text': 'okay. so these are the properties initially we have taken.', 'start': 9459.216, 'duration': 4.403}, {'end': 9467.762, 'text': "okay. so after this turn let's go and start the another classes.", 'start': 9463.619, 'duration': 4.143}, {'end': 9488.612, 'text': "here i'm saying dot name, hyphen, hyphen style, and here we are saying color red and then font size 22 pixels.", 'start': 9467.762, 'duration': 20.85}, {'end': 9492.656, 'text': 'well, now, coming back to the another properties.', 'start': 9488.612, 'duration': 4.044}, {'end': 9503.564, 'text': "now we're talking about the next important called border container, called board container, dot boat container.", 'start': 9492.656, 'duration': 10.908}], 'summary': 'Initial properties taken, classes started, styles applied, border container discussed.', 'duration': 44.348, 'max_score': 9459.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V89459216.jpg'}, {'end': 9680.198, 'src': 'embed', 'start': 9558.353, 'weight': 4, 'content': [{'end': 9563.075, 'text': 'If you remember this, walkshed is one of the very, very easy 3 popular property.', 'start': 9558.353, 'duration': 4.722}, {'end': 9577.48, 'text': 'Here we define 3 pixels 3 pixels, 3 pixels, 0 pixels And RGB we can talk about called black.', 'start': 9563.075, 'duration': 14.405}, {'end': 9591.14, 'text': 'Ok, so my border color will be shading, color will be black.', 'start': 9577.48, 'duration': 13.66}, {'end': 9601.846, 'text': 'after that we are offering this board cell dot.', 'start': 9591.14, 'duration': 10.706}, {'end': 9612.413, 'text': 'now, in this board cell we are defining width.', 'start': 9601.846, 'duration': 10.567}, {'end': 9626.938, 'text': 'now, in this width we are using calculation c, a, l, c, and in this calculation we are defining hundred percent.', 'start': 9612.413, 'duration': 14.525}, {'end': 9631.54, 'text': 'okay, divided by three, this calculation.', 'start': 9626.938, 'duration': 4.602}, {'end': 9636.923, 'text': 'after this the next property will be display.', 'start': 9631.54, 'duration': 5.383}, {'end': 9640.344, 'text': 'display will be inline block.', 'start': 9636.923, 'duration': 3.421}, {'end': 9642.685, 'text': 'next, font size.', 'start': 9640.344, 'duration': 2.341}, {'end': 9647.108, 'text': "we're taking 40 pixels.", 'start': 9642.685, 'duration': 4.423}, {'end': 9656.432, 'text': 'well, text align center border.', 'start': 9647.108, 'duration': 9.324}, {'end': 9680.198, 'text': 'we are taking two pixels solid and black, adding 20 pixels vertical align top.', 'start': 9656.432, 'duration': 23.766}], 'summary': 'Defining board cell with 3 pixels, 40px font size, and 20px vertical align.', 'duration': 121.845, 'max_score': 9558.353, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V89558353.jpg'}, {'end': 9913.091, 'src': 'heatmap', 'start': 9746.657, 'weight': 5, 'content': [{'end': 9751.621, 'text': 'now, in this letter we just give the color combination, so color will be white.', 'start': 9746.657, 'duration': 4.964}, {'end': 9769.491, 'text': 'next position relative top 50%.', 'start': 9755.225, 'duration': 14.266}, {'end': 9784.542, 'text': 'next transform translateY to minus 50%.', 'start': 9769.491, 'duration': 15.051}, {'end': 9795.948, 'text': 'after that font family we are making it once again permanent marker.', 'start': 9784.542, 'duration': 11.406}, {'end': 9802.972, 'text': 'let me copy.', 'start': 9795.948, 'duration': 7.024}, {'end': 9808.536, 'text': 'ok, now here, next option will be called winner container.', 'start': 9802.972, 'duration': 5.564}, {'end': 9823.212, 'text': 'here we are giving winner with dot, dot, winner, hyphen container.', 'start': 9808.536, 'duration': 14.676}, {'end': 9826.033, 'text': 'okay, so for this winner container, what are the values?', 'start': 9823.212, 'duration': 2.821}, {'end': 9829.555, 'text': "we want to use it, that's you want to basically do it.", 'start': 9826.033, 'duration': 3.522}, {'end': 9855.221, 'text': 'so for this winner container, what i would rather suggest is you can use dot, reset text-align center margin 20px.', 'start': 9829.555, 'duration': 25.666}, {'end': 9866.464, 'text': 'that is for reset, and now reset hidden.', 'start': 9855.221, 'duration': 11.243}, {'end': 9874.966, 'text': 'inside this reset hidden, we will say display none, display none.', 'start': 9866.464, 'duration': 8.502}, {'end': 9882.413, 'text': "okay. after this, the replay button, it's yeah.", 'start': 9876.59, 'duration': 5.823}, {'end': 9884.053, 'text': "now we're going to talk about replay button.", 'start': 9882.413, 'duration': 1.64}, {'end': 9888.796, 'text': 'dot, replay, hyphen, bta.', 'start': 9884.053, 'duration': 4.743}, {'end': 9913.091, 'text': 'and here width, we make it to 25 percent, okay, and followed by padding 10 pixels, we take it from here and 20 pixels border.', 'start': 9888.796, 'duration': 24.295}], 'summary': 'Design elements specified for winner container and replay button.', 'duration': 76.555, 'max_score': 9746.657, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V89746657.jpg'}], 'start': 8808.565, 'title': 'Css integration and styling', 'summary': 'Covers integrating javascript code, preparing for css, defining css class properties, and detailing css styling and properties, with a focus on specific attributes, values, and functionalities. it includes creating app.css file, body, div.relative, hide-container, header, input field, submit-btn, dot bold, player hyphen, name hyphen style, board container, font size, border properties, color combinations, and specific dimensions.', 'chapters': [{'end': 8875.375, 'start': 8808.565, 'title': 'Javascript code integration and preparing for css', 'summary': 'Covers the integration of javascript code and preparation for css, including creating an app.css file and preparing for basic functionalities in the html file.', 'duration': 66.81, 'highlights': ['The chapter covers the integration of JavaScript code and preparation for CSS, including creating an app.css file and preparing for basic functionalities in the HTML file.', 'Creating a separate app.css file for styling, which can be placed in a static folder or kept outside.', 'Transitioning from JavaScript code to preparing for basic functionalities in the HTML file.']}, {'end': 9612.413, 'start': 8876.356, 'title': 'Css class properties and definitions', 'summary': 'Covers the properties and definitions of various css classes such as body, div.relative, hide-container, header, input field, submit-btn, dot bold, player hyphen, name hyphen style, and board container, detailing their specific attributes and values.', 'duration': 736.057, 'highlights': ['The body class properties are defined including background color, height, background position, background repeat, and background size, with the height set to 800 pixels. The properties of the body class are detailed, specifying background color, height (set to 800 pixels), background position (center), background repeat (no repeat), and background size (cover).', 'The input field class attributes include border, outline, padding, margin, and font size, with the border set to 2px solid black and the font size set to 18px. The attributes of the input field class are elaborated, setting the border to 2px solid black, outline to none, padding to 4px 8px, margin to 0 0 10px 4px, and font size to 18px.', 'The submit-btn class properties involve border, padding, font size, width, border radius, margin, and background color, with the font size set to 80 pixels and the width set to 250 pixels. The properties of the submit-btn class are outlined, specifying border, padding, font size (set to 80 pixels), width (set to 250 pixels), border radius, margin, and background color.']}, {'end': 10121.865, 'start': 9612.413, 'title': 'Css styling and properties', 'summary': 'Covers the css styling and properties used, including font size, border properties, color combinations, and specific dimensions, with a focus on creating a winner container and a replay button.', 'duration': 509.452, 'highlights': ['The winner container is styled with a white color background and a 20px margin, with the reset hidden element set to display none.', 'The replay button is defined with a 25% width, 10px padding, and a 2px solid black border with a 5px border radius.', 'Styling for the congratulations class includes a font size of 24 pixels and specific dimensions for the winner class, such as font size, height, line height, and margin.']}], 'duration': 1313.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V88808565.jpg', 'highlights': ['Covers integrating javascript code and preparing for CSS, including creating an app.css file and preparing for basic functionalities in the HTML file.', 'Creating a separate app.css file for styling, which can be placed in a static folder or kept outside.', 'Transitioning from JavaScript code to preparing for basic functionalities in the HTML file.', 'The body class properties are defined including background color, height, background position, background repeat, and background size, with the height set to 800 pixels.', 'The input field class attributes include border, outline, padding, margin, and font size, with the border set to 2px solid black and the font size set to 18px.', 'The submit-btn class properties involve border, padding, font size, width, border radius, margin, and background color, with the font size set to 80 pixels and the width set to 250 pixels.', 'The winner container is styled with a white color background and a 20px margin, with the reset hidden element set to display none.', 'The replay button is defined with a 25% width, 10px padding, and a 2px solid black border with a 5px border radius.', 'Styling for the congratulations class includes a font size of 24 pixels and specific dimensions for the winner class, such as font size, height, line height, and margin.']}, {'end': 10751.595, 'segs': [{'end': 10196.752, 'src': 'embed', 'start': 10121.865, 'weight': 3, 'content': [{'end': 10135.414, 'text': 'so last but not least, we would like to use this dot replay hyphen btn.', 'start': 10121.865, 'duration': 13.549}, {'end': 10143.591, 'text': "this i'm saying width 50 percent, 50.", 'start': 10135.414, 'duration': 8.177}, {'end': 10147.073, 'text': 'so this is what my CSS file is all set.', 'start': 10143.591, 'duration': 3.482}, {'end': 10151.736, 'text': 'I know it was pretty lengthy, but it is required for this particular application.', 'start': 10147.073, 'duration': 4.663}, {'end': 10152.277, 'text': 'okay, everyone.', 'start': 10151.736, 'duration': 0.541}, {'end': 10153.918, 'text': 'so we are all ready with our CSS.', 'start': 10152.277, 'duration': 1.641}, {'end': 10160.302, 'text': "also, now it's time to go back to our index.html file and take care about the final finishing touch.", 'start': 10153.918, 'duration': 6.384}, {'end': 10171.099, 'text': 'so we have this index.html file with us and now the CSS class which we were using it in our application that is known as called this permanent marker.', 'start': 10160.302, 'duration': 10.797}, {'end': 10177.083, 'text': 'this class is not by default available, so we have to include this using this external API.', 'start': 10171.099, 'duration': 5.984}, {'end': 10189.729, 'text': 'so here, where we have a call CSS with us before that, we want link.', 'start': 10177.083, 'duration': 12.646}, {'end': 10196.752, 'text': 'so within this link we want our variable name call href equal to now.', 'start': 10189.729, 'duration': 7.023}], 'summary': "Preparing css for index.html file, using external api for 'permanent marker' class.", 'duration': 74.887, 'max_score': 10121.865, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V810121865.jpg'}, {'end': 10330.927, 'src': 'embed', 'start': 10287.216, 'weight': 0, 'content': [{'end': 10301.66, 'text': 'so here in my head tag only, I would like to include script SRC equal to app.js.', 'start': 10287.216, 'duration': 14.444}, {'end': 10304.161, 'text': 'so here my script is actually loaded now.', 'start': 10301.66, 'duration': 2.501}, {'end': 10322.843, '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': 10305.074, 'duration': 17.769}, {'end': 10324.363, 'text': 'nothing else has started.', 'start': 10322.843, 'duration': 1.52}, {'end': 10330.927, 'text': 'when we talk about call start game, okay, so it needs to start because there is no CSS class are attached.', 'start': 10324.363, 'duration': 6.564}], 'summary': "In the head tag, the script 'app.js' is successfully loaded, but the 'index.html' file appears basic with no css class attached.", 'duration': 43.711, 'max_score': 10287.216, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V810287216.jpg'}], 'start': 10121.865, 'title': 'Game development', 'summary': 'Covers setting up css classes, including external css and javascript files, and developing a snake game with html5 canvas. it provides guidance on basic functionality, speed settings, and dynamic css for successful game functioning.', 'chapters': [{'end': 10467.807, 'start': 10121.865, 'title': 'Setting up css and javascript', 'summary': 'Covers setting up css classes and including external css and javascript files in the index.html file, with a focus on applying multiple css classes and verifying the final outcome of the code, resulting in successful functioning of the tic-tac-toe game with dynamic css based on certain conditions.', 'duration': 345.942, 'highlights': ['The chapter covers setting up CSS classes and including external CSS and JavaScript files in the index.html file Key point of the chapter', 'Applying multiple CSS classes and verifying the final outcome of the code Emphasizes the importance of applying multiple CSS classes for the final outcome', 'Successful functioning of the tic-tac-toe game with dynamic CSS based on certain conditions Highlights the successful functioning of the tic-tac-toe game with dynamic CSS based on certain conditions']}, {'end': 10751.595, 'start': 10468.347, 'title': 'Snake game development', 'summary': 'Covers the development of a snake game using css, javascript, and html, where the author provides guidance on creating the necessary files and implementing basic functionality such as setting speed and start button for the game, utilizing html5 canvas, and creating a relative class for future css styling.', 'duration': 283.248, 'highlights': ['The author guides the creation of a snake game using CSS, JavaScript, and HTML, including the creation of necessary files such as index.html and app.js, as well as the utilization of the HTML5 canvas feature for game development.', 'Basic functionality like setting speed and start button for the game is implemented using input types and specific attribute values like speed, ID, and limits, with a minimum value of one and a maximum value of nine, ensuring user restrictions.', 'The usage of a relative class is introduced for future CSS styling, providing flexibility for applying style to the div tag and allowing for potential design enhancements in the game interface.']}], 'duration': 629.73, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V810121865.jpg', 'highlights': ['The author guides the creation of a snake game using CSS, JavaScript, and HTML, including the creation of necessary files such as index.html and app.js, as well as the utilization of the HTML5 canvas feature for game development.', 'Covers setting up CSS classes and including external CSS and JavaScript files in the index.html file Key point of the chapter', 'Applying multiple CSS classes and verifying the final outcome of the code Emphasizes the importance of applying multiple CSS classes for the final outcome', 'Basic functionality like setting speed and start button for the game is implemented using input types and specific attribute values like speed, ID, and limits, with a minimum value of one and a maximum value of nine, ensuring user restrictions.', 'Successful functioning of the tic-tac-toe game with dynamic CSS based on certain conditions Highlights the successful functioning of the tic-tac-toe game with dynamic CSS based on certain conditions', 'The usage of a relative class is introduced for future CSS styling, providing flexibility for applying style to the div tag and allowing for potential design enhancements in the game interface.']}, {'end': 11337.632, 'segs': [{'end': 10831.471, 'src': 'embed', 'start': 10789.242, 'weight': 1, 'content': [{'end': 10795.707, 'text': 'start is the button which is not doing anything, but later on we can allow some logic inside this.', 'start': 10789.242, 'duration': 6.465}, {'end': 10806.374, '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': 10795.707, 'duration': 10.667}, {'end': 10807.655, 'text': 'which i want to initialize it.', 'start': 10806.374, 'duration': 1.281}, {'end': 10816.42, 'text': 'so we are saying var game start equal to none.', 'start': 10807.655, 'duration': 8.765}, {'end': 10824.866, 'text': 'initialized second game speed equal to none.', 'start': 10816.42, 'duration': 8.446}, {'end': 10831.471, 'text': 'next game area equal to none.', 'start': 10824.866, 'duration': 6.605}], 'summary': 'Initializing variables: game start, game speed, and game area to none.', 'duration': 42.229, 'max_score': 10789.242, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V810789242.jpg'}, {'end': 10962.152, 'src': 'embed', 'start': 10916.514, 'weight': 2, 'content': [{'end': 10921.796, 'text': 'Next we have our timer equal to null.', 'start': 10916.514, 'duration': 5.282}, {'end': 10927.277, 'text': "So these number of properties we've initialized.", 'start': 10924.296, 'duration': 2.981}, {'end': 10940.505, 'text': 'okay, now, after that we will be writing a function by saying function name is called initialize, okay,', 'start': 10929.542, 'duration': 10.963}, {'end': 10945.287, 'text': 'and here in initialized we would like to use some of the properties.', 'start': 10940.505, 'duration': 4.782}, {'end': 10955.75, 'text': 'first we are saying game start equal to document dot, get element by id.', 'start': 10945.287, 'duration': 10.463}, {'end': 10962.152, 'text': 'here i can give the value called hash game start.', 'start': 10955.75, 'duration': 6.402}], 'summary': 'Initializing properties and writing a function to set game start value.', 'duration': 45.638, 'max_score': 10916.514, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V810916514.jpg'}, {'end': 11225.918, 'src': 'embed', 'start': 11191.39, 'weight': 0, 'content': [{'end': 11200.66, 'text': 'so we are saying snake direction equal to right in the right direction.', 'start': 11191.39, 'duration': 9.27}, {'end': 11205.506, 'text': 'then speed size value, also the variable which you define.', 'start': 11200.66, 'duration': 4.846}, {'end': 11211.71, 'text': 'so speed size equal to, because it will be accepting the value from the text boxes or from the drop down.', 'start': 11205.506, 'duration': 6.204}, {'end': 11213.611, 'text': 'so it certainly will be string type.', 'start': 11211.71, 'duration': 1.901}, {'end': 11216.372, 'text': 'so we have to use percent.', 'start': 11213.611, 'duration': 2.761}, {'end': 11218.674, 'text': "so we're using this option called percent.", 'start': 11216.372, 'duration': 2.302}, {'end': 11225.918, 'text': 'and here we are using game speed dot value.', 'start': 11218.674, 'duration': 7.244}], 'summary': 'Setting snake direction to right and defining speed size as a string value from user input.', 'duration': 34.528, 'max_score': 11191.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V811191390.jpg'}], 'start': 10751.615, 'title': 'Game initialization in javascript', 'summary': 'Covers initializing game properties and logic in javascript, including setting game start, speed, and area dimensions, as well as initializing player score, snake movement, and speed size value with a range of 1 to 9.', 'chapters': [{'end': 11110.386, 'start': 10751.615, 'title': 'Initializing game properties in javascript', 'summary': 'Discusses initializing various properties for a game in javascript, including setting game start, game speed, game area dimensions, and other attributes, emphasizing the importance of positioning the script tag at the bottom of the body tag for good practice.', 'duration': 358.771, 'highlights': ['Positioning script tag at the bottom of the body tag is a good practice Emphasizes the importance of keeping the script tag at the bottom of the body tag for good practice', 'Initializing game properties in JavaScript Discusses initializing various properties for the game, including game start, game speed, game area dimensions, cell width, play score, snake attributes, and timer', 'Setting game area dimensions to 400 width and 600 height Defines the game area width as 400 and the game area height as 600', 'Initializing cell width to 20 Initializes the cell width of the game area to 20']}, {'end': 11337.632, 'start': 11112.267, 'title': 'Game logic initialization and start', 'summary': 'Discusses the initialization of game values and the start of game logic, including the definition of initial player score, snake movement direction, and speed size value, with a condition for setting speed size within the range of 1 to 9.', 'duration': 225.365, 'highlights': ['The chapter discusses the initialization of game values and the start of game logic, including the definition of initial player score, snake movement direction, and speed size value, with a condition for setting speed size within the range of 1 to 9.', 'The initial score for the player is set to zero, and the snake direction is initialized to move in the right direction. Additionally, the speed size value is defined, with the condition for setting it within the range of 1 to 9.']}], 'duration': 586.017, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V810751615.jpg', 'highlights': ['Emphasizes the importance of keeping the script tag at the bottom of the body tag for good practice', 'Defines the game area width as 400 and the game area height as 600', 'Initializes the cell width of the game area to 20', 'Discusses initializing various properties for the game, including game start, game speed, game area dimensions, cell width, play score, snake attributes, and timer', 'The chapter discusses the initialization of game values and the start of game logic, including the definition of initial player score, snake movement direction, and speed size value, with a condition for setting speed size within the range of 1 to 9.', 'The initial score for the player is set to zero, and the snake direction is initialized to move in the right direction. Additionally, the speed size value is defined, with the condition for setting it within the range of 1 to 9.']}, {'end': 13455.734, 'segs': [{'end': 11423.342, 'src': 'embed', 'start': 11398.273, 'weight': 1, 'content': [{'end': 11407.597, 'text': "okay, so here we're saying create food, so create food will be the function for me.", 'start': 11398.273, 'duration': 9.324}, {'end': 11413.219, 'text': 'now you might be thinking where this function is, but this function will be declared soon within your application.', 'start': 11407.597, 'duration': 5.622}, {'end': 11423.342, 'text': 'but here first we are saying the function called clear interval, clear interval with the timer.', 'start': 11413.219, 'duration': 10.123}], 'summary': "Creating a function called 'create food' for an application, with a mention of 'clear interval' function", 'duration': 25.069, 'max_score': 11398.273, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V811398273.jpg'}, {'end': 11810.252, 'src': 'embed', 'start': 11758.873, 'weight': 0, 'content': [{'end': 11769.351, 'text': 'now here we are starting gain area context, dot fill style that you know it very well.', 'start': 11758.873, 'duration': 10.478}, {'end': 11773.033, 'text': 'it is a property fill style equal to which color.', 'start': 11769.351, 'duration': 3.682}, {'end': 11774.854, 'text': 'you want to fill this up.', 'start': 11773.033, 'duration': 1.821}, {'end': 11783.538, 'text': "so i'm saying hash white color okay.", 'start': 11774.854, 'duration': 8.684}, {'end': 11797.145, 'text': 'and then we are using this game area context again dot fill, react, fill, react.', 'start': 11783.538, 'duration': 13.607}, {'end': 11798.886, 'text': 'now keep the position values.', 'start': 11797.145, 'duration': 1.741}, {'end': 11810.252, 'text': 'i am saying 0, comma, 0, comma game area width, game area width.', 'start': 11798.886, 'duration': 11.366}], 'summary': 'Setting fill style to white color and defining position values for game area.', 'duration': 51.379, 'max_score': 11758.873, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V811758873.jpg'}, {'end': 12095.1, 'src': 'embed', 'start': 12058.636, 'weight': 4, 'content': [{'end': 12061.457, 'text': 'yeah, we will take the another condition here, call.', 'start': 12058.636, 'duration': 2.821}, {'end': 12070.84, 'text': 'we will have another function called control, which we have created it sometime back and inside this control.', 'start': 12061.457, 'duration': 9.383}, {'end': 12072.34, 'text': 'it will take some parameters.', 'start': 12070.84, 'duration': 1.5}, {'end': 12084.512, 'text': 'so what those parameters we can pass here we can say snake x comma, snake y, comma.', 'start': 12072.34, 'duration': 12.172}, {'end': 12088.495, 'text': 'third parameter will be snake.', 'start': 12084.512, 'duration': 3.983}, {'end': 12095.1, 'text': 'so this would be my another function.', 'start': 12088.495, 'duration': 6.605}], 'summary': "Creating a new function 'control' with parameters snake_x, snake_y, and snake.", 'duration': 36.464, 'max_score': 12058.636, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V812058636.jpg'}, {'end': 12964.154, 'src': 'embed', 'start': 12932.553, 'weight': 2, 'content': [{'end': 12936.896, 'text': 'Finally we would like to see how it may look if I try to use in my browser.', 'start': 12932.553, 'duration': 4.343}, {'end': 12937.996, 'text': 'Let me try to refresh.', 'start': 12936.936, 'duration': 1.06}, {'end': 12946.001, 'text': 'Okay, I really do not see any changes in my code.', 'start': 12942.299, 'duration': 3.702}, {'end': 12952.505, 'text': "Okay, despite I'm having this because the CSS content is actually missing.", 'start': 12947.222, 'duration': 5.283}, {'end': 12964.154, 'text': "Okay Because then only my code will look better because if there is no CSS, it wouldn't really make good towards my application.", 'start': 12954.088, 'duration': 10.066}], 'summary': "The speaker attempted to use the code in a browser, but without css, it didn't improve the application.", 'duration': 31.601, 'max_score': 12932.553, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V812932553.jpg'}, {'end': 13063.166, 'src': 'embed', 'start': 13011.61, 'weight': 3, 'content': [{'end': 13020.312, 'text': 'okay, now here in my CSS we want to offer certain details, what those details I want to start working with.', 'start': 13011.61, 'duration': 8.702}, {'end': 13025.313, 'text': 'I will start with my body part, body.', 'start': 13020.312, 'duration': 5.001}, {'end': 13030.174, 'text': 'so we want to offer the font family.', 'start': 13025.313, 'duration': 4.861}, {'end': 13035.132, 'text': 'so font family, maybe little bit later on I can use it.', 'start': 13030.174, 'duration': 4.958}, {'end': 13054.584, 'text': 'first I want to use margin margin 20px, auto, later text align center.', 'start': 13035.132, 'duration': 19.452}, {'end': 13063.166, 'text': 'next font size, font size 150px, also 150%.', 'start': 13054.584, 'duration': 8.582}], 'summary': 'Css styles include font family, margin, text align, and font size of 150px.', 'duration': 51.556, 'max_score': 13011.61, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V813011610.jpg'}], 'start': 11337.632, 'title': 'Creating snake game logic and functions for game development using javascript and css', 'summary': "Explains the logic for creating a snake game, including defining functions for moving the snake, creating food, and setting intervals for game updates. it also discusses the creation of multiple functions for game development, covering 'create food', 'create game area', 'write score', 'create square', and 'change direction', along with the use of javascript for game development, setting up the game area, creating squares, and changing directions for game elements, as well as implementing css in a browser for a game application.", 'chapters': [{'end': 11616.589, 'start': 11337.632, 'title': 'Creating snake game logic', 'summary': 'Explains the logic for creating a snake game, including defining functions for moving the snake, creating food, and setting intervals for game updates.', 'duration': 278.957, 'highlights': ['Defining the function for creating food with logic to generate random coordinates within the game area dimensions The function createFood is defined with logic to generate random coordinates for x and y within the game area dimensions, using math.random and game area width/height, and cell width.', 'Defining the clear interval function to handle logic and setting intervals for game updates Clear interval function is defined to handle logic and setting intervals for game updates, allowing the creation of game intervals using set interval and creating food function.', 'Explanation of pushing snake movement and usage of game area dimensions Explanation of pushing snake movement by using game area dimensions and cell width, ensuring the snake moves within the width of the application.']}, {'end': 12095.1, 'start': 11618.84, 'title': 'Creating functions for game development', 'summary': "Discusses the creation of multiple functions for game development, including 'create food', 'create game area', 'write score', 'create square', and 'change direction', along with the logic for the snake's movement in different directions.", 'duration': 476.26, 'highlights': ["Creation of multiple functions for game development, including 'create food', 'create game area', 'write score', 'create square', and 'change direction' The chapter focuses on creating multiple functions for game development, covering various aspects such as creating game elements, writing scores, and changing direction.", "Logic for the snake's movement in different directions The transcript explains the logic for the snake's movement in different directions, including left, right, up, and down, with specific increment and decrement operations for each direction.", 'Defining the locations and properties for the game area The chapter details the process of defining locations and properties for the game area, including the x and y directions, and filling the game area with specific colors.']}, {'end': 12527.732, 'start': 12095.1, 'title': 'Snake game logic', 'summary': 'Explains the logic for creating a snake game, including the conditions for scoring, handling the snake movement, and controlling the game, with a mention of skillup by simplylearn.', 'duration': 432.632, 'highlights': ['The chapter explains the logic for creating a snake game, including the conditions for scoring, handling the snake movement, and controlling the game. It covers the logic for scoring, handling snake movement, and controlling the game.', 'Mention of SkillUp by SimplyLearn for free learning. The mention of SkillUp by SimplyLearn for free learning is included in the transcript.', "Use of 'clear interval' to stop the timer. The use of 'clear interval' to stop the timer is mentioned in the transcript."]}, {'end': 12931.973, 'start': 12527.732, 'title': 'Using javascript for game development', 'summary': 'Covers the use of javascript for game development, including setting up the game area, creating squares, and changing directions for game elements, with specific functions and parameters explained.', 'duration': 404.241, 'highlights': ['The chapter covers the use of JavaScript for game development The transcript discusses the coding process for game development using JavaScript, focusing on functions and parameters for setting up the game area, creating squares, and changing directions.', 'Setting up the game area using JavaScript The transcript provides code details for setting up the game area context, including specifying the font, colors, and location for writing the game score, with specific pixel measurements and font styles mentioned.', 'Creating squares and specifying their positions The transcript explains the process of creating squares by defining their x and y coordinates, setting the fill style and using the fillText function to specify the positions of the squares within the game area.', "Changing directions for game elements The transcript details the function 'change direction' which takes a parameter 'e' and explains the process of changing directions based on the keys pressed, with specific key codes and direction changes mentioned."]}, {'end': 13455.734, 'start': 12932.553, 'title': 'Implementing css in a browser', 'summary': 'Explains the process of implementing css in a browser, covering the properties used and the development of a game application, adjusting its speed and functionality based on user input.', 'duration': 523.181, 'highlights': ['The process of implementing CSS in a browser is explained, covering the properties used such as font family, margin, background color, size, canvas attributes, and game logic adjustments. It details the properties used in CSS implementation, including font family, margin, background color, size, canvas attributes, and game logic adjustments.', 'The development of a game application is demonstrated, showcasing the adjustment of its speed and functionality based on user input. It showcases the development of a game application and the adjustment of its speed and functionality based on user input.', 'Instructions are given for adding images within the game application and concluding remarks are made about the completion of the video tutorial. It provides instructions for adding images within the game application and concludes with remarks about the completion of the video tutorial.']}], 'duration': 2118.102, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/aWYZUoUo7V8/pics/aWYZUoUo7V811337632.jpg', 'highlights': ["Creation of multiple functions for game development, including 'create food', 'create game area', 'write score', 'create square', and 'change direction'", 'The chapter explains the logic for creating a snake game, including the conditions for scoring, handling the snake movement, and controlling the game. It covers the logic for scoring, handling snake movement, and controlling the game.', 'The chapter covers the use of JavaScript for game development', 'The process of implementing CSS in a browser is explained, covering the properties used such as font family, margin, background color, size, canvas attributes, and game logic adjustments.', 'Defining the function for creating food with logic to generate random coordinates within the game area dimensions The function createFood is defined with logic to generate random coordinates for x and y within the game area dimensions, using math.random and game area width/height, and cell width.']}], 'highlights': ['The chapter covers implementing a simple calculator application using JavaScript.', "The project 'Weather Pro' is introduced as a real-time weather application in JavaScript.", 'The chapter covers the creation of a new app.js file, the logic for the main application, and the initialization of player variables with a focus on a specific input field.', 'Developing a JavaScript function to check if the player is a winner or not, and updating the board header names based on the winner condition.', 'Covers integrating javascript code and preparing for CSS, including creating an app.css file and preparing for basic functionalities in the HTML file.', 'The author guides the creation of a snake game using CSS, JavaScript, and HTML, including the creation of necessary files such as index.html and app.js, as well as the utilization of the HTML5 canvas feature for game development.', 'Emphasizes the importance of keeping the script tag at the bottom of the body tag for good practice', 'Defines the game area width as 400 and the game area height as 600', "Creation of multiple functions for game development, including 'create food', 'create game area', 'write score', 'create square', and 'change direction'", 'The chapter covers the use of JavaScript for game development']}