title
Pure JavaScript Type Writer Effect
description
In this project we will create a little website with a type writer effect using pure vanilla JavaScript. We will also do some CSS (Flexbox, etc)
Sponsor: DevMountain Bootcamp
https://goo.gl/6q0dEa
Carlos Mafla Dev Channel:
https://www.youtube.com/channel/UCnFRgYETwUg6eoeHACuVkcA
💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia
Code:
https://codepen.io/bradtraversy/pen/jeNjwP
Pexels Image:
https://www.pexels.com/photo/city-lit-up-at-night-316902/
Website & Udemy Courses
http://www.traversymedia.com
Follow Traversy Media:
https://www.facebook.com/traversymedia
https://www.twitter.com/traversymedia
https://www.instagram.com/traversymedia
detail
{'title': 'Pure JavaScript Type Writer Effect', 'heatmap': [{'end': 855.037, 'start': 829.951, 'weight': 0.748}, {'end': 1228.612, 'start': 1199.023, 'weight': 1}, {'end': 1578.951, 'start': 1550.162, 'weight': 0.938}, {'end': 2014.355, 'start': 1990.483, 'weight': 0.77}], 'summary': 'Learn to build a typewriter script using vanilla javascript with es6 syntax, constructor function, and prototype method. create html and css for styling, size adjustments, and media queries. implement javascript typewriter functions, dom initialization, and typing animation logic for a comprehensive understanding of typewriter effects.', 'chapters': [{'end': 196.395, 'segs': [{'end': 49.271, 'src': 'embed', 'start': 7.059, 'weight': 0, 'content': [{'end': 8.92, 'text': 'this video is sponsored by devmountain.', 'start': 7.059, 'duration': 1.861}, {'end': 12.983, 'text': "if you're interested in learning web development, ios or ux design,", 'start': 8.92, 'duration': 4.063}, {'end': 18.967, 'text': 'devmountain is a 12-week design and development boot camp intended to get you a full-time position in the industry.', 'start': 12.983, 'duration': 5.984}, {'end': 22.57, 'text': 'to learn more, visit devmountain.com or click the link in the description below.', 'start': 18.967, 'duration': 3.603}, {'end': 24.22, 'text': "Hey, what's going on, guys?", 'start': 23.24, 'duration': 0.98}, {'end': 26.301, 'text': 'So I got a cool little project for you today.', 'start': 24.28, 'duration': 2.021}, {'end': 34.603, 'text': "We're going to be building a typewriter script or at least that's what I'm calling it using just vanilla JavaScript, no jQuery or anything like that.", 'start': 26.361, 'duration': 8.242}, {'end': 39.725, 'text': 'I actually had a request to do something like this a while ago, and I thought it was a good idea.', 'start': 34.623, 'duration': 5.102}, {'end': 49.271, 'text': "all right now we're going to be using es6 syntax, but i'm first going to going to do it with a constructor function and a prototype method,", 'start': 40.305, 'duration': 8.966}], 'summary': 'Devmountain offers 12-week boot camp for web development, ios, and ux design to secure full-time positions in the industry.', 'duration': 42.212, 'max_score': 7.059, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E7059.jpg'}, {'end': 175.183, 'src': 'embed', 'start': 147.723, 'weight': 1, 'content': [{'end': 154.208, 'text': "I'm OK, nothing's going to go in here.", 'start': 147.723, 'duration': 6.485}, {'end': 156.349, 'text': "It's going to be put in through the JavaScript.", 'start': 154.248, 'duration': 2.101}, {'end': 159.031, 'text': 'But we do want to add some data attributes here.', 'start': 156.389, 'duration': 2.642}, {'end': 166.397, 'text': 'OK, so with HTML5, we can add custom attributes as long as we put the word data before them or data dash.', 'start': 159.051, 'duration': 7.346}, {'end': 169.099, 'text': 'And then we can access these within the JavaScript.', 'start': 166.817, 'duration': 2.282}, {'end': 171.56, 'text': 'So the first one is going to be data dash weight.', 'start': 169.219, 'duration': 2.341}, {'end': 175.183, 'text': "And I'm going to set this to 3000.", 'start': 171.58, 'duration': 3.603}], 'summary': 'Using html5 to add data attributes for javascript access, including setting a data-weight of 3000.', 'duration': 27.46, 'max_score': 147.723, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E147723.jpg'}], 'start': 7.059, 'title': 'Building typewriter script with vanilla javascript', 'summary': 'Explains how to build a typewriter script using vanilla javascript, including using es6 syntax, constructor function, and prototype method, and converting it into an es6 class, with a demonstration of adding custom attributes in html5 for javascript access.', 'chapters': [{'end': 196.395, 'start': 7.059, 'title': 'Building typewriter script with vanilla javascript', 'summary': 'Explains how to build a typewriter script using vanilla javascript, including using es6 syntax, constructor function, and prototype method, and converting it into an es6 class, with a demonstration of adding custom attributes in html5 for javascript access.', 'duration': 189.336, 'highlights': ['The chapter involves building a typewriter script using vanilla JavaScript, with a focus on using ES6 syntax, constructor function, and prototype method, and converting it into an ES6 class.', 'The demonstration includes the process of adding custom attributes in HTML5 with JavaScript access, like setting the data-weight attribute for controlling the pause time after typing a word, set to 3000 milliseconds by default.', 'The video is sponsored by devmountain, a 12-week design and development boot camp aimed at securing a full-time position in the industry for those interested in web development, iOS, or UX design.']}], 'duration': 189.336, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E7059.jpg', 'highlights': ['The chapter involves building a typewriter script using vanilla JavaScript, with a focus on using ES6 syntax, constructor function, and prototype method, and converting it into an ES6 class.', 'The demonstration includes the process of adding custom attributes in HTML5 with JavaScript access, like setting the data-weight attribute for controlling the pause time after typing a word, set to 3000 milliseconds by default.', 'The video is sponsored by devmountain, a 12-week design and development boot camp aimed at securing a full-time position in the industry for those interested in web development, iOS, or UX design.']}, {'end': 480.903, 'segs': [{'end': 247.041, 'src': 'embed', 'start': 218.705, 'weight': 0, 'content': [{'end': 227.132, 'text': "but when we get into the javascript, when we fetch this, we're going to run it through json.parse so that we can use it as an object.", 'start': 218.705, 'duration': 8.427}, {'end': 230.975, 'text': "all right, so we're going to do developer, what else?", 'start': 227.132, 'duration': 3.843}, {'end': 238.121, 'text': 'designer and creator, and feel free to change these up if you want.', 'start': 230.975, 'duration': 7.146}, {'end': 241.973, 'text': 'OK, so that should be it for the span.', 'start': 239.068, 'duration': 2.905}, {'end': 247.041, 'text': 'Next thing we want to do is just a little H2 underneath.', 'start': 243.215, 'duration': 3.826}], 'summary': 'Using json.parse to convert fetched data into an object for developer, designer, and creator roles.', 'duration': 28.336, 'max_score': 218.705, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E218705.jpg'}, {'end': 370.223, 'src': 'embed', 'start': 290.27, 'weight': 1, 'content': [{'end': 297.477, 'text': "It's just a little bit of flex box just to center things and just like, you know, add font font sizes and stuff like that.", 'start': 290.27, 'duration': 7.207}, {'end': 299.179, 'text': 'So pretty simple.', 'start': 298.418, 'duration': 0.761}, {'end': 304.804, 'text': 'I am going to paste in the import because I want to use the railway font from Google Fonts.', 'start': 299.539, 'duration': 5.265}, {'end': 313.192, 'text': "So we just want to do that and then we'll go ahead and do the body and say font family and we want to set that to.", 'start': 304.904, 'duration': 8.288}, {'end': 320.186, 'text': "Railway and let's say San San Serif.", 'start': 315.063, 'duration': 5.123}, {'end': 325.87, 'text': 'So I want the height of the body to be 100 viewport height.', 'start': 321.627, 'duration': 4.243}, {'end': 331.553, 'text': 'So take up the whole thing, no matter how big or small the browser sized for the background.', 'start': 325.95, 'duration': 5.603}, {'end': 335.075, 'text': "You don't have to do the background image.", 'start': 333.314, 'duration': 1.761}, {'end': 340.538, 'text': "I'm actually going to put the color in here of three, three, three, which is almost black, really dark gray.", 'start': 335.215, 'duration': 5.323}, {'end': 342.26, 'text': "And then I'm going to do the URL.", 'start': 340.919, 'duration': 1.341}, {'end': 344.301, 'text': "But you don't have to have the image if you don't want.", 'start': 342.3, 'duration': 2.001}, {'end': 348.204, 'text': "so let's say showcase.jpg, which i already have.", 'start': 344.821, 'duration': 3.383}, {'end': 357.192, 'text': "i'm going to say no, repeat, and let's do center, center on both the x and y axis and let's do cover.", 'start': 348.204, 'duration': 8.988}, {'end': 366.7, 'text': "okay, so it covers the whole background and then for the color, for the text color, i'm going to do ccc, which is like a light gray,", 'start': 357.192, 'duration': 9.508}, {'end': 370.223, 'text': "and then i'm just going to do an overflow hidden so that there's no scroll bars.", 'start': 366.7, 'duration': 3.523}], 'summary': 'Using flexbox for centering, setting font, and background image. simple and minimalistic design.', 'duration': 79.953, 'max_score': 290.27, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E290270.jpg'}, {'end': 431.545, 'src': 'embed', 'start': 399.806, 'weight': 4, 'content': [{'end': 400.826, 'text': "I don't want that.", 'start': 399.806, 'duration': 1.02}, {'end': 402.067, 'text': 'I want it to go vertical.', 'start': 400.866, 'duration': 1.201}, {'end': 408.392, 'text': 'So we just need to change the flex direction to column.', 'start': 402.167, 'duration': 6.225}, {'end': 412.295, 'text': 'And I want to justify the content into the center.', 'start': 408.692, 'duration': 3.603}, {'end': 418.06, 'text': 'I want it to be centered, not horizontally, but vertically.', 'start': 414.598, 'duration': 3.462}, {'end': 419.82, 'text': "So let's say center.", 'start': 418.68, 'duration': 1.14}, {'end': 423.722, 'text': 'And in order to do that, we have to have a height on our container.', 'start': 420.421, 'duration': 3.301}, {'end': 424.882, 'text': "So let's do 100%.", 'start': 424.342, 'duration': 0.54}, {'end': 431.545, 'text': "I don't mean to poke fun at..", 'start': 424.882, 'duration': 6.663}], 'summary': 'Change flex direction to column, justify content to center, and set container height to 100% for vertical centering.', 'duration': 31.739, 'max_score': 399.806, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E399806.jpg'}], 'start': 197.195, 'title': 'Html and css development', 'summary': 'Covers creating an html file with words and an h2 heading, utilizing javascript to parse data, using live server for preview, and applying css for styling with flexbox and google fonts. it also explains setting a background image or color to cover the entire viewport height, centering the content vertically using flexbox, and discusses the challenge of centering elements in css.', 'chapters': [{'end': 320.186, 'start': 197.195, 'title': 'Html development and css styling', 'summary': 'Discusses creating an html file with words and an h2 heading, utilizing javascript to parse the data, using live server for preview, and applying css for styling with flexbox and google fonts.', 'duration': 122.991, 'highlights': ["Creating an HTML file with words and an H2 heading The speaker discusses using single quotes and an array format to input words like 'developer,' 'designer,' and 'creator.'", 'Utilizing JavaScript to parse the data The speaker explains the process of using json.parse in JavaScript to convert the fetched data into an object for usability.', 'Using live server for preview The speaker mentions using live server, a VS Code extension, for previewing the HTML file.', 'Applying CSS for styling with flexbox and Google Fonts The speaker briefly discusses using flexbox for centering and adjusting font sizes, as well as importing the Railway font from Google Fonts.']}, {'end': 480.903, 'start': 321.627, 'title': 'Css background and container setup', 'summary': 'Explains how to set a background image or color to cover the entire viewport height, center the content vertically using flexbox, and discusses the challenge of centering elements in css.', 'duration': 159.276, 'highlights': ['The chapter explains how to set a background image or color to cover the entire viewport height, center the content vertically using flexbox, and discusses the challenge of centering elements in CSS.', "The background is set to cover the entire viewport height using the '100vh' property.", 'The background color is defined as almost black (rgb 33, 33, 33), and the text color is set to a light gray (rgb 204, 204, 204).', 'The container is set to display as flexbox with a column flex direction to arrange the content vertically, and its height is set to 100% to allow vertical centering.', 'The chapter humorously mentions the difficulty some developers, including JavaScript experts, face when trying to center elements in CSS.']}], 'duration': 283.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E197195.jpg', 'highlights': ['Utilizing JavaScript to parse the data The speaker explains the process of using json.parse in JavaScript to convert the fetched data into an object for usability.', 'Applying CSS for styling with flexbox and Google Fonts The speaker briefly discusses using flexbox for centering and adjusting font sizes, as well as importing the Railway font from Google Fonts.', 'The chapter explains how to set a background image or color to cover the entire viewport height, center the content vertically using flexbox, and discusses the challenge of centering elements in CSS.', "The background is set to cover the entire viewport height using the '100vh' property.", 'The container is set to display as flexbox with a column flex direction to arrange the content vertically, and its height is set to 100% to allow vertical centering.']}, {'end': 736.328, 'segs': [{'end': 608.744, 'src': 'embed', 'start': 544.868, 'weight': 0, 'content': [{'end': 548.389, 'text': "We'll say font size 3.5 rem.", 'start': 544.868, 'duration': 3.521}, {'end': 556.812, 'text': "And then the H2, I'm going to say font size.", 'start': 550.99, 'duration': 5.822}, {'end': 561.593, 'text': "Let's do 2 rem.", 'start': 558.652, 'duration': 2.941}, {'end': 564.694, 'text': "And let's make the color.", 'start': 563.494, 'duration': 1.2}, {'end': 568.755, 'text': "a little darker, so I'm going to do AAA in hexadecimal.", 'start': 565.734, 'duration': 3.021}, {'end': 572.114, 'text': "OK So let's save that and take a look.", 'start': 570.213, 'duration': 1.901}, {'end': 578.077, 'text': "OK And obviously it's not going to say the word here that's going to come in through the JavaScript.", 'start': 572.994, 'duration': 5.083}, {'end': 586.22, 'text': "Now I do want to add some media queries because I want for one thing I want the text to be bigger if it's past like twelve hundred.", 'start': 578.877, 'duration': 7.343}, {'end': 592.643, 'text': "If the screen is past twelve hundred and then if it's smaller I want to make the text smaller.", 'start': 586.98, 'duration': 5.663}, {'end': 595.484, 'text': "So we're just going to add some media queries real quick.", 'start': 593.203, 'duration': 2.281}, {'end': 596.465, 'text': "We're almost done here.", 'start': 595.524, 'duration': 0.941}, {'end': 599.066, 'text': "So let's do media.", 'start': 597.505, 'duration': 1.561}, {'end': 603.761, 'text': "and let's do a.", 'start': 601.7, 'duration': 2.061}, {'end': 608.744, 'text': "let's do a min width of 1200 pixels.", 'start': 603.761, 'duration': 4.983}], 'summary': 'Using font size 3.5 rem and h2 font size 2 rem with color aaa in hexadecimal. adding media queries for text size based on screen width.', 'duration': 63.876, 'max_score': 544.868, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E544868.jpg'}, {'end': 736.328, 'src': 'embed', 'start': 663.235, 'weight': 3, 'content': [{'end': 667.136, 'text': "Just so it's not there's not so much on the side when it's on a smaller screen.", 'start': 663.235, 'duration': 3.901}, {'end': 671.518, 'text': "Originally, it's zero three ram, but I'm going to do zero one ram.", 'start': 667.577, 'duration': 3.941}, {'end': 674.039, 'text': 'Oops I should probably put the friggin.', 'start': 671.538, 'duration': 2.501}, {'end': 679.512, 'text': 'Padding all right, and then one more.', 'start': 675.52, 'duration': 3.992}, {'end': 682.733, 'text': "that's going to be for screens that are 500 pixels or smaller.", 'start': 679.512, 'duration': 3.221}, {'end': 696.597, 'text': "so let's do that media and let's say max width 500 pixels, and we're just going to say for that um uh, h1.", 'start': 682.733, 'duration': 13.864}, {'end': 703.224, 'text': 'do we want h1 to be?', 'start': 701.883, 'duration': 1.341}, {'end': 704.766, 'text': "let's do font size.", 'start': 703.224, 'duration': 1.542}, {'end': 708.709, 'text': "so it's originally 3.5.", 'start': 704.766, 'duration': 3.943}, {'end': 709.43, 'text': "let's do 2.5.", 'start': 708.709, 'duration': 0.721}, {'end': 716.436, 'text': "okay for the h1, and i'm also going to do the h2.", 'start': 709.43, 'duration': 7.006}, {'end': 723.743, 'text': "so we'll say h2 and let's say font size, which is originally 2rem.", 'start': 716.436, 'duration': 7.307}, {'end': 725.024, 'text': "i'm going to do 1.5.", 'start': 723.743, 'duration': 1.281}, {'end': 727.967, 'text': 'rem, all right, and that should do it.', 'start': 725.024, 'duration': 2.943}, {'end': 733.326, 'text': "So yeah, let's, let's, let's take a look at that.", 'start': 729.924, 'duration': 3.402}, {'end': 736.328, 'text': 'OK, so if I were to make this smaller.', 'start': 733.346, 'duration': 2.982}], 'summary': 'Adjusting font sizes for smaller screens, h1 to 2.5rem and h2 to 1.5rem.', 'duration': 73.093, 'max_score': 663.235, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E663235.jpg'}], 'start': 481.583, 'title': 'Css styling, sizing, and media queries', 'summary': 'Introduces css styling and sizing, demonstrating the use of font size, font weight, margin, and color adjustments in a webpage layout. it also discusses the implementation of media queries to adjust the text size based on screen width, with specific values for different screen sizes including 1200 pixels, 800 pixels, and 500 pixels.', 'chapters': [{'end': 578.077, 'start': 481.583, 'title': 'Css styling and sizing', 'summary': 'Introduces css styling and sizing, demonstrating the use of font size, font weight, margin, and color adjustments in a webpage layout with examples of specific css properties and values.', 'duration': 96.494, 'highlights': ['The chapter introduces CSS styling and sizing, demonstrating the use of font size, font weight, margin, and color adjustments in a webpage layout.', 'Specific CSS properties and values such as font-size, font-weight, margin, and color adjustments are explained and applied to the webpage layout.', 'Examples of specific CSS properties and values such as font size, font weight, margin, and color adjustments are provided in the context of webpage layout.']}, {'end': 736.328, 'start': 578.877, 'title': 'Adding media queries for responsive design', 'summary': 'Discusses the implementation of media queries to adjust the text size based on screen width, with specific values for different screen sizes including 1200 pixels, 800 pixels, and 500 pixels.', 'duration': 157.451, 'highlights': ['Implementing media queries to adjust text size based on screen width, with specific values for 1200 pixels, 800 pixels, and 500 pixels.', 'Setting the font size to 5 rem for screens over 1200 pixels, 3 rem for screens up to 800 pixels, and 2.5 rem for screens up to 500 pixels.', 'Adjusting padding for the container to 0.1 rem for screens up to 800 pixels to reduce the space on smaller screens.']}], 'duration': 254.745, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E481583.jpg', 'highlights': ['The chapter introduces CSS styling and sizing, demonstrating the use of font size, font weight, margin, and color adjustments in a webpage layout.', 'Implementing media queries to adjust text size based on screen width, with specific values for 1200 pixels, 800 pixels, and 500 pixels.', 'Specific CSS properties and values such as font-size, font-weight, margin, and color adjustments are explained and applied to the webpage layout.', 'Setting the font size to 5 rem for screens over 1200 pixels, 3 rem for screens up to 800 pixels, and 2.5 rem for screens up to 500 pixels.', 'Examples of specific CSS properties and values such as font size, font weight, margin, and color adjustments are provided in the context of webpage layout.', 'Adjusting padding for the container to 0.1 rem for screens up to 800 pixels to reduce the space on smaller screens.']}, {'end': 936.359, 'segs': [{'end': 811.485, 'src': 'embed', 'start': 736.348, 'weight': 0, 'content': [{'end': 745.352, 'text': 'When we hit around twelve hundred, it goes down when we hit around eight hundred goes down and five hundred it goes down.', 'start': 736.348, 'duration': 9.004}, {'end': 747.433, 'text': "Good So now it's responsive.", 'start': 745.432, 'duration': 2.001}, {'end': 750.415, 'text': 'Now we can start with the fun part, which is the JavaScript.', 'start': 747.533, 'duration': 2.882}, {'end': 753.329, 'text': "So let's go to main JS.", 'start': 751.969, 'duration': 1.36}, {'end': 761.711, 'text': "And like I said, we're going to start off by creating a constructor function with a method, a method called type that that basically does everything.", 'start': 753.609, 'duration': 8.102}, {'end': 763.231, 'text': "And we're going to initialize that.", 'start': 761.971, 'duration': 1.26}, {'end': 768.372, 'text': "And then afterwards, I'm going to show you how we can just change it to an ES6 class if you wanted to do it that way.", 'start': 763.271, 'duration': 5.101}, {'end': 773.133, 'text': "So let's create a const called typewriter.", 'start': 769.132, 'duration': 4.001}, {'end': 776.234, 'text': "OK, that's what I'm going to call this constructor function.", 'start': 773.153, 'duration': 3.081}, {'end': 777.834, 'text': "We're going to say equals function.", 'start': 776.294, 'duration': 1.54}, {'end': 784.787, 'text': 'And this is going to take in three things.', 'start': 782.505, 'duration': 2.282}, {'end': 791.872, 'text': "It's going to take in a txt element, which is actually that span that's in the HTML.", 'start': 784.867, 'duration': 7.005}, {'end': 800.197, 'text': "It's going to take in the words, which is going to come from the data words attribute, which has the little array of the three words I put.", 'start': 792.392, 'duration': 7.805}, {'end': 811.485, 'text': 'And then the wait time, which is going to be the amount that it waits before it starts deleting, when it gets to the end and it starts deleting.', 'start': 800.737, 'duration': 10.748}], 'summary': 'Creating a typewriter constructor function with a method, and discussing es6 class conversion, using javascript.', 'duration': 75.137, 'max_score': 736.348, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E736348.jpg'}, {'end': 855.037, 'src': 'heatmap', 'start': 829.951, 'weight': 0.748, 'content': [{'end': 836.073, 'text': "And we're going to set this dot words as a property, and that'll be set to the words that are passed in.", 'start': 829.951, 'duration': 6.122}, {'end': 841.114, 'text': "We'll have this.txt, which will be set to nothing by default.", 'start': 836.753, 'duration': 4.361}, {'end': 847.396, 'text': 'What txt represents is whatever is currently in this area.', 'start': 841.594, 'duration': 5.802}, {'end': 855.037, 'text': "If I go ahead and reload, when it's at like dev, that's what is txt.", 'start': 848.156, 'duration': 6.881}], 'summary': "Setting 'dot words' as a property, 'this.txt' defaulting to empty, representing current content.", 'duration': 25.086, 'max_score': 829.951, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E829951.jpg'}, {'end': 919.879, 'src': 'embed', 'start': 886.817, 'weight': 4, 'content': [{'end': 891.16, 'text': "Okay So we're actually going to run it through a JavaScript function called parse int.", 'start': 886.817, 'duration': 4.343}, {'end': 897.109, 'text': "so we'll say wait, and then we just want a second parameter of the base, which is going to be base 10.", 'start': 892.944, 'duration': 4.165}, {'end': 899.552, 'text': "okay, it's a base 10 number.", 'start': 897.109, 'duration': 2.443}, {'end': 901.634, 'text': 'we also want the method of type.', 'start': 899.552, 'duration': 2.082}, {'end': 906.98, 'text': "okay, because that's going to be the main method that is associated with this, with this typewriter.", 'start': 901.634, 'duration': 5.346}, {'end': 908.502, 'text': 'that does everything.', 'start': 906.98, 'duration': 1.522}, {'end': 910.524, 'text': "and then we're going to have is deleting.", 'start': 908.502, 'duration': 2.022}, {'end': 919.879, 'text': "i'm sorry, this dot is deleting, which is going to be a boolean and that's going to just be it's.", 'start': 912.049, 'duration': 7.83}], 'summary': "Using javascript's parseint function with base 10 and type method for typewriter.", 'duration': 33.062, 'max_score': 886.817, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E886817.jpg'}], 'start': 736.348, 'title': 'Javascript typewriter functions', 'summary': 'Explains creating a typewriter constructor function in javascript, initially using a function and later converting it to an es6 class, focusing on responsiveness at different character counts. it also covers the construction of a javascript typewriter function, including input parameters, default values, and the logic of the function.', 'chapters': [{'end': 784.787, 'start': 736.348, 'title': 'Typewriter constructor function in javascript', 'summary': 'Explains the process of creating a typewriter constructor function in javascript, initially using a function and later converting it to an es6 class, with a focus on responsiveness at different character counts.', 'duration': 48.439, 'highlights': ['The chapter emphasizes the process of creating a typewriter constructor function in JavaScript, including the initial use of a function and the subsequent conversion to an ES6 class.', 'The speaker highlights the importance of responsiveness at different character counts, noting that the function goes down at 1200, 800, and 500 characters.', 'The chapter introduces the main JS file and the creation of a constructor function with a method called type that performs various tasks.']}, {'end': 936.359, 'start': 784.867, 'title': 'Javascript typewriter function', 'summary': 'Explains the construction of a javascript typewriter function, including the input parameters, default values, and the logic of the function, which includes setting text elements, word indices, and wait times.', 'duration': 151.492, 'highlights': ['The function takes in a txt element, words, and wait time as input parameters, with a default wait time of 3000. The function takes in a txt element, words, which comes from the data words attribute, and wait time, with a default value of 3000.', 'The function constructs properties including text element, words, txt, word index, wait, and is deleting. The function constructs properties like text element, words, txt, word index, wait, and is deleting, with txt representing the current content, word index starting at zero, and wait being parsed as an integer.', "The wait time input is run through the JavaScript function parseInt to ensure it's an integer. The wait time input is run through the JavaScript function parseInt to ensure it's an integer, using base 10 as the second parameter."]}], 'duration': 200.011, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E736348.jpg', 'highlights': ['The chapter emphasizes the process of creating a typewriter constructor function in JavaScript, including the initial use of a function and the subsequent conversion to an ES6 class.', 'The speaker highlights the importance of responsiveness at different character counts, noting that the function goes down at 1200, 800, and 500 characters.', 'The function takes in a txt element, words, and wait time as input parameters, with a default wait time of 3000.', 'The function constructs properties including text element, words, txt, word index, wait, and is deleting.', "The wait time input is run through the JavaScript function parseInt to ensure it's an integer."]}, {'end': 1578.951, 'segs': [{'end': 995.243, 'src': 'embed', 'start': 937.3, 'weight': 0, 'content': [{'end': 938.36, 'text': 'So keep that in mind.', 'start': 937.3, 'duration': 1.06}, {'end': 944.686, 'text': 'Now we will have the type method here, which will actually do everything,', 'start': 939.301, 'duration': 5.385}, {'end': 949.67, 'text': 'but I want to just initialize this first before we start doing the type method.', 'start': 944.686, 'duration': 4.984}, {'end': 955.292, 'text': "So to initialize it, we're going to run it when the DOM loads.", 'start': 950.41, 'duration': 4.882}, {'end': 959.694, 'text': "So we'll say init on DOM load.", 'start': 955.632, 'duration': 4.062}, {'end': 961.095, 'text': 'So we need an event handler.', 'start': 959.734, 'duration': 1.361}, {'end': 963.996, 'text': 'You could do like window.onload if you want.', 'start': 961.455, 'duration': 2.541}, {'end': 974.003, 'text': "But what I'm going to do is I'm actually going to set on the document an event listener using add event listener.", 'start': 964.476, 'duration': 9.527}, {'end': 980.569, 'text': 'And the event list, the event I want to listen to is, or for is Dom content loaded.', 'start': 974.444, 'duration': 6.125}, {'end': 983.192, 'text': 'And then I want to run a function called a knit.', 'start': 981.17, 'duration': 2.022}, {'end': 988.897, 'text': 'Okay And then that function is basically going to a knit our app.', 'start': 983.212, 'duration': 5.685}, {'end': 995.243, 'text': "Okay So let's do function and net.", 'start': 988.917, 'duration': 6.326}], 'summary': 'The transcript discusses initializing a method on dom load using an event listener.', 'duration': 57.943, 'max_score': 937.3, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E937300.jpg'}, {'end': 1126.139, 'src': 'embed', 'start': 1092.161, 'weight': 3, 'content': [{'end': 1095.982, 'text': 'All right, and then the last thing we need to do here is just initialize the typewriter.', 'start': 1092.161, 'duration': 3.821}, {'end': 1102.243, 'text': 'So we do that with new.', 'start': 1100.943, 'duration': 1.3}, {'end': 1104.664, 'text': 'We use the keyword new and then typewriter.', 'start': 1102.323, 'duration': 2.341}, {'end': 1109.094, 'text': 'And we pass in all three things.', 'start': 1106.753, 'duration': 2.341}, {'end': 1113.975, 'text': 'So text element words and wait.', 'start': 1109.154, 'duration': 4.821}, {'end': 1118.257, 'text': "OK So that's going to initialize this up here.", 'start': 1115.396, 'duration': 2.861}, {'end': 1126.139, 'text': "So if I save and run this the only error we should see is that there's no type method because we're claiming it here but we haven't created it.", 'start': 1119.177, 'duration': 6.962}], 'summary': 'Initializing the typewriter with new and three parameters.', 'duration': 33.978, 'max_score': 1092.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1092161.jpg'}, {'end': 1194.4, 'src': 'embed', 'start': 1171.226, 'weight': 2, 'content': [{'end': 1178.73, 'text': "So, at the very end we're going to want to run a set timeout because we obviously, each time it types in something,", 'start': 1171.226, 'duration': 7.504}, {'end': 1181.992, 'text': 'each time a character gets typed or deleted, this is running.', 'start': 1178.73, 'duration': 3.262}, {'end': 1185.954, 'text': 'So we actually want to run it at a certain pace.', 'start': 1182.652, 'duration': 3.302}, {'end': 1188.516, 'text': 'So in our setTimeout, it takes in a function.', 'start': 1186.034, 'duration': 2.482}, {'end': 1189.697, 'text': 'You could do like function.', 'start': 1188.556, 'duration': 1.141}, {'end': 1191.098, 'text': "I'm going to use an arrow.", 'start': 1189.717, 'duration': 1.381}, {'end': 1194.4, 'text': 'And I just want to call this dot type.', 'start': 1191.998, 'duration': 2.402}], 'summary': 'Set a pace for typing by using a set timeout function with a specific function call.', 'duration': 23.174, 'max_score': 1171.226, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1171226.jpg'}, {'end': 1228.612, 'src': 'heatmap', 'start': 1199.023, 'weight': 1, 'content': [{'end': 1201.924, 'text': "I'm going to say half a second, so 500 milliseconds.", 'start': 1199.023, 'duration': 2.901}, {'end': 1206.747, 'text': 'And then right now, all this is going to do is console.log.', 'start': 1202.745, 'duration': 4.002}, {'end': 1208.569, 'text': "So I'll say console.log hello.", 'start': 1206.767, 'duration': 1.802}, {'end': 1215.269, 'text': "Hello And if we go ahead and save that, we run this in our browser, you'll see every half a second it's going to output.", 'start': 1208.589, 'duration': 6.68}, {'end': 1222.331, 'text': "Hello OK, so at least we have our our I guess our stream of of whatever we're going to do happening.", 'start': 1215.309, 'duration': 7.022}, {'end': 1226.272, 'text': 'Obviously, we want to be outputting text here and then deleting and all that.', 'start': 1222.851, 'duration': 3.421}, {'end': 1228.612, 'text': 'But at least the type method is running.', 'start': 1226.572, 'duration': 2.04}], 'summary': "A program outputs 'hello' every 500 milliseconds.", 'duration': 29.589, 'max_score': 1199.023, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1199023.jpg'}, {'end': 1578.951, 'src': 'heatmap', 'start': 1550.162, 'weight': 0.938, 'content': [{'end': 1553.864, 'text': "So I'm going to use backticks here so that I can use a template literal.", 'start': 1550.162, 'duration': 3.702}, {'end': 1559.667, 'text': 'And I can simply go like that, use this syntax, and say this.txt.', 'start': 1555.625, 'duration': 4.042}, {'end': 1568.043, 'text': 'All right, so now if I save this, what should happen is it should at least spell out the first word up to this point.', 'start': 1561.718, 'duration': 6.325}, {'end': 1569.704, 'text': "So let's save that, let's go back.", 'start': 1568.103, 'duration': 1.601}, {'end': 1572.106, 'text': 'And there we go.', 'start': 1571.506, 'duration': 0.6}, {'end': 1578.951, 'text': "Now it's gonna stop at the end because we haven't done any more functionality other than that.", 'start': 1572.867, 'duration': 6.084}], 'summary': 'Demonstrating the use of backticks and template literals for text display.', 'duration': 28.789, 'max_score': 1550.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1550162.jpg'}], 'start': 937.3, 'title': 'Javascript dom and typewriter initialization', 'summary': 'Discusses initializing a javascript app by listening to the domcontentloaded event instead of window.onload. it also covers the initialization of a typewriter, its typing logic using javascript and css, and a demonstration of typing and deleting characters at a set pace.', 'chapters': [{'end': 995.243, 'start': 937.3, 'title': 'Javascript dom initialization', 'summary': 'Discusses initializing a javascript app by listening to the domcontentloaded event and running the init function upon its occurrence, providing an alternative to window.onload.', 'duration': 57.943, 'highlights': ['Initializing a JavaScript app by listening to the DOMContentLoaded event and running the init function upon its occurrence, providing an alternative to window.onload.', 'Setting an event listener on the document using addEventListener to listen for the DOMContentLoaded event, and then running a function called init upon its occurrence.']}, {'end': 1578.951, 'start': 997.871, 'title': 'Typewriter initialization and typing logic', 'summary': 'Covers the initialization of a typewriter by grabbing the element, attributes, and initializing the typewriter, followed by the explanation of the typing logic using javascript and css, with a demonstration of typing and deleting characters at a set pace.', 'duration': 581.08, 'highlights': ['The chapter covers the initialization of a typewriter by grabbing the element, attributes, and initializing the typewriter. This includes grabbing the element, getting the attributes like words and weight, parsing the attributes, and initializing the typewriter with the grabbed information.', 'Explanation of the typing logic using JavaScript and CSS, with a demonstration of typing and deleting characters at a set pace. The typing logic is explained with the use of JavaScript, including the use of setTimeout to control the pace of typing and demonstration of typing and deleting characters at a set pace.']}], 'duration': 641.651, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E937300.jpg', 'highlights': ['Initializing a JavaScript app by listening to the DOMContentLoaded event and running the init function upon its occurrence, providing an alternative to window.onload.', 'Setting an event listener on the document using addEventListener to listen for the DOMContentLoaded event, and then running a function called init upon its occurrence.', 'Explanation of the typing logic using JavaScript and CSS, with a demonstration of typing and deleting characters at a set pace. The typing logic is explained with the use of JavaScript, including the use of setTimeout to control the pace of typing and demonstration of typing and deleting characters at a set pace.', 'The chapter covers the initialization of a typewriter by grabbing the element, attributes, and initializing the typewriter. This includes grabbing the element, getting the attributes like words and weight, parsing the attributes, and initializing the typewriter with the grabbed information.']}, {'end': 2183.114, 'segs': [{'end': 1626.328, 'src': 'embed', 'start': 1600.603, 'weight': 0, 'content': [{'end': 1604.964, 'text': 'Initially, I want to set it to 300, which is 300 milliseconds.', 'start': 1600.603, 'duration': 4.361}, {'end': 1607.604, 'text': "But we're going to want to change it at different points.", 'start': 1605.524, 'duration': 2.08}, {'end': 1610.025, 'text': "Like when it's deleting, I want it to go faster.", 'start': 1607.644, 'duration': 2.381}, {'end': 1612.885, 'text': 'When it gets to the end, I want it to actually pause.', 'start': 1610.105, 'duration': 2.78}, {'end': 1615.226, 'text': 'So I want to set it to whatever the wait time is.', 'start': 1613.105, 'duration': 2.121}, {'end': 1617.466, 'text': "So it's going to be dynamic.", 'start': 1615.866, 'duration': 1.6}, {'end': 1618.466, 'text': "So I'm going to use let.", 'start': 1617.506, 'duration': 0.96}, {'end': 1621.627, 'text': 'So let type speed.', 'start': 1619.387, 'duration': 2.24}, {'end': 1626.328, 'text': "And we're going to set that to 300.", 'start': 1622.967, 'duration': 3.361}], 'summary': 'Setting initial speed to 300ms, but dynamic changes required for deletion and end; using let type speed.', 'duration': 25.725, 'max_score': 1600.603, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1600603.jpg'}, {'end': 1894.367, 'src': 'embed', 'start': 1854.376, 'weight': 1, 'content': [{'end': 1859.36, 'text': 'OK, and then I want to pause a little bit before we start typing.', 'start': 1854.376, 'duration': 4.984}, {'end': 1867.645, 'text': "So let's say pause before start typing.", 'start': 1859.38, 'duration': 8.265}, {'end': 1871.148, 'text': "So I'm going to set type speed.", 'start': 1867.665, 'duration': 3.483}, {'end': 1873.911, 'text': 'equal to 500.', 'start': 1873.189, 'duration': 0.722}, {'end': 1881.626, 'text': "And then instead of putting a hard-coded 500 in here, I'm actually going to put my type speed in.", 'start': 1873.911, 'duration': 7.715}, {'end': 1894.367, 'text': 'So OK, so this should give us that a nice effect of typing fast, stopping at the end for a couple of seconds, deleting even faster,', 'start': 1884.099, 'duration': 10.268}], 'summary': 'Setting type speed to 500 for fast typing and pausing effect.', 'duration': 39.991, 'max_score': 1854.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1854376.jpg'}, {'end': 2044.553, 'src': 'heatmap', 'start': 1990.483, 'weight': 2, 'content': [{'end': 1992.504, 'text': "And set that, we'll set the width to 0.2.", 'start': 1990.483, 'duration': 2.021}, {'end': 1992.924, 'text': '0.2 rem.', 'start': 1992.504, 'duration': 0.42}, {'end': 1993.724, 'text': "Let's do solid.", 'start': 1993.124, 'duration': 0.6}, {'end': 2003.371, 'text': "And for the color, I'll do 777.", 'start': 1993.744, 'duration': 9.627}, {'end': 2005.932, 'text': "OK so we'll go back and there we go.", 'start': 2003.371, 'duration': 2.561}, {'end': 2009.613, 'text': 'Now we have a cursor which looks a lot better.', 'start': 2005.992, 'duration': 3.621}, {'end': 2010.734, 'text': 'All right.', 'start': 2009.633, 'duration': 1.101}, {'end': 2014.355, 'text': 'So we are done except for the class part.', 'start': 2010.814, 'duration': 3.541}, {'end': 2020.457, 'text': "So if you want to use six classes which does the same thing it's just a different way of writing it.", 'start': 2014.655, 'duration': 5.802}, {'end': 2029.06, 'text': "I'm going to go to the bottom here and let's say yes six class.", 'start': 2020.597, 'duration': 8.463}, {'end': 2038.861, 'text': 'And what we would do is do a class of typewriter action.', 'start': 2030.44, 'duration': 8.421}, {'end': 2041.907, 'text': "sorry, we don't want to do that.", 'start': 2038.861, 'duration': 3.046}, {'end': 2043.25, 'text': 'so, class of typewriter.', 'start': 2041.907, 'duration': 1.343}, {'end': 2044.553, 'text': 'we would have a constructor.', 'start': 2043.25, 'duration': 1.303}], 'summary': 'Setting width to 0.2 rem, using solid line with color 777, improving cursor appearance, discussing class usage and constructor.', 'duration': 68.658, 'max_score': 1990.483, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1990483.jpg'}], 'start': 1579.852, 'title': 'Implementing typing animation logic', 'summary': 'Covers logic for typing animation speed control, including initial type speed, adjusting speed when deleting, pausing at the end of a word, implementing typing effect in javascript with wait times, deleting speeds, and adding a cursor, and using classes for creating typewriter action by converting prototype methods into class methods. it demonstrates that both traditional methods and using classes achieve the same functionality.', 'chapters': [{'end': 1772.05, 'start': 1579.852, 'title': 'Typing animation logic', 'summary': 'Discusses the logic for typing animation speed control, including setting initial type speed, adjusting speed when deleting, and pausing at the end of a word.', 'duration': 192.198, 'highlights': ['The type speed is initially set to 300 milliseconds, with dynamic changes for deleting and end pauses, such as halving the speed when deleting.', 'Logic for checking if the word is complete involves matching the text with the full word and adjusting the type speed for pausing at the end.', "Use of 'is deleting' condition to control the speed and pausing at the end of the word."]}, {'end': 2014.355, 'start': 1772.05, 'title': 'Javascript typing effect', 'summary': 'Covers implementing a typing effect in javascript, including setting wait times, deleting speeds, and adding a cursor, allowing for a realistic typing effect.', 'duration': 242.305, 'highlights': ['The typing speed will get put to the wait time, and when it goes all the way back, the if statement runs, switching to the next word.', 'Setting deleting back to false and moving to the next word by incrementing the word index by one.', 'Setting type speed to 500 and using it for pausing before start typing, providing a nice effect of typing fast, stopping at the end for a couple of seconds, and deleting even faster.', 'Adding a cursor by setting a border right with a width of 0.2 rem and color 777 in the style.css file, enhancing the visual effect of the typing animation.']}, {'end': 2183.114, 'start': 2014.655, 'title': 'Using classes for typewriter action', 'summary': 'Discusses using classes for creating typewriter action, demonstrating how to convert prototype methods into class methods, and highlighting that the choice between using classes or traditional methods results in achieving the same functionality.', 'duration': 168.459, 'highlights': ['The chapter demonstrates converting prototype methods into class methods for creating typewriter action, showcasing the process of moving code from prototype methods to class methods and initializing the class for achieving the same functionality.', 'It highlights the equivalence of using classes and traditional methods for achieving the same functionality, emphasizing that the choice between the two approaches is based on personal preference.', 'The chapter emphasizes the usage of classes as an alternative method for achieving the same functionality as traditional methods, showcasing the flexibility in choosing the approach based on personal preference.']}], 'duration': 603.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/POX3dT-pB4E/pics/POX3dT-pB4E1579852.jpg', 'highlights': ['The type speed is initially set to 300 milliseconds, with dynamic changes for deleting and end pauses, such as halving the speed when deleting.', 'Setting type speed to 500 and using it for pausing before start typing, providing a nice effect of typing fast, stopping at the end for a couple of seconds, and deleting even faster.', 'Adding a cursor by setting a border right with a width of 0.2 rem and color 777 in the style.css file, enhancing the visual effect of the typing animation.', 'The chapter demonstrates converting prototype methods into class methods for creating typewriter action, showcasing the process of moving code from prototype methods to class methods and initializing the class for achieving the same functionality.', 'It highlights the equivalence of using classes and traditional methods for achieving the same functionality, emphasizing that the choice between the two approaches is based on personal preference.']}], 'highlights': ['The chapter involves building a typewriter script using vanilla JavaScript, with a focus on using ES6 syntax, constructor function, and prototype method, and converting it into an ES6 class.', 'The demonstration includes the process of adding custom attributes in HTML5 with JavaScript access, like setting the data-weight attribute for controlling the pause time after typing a word, set to 3000 milliseconds by default.', 'The chapter emphasizes the process of creating a typewriter constructor function in JavaScript, including the initial use of a function and the subsequent conversion to an ES6 class.', 'The speaker highlights the importance of responsiveness at different character counts, noting that the function goes down at 1200, 800, and 500 characters.', 'Initializing a JavaScript app by listening to the DOMContentLoaded event and running the init function upon its occurrence, providing an alternative to window.onload.', 'The type speed is initially set to 300 milliseconds, with dynamic changes for deleting and end pauses, such as halving the speed when deleting.', 'The chapter demonstrates converting prototype methods into class methods for creating typewriter action, showcasing the process of moving code from prototype methods to class methods and initializing the class for achieving the same functionality.']}