title
JavaScript Drag & Drop Sortable List Project

description
Learn the drag & drop API, array methods, spread operator, and DOM manipulation in this vanilla JavaScript project Full 20 Projects Course: https://www.udemy.com/course/web-projects-with-vanilla-javascript/?referralCode=F9B7C7FED834F91ADE75 Code: [MONTHNAME]2021 Code: https://github.com/bradtraversy/vanillawebprojects/tree/master/sortable-list TImestamps: 0:00 - Intro 2:27 - Insert List Items Into DOM 12:02 - Scramble List Items 18:44 - The CSS 31:07 - Drag & Drop Functionality 46:05 - Check Order

detail
{'title': 'JavaScript Drag & Drop Sortable List Project', 'heatmap': [{'end': 719.087, 'start': 650.486, 'weight': 0.777}, {'end': 2363.56, 'start': 2325.095, 'weight': 0.787}, {'end': 2422.568, 'start': 2382.096, 'weight': 0.771}, {'end': 2578.849, 'start': 2508.18, 'weight': 0.742}], 'summary': 'A project on building a vanilla javascript sortable list with drag and drop is presented, covering array scrambling, css styling, drag and drop events, and hover effects, with a focus on methods like foreach, map, and sort, and demonstrating the functionality of sorting and checking order of a list, while creating and manipulating the dom. additionally, it explains creating draggable list items in html, applying css for centering, background color, and google fonts, and working with drag and drop events, including using drag start, drag enter, drag leave, drag over, and drop events, and details the process of adding event listeners for drag and drop functionality.', 'chapters': [{'end': 476.892, 'segs': [{'end': 58.113, 'src': 'embed', 'start': 24.368, 'weight': 0, 'content': [{'end': 28.793, 'text': "So in this video, we're going to build a vanilla JavaScript sortable list with drag and drop.", 'start': 24.368, 'duration': 4.425}, {'end': 32.776, 'text': 'And this is from my 20 vanilla JavaScript project course on Udemy.', 'start': 29.313, 'duration': 3.463}, {'end': 35.879, 'text': "And I'll have a link to that in the description if you're interested.", 'start': 33.116, 'duration': 2.763}, {'end': 39.582, 'text': "So in this project, we'll be using methods like for each map sort.", 'start': 36.339, 'duration': 3.243}, {'end': 41.403, 'text': "We'll be using the spread operator.", 'start': 39.902, 'duration': 1.501}, {'end': 46.007, 'text': "We'll work with the document object model and we'll do a little bit of CSS as well.", 'start': 41.423, 'duration': 4.584}, {'end': 46.507, 'text': 'All right.', 'start': 46.227, 'duration': 0.28}, {'end': 47.428, 'text': "So let's get into it.", 'start': 46.567, 'duration': 0.861}, {'end': 54.412, 'text': 'OK, so this is a sortable list project and my main focus with this project is the drag and drop API,', 'start': 47.768, 'duration': 6.644}, {'end': 58.113, 'text': 'which you can find here in the Mozilla documentation.', 'start': 54.412, 'duration': 3.701}], 'summary': 'Build vanilla javascript sortable list with drag and drop, part of 20 vanilla javascript project course on udemy.', 'duration': 33.745, 'max_score': 24.368, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho24368.jpg'}, {'end': 110.378, 'src': 'embed', 'start': 82.186, 'weight': 2, 'content': [{'end': 85.148, 'text': 'And the idea is to just put it into the correct order.', 'start': 82.186, 'duration': 2.962}, {'end': 90.611, 'text': "And we're going to make it so that on each page load, you can see that it's in just a scrambled order.", 'start': 85.468, 'duration': 5.143}, {'end': 97.674, 'text': "OK, so we're going to scramble the list and then we can go ahead and take one and we can move it to another spot.", 'start': 90.631, 'duration': 7.043}, {'end': 102.556, 'text': "And you'll see we have a little highlight when we're hovered over a certain item.", 'start': 97.694, 'duration': 4.862}, {'end': 106.777, 'text': "And I can drop it there and it's going to switch spots with wherever I drop it.", 'start': 102.896, 'duration': 3.881}, {'end': 110.378, 'text': 'So this button down here is to check the order.', 'start': 107.637, 'duration': 2.741}], 'summary': 'Developing a feature to scramble and rearrange a list on page load, with the ability to move items and check the order.', 'duration': 28.192, 'max_score': 82.186, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho82186.jpg'}, {'end': 191.751, 'src': 'embed', 'start': 162.499, 'weight': 4, 'content': [{'end': 171.42, 'text': "So we're going to do the HTML first, which is going to be really quick and then create a function to generate or output our list items into the DOM.", 'start': 162.499, 'duration': 8.921}, {'end': 174.541, 'text': "That's the top ten richest people or whatever you want to use.", 'start': 171.5, 'duration': 3.041}, {'end': 176.201, 'text': "If you want to use something else, that's fine.", 'start': 174.581, 'duration': 1.62}, {'end': 178.966, 'text': "So let's start with the HTML, which will be very simple.", 'start': 176.721, 'duration': 2.245}, {'end': 183.234, 'text': "So let's just put a title here of top ten.", 'start': 179.186, 'duration': 4.048}, {'end': 191.751, 'text': "Richest people and we want to include our style sheets, which we're going to do, I believe, in the next video or the one after that.", 'start': 185.026, 'duration': 6.725}], 'summary': 'Creating html and generating list items for top ten richest people.', 'duration': 29.252, 'max_score': 162.499, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho162499.jpg'}, {'end': 458.495, 'src': 'embed', 'start': 421.829, 'weight': 3, 'content': [{'end': 431.78, 'text': "List items or let's say insert list items into Dom.", 'start': 421.829, 'duration': 9.951}, {'end': 433.522, 'text': 'All right.', 'start': 433.242, 'duration': 0.28}, {'end': 437.106, 'text': "So let's say function create list.", 'start': 433.562, 'duration': 3.544}, {'end': 446.168, 'text': "And what I'm going to do here is we need to take this these values in this richest people array.", 'start': 439.424, 'duration': 6.744}, {'end': 454.193, 'text': "But we basically want to copy it or recreate it so that we don't scramble the original array because we need this order.", 'start': 446.868, 'duration': 7.325}, {'end': 458.495, 'text': 'So what we can do is just use the spread operator which makes a copy of it.', 'start': 454.653, 'duration': 3.842}], 'summary': 'Creating a function to copy and insert list items into the dom.', 'duration': 36.666, 'max_score': 421.829, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho421829.jpg'}], 'start': 7.17, 'title': 'Javascript sortable list project', 'summary': 'Presents a project on building a vanilla javascript sortable list with drag and drop, using methods like foreach, map, and sort. it focuses on the drag and drop api, demonstrating the functionality of sorting and checking order of a list, while creating and manipulating the dom.', 'chapters': [{'end': 143.23, 'start': 7.17, 'title': 'Javascript sortable list project', 'summary': 'Presents a project on building a vanilla javascript sortable list with drag and drop, using methods like foreach, map, and sort, focusing on the drag and drop api and demonstrating the functionality of sorting and checking order of a list.', 'duration': 136.06, 'highlights': ['The project focuses on building a vanilla JavaScript sortable list with drag and drop, using methods like forEach, map, sort, and the spread operator. The project involves utilizing methods like forEach, map, sort, and the spread operator for building a vanilla JavaScript sortable list with drag and drop.', 'The chapter emphasizes the use of drag and drop API and various drag events such as drag start, drop, drag enter, and drag leave for creating a sortable list. The chapter emphasizes the use of drag and drop API and various drag events such as drag start, drop, drag enter, and drag leave for creating a sortable list.', 'The project demonstrates the functionality of sorting and checking the order of a list, highlighting correct items in green and incorrect ones in red. The project demonstrates the functionality of sorting and checking the order of a list, highlighting correct items in green and incorrect ones in red.']}, {'end': 476.892, 'start': 143.71, 'title': 'Creating sortable list with javascript', 'summary': 'Demonstrates how to create a sortable list using javascript to generate list items, add icons and styling with font awesome, and manipulate the dom, including a function to insert list items and keep track of the index. it also covers handling the array of richest people and creating a function to generate the list items.', 'duration': 333.182, 'highlights': ['Creating a function to insert list items into the DOM Demonstrates creating a function to insert list items into the DOM, ensuring the original array order is preserved.', 'Manipulating the DOM to add icons and styling with Font Awesome Shows how to manipulate the DOM to add icons and styling using Font Awesome, enhancing the visual appeal of the sortable list.', 'Using JavaScript to generate list items and handle the array of richest people Illustrates using JavaScript to generate list items and handle the array of richest people, ensuring the correct order and functionality of the sortable list.']}], 'duration': 469.722, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho7170.jpg', 'highlights': ['The project focuses on building a vanilla JavaScript sortable list with drag and drop, using methods like forEach, map, sort, and the spread operator.', 'The chapter emphasizes the use of drag and drop API and various drag events such as drag start, drop, drag enter, and drag leave for creating a sortable list.', 'The project demonstrates the functionality of sorting and checking the order of a list, highlighting correct items in green and incorrect ones in red.', 'Creating a function to insert list items into the DOM Demonstrates creating a function to insert list items into the DOM, ensuring the original array order is preserved.', 'Using JavaScript to generate list items and handle the array of richest people Illustrates using JavaScript to generate list items and handle the array of richest people, ensuring the correct order and functionality of the sortable list.', 'Manipulating the DOM to add icons and styling with Font Awesome Shows how to manipulate the DOM to add icons and styling using Font Awesome, enhancing the visual appeal of the sortable list.']}, {'end': 704.197, 'segs': [{'end': 501.785, 'src': 'embed', 'start': 478.212, 'weight': 1, 'content': [{'end': 487.877, 'text': 'OK, So we put in a function here with person, which represents each item in the array, which is a string of a person, and then the index, which is,', 'start': 478.212, 'duration': 9.665}, {'end': 490.159, 'text': 'you know, zero, one, two and so on.', 'start': 487.877, 'duration': 2.282}, {'end': 496.302, 'text': "So within here let's create a value called list item and we're going to.", 'start': 491.439, 'duration': 4.863}, {'end': 501.785, 'text': "what we're going to do is create a new list item element to insert into the Dom.", 'start': 496.302, 'duration': 5.483}], 'summary': 'A function is used to create a new list item element to insert into the dom.', 'duration': 23.573, 'max_score': 478.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho478212.jpg'}, {'end': 652.567, 'src': 'embed', 'start': 599.119, 'weight': 0, 'content': [{'end': 607.284, 'text': 'draggable, and in order to make this actually draggable with HTML5, we need to add draggable equals true,', 'start': 599.119, 'duration': 8.165}, {'end': 609.825, 'text': 'so that we can actually click on it and drag it.', 'start': 607.284, 'duration': 2.541}, {'end': 620.171, 'text': "OK, And then inside that div we're going to have a paragraph, and I'm just going to give this a class of person name,", 'start': 609.845, 'duration': 10.326}, {'end': 622.072, 'text': "because that's what's going to be displayed in here.", 'start': 620.171, 'duration': 1.901}, {'end': 628.465, 'text': 'And then we want to display the value of the array, which is person.', 'start': 623.621, 'duration': 4.844}, {'end': 632.328, 'text': 'OK, so we loop through richest people for each one, each item.', 'start': 628.645, 'duration': 3.683}, {'end': 634.729, 'text': "We're calling it person and we're going to output it here.", 'start': 632.348, 'duration': 2.381}, {'end': 638.652, 'text': "And then under that, let's have an icon.", 'start': 635.37, 'duration': 3.282}, {'end': 646.018, 'text': "So this will be FAS and let's do F a dash grip dash lines.", 'start': 640.053, 'duration': 5.965}, {'end': 648.62, 'text': 'So basically something to grab onto to drag.', 'start': 646.158, 'duration': 2.462}, {'end': 652.567, 'text': 'OK And that should be it.', 'start': 650.486, 'duration': 2.081}], 'summary': 'Using html5 to create draggable elements and display array values.', 'duration': 53.448, 'max_score': 599.119, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho599119.jpg'}], 'start': 478.212, 'title': 'Creating draggable list items in html', 'summary': 'Explains how to create a draggable list item in html using javascript, including setting attributes and appending elements to the dom, resulting in a display of 10 richest people with draggable functionality.', 'chapters': [{'end': 704.197, 'start': 478.212, 'title': 'Creating draggable list items in html', 'summary': 'Explains how to create a draggable list item in html using javascript, including setting attributes and appending elements to the dom, resulting in a display of 10 richest people with draggable functionality.', 'duration': 225.985, 'highlights': ['Creating a list item element and adding attributes such as index and HTML content to display the richest people with draggable functionality. The chapter explains creating a new list item element in HTML and adding attributes like index and HTML content to display the richest people with a draggable functionality, resulting in the display of 10 richest people with draggable functionality.', 'Using JavaScript to append the list item element to the DOM, resulting in the display of the 10 richest people with draggable functionality. The chapter details using JavaScript to append the list item element to the DOM, resulting in the display of the 10 richest people with draggable functionality.', 'Utilizing HTML5 draggable attribute to enable the draggable functionality for the list item element. The chapter explains utilizing the HTML5 draggable attribute to enable the draggable functionality for the list item element.']}], 'duration': 225.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho478212.jpg', 'highlights': ['Creating a list item element with draggable functionality for displaying the 10 richest people.', 'Appending the list item element to the DOM using JavaScript for displaying the 10 richest people.', 'Utilizing HTML5 draggable attribute to enable draggable functionality for the list item element.']}, {'end': 1122.389, 'segs': [{'end': 772.997, 'src': 'embed', 'start': 746.902, 'weight': 0, 'content': [{'end': 753.025, 'text': "first thing i'm going to do is So I'm going to go right here, above for each and do a map.", 'start': 746.902, 'duration': 6.123}, {'end': 759.349, 'text': 'And what map does is it will take the array and allow us to return a new array of whatever we want.', 'start': 753.545, 'duration': 5.804}, {'end': 769.815, 'text': 'And we need we need a way to we need something to sort by and we want it to be a random number that we sort by so that it can get scrambled.', 'start': 760.189, 'duration': 9.626}, {'end': 772.997, 'text': "So what I'm going to do here is say for each one I'm going to just call a.", 'start': 770.235, 'duration': 2.762}], 'summary': 'Using map function to create a new array with a random sorting mechanism.', 'duration': 26.095, 'max_score': 746.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho746902.jpg'}, {'end': 838.761, 'src': 'embed', 'start': 816.145, 'weight': 2, 'content': [{'end': 824.93, 'text': "what we've done is is transformed it into an array of objects that has a value, a value value and a sort value.", 'start': 816.145, 'duration': 8.785}, {'end': 832.52, 'text': 'And the value is obviously the name, and then sort is going to be just a random decimal that comes from that math.random.', 'start': 825.798, 'duration': 6.722}, {'end': 838.761, 'text': "And if I reload each one of these sorts, it's going to be a different value, different number.", 'start': 833.14, 'duration': 5.621}], 'summary': 'Transformed data into array of objects with name and random sort value.', 'duration': 22.616, 'max_score': 816.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho816145.jpg'}], 'start': 705.708, 'title': 'Array operations for effective learning', 'summary': "Covers array scrambling of the top 10 richest people using high order array methods like 'map' and 'random' to enhance learning. it also explains transforming arrays into objects, sorting with a compare function, and mapping back into arrays of strings for sorting based on a random value in javascript.", 'chapters': [{'end': 816.145, 'start': 705.708, 'title': 'Array scrambling for effective learning', 'summary': "Discusses the process of scrambling an array of the top 10 richest people using high order array methods, specifically 'map' and 'random', to enable effective learning by allowing users to rearrange the list items for better understanding and engagement.", 'duration': 110.437, 'highlights': ["The process of scrambling an array using high order array methods like 'map' and 'random' is discussed to enable effective learning by allowing users to rearrange the list items for better understanding and engagement. The chapter discusses the process of scrambling an array of the top 10 richest people using high order array methods, specifically 'map' and 'random', to enable effective learning by allowing users to rearrange the list items for better understanding and engagement.", "The use of 'map' to create a new array and 'random' to generate a random decimal for sorting purposes is explained. The chapter explains how 'map' is used to create a new array and 'random' is used to generate a random decimal for sorting purposes.", 'The concept of chaining high order array methods to manipulate the array and the ability to add multiple high order array methods for array manipulation is mentioned. The chapter mentions the concept of chaining high order array methods to manipulate the array and the ability to add multiple high order array methods for array manipulation.']}, {'end': 1122.389, 'start': 816.145, 'title': 'Array sorting in javascript', 'summary': 'Explains the process of transforming an array into objects with a value and a sort value, sorting the array using the sort method with a compare function to achieve numerical sorting, and mapping it back into an array of strings to demonstrate how to sort an array of objects based on a random value in javascript.', 'duration': 306.244, 'highlights': ['The process of transforming an array into objects with a value and a sort value is demonstrated, and it involves adding a random decimal as the sort value using math.random.', 'The sorting of the array is explained, highlighting the use of the sort method with a compare function to achieve numerical sorting based on the random value.', 'The mapping of the sorted array back into an array of strings is detailed, illustrating how to extract and display only the values from the sorted array of objects.']}], 'duration': 416.681, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho705708.jpg', 'highlights': ["The chapter covers array scrambling using high order array methods like 'map' and 'random' to enhance learning.", "The use of 'map' to create a new array and 'random' to generate a random decimal for sorting purposes is explained.", 'The process of transforming an array into objects with a value and a sort value is demonstrated.']}, {'end': 1846.064, 'segs': [{'end': 1155.291, 'src': 'embed', 'start': 1124.477, 'weight': 2, 'content': [{'end': 1128.239, 'text': "right. so now we're going to do the css, because this doesn't look very good.", 'start': 1124.477, 'duration': 3.762}, {'end': 1132.761, 'text': 'i want to move everything to the middle and style these list items and so on.', 'start': 1128.239, 'duration': 4.522}, {'end': 1138.464, 'text': "so first thing we're going to do is grab a font from google fonts.google.com.", 'start': 1132.761, 'duration': 5.703}, {'end': 1142.566, 'text': "we're going to grab the ladle font.", 'start': 1138.464, 'duration': 4.102}, {'end': 1145.728, 'text': "so down here we'll go ahead and choose the import.", 'start': 1142.566, 'duration': 3.162}, {'end': 1148.488, 'text': "OK, we'll grab that.", 'start': 1147.628, 'duration': 0.86}, {'end': 1155.291, 'text': "And just at least while we do the CSS, let's just make this smaller so that we can see both at the same time.", 'start': 1149.009, 'duration': 6.282}], 'summary': 'Planning to improve appearance using css with google fonts, specifically the ladle font.', 'duration': 30.814, 'max_score': 1124.477, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1124477.jpg'}, {'end': 1199.327, 'src': 'embed', 'start': 1171.7, 'weight': 0, 'content': [{'end': 1176.283, 'text': "this is going to be pretty repetitive throughout our projects, just because we're just centering everything.", 'start': 1171.7, 'duration': 4.583}, {'end': 1179.666, 'text': "so let's set a background.", 'start': 1176.283, 'duration': 3.383}, {'end': 1191.463, 'text': "we'll do a background color explicitly to white and i'm going to display flex because i want to center everything, But I want it to be a column.", 'start': 1179.666, 'duration': 11.797}, {'end': 1194.044, 'text': 'so flex direction column.', 'start': 1191.463, 'duration': 2.581}, {'end': 1198.007, 'text': "And we're going to align items to the center.", 'start': 1195.025, 'duration': 2.982}, {'end': 1199.327, 'text': 'But go ahead and save that.', 'start': 1198.327, 'duration': 1}], 'summary': 'Project involves repetitive centering of elements using white background and flexbox with column layout.', 'duration': 27.627, 'max_score': 1171.7, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1171700.jpg'}, {'end': 1389.775, 'src': 'embed', 'start': 1359.285, 'weight': 4, 'content': [{'end': 1368.753, 'text': "So let's see, we'll do draggable list ally and let's set background color to white.", 'start': 1359.285, 'duration': 9.468}, {'end': 1377.012, 'text': "And let's set a display flex and set a flex value of one.", 'start': 1371.611, 'duration': 5.401}, {'end': 1378.953, 'text': 'All right.', 'start': 1377.232, 'duration': 1.721}, {'end': 1384.934, 'text': 'And then what I want to do next is add a border after each of these list items.', 'start': 1379.093, 'duration': 5.841}, {'end': 1389.775, 'text': "So except for the last one, there's no sense in having a border on the last one.", 'start': 1386.135, 'duration': 3.64}], 'summary': 'Creating a draggable list with white background, flex display, and a border after each item.', 'duration': 30.49, 'max_score': 1359.285, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1359285.jpg'}, {'end': 1449.257, 'src': 'embed', 'start': 1420.955, 'weight': 5, 'content': [{'end': 1424.978, 'text': 'So now we have a border on a bottom border on all of them, except for the last one.', 'start': 1420.955, 'duration': 4.023}, {'end': 1426.66, 'text': "So let's style the number.", 'start': 1425.639, 'duration': 1.021}, {'end': 1430.142, 'text': 'Basically, I want the number to be like in a big square on the left.', 'start': 1426.74, 'duration': 3.402}, {'end': 1433.124, 'text': 'So that has a class of number.', 'start': 1431.303, 'duration': 1.821}, {'end': 1438.208, 'text': "So let's take our draggable list and then the span with the class of number.", 'start': 1434.285, 'duration': 3.923}, {'end': 1449.257, 'text': "And let's add a background color, which is going to be I believe it's going to be our variable of background color.", 'start': 1440.87, 'duration': 8.387}], 'summary': 'Styling the numbers in a big square on the left.', 'duration': 28.302, 'max_score': 1420.955, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1420955.jpg'}, {'end': 1583.003, 'src': 'embed', 'start': 1531.522, 'weight': 1, 'content': [{'end': 1538.107, 'text': 'And we want the cursor to be a pointer so that the user knows that they can actually click and drag.', 'start': 1531.522, 'duration': 6.585}, {'end': 1557.737, 'text': "We're going to set display flex and let's go ahead and align items center and then we're going to justify the content to space between so that any remaining space between flex items goes in between the elements and then just set the padding to 15..", 'start': 1538.746, 'duration': 18.991}, {'end': 1561.359, 'text': 'So we bring it away from the sides and set flex to one.', 'start': 1557.737, 'duration': 3.622}, {'end': 1563.383, 'text': 'And there we go.', 'start': 1562.782, 'duration': 0.601}, {'end': 1564.365, 'text': 'So that looks pretty good.', 'start': 1563.403, 'duration': 0.962}, {'end': 1569.132, 'text': 'You can see you have a cursor so that hints that the user can actually click and drag it.', 'start': 1564.385, 'duration': 4.747}, {'end': 1573.021, 'text': "So let's see what's next.", 'start': 1571.761, 'duration': 1.26}, {'end': 1583.003, 'text': "When? when we click the check order button, which we will style this in a minute, what it's going to do is is see if the or see which.", 'start': 1573.361, 'duration': 9.642}], 'summary': 'Styling the cursor, alignment, and padding for button interaction.', 'duration': 51.481, 'max_score': 1531.522, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1531522.jpg'}, {'end': 1817.377, 'src': 'embed', 'start': 1788.678, 'weight': 7, 'content': [{'end': 1797.061, 'text': "And then let's set the font size to 16 pixels and then just add some padding.", 'start': 1788.678, 'duration': 8.383}, {'end': 1800.682, 'text': 'So 10 pixels top and bottom, 20 left and right.', 'start': 1797.921, 'duration': 2.761}, {'end': 1804.043, 'text': "And let's also add a cursor pointer here as well.", 'start': 1800.782, 'duration': 3.261}, {'end': 1805.184, 'text': 'All right.', 'start': 1804.924, 'duration': 0.26}, {'end': 1808.985, 'text': "And then I'm just going to give it a little effect when it's active.", 'start': 1805.364, 'duration': 3.621}, {'end': 1813.827, 'text': "So let's say check button and then colon active.", 'start': 1809.545, 'duration': 4.282}, {'end': 1817.377, 'text': 'So when we click it, I want it to just scale down a little bit.', 'start': 1814.577, 'duration': 2.8}], 'summary': 'Set font size to 16px, add padding 10px top/bottom, 20px left/right, cursor pointer, and active scaling effect on click.', 'duration': 28.699, 'max_score': 1788.678, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1788678.jpg'}], 'start': 1124.477, 'title': 'Css styling and draggable list', 'summary': 'Covers applying css for centering, background color, and importing google fonts, as well as styling a draggable list and button with color codes, flexbox layout, and event handling for item highlighting based on order.', 'chapters': [{'end': 1226.099, 'start': 1124.477, 'title': 'Css styling and centering', 'summary': 'Covers the process of applying css to center elements, set background color, and import a font, such as lato, from google fonts to improve the visual appearance of a web page.', 'duration': 101.622, 'highlights': ['The chapter involves grabbing the Lato font from Google Fonts and importing it, demonstrating a practical application of using external fonts to enhance web design.', 'The process of using CSS to center elements, set background color, and define font properties, such as font family and size, is explained, which can be applied repetitively across various projects to achieve consistent visual styling.', 'The use of flexbox properties, including display flex, flex direction, align items, and justify content, is demonstrated to effectively align and position elements within the web page layout.']}, {'end': 1846.064, 'start': 1226.739, 'title': 'Styling draggable list and button', 'summary': 'Covers the styling of a draggable list and button with specific color codes, flexbox layout, and event handling for item highlighting based on order, with a focus on creating a visually appealing and functional user interface.', 'duration': 619.325, 'highlights': ['The chapter covers the styling of a draggable list and button with specific color codes, flexbox layout, and event handling for item highlighting based on order, with a focus on creating a visually appealing and functional user interface. The chapter focuses on styling a draggable list and button, using specific color codes, flexbox layout, and event handling for item highlighting based on order.', 'The list items are styled with a background color, display flex, and a border at the bottom, except for the last item, to create a visually appealing layout. List items are styled with a background color, display flex, and a border at the bottom, except for the last item.', 'The number in each list item is styled to be in a big square on the left, with a background color, display flex, increased font size, and specific height and width. The number in each list item is styled to be in a big square on the left, with a background color, display flex, increased font size, and specific height and width.', "The 'draggable' class is styled to have a pointer cursor, display flex, and padding, creating a visually interactive UI element. The 'draggable' class is styled to have a pointer cursor, display flex, and padding, creating a visually interactive UI element.", 'The button is styled with a specific background color, border, text color, font size, padding, and cursor to create a visually appealing and interactive UI element. The button is styled with a specific background color, border, text color, font size, padding, and cursor to create a visually appealing and interactive UI element.']}], 'duration': 721.587, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1124477.jpg', 'highlights': ['The process of using CSS to center elements, set background color, and define font properties is explained, which can be applied repetitively across various projects.', 'The use of flexbox properties is demonstrated to effectively align and position elements within the web page layout.', 'The chapter involves grabbing the Lato font from Google Fonts and importing it, demonstrating a practical application of using external fonts to enhance web design.', 'The chapter covers the styling of a draggable list and button with specific color codes, flexbox layout, and event handling for item highlighting based on order, with a focus on creating a visually appealing and functional user interface.', 'The list items are styled with a background color, display flex, and a border at the bottom, except for the last item, to create a visually appealing layout.', 'The number in each list item is styled to be in a big square on the left, with a background color, display flex, increased font size, and specific height and width.', "The 'draggable' class is styled to have a pointer cursor, display flex, and padding, creating a visually interactive UI element.", 'The button is styled with a specific background color, border, text color, font size, padding, and cursor to create a visually appealing and interactive UI element.']}, {'end': 2251.34, 'segs': [{'end': 1877.128, 'src': 'embed', 'start': 1846.164, 'weight': 0, 'content': [{'end': 1852.19, 'text': "So, in the next video we're going to start to work on the drag events, because when I click and I hold this and I start to drag,", 'start': 1846.164, 'duration': 6.026}, {'end': 1853.392, 'text': 'we can fire off an event.', 'start': 1852.19, 'duration': 1.202}, {'end': 1855.894, 'text': 'When I drop it somewhere, we can fire off an event.', 'start': 1853.452, 'duration': 2.442}, {'end': 1859.758, 'text': 'We basically want to be able to just bring it to where we want.', 'start': 1855.934, 'duration': 3.824}, {'end': 1865.424, 'text': 'OK And then we want to proceed to be able to check the order and match it against the original array.', 'start': 1860.319, 'duration': 5.105}, {'end': 1866.886, 'text': "So we'll get into that next.", 'start': 1865.784, 'duration': 1.102}, {'end': 1867.786, 'text': 'All right.', 'start': 1867.486, 'duration': 0.3}, {'end': 1870.027, 'text': "So now we're going to get into drag and drop.", 'start': 1867.806, 'duration': 2.221}, {'end': 1877.128, 'text': "We want to be able to grab one of these, bring it down to where we want, let go, and then it'll get put in that spot.", 'start': 1870.387, 'duration': 6.741}], 'summary': 'Next video will cover drag events and matching order against original array.', 'duration': 30.964, 'max_score': 1846.164, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1846164.jpg'}, {'end': 1906.54, 'src': 'embed', 'start': 1882.909, 'weight': 1, 'content': [{'end': 1890.111, 'text': "And if we look at the documentation here, the MDN web docs, you'll see that there's a ton of different drag events.", 'start': 1882.909, 'duration': 7.202}, {'end': 1894.613, 'text': "So we're going to be using, let's see, drag start.", 'start': 1890.831, 'duration': 3.782}, {'end': 1896.815, 'text': 'So the user starts dragging an item.', 'start': 1895.013, 'duration': 1.802}, {'end': 1901.697, 'text': 'So we want to put that on the draggable class, which is, you know, what we grabbing right here.', 'start': 1897.275, 'duration': 4.422}, {'end': 1903.318, 'text': 'So we want drag start.', 'start': 1902.178, 'duration': 1.14}, {'end': 1906.54, 'text': 'We want drag enter and drag leave.', 'start': 1903.679, 'duration': 2.861}], 'summary': 'Using drag events like drag start, enter, and leave for item dragging.', 'duration': 23.631, 'max_score': 1882.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1882909.jpg'}, {'end': 2208.084, 'src': 'embed', 'start': 2154.623, 'weight': 3, 'content': [{'end': 2163.492, 'text': 'OK, and we have drag over.', 'start': 2154.623, 'duration': 8.869}, {'end': 2170.86, 'text': 'And we have drag drop.', 'start': 2169.318, 'duration': 1.542}, {'end': 2175.705, 'text': 'But the event itself is just called drop.', 'start': 2173.142, 'duration': 2.563}, {'end': 2177.322, 'text': 'All right.', 'start': 2177.082, 'duration': 0.24}, {'end': 2178.183, 'text': "So let's save that.", 'start': 2177.342, 'duration': 0.841}, {'end': 2179.644, 'text': 'And now these should fire off.', 'start': 2178.303, 'duration': 1.341}, {'end': 2181.126, 'text': "So let's open up our console.", 'start': 2179.704, 'duration': 1.422}, {'end': 2186.611, 'text': "And I mean, I know there's not a lot of room here, but I'm just going to click on this and move it slightly.", 'start': 2181.866, 'duration': 4.745}, {'end': 2190.995, 'text': "And you'll see we get drag start and drag enter because I've entered into this one.", 'start': 2186.651, 'duration': 4.344}, {'end': 2193.977, 'text': 'When we leave it, we get drag leave.', 'start': 2192.056, 'duration': 1.921}, {'end': 2197.881, 'text': "And you'll see the drag over just keeps going because I'm still just hovering over it.", 'start': 2193.997, 'duration': 3.884}, {'end': 2203.601, 'text': 'OK, if I let go, then the drag over stops and the drag leave run.', 'start': 2198.857, 'duration': 4.744}, {'end': 2208.084, 'text': 'So the reason I did the console log is just so you can see when these fire off.', 'start': 2203.661, 'duration': 4.423}], 'summary': 'Demonstration of drag and drop events with console log for visualization.', 'duration': 53.461, 'max_score': 2154.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2154623.jpg'}, {'end': 2267.19, 'src': 'embed', 'start': 2234.39, 'weight': 5, 'content': [{'end': 2236.433, 'text': "so you can see exactly when they're fired off.", 'start': 2234.39, 'duration': 2.043}, {'end': 2240.25, 'text': "Okay So now let's figure out what we need to do here.", 'start': 2237.494, 'duration': 2.756}, {'end': 2245.534, 'text': 'We have our events getting called, our functions getting called that are linked to our events,', 'start': 2240.29, 'duration': 5.244}, {'end': 2249.318, 'text': 'but we want to be able to grab one and let go and replace it.', 'start': 2245.534, 'duration': 3.784}, {'end': 2251.34, 'text': 'We want some other things to go on as well.', 'start': 2249.518, 'duration': 1.822}, {'end': 2257.025, 'text': 'Like when I hover over, you know, Michael Bloomberg or whatever, we want that that color to change.', 'start': 2251.38, 'duration': 5.645}, {'end': 2258.926, 'text': "That's probably the easiest.", 'start': 2257.845, 'duration': 1.081}, {'end': 2260.268, 'text': "So let's do that first.", 'start': 2258.946, 'duration': 1.322}, {'end': 2267.19, 'text': "So basically on let's see, that's not actually that's not going to be on drag over.", 'start': 2260.928, 'duration': 6.262}], 'summary': 'Developing event handling for function calls and color changes on hover.', 'duration': 32.8, 'max_score': 2234.39, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2234390.jpg'}], 'start': 1846.164, 'title': 'Drag and drop events', 'summary': 'Covers working with drag and drop events, including using drag start, drag enter, drag leave, drag over, and drop events, and details the process of adding event listeners for drag and drop functionality, demonstrating how these events get fired off during the interaction.', 'chapters': [{'end': 1929.797, 'start': 1846.164, 'title': 'Working with drag and drop events', 'summary': 'Covers working with drag and drop events, including using drag start, drag enter, drag leave, drag over, and drop events to enable dragging and dropping items within an interface, as well as checking the order and matching it against the original array.', 'duration': 83.633, 'highlights': ['The chapter covers working with drag and drop events, including using drag start, drag enter, drag leave, drag over, and drop events to enable dragging and dropping items within an interface, as well as checking the order and matching it against the original array.', 'The tutorial mentions using drag start, drag enter, drag leave, drag over, and drop events to enable dragging and dropping items within an interface.', 'The tutorial emphasizes the importance of handling drag and drop events and mentions the use of various drag events such as drag start, drag enter, drag leave, and drag over.']}, {'end': 2251.34, 'start': 1930.477, 'title': 'Adding event listeners for drag and drop', 'summary': "Details the process of adding event listeners for drag and drop functionality, including using 'dragstart', 'dragenter', 'dragleave', 'dragover', and 'dragdrop' events, and demonstrates how these events get fired off during the interaction.", 'duration': 320.863, 'highlights': ["The function 'dragstart' is called when a draggable item is started to be dragged, with 'dragenter' and 'dragleave' getting triggered upon entering and leaving an element, 'dragover' continuously running as the element is hovered over, and 'dragdrop' firing when the item is dropped.", "The demonstration includes using console logs to show when the events are fired off and the continuous running of 'dragover' while hovering over the element.", 'The need to create functions linked to the events, as well as the desire for additional functionality such as grabbing and replacing items, is highlighted.']}], 'duration': 405.176, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho1846164.jpg', 'highlights': ['The chapter covers working with drag and drop events, including using drag start, drag enter, drag leave, drag over, and drop events to enable dragging and dropping items within an interface, as well as checking the order and matching it against the original array.', "The function 'dragstart' is called when a draggable item is started to be dragged, with 'dragenter' and 'dragleave' getting triggered upon entering and leaving an element, 'dragover' continuously running as the element is hovered over, and 'dragdrop' firing when the item is dropped.", 'The tutorial emphasizes the importance of handling drag and drop events and mentions the use of various drag events such as drag start, drag enter, drag leave, and drag over.', 'The tutorial mentions using drag start, drag enter, drag leave, drag over, and drop events to enable dragging and dropping items within an interface.', "The demonstration includes using console logs to show when the events are fired off and the continuous running of 'dragover' while hovering over the element.", 'The need to create functions linked to the events, as well as the desire for additional functionality such as grabbing and replacing items, is highlighted.']}, {'end': 3102.086, 'segs': [{'end': 2324.654, 'src': 'embed', 'start': 2274.212, 'weight': 2, 'content': [{'end': 2278.793, 'text': 'Remember, we have that CSS class of over and when we leave, we want to remove the class of over.', 'start': 2274.212, 'duration': 4.581}, {'end': 2289.856, 'text': "So on drag enter, let's just simply say we can actually use this keyword, which pertains to the element class list add.", 'start': 2279.313, 'duration': 10.543}, {'end': 2295.93, 'text': "And we're going to add the class of over, which will give it a slightly darker background.", 'start': 2291.647, 'duration': 4.283}, {'end': 2296.751, 'text': 'All right.', 'start': 2296.47, 'duration': 0.281}, {'end': 2300.193, 'text': "And then I'll just copy that and go into drag leave.", 'start': 2296.811, 'duration': 3.382}, {'end': 2307.518, 'text': "And instead of whoops, instead of add, we're going to use classless dot remove.", 'start': 2301.514, 'duration': 6.004}, {'end': 2309.879, 'text': 'All right.', 'start': 2309.659, 'duration': 0.22}, {'end': 2311.261, 'text': 'So that should be pretty simple.', 'start': 2309.979, 'duration': 1.282}, {'end': 2312.942, 'text': "Let's grab this and there we go.", 'start': 2311.281, 'duration': 1.661}, {'end': 2318.828, 'text': "So when we when we're entering, it adds the class of over to the current element.", 'start': 2313.003, 'duration': 5.825}, {'end': 2324.654, 'text': 'We use the word the keyword this, which pertains to the actual element, the list item.', 'start': 2318.869, 'duration': 5.785}], 'summary': "Add class 'over' on drag enter, remove on drag leave", 'duration': 50.442, 'max_score': 2274.212, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2274212.jpg'}, {'end': 2363.56, 'src': 'heatmap', 'start': 2325.095, 'weight': 0.787, 'content': [{'end': 2328.599, 'text': 'And then when we leave, it removes it and then it adds it to the next one.', 'start': 2325.095, 'duration': 3.504}, {'end': 2330.18, 'text': 'So we get that effect.', 'start': 2329.159, 'duration': 1.021}, {'end': 2331.622, 'text': 'All right.', 'start': 2331.341, 'duration': 0.281}, {'end': 2332.543, 'text': "So that's pretty easy.", 'start': 2331.642, 'duration': 0.901}, {'end': 2339.69, 'text': 'Now to be able to actually move one of these to another position.', 'start': 2334.525, 'duration': 5.165}, {'end': 2346.197, 'text': "we're going to deal with this right here, this drag start index that we initialized up here at the top.", 'start': 2339.69, 'duration': 6.507}, {'end': 2351.622, 'text': "So we're going to go into drag start and we're going to take the drag start index.", 'start': 2346.697, 'duration': 4.925}, {'end': 2355.096, 'text': "And we're going to set it to this dot.", 'start': 2353.055, 'duration': 2.041}, {'end': 2356.957, 'text': "And there's a method called closest.", 'start': 2355.136, 'duration': 1.821}, {'end': 2360.479, 'text': 'So we want the closest and does just that.', 'start': 2357.257, 'duration': 3.222}, {'end': 2363.56, 'text': "It'll look at the Dom and we want the closest ally.", 'start': 2360.559, 'duration': 3.001}], 'summary': 'Code demo explaining moving elements and using closest method.', 'duration': 38.465, 'max_score': 2325.095, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2325095.jpg'}, {'end': 2422.568, 'src': 'heatmap', 'start': 2382.096, 'weight': 0.771, 'content': [{'end': 2393, 'text': 'So we have the drag start index and we can actually take a look at that if you want drag start index and open up our console.', 'start': 2382.096, 'duration': 10.904}, {'end': 2394.28, 'text': "Let's grab this one right here.", 'start': 2393.02, 'duration': 1.26}, {'end': 2399.282, 'text': "And as I do the drag star, you'll see that this has a drag start index of two.", 'start': 2394.32, 'duration': 4.962}, {'end': 2402.083, 'text': 'I grab this one has an index of zero.', 'start': 2399.302, 'duration': 2.781}, {'end': 2410.045, 'text': "Now, since we have that set, let's go down to let's see, drag drop.", 'start': 2403.223, 'duration': 6.822}, {'end': 2417.887, 'text': 'And from here now we want to create a drag end index.', 'start': 2413.946, 'duration': 3.941}, {'end': 2422.568, 'text': "OK So we're going to say const drag.", 'start': 2418.947, 'duration': 3.621}], 'summary': 'Demonstrating drag start and end index values using javascript.', 'duration': 40.472, 'max_score': 2382.096, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2382096.jpg'}, {'end': 2578.849, 'src': 'heatmap', 'start': 2508.18, 'weight': 0.742, 'content': [{'end': 2514.145, 'text': "And let's just do a, um, Contours console log here.", 'start': 2508.18, 'duration': 5.965}, {'end': 2516.306, 'text': 'And I just want to show you something real quick.', 'start': 2514.165, 'duration': 2.141}, {'end': 2517.867, 'text': "So I'm just going to do one, two, three.", 'start': 2516.326, 'duration': 1.541}, {'end': 2522.591, 'text': 'And if I go and I drag this and I drop, nothing happens.', 'start': 2518.708, 'duration': 3.883}, {'end': 2528.234, 'text': 'And the reason for that is basically the drag over event is getting in the way.', 'start': 2522.671, 'duration': 5.563}, {'end': 2534.879, 'text': 'So we the the only reason I have drag over here is to prevent the default action.', 'start': 2528.835, 'duration': 6.044}, {'end': 2543.8, 'text': 'OK, so what we need to do is just pass in an event parameter and simply call E dot prevent default.', 'start': 2534.899, 'duration': 8.901}, {'end': 2547.321, 'text': "OK, so any event, it'll just prevent the default behavior.", 'start': 2544.54, 'duration': 2.781}, {'end': 2551.042, 'text': 'Now, if I go and I drop now, you can see we get the one, two, three.', 'start': 2547.401, 'duration': 3.641}, {'end': 2552.523, 'text': 'All right.', 'start': 2552.243, 'duration': 0.28}, {'end': 2559.665, 'text': "So let's get rid of this console log here and we actually want to swap the items.", 'start': 2553.843, 'duration': 5.822}, {'end': 2565.147, 'text': "So we're going to say let's say const say item.", 'start': 2559.765, 'duration': 5.382}, {'end': 2578.849, 'text': "one and we're going to set item one to list items and we're going to have the from index which is being passed in as a parameter,", 'start': 2567.339, 'duration': 11.51}], 'summary': 'Demonstrating use of preventdefault to enable drag and drop functionality.', 'duration': 70.669, 'max_score': 2508.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2508180.jpg'}, {'end': 2788.745, 'src': 'embed', 'start': 2760.768, 'weight': 0, 'content': [{'end': 2764.733, 'text': "So like I said in the next video we'll go ahead and do this check order functionality.", 'start': 2760.768, 'duration': 3.965}, {'end': 2765.411, 'text': 'All right.', 'start': 2765.151, 'duration': 0.26}, {'end': 2769.774, 'text': "So the last thing we want to do is to be able to check the order to see if it's correct.", 'start': 2765.511, 'duration': 4.263}, {'end': 2773.236, 'text': "And then basically, if it's in the correct spot, then it'll be green.", 'start': 2769.954, 'duration': 3.282}, {'end': 2774.497, 'text': "If it's not, it'll be red.", 'start': 2773.276, 'duration': 1.221}, {'end': 2780.72, 'text': 'So we have the check item right here or the check element, which is the button.', 'start': 2775.077, 'duration': 5.643}, {'end': 2782.982, 'text': 'And we just want to add an event listener to that.', 'start': 2781.22, 'duration': 1.762}, {'end': 2784.983, 'text': 'So when we click it, it fires off an event.', 'start': 2783.062, 'duration': 1.921}, {'end': 2786.724, 'text': "So I'm going to put that at the very bottom here.", 'start': 2785.003, 'duration': 1.721}, {'end': 2788.745, 'text': "Let's say check dot add.", 'start': 2786.784, 'duration': 1.961}], 'summary': 'Upcoming video will cover check order functionality and event listener for checking items.', 'duration': 27.977, 'max_score': 2760.768, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2760768.jpg'}, {'end': 2849.858, 'src': 'embed', 'start': 2810.376, 'weight': 1, 'content': [{'end': 2813.297, 'text': "And let's just put it we'll put a comment for swap items.", 'start': 2810.376, 'duration': 2.921}, {'end': 2823.891, 'text': 'So say swap list items that are drag and drop.', 'start': 2814.177, 'duration': 9.714}, {'end': 2837.983, 'text': "And then for check order, let's say check the order of list items on button click.", 'start': 2824.892, 'duration': 13.091}, {'end': 2844.509, 'text': "Actually, I don't need to say on button click because that's I mean, that's not part of the function.", 'start': 2839.544, 'duration': 4.965}, {'end': 2849.858, 'text': "So for check order, we're going to take our list items.", 'start': 2845.917, 'duration': 3.941}], 'summary': 'Developing functionality for list items: swap and check order.', 'duration': 39.482, 'max_score': 2810.376, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2810376.jpg'}, {'end': 3102.086, 'src': 'embed', 'start': 3072.057, 'weight': 3, 'content': [{'end': 3073.618, 'text': 'And, I mean, you could do this with anything.', 'start': 3072.057, 'duration': 1.561}, {'end': 3076.681, 'text': "It's just basically a little sorting game.", 'start': 3073.658, 'duration': 3.023}, {'end': 3078.582, 'text': "It doesn't have to be richest people.", 'start': 3077.221, 'duration': 1.361}, {'end': 3080.724, 'text': "That's just what came to mind for some reason.", 'start': 3078.622, 'duration': 2.102}, {'end': 3083.266, 'text': 'But you could put anything you want.', 'start': 3080.784, 'duration': 2.482}, {'end': 3087.229, 'text': 'And, of course, you could style it better if you want to get more into CSS.', 'start': 3083.846, 'duration': 3.383}, {'end': 3096.419, 'text': 'Hopefully this project taught you a little bit about drag and drop that that was the main purpose of this project to show you those events.', 'start': 3088.49, 'duration': 7.929}, {'end': 3098.982, 'text': 'But yeah, so that should be it.', 'start': 3097.06, 'duration': 1.922}, {'end': 3102.086, 'text': "So hopefully you enjoyed this one and I'll see you in the next one.", 'start': 3099.283, 'duration': 2.803}], 'summary': 'A project demonstrating drag and drop, with potential for customization and styling.', 'duration': 30.029, 'max_score': 3072.057, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho3072057.jpg'}], 'start': 2251.38, 'title': 'Hover and drag & drop functionality', 'summary': 'Discusses implementing hover color change using css classes and events, aiming to achieve a hover effect, and demonstrates drag and drop functionality for sorting items in a list, along with a check order functionality that validates item order, turning correct items green and incorrect ones red upon button click.', 'chapters': [{'end': 2324.654, 'start': 2251.38, 'title': 'Implementing hover color change', 'summary': "Discusses adding and removing a css class to change the color when hovering over elements, using 'enter' and 'leave' events, and the 'this' keyword, with the goal of achieving a hover effect by adding the class 'over' to the element and removing it when leaving.", 'duration': 73.274, 'highlights': ["When hovering over elements, the color change is implemented by adding the CSS class 'over' on enter event and removing it on leave event.", "The 'this' keyword is used to refer to the current element, and classList.add and classList.remove methods are employed to add and remove the 'over' class, resulting in a hover effect."]}, {'end': 3102.086, 'start': 2325.095, 'title': 'Drag and drop sorting functionality', 'summary': 'Demonstrates the implementation of drag and drop functionality to swap items in a list, and introduces a check order functionality to validate the correct order of items in the list, showcasing how the correct items turn green and incorrect ones turn red upon a button click.', 'duration': 776.991, 'highlights': ['The function swap items allows the user to drag and drop items, effectively swapping the positions of the items in the list.', 'The check order functionality compares the current order of items in the list with the correct order, turning items green if they are in the correct position and red if they are in the wrong position.', 'The drag and drop functionality is designed to be easily customizable for various projects, not limited to sorting the richest people in the world, and can be further styled using CSS.']}], 'duration': 850.706, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/wv7pvH1O5Ho/pics/wv7pvH1O5Ho2251380.jpg', 'highlights': ['The check order functionality compares the current order of items in the list with the correct order, turning items green if they are in the correct position and red if they are in the wrong position.', 'The function swap items allows the user to drag and drop items, effectively swapping the positions of the items in the list.', "When hovering over elements, the color change is implemented by adding the CSS class 'over' on enter event and removing it on leave event.", 'The drag and drop functionality is designed to be easily customizable for various projects, not limited to sorting the richest people in the world, and can be further styled using CSS.', "The 'this' keyword is used to refer to the current element, and classList.add and classList.remove methods are employed to add and remove the 'over' class, resulting in a hover effect."]}], 'highlights': ['The project focuses on building a vanilla JavaScript sortable list with drag and drop, using methods like forEach, map, sort, and the spread operator.', 'The chapter emphasizes the use of drag and drop API and various drag events such as drag start, drop, drag enter, and drag leave for creating a sortable list.', 'The project demonstrates the functionality of sorting and checking the order of a list, highlighting correct items in green and incorrect ones in red.', 'The process of using CSS to center elements, set background color, and define font properties is explained, which can be applied repetitively across various projects.', 'The chapter covers working with drag and drop events, including using drag start, drag enter, drag leave, drag over, and drop events to enable dragging and dropping items within an interface, as well as checking the order and matching it against the original array.', 'The check order functionality compares the current order of items in the list with the correct order, turning items green if they are in the correct position and red if they are in the wrong position.']}