title
Animated Counter With JavaScript (HTML, CSS)

description
In this mini-project, I will show you how to create an animated counter that counts up to any number using JavaScript with HTML & CSS. Code: https://codepen.io/bradtraversy/pen/poJwqOK 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Website & Udemy Course Links: https://www.traversymedia.com Follow Traversy Media: https://www.twitter.com/traversymedia https://www.instagram.com/traversymedia https://www.facebook.com/traversymedia

detail
{'title': 'Animated Counter With JavaScript (HTML, CSS)', 'heatmap': [{'end': 789.795, 'start': 765.758, 'weight': 0.886}, {'end': 958.359, 'start': 941.993, 'weight': 1}, {'end': 1062.281, 'start': 1052.833, 'weight': 0.7}], 'summary': 'Tutorial demonstrates building an animated counter with html, css, and javascript to display social media stats including 15,000 twitter followers, 9,000 facebook likes, and 5,000 linkedin connections. it covers web page styling, design using live server and css, and explains javascript looping, variable setting, and incremental counting with the ability to dynamically add or remove counters.', 'chapters': [{'end': 200.533, 'segs': [{'end': 76.465, 'src': 'embed', 'start': 7.403, 'weight': 0, 'content': [{'end': 10.745, 'text': "What's going on, guys? In this video, we're going to build an animated counter.", 'start': 7.403, 'duration': 3.342}, {'end': 13.706, 'text': 'So basically we have these numbers down here.', 'start': 10.825, 'duration': 2.881}, {'end': 18.028, 'text': 'So YouTube subscribers, Twitter followers likes connections on LinkedIn.', 'start': 13.786, 'duration': 4.242}, {'end': 24.471, 'text': 'And when I when we come to the page or we reload the page, you can see that it starts at zero and it animates up.', 'start': 18.448, 'duration': 6.023}, {'end': 28.893, 'text': "So we're going to build this from scratch with HTML, CSS and of course, JavaScript.", 'start': 25.011, 'duration': 3.882}, {'end': 36.657, 'text': "But if you want to skip the HTML and CSS, I will put a timestamp so that you can just see the JavaScript code if that's all you're interested in.", 'start': 29.333, 'duration': 7.324}, {'end': 38.878, 'text': "but we're going to use a little bit of flexbox.", 'start': 37.077, 'duration': 1.801}, {'end': 41.5, 'text': "we're going to use the grid to align these columns.", 'start': 38.878, 'duration': 2.622}, {'end': 43.962, 'text': "so let's go ahead and get started.", 'start': 41.5, 'duration': 2.462}, {'end': 51.347, 'text': "so in in vs code, i just have three files index.html, style, css and script.js and we'll start off with the html.", 'start': 43.962, 'duration': 7.385}, {'end': 53.428, 'text': "so i'm going to go kind of fast here.", 'start': 51.347, 'duration': 2.081}, {'end': 64.756, 'text': "we're going to just give this a title of animated counter and let's add our style sheet, and then i'm just going to grab the font awesome cdn,", 'start': 53.428, 'duration': 11.328}, {'end': 66.617, 'text': "because that's what we're using for those icons.", 'start': 64.756, 'duration': 1.861}, {'end': 69.679, 'text': "Okay, so it's just the font awesome 5 CDN.", 'start': 67.437, 'duration': 2.242}, {'end': 76.465, 'text': "And then in the body, let's be sure to add our script, which is called script JS.", 'start': 70.24, 'duration': 6.225}], 'summary': 'Building an animated counter using html, css, and javascript with flexbox and grid layout.', 'duration': 69.062, 'max_score': 7.403, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k7403.jpg'}, {'end': 200.533, 'src': 'embed', 'start': 126.715, 'weight': 1, 'content': [{'end': 132.156, 'text': "And then underneath that, we'll have a div with the class of counter and just put a zero for default.", 'start': 126.715, 'duration': 5.441}, {'end': 136.437, 'text': 'Now we need a way to to basically assign a number.', 'start': 132.676, 'duration': 3.761}, {'end': 138.198, 'text': 'that we want to count up to.', 'start': 136.917, 'duration': 1.281}, {'end': 144.323, 'text': "So we're going to use a data target attribute here and set this to, let's say, 60,000.", 'start': 138.278, 'duration': 6.045}, {'end': 145.684, 'text': 'All right.', 'start': 144.323, 'duration': 1.361}, {'end': 150.248, 'text': "And then underneath that, we'll have an H3 and say subscribers.", 'start': 146.144, 'duration': 4.104}, {'end': 153.791, 'text': "So that's pretty much the format for each section.", 'start': 151.349, 'duration': 2.442}, {'end': 155.212, 'text': 'So we want four of these.', 'start': 153.851, 'duration': 1.361}, {'end': 159.135, 'text': 'OK, and this one here is going to be Twitter.', 'start': 155.232, 'duration': 3.903}, {'end': 161.117, 'text': "So let's change the icon.", 'start': 159.275, 'duration': 1.842}, {'end': 178.265, 'text': "And for the the number here, let's do 15,000 followers and then we have oops, we have Facebook.", 'start': 163.078, 'duration': 15.187}, {'end': 198.372, 'text': "and for Facebook let's say we have 9,000 likes, and then for LinkedIn, let's say we have 5,000 connections, All right.", 'start': 178.265, 'duration': 20.107}, {'end': 199.672, 'text': "So that's it for the HTML.", 'start': 198.392, 'duration': 1.28}, {'end': 200.533, 'text': "So we'll save that.", 'start': 199.693, 'duration': 0.84}], 'summary': 'Html includes counters for twitter, facebook, and linkedin with respective followers, likes, and connections.', 'duration': 73.818, 'max_score': 126.715, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k126715.jpg'}], 'start': 7.403, 'title': 'Building animated counter with html, css, and javascript', 'summary': 'Demonstrates building an animated counter with html, css, and javascript to display youtube subscribers, twitter followers, likes, and linkedin connections, utilizing flexbox, grid for alignment and font awesome 5 cdn for icons. additionally, it details the html structure for displaying social media stats including 15,000 twitter followers, 9,000 facebook likes, and 5,000 linkedin connections.', 'chapters': [{'end': 125.715, 'start': 7.403, 'title': 'Building animated counter with html, css, and javascript', 'summary': 'Demonstrates building an animated counter with html, css, and javascript that starts at zero and animates up for youtube subscribers, twitter followers, likes, and connections on linkedin, utilizing flexbox and grid for alignment and font awesome 5 cdn for icons.', 'duration': 118.312, 'highlights': ['Building an animated counter with HTML, CSS, and JavaScript The video tutorial focuses on creating an animated counter from scratch using HTML, CSS, and JavaScript.', 'Utilizing flexbox and grid for alignment The tutorial demonstrates the use of flexbox and grid to align the columns in the webpage layout.', 'Starting at zero and animating up for YouTube subscribers, Twitter followers, likes, and connections on LinkedIn The animated counter starts at zero and dynamically animates up for YouTube subscribers, Twitter followers, likes, and connections on LinkedIn.', 'Using font awesome 5 CDN for icons The tutorial incorporates font awesome 5 CDN for displaying icons of YouTube, Twitter, and LinkedIn.']}, {'end': 200.533, 'start': 126.715, 'title': 'Html counter for social media stats', 'summary': 'Details the html structure for creating a counter to display social media stats including twitter followers (15,000), facebook likes (9,000), and linkedin connections (5,000).', 'duration': 73.818, 'highlights': ['The HTML structure for creating a counter to display social media stats including Twitter followers (15,000), Facebook likes (9,000), and LinkedIn connections (5,000).', 'The use of data target attribute to assign the number to count up to, set to 60,000.', 'The format for each section consists of a div with the class of counter, a data target attribute, and an H3 tag for the title of the section.']}], 'duration': 193.13, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k7403.jpg', 'highlights': ['Building an animated counter with HTML, CSS, and JavaScript', 'The HTML structure for creating a counter to display social media stats including Twitter followers (15,000), Facebook likes (9,000), and LinkedIn connections (5,000)', 'Utilizing flexbox and grid for alignment', 'Starting at zero and animating up for YouTube subscribers, Twitter followers, likes, and connections on LinkedIn', 'Using font awesome 5 CDN for icons', 'The use of data target attribute to assign the number to count up to, set to 60,000', 'The format for each section consists of a div with the class of counter, a data target attribute, and an H3 tag for the title of the section']}, {'end': 692.421, 'segs': [{'end': 254.911, 'src': 'embed', 'start': 220.079, 'weight': 2, 'content': [{'end': 228.483, 'text': "basically like a reset here set the box sizing to border box on everything and then I'm just going to remove the margin and padding.", 'start': 220.079, 'duration': 8.404}, {'end': 239.609, 'text': "All right, and then in the body, let's set the font family to Roboto.", 'start': 228.503, 'duration': 11.106}, {'end': 244.592, 'text': "And I'm going to set the background.", 'start': 242.871, 'duration': 1.721}, {'end': 250.668, 'text': "So I'll give it a color of light sky blue, but I'm also going to give it a URL.", 'start': 246.246, 'duration': 4.422}, {'end': 252.57, 'text': "And it's just an abstract background.", 'start': 250.749, 'duration': 1.821}, {'end': 254.911, 'text': "So I'll paste that link in here.", 'start': 252.59, 'duration': 2.321}], 'summary': 'Setting box sizing to border box, font family to roboto, and background color to light sky blue with a url link.', 'duration': 34.832, 'max_score': 220.079, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k220079.jpg'}, {'end': 348.581, 'src': 'embed', 'start': 295.342, 'weight': 0, 'content': [{'end': 303.687, 'text': "direction, set that to a column, and then for the justify content I'm going to use flex end because I want to push it to the bottom.", 'start': 295.342, 'duration': 8.345}, {'end': 308.535, 'text': 'And we need to add a height, which we want to take up the entire browser.', 'start': 304.953, 'duration': 3.582}, {'end': 310.496, 'text': 'So 100 viewport heights.', 'start': 308.615, 'duration': 1.881}, {'end': 313.698, 'text': 'So that will just push everything to the bottom.', 'start': 311.037, 'duration': 2.661}, {'end': 318.461, 'text': 'Now, as far as the container, we want this stuff in the middle.', 'start': 314.399, 'duration': 4.062}, {'end': 323.824, 'text': 'And remember, we have a class of container inside both of these elements here.', 'start': 319.181, 'duration': 4.643}, {'end': 327.126, 'text': "So let's say container.", 'start': 324.684, 'duration': 2.442}, {'end': 330.428, 'text': "And we're just going to set a max width.", 'start': 328.847, 'duration': 1.581}, {'end': 334.159, 'text': 'of 1100 pixels.', 'start': 331.738, 'duration': 2.421}, {'end': 337.939, 'text': "Let's set the margin to zero auto.", 'start': 334.799, 'duration': 3.14}, {'end': 344.761, 'text': 'So we want the left and right to be auto so that centered and then just an overflow of auto.', 'start': 338.539, 'duration': 6.222}, {'end': 348.581, 'text': "OK So that'll push the stuff to the middle.", 'start': 344.781, 'duration': 3.8}], 'summary': 'Using flexbox, set column direction, justify content flex end, height 100vh, max width 1100px, margin 0 auto, overflow auto.', 'duration': 53.239, 'max_score': 295.342, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k295342.jpg'}, {'end': 469.874, 'src': 'embed', 'start': 440.154, 'weight': 5, 'content': [{'end': 442.155, 'text': "And then I'm just going to add a border top.", 'start': 440.154, 'duration': 2.001}, {'end': 449.179, 'text': "Let's say three pixels light sky blue and solid.", 'start': 444.175, 'duration': 5.004}, {'end': 450.78, 'text': 'All right.', 'start': 450.46, 'duration': 0.32}, {'end': 451.961, 'text': 'So it should look like this.', 'start': 450.8, 'duration': 1.161}, {'end': 456.084, 'text': 'Now we want these to be in columns with the grid system.', 'start': 452.181, 'duration': 3.903}, {'end': 461.308, 'text': 'So if we look at our HTML, we have this container.', 'start': 457.165, 'duration': 4.143}, {'end': 466.151, 'text': 'And then inside there, each of these divs, I want to be a grid item that we can align.', 'start': 461.748, 'duration': 4.403}, {'end': 469.874, 'text': 'So we want to we want to take the container that is in counters.', 'start': 466.612, 'duration': 3.262}], 'summary': 'Adding a 3-pixel light sky blue solid border to create grid items within a container.', 'duration': 29.72, 'max_score': 440.154, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k440154.jpg'}, {'end': 692.421, 'src': 'embed', 'start': 665.983, 'weight': 4, 'content': [{'end': 671.928, 'text': 'Now, if we look at our HTML, we want to grab all of these divs right with the class of counter.', 'start': 665.983, 'duration': 5.945}, {'end': 680.995, 'text': "So to get those, we're going to use document dot query selector all not query selector.", 'start': 672.989, 'duration': 8.006}, {'end': 682.757, 'text': "That's if you want to select one item.", 'start': 681.035, 'duration': 1.722}, {'end': 687.039, 'text': "We're selecting all of the classes of counter.", 'start': 683.297, 'duration': 3.742}, {'end': 692.421, 'text': "Okay And that's going to give us what's called a node list, which is similar to an array.", 'start': 688.139, 'duration': 4.282}], 'summary': "Using document.queryselectorall to grab divs with class 'counter' in html.", 'duration': 26.438, 'max_score': 665.983, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k665983.jpg'}], 'start': 200.773, 'title': 'Web page styling and design', 'summary': 'Covers styling a web page using live server and css, including importing a font, setting background and font properties, using flexbox for layout, aligning elements using flexbox and grid, styling elements with specific colors and sizes, making the design responsive with a media query, and includes 30 lines of javascript code to select and manipulate elements in the document.', 'chapters': [{'end': 348.581, 'start': 200.773, 'title': 'Styling web page with live server and css', 'summary': 'Covers styling a web page using live server and css, including importing a font, setting background and font properties, and using flexbox for layout.', 'duration': 147.808, 'highlights': ['Importing the Roboto font from Google Fonts and setting it as the font family in the body.', 'Setting the background color to light sky blue and adding an abstract background URL to the body.', 'Using flexbox to display the body as a column, aligning items with flex end, and setting a height of 100 viewport heights to push content to the bottom.', 'Setting a max width of 1100 pixels and centering the content using margin: 0 auto in the container class.']}, {'end': 692.421, 'start': 349.802, 'title': 'Web design alignment and styling', 'summary': 'Discusses aligning elements using flexbox and grid, styling elements with specific colors and sizes, and making the design responsive with a media query, and includes 30 lines of javascript code to select and manipulate elements in the document.', 'duration': 342.619, 'highlights': ['The chapter discusses aligning elements using flexbox and grid, styling elements with specific colors and sizes, and making the design responsive with a media query.', 'The JavaScript section includes under 30 lines of code to select all divs with the class of counter using document.querySelector all.']}], 'duration': 491.648, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k200773.jpg', 'highlights': ['Using flexbox to display the body as a column, aligning items with flex end, and setting a height of 100 viewport heights to push content to the bottom.', 'Setting a max width of 1100 pixels and centering the content using margin: 0 auto in the container class.', 'Importing the Roboto font from Google Fonts and setting it as the font family in the body.', 'Setting the background color to light sky blue and adding an abstract background URL to the body.', 'The JavaScript section includes under 30 lines of code to select all divs with the class of counter using document.querySelector all.', 'The chapter discusses aligning elements using flexbox and grid, styling elements with specific colors and sizes, and making the design responsive with a media query.']}, {'end': 1094.017, 'segs': [{'end': 746.805, 'src': 'embed', 'start': 692.741, 'weight': 2, 'content': [{'end': 695.763, 'text': "So we'll be able to loop through it and do what we want with each item.", 'start': 692.741, 'duration': 3.022}, {'end': 700.412, 'text': "Now, I'm also going to set a variable called speed, which I'm going to set to 200.", 'start': 696.431, 'duration': 3.981}, {'end': 704.654, 'text': 'And this is going to be basically what we divide the target by.', 'start': 700.412, 'duration': 4.242}, {'end': 710.015, 'text': 'So we can set an increment because we need to have some kind of increment to count by.', 'start': 705.994, 'duration': 4.021}, {'end': 713.996, 'text': "Right So basically, the lower this is, the faster it's going to go.", 'start': 710.375, 'duration': 3.621}, {'end': 717.237, 'text': "And I'll show you that I'll give you an example after.", 'start': 714.016, 'duration': 3.221}, {'end': 720.118, 'text': "But let's take counters and let's loop through.", 'start': 717.297, 'duration': 2.821}, {'end': 721.979, 'text': 'We can use for each on a node list.', 'start': 720.178, 'duration': 1.801}, {'end': 723.94, 'text': 'And this takes in a function.', 'start': 722.659, 'duration': 1.281}, {'end': 725.26, 'text': "We're going to say for each.", 'start': 723.96, 'duration': 1.3}, {'end': 734.003, 'text': "counter, we're going to have a function here called updateCount.", 'start': 727, 'duration': 7.003}, {'end': 739.026, 'text': "And we'll use an arrow here.", 'start': 737.745, 'duration': 1.281}, {'end': 746.805, 'text': "So in this function, we're going to get the target of whatever counter we're iterating through.", 'start': 740.962, 'duration': 5.843}], 'summary': "Setting variable 'speed' to 200, looping through items with an increment.", 'duration': 54.064, 'max_score': 692.741, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k692741.jpg'}, {'end': 808.301, 'src': 'heatmap', 'start': 765.758, 'weight': 4, 'content': [{'end': 766.979, 'text': 'So we want to be able to get that.', 'start': 765.758, 'duration': 1.221}, {'end': 769.922, 'text': "And then I guess let's just console log that.", 'start': 767.079, 'duration': 2.843}, {'end': 774.447, 'text': "And then we'll call update count right here.", 'start': 770.322, 'duration': 4.125}, {'end': 780.652, 'text': "OK, so it'll just call it once and it should show us four values.", 'start': 775.831, 'duration': 4.821}, {'end': 782.413, 'text': 'And you can see we get the target.', 'start': 781.133, 'duration': 1.28}, {'end': 789.795, 'text': "Now, these are strings, right? If we do console log type of and we take a look, there's strings.", 'start': 782.473, 'duration': 7.322}, {'end': 793.476, 'text': 'I want them to be numbers and we can do that just by adding a plus sign.', 'start': 789.835, 'duration': 3.641}, {'end': 795.777, 'text': "So if we now look now, they're numbers.", 'start': 793.536, 'duration': 2.241}, {'end': 798.738, 'text': 'OK, so we have the target as a number.', 'start': 795.797, 'duration': 2.941}, {'end': 803.559, 'text': 'Now we want to get the count, whatever is in the actual target.', 'start': 799.318, 'duration': 4.241}, {'end': 808.301, 'text': 'element. so whatever this is, we want to grab that and put that into a variable.', 'start': 804.219, 'duration': 4.082}], 'summary': 'Updating and converting values to numbers in javascript for target and count elements.', 'duration': 42.543, 'max_score': 765.758, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k765758.jpg'}, {'end': 862.712, 'src': 'embed', 'start': 827.851, 'weight': 6, 'content': [{'end': 837.253, 'text': 'so to get the increment, what we want to increment by, We can just take the target and we want to divide it by whatever our speed is.', 'start': 827.851, 'duration': 9.402}, {'end': 843.76, 'text': 'OK And remember the lower the lower it is the faster it should count up.', 'start': 837.274, 'duration': 6.486}, {'end': 846.984, 'text': 'So we have our increments.', 'start': 845.282, 'duration': 1.702}, {'end': 850.568, 'text': 'And just to show you that.', 'start': 847.585, 'duration': 2.983}, {'end': 858.645, 'text': 'So you can see the first one is 300 and then we get 75, 45, 25.', 'start': 852.958, 'duration': 5.687}, {'end': 862.712, 'text': "So it's just it's just taking the target.", 'start': 858.646, 'duration': 4.066}], 'summary': 'The increment is determined by dividing the target by the speed, resulting in increments of 300, 75, 45, and 25.', 'duration': 34.861, 'max_score': 827.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k827851.jpg'}, {'end': 940.02, 'src': 'embed', 'start': 883.007, 'weight': 0, 'content': [{'end': 888.451, 'text': "So let's say if the count is less than the target, and then we'll have an else here.", 'start': 883.007, 'duration': 5.444}, {'end': 893.075, 'text': 'So if it reaches its target, we just want to display whatever that number is.', 'start': 889.412, 'duration': 3.663}, {'end': 897.318, 'text': "So we'll say count.intertext and set that to the target.", 'start': 893.135, 'duration': 4.183}, {'end': 907.196, 'text': "OK now if it's not if it hasn't reached the target yet then we're going to take the counter and set the inner text equal to.", 'start': 898.883, 'duration': 8.313}, {'end': 910.831, 'text': 'whatever the count is plus the increment.', 'start': 907.95, 'duration': 2.881}, {'end': 917.373, 'text': 'OK And then we need to keep calling this update count function.', 'start': 912.131, 'duration': 5.242}, {'end': 920.694, 'text': "So we're going to we're going to use a set time out here.", 'start': 918.093, 'duration': 2.601}, {'end': 924.295, 'text': 'And what set time out does is it runs a function.', 'start': 921.794, 'duration': 2.501}, {'end': 927.376, 'text': "So we're going to run update count every whatever.", 'start': 924.375, 'duration': 3.001}, {'end': 931.977, 'text': "So are not action say that's set interval set time out.", 'start': 927.716, 'duration': 4.261}, {'end': 934.598, 'text': "We're going to wait whatever.", 'start': 932.277, 'duration': 2.321}, {'end': 936.058, 'text': "So let's do one millisecond.", 'start': 934.618, 'duration': 1.44}, {'end': 940.02, 'text': "So after one millisecond, it'll run this update count.", 'start': 936.638, 'duration': 3.382}], 'summary': 'Using javascript to update count if less than target.', 'duration': 57.013, 'max_score': 883.007, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k883007.jpg'}, {'end': 971.064, 'src': 'heatmap', 'start': 941.993, 'weight': 1, 'content': [{'end': 943.554, 'text': "and yeah, i think that's it.", 'start': 941.993, 'duration': 1.561}, {'end': 947.315, 'text': "so let's save and we can see.", 'start': 943.554, 'duration': 3.761}, {'end': 958.359, 'text': 'we have the numbers and if i reload it just counts up and if you want to see each count in each iteration, we can console,', 'start': 947.315, 'duration': 11.044}, {'end': 963.281, 'text': "log the count and it's just going to increment by whatever.", 'start': 958.359, 'duration': 4.922}, {'end': 966.882, 'text': 'this is, which is the target, divided by whatever we put as the speed.', 'start': 963.281, 'duration': 3.601}, {'end': 971.064, 'text': 'So if we go back and we look in our console, it starts at zero.', 'start': 967.402, 'duration': 3.662}], 'summary': 'The program counts up incrementally based on a target and speed input.', 'duration': 29.071, 'max_score': 941.993, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k941993.jpg'}, {'end': 1004.781, 'src': 'embed', 'start': 971.064, 'weight': 1, 'content': [{'end': 972.464, 'text': "right?. Because that's where we're starting.", 'start': 971.064, 'duration': 1.4}, {'end': 975.265, 'text': 'And then you can see the first iteration.', 'start': 973.004, 'duration': 2.261}, {'end': 977.846, 'text': "So these first four, because it's you know,", 'start': 975.485, 'duration': 2.361}, {'end': 984.789, 'text': "we have four counters and you can add and remove counters and you don't have to change anything in the script, which is nice.", 'start': 977.846, 'duration': 6.943}, {'end': 986.13, 'text': 'And then the next four.', 'start': 985.21, 'duration': 0.92}, {'end': 986.87, 'text': 'So the next one, 600.', 'start': 986.21, 'duration': 0.66}, {'end': 991.152, 'text': 'So it goes from 300 to 600, 75 to 150.', 'start': 986.87, 'duration': 4.282}, {'end': 995.337, 'text': 'And it just keeps going until that target is hit, which are these.', 'start': 991.152, 'duration': 4.185}, {'end': 996.959, 'text': 'All right.', 'start': 995.357, 'duration': 1.602}, {'end': 1004.781, 'text': 'So if we increase our subscribers to, you know, 80,000.', 'start': 997.019, 'duration': 7.762}], 'summary': 'The script allows adding and removing counters without script changes. it increases from 300 to 600, 75 to 150, until the target is hit. it mentions increasing subscribers to 80,000.', 'duration': 33.717, 'max_score': 971.064, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k971064.jpg'}, {'end': 1062.281, 'src': 'heatmap', 'start': 1052.833, 'weight': 0.7, 'content': [{'end': 1055.616, 'text': "So that way, yeah, so now there's no decimals.", 'start': 1052.833, 'duration': 2.783}, {'end': 1058.94, 'text': "And that's just that takes way too long.", 'start': 1057.319, 'duration': 1.621}, {'end': 1062.281, 'text': "I mean, if you want that effect to last that long, that's that's fine.", 'start': 1058.96, 'duration': 3.321}], 'summary': 'Discussion about avoiding decimals and long waiting times.', 'duration': 9.448, 'max_score': 1052.833, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k1052833.jpg'}], 'start': 692.741, 'title': 'Javascript looping, variable setting, and incremental counting', 'summary': 'Explains how to loop through a node list, set variables, and manipulate data in javascript. it also details a javascript function for incremental counting, with the ability to dynamically add or remove counters, and its versatility for website implementation.', 'chapters': [{'end': 827.851, 'start': 692.741, 'title': 'Js looping and variable setting', 'summary': 'Explains how to loop through a node list in javascript, set a speed variable, convert string to number, and retrieve and manipulate data from html elements for further processing.', 'duration': 135.11, 'highlights': ["It's important to set a variable called speed, which is set to 200, to determine the increment for counting.", 'The chapter demonstrates using a for each loop to iterate through a node list and retrieve data from HTML elements for further processing.', 'The transcript illustrates the process of converting string data to numbers using the plus sign operator for further manipulation in JavaScript.']}, {'end': 1094.017, 'start': 827.851, 'title': 'Incremental counting script', 'summary': 'Explains a javascript function for incremental counting, where the count increments based on the target and speed, with the ability to dynamically add or remove counters, and it can be implemented into any website.', 'duration': 266.166, 'highlights': ['The script uses the target and speed to calculate the increment for counting, resulting in counts of 300, 75, 45, and 25 for a target of 16,000 and a speed of 200. The script calculates the increments based on the target (e.g., 16,000) and speed (e.g., 200), resulting in counts of 300, 75, 45, and 25.', 'The function includes an if statement to stop counting when the target is reached, and it displays the final count if the target is reached. The function uses an if statement to stop counting when the target is reached, and it displays the final count if the target is reached.', 'The script utilizes set timeout to continuously update the count at a specified interval, ensuring smooth and dynamic counting. The script uses set timeout to continuously update the count at a specified interval, ensuring smooth and dynamic counting.', 'The script is flexible, allowing for the addition or removal of counters without requiring changes in the script, making it easily adaptable for different scenarios. The script allows for the addition or removal of counters without requiring changes in the script, making it easily adaptable for different scenarios.']}], 'duration': 401.276, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/a6XIMIKmj9k/pics/a6XIMIKmj9k692741.jpg', 'highlights': ['The script uses set timeout to continuously update the count at a specified interval, ensuring smooth and dynamic counting.', 'The script is flexible, allowing for the addition or removal of counters without requiring changes in the script, making it easily adaptable for different scenarios.', 'The chapter demonstrates using a for each loop to iterate through a node list and retrieve data from HTML elements for further processing.', 'The function includes an if statement to stop counting when the target is reached, and it displays the final count if the target is reached.', 'The transcript illustrates the process of converting string data to numbers using the plus sign operator for further manipulation in JavaScript.', "It's important to set a variable called speed, which is set to 200, to determine the increment for counting.", 'The script uses the target and speed to calculate the increment for counting, resulting in counts of 300, 75, 45, and 25 for a target of 16,000 and a speed of 200.']}], 'highlights': ['Building an animated counter with HTML, CSS, and JavaScript', 'The HTML structure for creating a counter to display social media stats including Twitter followers (15,000), Facebook likes (9,000), and LinkedIn connections (5,000)', 'The script uses set timeout to continuously update the count at a specified interval, ensuring smooth and dynamic counting', 'The script is flexible, allowing for the addition or removal of counters without requiring changes in the script, making it easily adaptable for different scenarios', 'The chapter demonstrates using a for each loop to iterate through a node list and retrieve data from HTML elements for further processing']}