title
JavaScript BookList App | No Frameworks

description
We build a full app in JavaScript without and library or JS framework, using classes, local storage and more. Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://codepen.io/bradtraversy/pen/OrmKWZ 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia 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': 'JavaScript BookList App | No Frameworks', 'heatmap': [{'end': 220.33, 'start': 185.825, 'weight': 1}, {'end': 1121.668, 'start': 1055.203, 'weight': 0.776}, {'end': 2866.947, 'start': 2792.491, 'weight': 0.747}], 'summary': 'Tutorial focuses on building a vanilla javascript book list app using es6 classes, covering html page creation, book management, form handling, ui update, functionality, event propagation, ui validation, bootstrap alert usage, dom manipulation, and local storage operations, with an emphasis on sharpening vanilla javascript skills and efficient data operations.', 'chapters': [{'end': 520.655, 'segs': [{'end': 63.494, 'src': 'embed', 'start': 24.085, 'weight': 0, 'content': [{'end': 30.347, 'text': "So in this project we're going to be building a vanilla JavaScript book list so that we can add books and delete them.", 'start': 24.085, 'duration': 6.262}, {'end': 32.427, 'text': "And we're not using any frameworks.", 'start': 30.628, 'duration': 1.799}, {'end': 34.91, 'text': "We're not using jQuery or any libraries.", 'start': 32.468, 'duration': 2.442}, {'end': 36.65, 'text': "It's just straight vanilla JavaScript.", 'start': 34.99, 'duration': 1.66}, {'end': 43.574, 'text': "And we're actually going to write our code in an object oriented fashion with classes using using ES6 classes.", 'start': 37.091, 'duration': 6.483}, {'end': 47.676, 'text': "So we'll have a book class because we're adding books here.", 'start': 44.194, 'duration': 3.482}, {'end': 52.698, 'text': "We're going to have a UI class that has to do with displaying UI, doing things in the UI like alerts.", 'start': 47.696, 'duration': 5.002}, {'end': 59.333, 'text': "We're also going to have a store class because we're saving our books to local storage in the browser.", 'start': 53.531, 'duration': 5.802}, {'end': 63.494, 'text': "Okay, and just to give you an example of how this works, it's very simple.", 'start': 59.813, 'duration': 3.681}], 'summary': 'Building a vanilla javascript book list with es6 classes for adding and deleting books.', 'duration': 39.409, 'max_score': 24.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW5824085.jpg'}, {'end': 163.935, 'src': 'embed', 'start': 123.894, 'weight': 2, 'content': [{'end': 129.779, 'text': "But we're just going to do everything in one app.js file just so we don't have to deal with any compiling or anything like that.", 'start': 123.894, 'duration': 5.885}, {'end': 135.646, 'text': 'So this should really sharpen your your vanilla JavaScript skills, which are very important.', 'start': 130.699, 'duration': 4.947}, {'end': 138.189, 'text': 'You know, a lot of people jump into frameworks too early.', 'start': 135.706, 'duration': 2.483}, {'end': 139.852, 'text': "So let's get started.", 'start': 138.79, 'duration': 1.062}, {'end': 148.742, 'text': "I don't want to talk too much longer because this could be a long tutorial, but we're going to start off by just creating the ui,", 'start': 139.892, 'duration': 8.85}, {'end': 151.104, 'text': "and i know it's just html and bootstrap.", 'start': 148.742, 'duration': 2.362}, {'end': 153.426, 'text': 'but uh, i like to do it start to finish.', 'start': 151.104, 'duration': 2.322}, {'end': 157.129, 'text': "you know, i don't like to just jump in and say and we're starting from here.", 'start': 153.426, 'duration': 3.703}, {'end': 159.091, 'text': 'i want to start with a clean slate.', 'start': 157.129, 'duration': 1.962}, {'end': 161.973, 'text': 'so index.html, app.js.', 'start': 159.091, 'duration': 2.882}, {'end': 163.935, 'text': 'those are the only two files we need.', 'start': 161.973, 'duration': 1.962}], 'summary': 'Tutorial emphasizes vanilla javascript, uses only app.js and index.html files.', 'duration': 40.041, 'max_score': 123.894, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58123894.jpg'}, {'end': 220.33, 'src': 'heatmap', 'start': 185.825, 'weight': 1, 'content': [{'end': 187.307, 'text': 'So bootswatch.com.', 'start': 185.825, 'duration': 1.482}, {'end': 190.091, 'text': "And there's a bunch of different themes here.", 'start': 188.188, 'duration': 1.903}, {'end': 193.955, 'text': 'What did I use? I used Yeti.', 'start': 190.892, 'duration': 3.063}, {'end': 201.925, 'text': "So you can use a different one if you want, but I'm going to go to Yeti, download, and I'm just going to grab the URL of this style sheet.", 'start': 194.696, 'duration': 7.229}, {'end': 208.254, 'text': "then we'll go ahead and put this in here and the next thing we need is font awesome.", 'start': 203.007, 'duration': 5.247}, {'end': 220.33, 'text': "so let's go to font awesome.com, start using, and then we'll grab that style sheet here and put that right above bootstrap.", 'start': 208.254, 'duration': 12.076}], 'summary': 'Using bootswatch.com, downloaded yeti theme and font awesome for website styling.', 'duration': 34.505, 'max_score': 185.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58185825.jpg'}, {'end': 283.374, 'src': 'embed', 'start': 256.192, 'weight': 6, 'content': [{'end': 262.757, 'text': "So we just have a blank blank page here and we're going to just quickly add the add the HTML.", 'start': 256.192, 'duration': 6.565}, {'end': 273.906, 'text': "So I want a container around everything and I'm going to add a class of empty dash four because that's going to it gives it margin top.", 'start': 262.837, 'duration': 11.069}, {'end': 275.367, 'text': "It's just going to bring it down a little bit.", 'start': 273.946, 'duration': 1.421}, {'end': 278.01, 'text': "And then inside there, let's have an H1.", 'start': 275.808, 'duration': 2.202}, {'end': 283.374, 'text': "I'm going to give it a class of display dash four, which is a bootstrap class.", 'start': 278.05, 'duration': 5.324}], 'summary': 'Adding html to create a container with a margin and an h1 element with a bootstrap class.', 'duration': 27.182, 'max_score': 256.192, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58256192.jpg'}, {'end': 477.295, 'src': 'embed', 'start': 442.188, 'weight': 5, 'content': [{'end': 443.729, 'text': 'OK, and then we need our button.', 'start': 442.188, 'duration': 1.541}, {'end': 446.571, 'text': "So under this last form group, let's say input.", 'start': 443.769, 'duration': 2.802}, {'end': 451.194, 'text': "So let's give it a type of submit and the value will say.", 'start': 446.731, 'duration': 4.463}, {'end': 459.86, 'text': "We'll say add book and then let's give this a class, a couple bootstrap classes BTN,", 'start': 453.276, 'duration': 6.584}, {'end': 466.765, 'text': 'BTN primary and BTN block which will make it reach all the way across and save.', 'start': 459.86, 'duration': 6.905}, {'end': 467.306, 'text': 'There we go.', 'start': 466.805, 'duration': 0.501}, {'end': 470.508, 'text': "So under the form here, we're going to have our table.", 'start': 467.946, 'duration': 2.562}, {'end': 477.295, 'text': 'And actually, I want to give this table a class of table and a class of table-striped.', 'start': 472.629, 'duration': 4.666}], 'summary': 'Creating a form with a submit button and a table with specific classes.', 'duration': 35.107, 'max_score': 442.188, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58442188.jpg'}], 'start': 7.059, 'title': 'Building vanilla javascript book list and html page with form and table', 'summary': 'Introduces building a vanilla javascript book list using es6 classes and emphasizes the importance of sharpening vanilla javascript skills. it also covers building an html page with a form and table, including adding classes and bootstrap components for styling.', 'chapters': [{'end': 255.471, 'start': 7.059, 'title': 'Vanilla javascript book list', 'summary': 'Introduces building a vanilla javascript book list without using frameworks or libraries, focusing on using classes in es6 for book, ui, and store functionalities, highlighting its simplicity and importance in sharpening vanilla javascript skills.', 'duration': 248.412, 'highlights': ['The project is about building a vanilla JavaScript book list without using any frameworks or libraries, emphasizing the use of classes using ES6 for book, UI, and store functionalities.', 'The book list allows adding and deleting books, and saving them to the local storage, with a simple example demonstrating the addition and removal of books.', 'The tutorial emphasizes that frameworks or libraries like jQuery are unnecessary for such a project, as it involves interacting with local storage and dealing with events, which helps in sharpening vanilla JavaScript skills.', 'The chapter encourages starting with a clean slate by creating an HTML file and app.js, leveraging Bootstrap for styling and using Bootswatch for themes, along with Font Awesome for icons.', 'The importance of not jumping into frameworks too early and the simplicity of the project in enhancing vanilla JavaScript skills is highlighted.']}, {'end': 520.655, 'start': 256.192, 'title': 'Building html page with form and table', 'summary': 'Describes building an html page with a form and table, including adding classes and bootstrap components to style the content.', 'duration': 264.463, 'highlights': ['The chapter describes building an HTML page with a form and table The transcript provides a detailed guide on constructing an HTML page with a form and table, using classes and bootstrap components.', "Adding bootstrap classes to style the content The speaker demonstrates the addition of bootstrap classes like 'empty-dash-four' and 'display-dash-four' to style the HTML content.", "Adding form elements including labels, inputs, and buttons The transcript outlines the process of adding form elements like labels, inputs, and buttons, with specific classes and attributes such as 'form-control', 'btn-primary', and 'btn-block'."]}], 'duration': 513.596, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW587059.jpg', 'highlights': ['The project emphasizes the use of classes using ES6 for book, UI, and store functionalities.', 'The book list allows adding and deleting books, and saving them to the local storage.', 'The tutorial encourages not using frameworks or libraries like jQuery for the project, highlighting the importance of sharpening vanilla JavaScript skills.', 'The chapter emphasizes starting with a clean slate by creating an HTML file and app.js, leveraging Bootstrap for styling and using Bootswatch for themes, along with Font Awesome for icons.', 'The importance of not jumping into frameworks too early and the simplicity of the project in enhancing vanilla JavaScript skills is highlighted.', 'The chapter provides a detailed guide on constructing an HTML page with a form and table, using classes and bootstrap components.', "The speaker demonstrates the addition of bootstrap classes like 'empty-dash-four' and 'display-dash-four' to style the HTML content.", "The transcript outlines the process of adding form elements like labels, inputs, and buttons, with specific classes and attributes such as 'form-control', 'btn-primary', and 'btn-block'."]}, {'end': 1054.703, 'segs': [{'end': 550.34, 'src': 'embed', 'start': 520.655, 'weight': 5, 'content': [{'end': 525.558, 'text': "because this is where we're going to insert all of our books and we're going to do that using JavaScript.", 'start': 520.655, 'duration': 4.903}, {'end': 527.639, 'text': "OK, so that's the entire UI.", 'start': 525.938, 'duration': 1.701}, {'end': 528.78, 'text': "We'll go ahead and save that.", 'start': 527.679, 'duration': 1.101}, {'end': 532.101, 'text': "Actually, let's add one more class to the table.", 'start': 529.58, 'duration': 2.521}, {'end': 534.964, 'text': 'to push it down a little bit.', 'start': 533.522, 'duration': 1.442}, {'end': 537.827, 'text': 'so empty margin top dash five.', 'start': 534.964, 'duration': 2.863}, {'end': 540.329, 'text': "that'll push it down a little bit.", 'start': 537.827, 'duration': 2.502}, {'end': 543.212, 'text': 'and then we need to of course include our app js.', 'start': 540.329, 'duration': 2.883}, {'end': 550.34, 'text': "so right here we'll say script source is going to be app.js.", 'start': 543.212, 'duration': 7.128}], 'summary': 'Using javascript to insert books into the ui and add class to table for margin adjustment.', 'duration': 29.685, 'max_score': 520.655, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58520655.jpg'}, {'end': 638.649, 'src': 'embed', 'start': 566.579, 'weight': 0, 'content': [{'end': 570.723, 'text': 'So if you did take the course, you may notice some changes, especially with the UI class.', 'start': 566.579, 'duration': 4.144}, {'end': 575.608, 'text': "Basically, I made all the methods static so that we don't have to instantiate the UI class.", 'start': 571.104, 'duration': 4.504}, {'end': 582.411, 'text': 'And I do have a tutorial on object-oriented programming in JavaScript, so basically ES6 classes.', 'start': 576.403, 'duration': 6.008}, {'end': 584.714, 'text': "If you want to check that out, that's on YouTube.", 'start': 582.812, 'duration': 1.902}, {'end': 588.299, 'text': "But yeah, we're going to just kind of put some comments in here.", 'start': 585.635, 'duration': 2.664}, {'end': 590.021, 'text': "So we're going to have the book class.", 'start': 588.359, 'duration': 1.662}, {'end': 592.845, 'text': 'And the purpose of that, it just represents..', 'start': 590.742, 'duration': 2.103}, {'end': 594.907, 'text': 'a book.', 'start': 594.327, 'duration': 0.58}, {'end': 599.228, 'text': "So every time we create a book, it's going to instantiate a book object.", 'start': 595.047, 'duration': 4.181}, {'end': 606.489, 'text': "We're going to have the UI class and this is to handle UI tasks.", 'start': 600.008, 'duration': 6.481}, {'end': 613.91, 'text': 'So anything in the user interface, like when when a book displays on the in the list here or removes or we show an alert.', 'start': 606.629, 'duration': 7.281}, {'end': 615.691, 'text': "that's going to be within the UI class.", 'start': 613.91, 'duration': 1.781}, {'end': 621.752, 'text': "Then we're going to have the store class, which takes care of storage.", 'start': 616.591, 'duration': 5.161}, {'end': 624.921, 'text': 'So handles storage.', 'start': 622.412, 'duration': 2.509}, {'end': 629.084, 'text': "in this case it's local storage which which is within the browser.", 'start': 624.921, 'duration': 4.163}, {'end': 633.366, 'text': "it doesn't go away when you refresh the page or leave the site or close the browser.", 'start': 629.084, 'duration': 4.282}, {'end': 635.807, 'text': "it stays there until it's cleared.", 'start': 633.366, 'duration': 2.441}, {'end': 638.649, 'text': "so then we're going to have some events.", 'start': 635.807, 'duration': 2.842}], 'summary': 'Course updates include ui class changes and javascript tutorial on es6 classes. new classes: book, ui, store for handling ui, storage, and events.', 'duration': 72.07, 'max_score': 566.579, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58566579.jpg'}, {'end': 702.592, 'src': 'embed', 'start': 672.565, 'weight': 1, 'content': [{'end': 675.027, 'text': "But it's easy enough just to just to create.", 'start': 672.565, 'duration': 2.462}, {'end': 676.428, 'text': "It's just going to have a constructor.", 'start': 675.087, 'duration': 1.341}, {'end': 679.371, 'text': "So we'll say class book.", 'start': 676.449, 'duration': 2.922}, {'end': 686.167, 'text': 'We want our constructor, which is just a method that runs when we instantiate a book.', 'start': 680.885, 'duration': 5.282}, {'end': 687.947, 'text': "It's going to take in all the fields.", 'start': 686.347, 'duration': 1.6}, {'end': 691.508, 'text': 'So title, author and ISBN.', 'start': 688.007, 'duration': 3.501}, {'end': 699.851, 'text': "And then we want to take those those whatever's passed in as these parameters and assign it to the property of that object.", 'start': 692.489, 'duration': 7.362}, {'end': 702.592, 'text': 'And we do that using this cave of this keyword.', 'start': 699.891, 'duration': 2.701}], 'summary': "A book class with a constructor takes in title, author, and isbn and assigns them to the object's properties using 'this' keyword.", 'duration': 30.027, 'max_score': 672.565, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58672565.jpg'}, {'end': 773.988, 'src': 'embed', 'start': 730.728, 'weight': 4, 'content': [{'end': 732.128, 'text': 'We have add book to list.', 'start': 730.728, 'duration': 1.4}, {'end': 735.19, 'text': 'We have remove book from list.', 'start': 732.209, 'duration': 2.981}, {'end': 738.591, 'text': 'We have what else? Alert show alert.', 'start': 735.25, 'duration': 3.341}, {'end': 742.144, 'text': 'So stuff like that is going to be going on in the UI.', 'start': 739.062, 'duration': 3.082}, {'end': 745.806, 'text': "Now, I don't want to have to instantiate the UI class.", 'start': 742.224, 'duration': 3.582}, {'end': 748.347, 'text': "So we're going to make all the methods static.", 'start': 745.906, 'duration': 2.441}, {'end': 757.512, 'text': "So, for instance, we're going to have a method called display books and make sure you put the static keyword before it now.", 'start': 748.847, 'duration': 8.665}, {'end': 763.902, 'text': "Ultimately, we want to pull our books from local storage, but we're not dealing with that just yet.", 'start': 759.319, 'duration': 4.583}, {'end': 765.063, 'text': "So I'm going to hard code.", 'start': 763.962, 'duration': 1.101}, {'end': 767.444, 'text': "Actually, I'll just paste it in here.", 'start': 765.823, 'duration': 1.621}, {'end': 773.988, 'text': "It's just just a hard coded array of books, and I'm putting it in a variable called stored books.", 'start': 768.004, 'duration': 5.984}], 'summary': 'Developing static methods for ui functionality and hard-coding book data for now.', 'duration': 43.26, 'max_score': 730.728, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58730728.jpg'}], 'start': 520.655, 'title': 'Javascript book management', 'summary': 'Covers creating classes for managing books, ui tasks, and storage, focusing on instantiating a book object, handling ui tasks, and local storage for book management. it also includes references to setting up the ui for book insertion using javascript and using static methods. additionally, it mentions a tutorial on object-oriented programming in javascript on youtube.', 'chapters': [{'end': 588.299, 'start': 520.655, 'title': 'Javascript ui book insertion', 'summary': 'Covers setting up the ui for book insertion using javascript, including adding classes, including the app.js file, and making changes to the ui class. additionally, it mentions the use of static methods and refers to a tutorial on object-oriented programming in javascript on youtube.', 'duration': 67.644, 'highlights': ['The UI setup involves adding classes and including the app.js file.', 'Changes were made to the UI class, with all methods made static to avoid instantiation.', 'Reference is made to a tutorial on object-oriented programming in JavaScript available on YouTube.']}, {'end': 1054.703, 'start': 588.359, 'title': 'Javascript book management', 'summary': 'Discusses the creation of classes for managing books, ui tasks, and storage, with a focus on instantiating a book object, handling ui tasks, and local storage for book management.', 'duration': 466.344, 'highlights': ['Creation of Book, UI, and Store classes The chapter introduces the creation of book, UI, and store classes to handle book management tasks.', "Instantiating a book object The process of instantiating a book object is explained, including the use of a constructor to assign values to the book's properties.", 'Handling UI tasks The UI class is discussed, focusing on methods for displaying books, adding books to the list, removing books from the list, and showing alerts.', 'Local storage for book management The store class is introduced to handle local storage, ensuring that data remains available even when the page is refreshed or the browser is closed.', 'Hard-coded array of books The use of a hard-coded array of books is explained for the purpose of simulating data from local storage.']}], 'duration': 534.048, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW58520655.jpg', 'highlights': ['Creation of Book, UI, and Store classes The chapter introduces the creation of book, UI, and store classes to handle book management tasks.', "Instantiating a book object The process of instantiating a book object is explained, including the use of a constructor to assign values to the book's properties.", 'Handling UI tasks The UI class is discussed, focusing on methods for displaying books, adding books to the list, removing books from the list, and showing alerts.', 'Local storage for book management The store class is introduced to handle local storage, ensuring that data remains available even when the page is refreshed or the browser is closed.', 'Changes were made to the UI class, with all methods made static to avoid instantiation.', 'The UI setup involves adding classes and including the app.js file.', 'Reference is made to a tutorial on object-oriented programming in JavaScript available on YouTube.', 'Hard-coded array of books The use of a hard-coded array of books is explained for the purpose of simulating data from local storage.']}, {'end': 1509.026, 'segs': [{'end': 1136.641, 'src': 'heatmap', 'start': 1055.203, 'weight': 0, 'content': [{'end': 1063.609, 'text': 'So to do that all we have to do is call list dot append child and pass in the row.', 'start': 1055.203, 'duration': 8.406}, {'end': 1072.213, 'text': "Now all we have to do is call display books and it'll take the books that we have here hard coded.", 'start': 1065.768, 'duration': 6.445}, {'end': 1078.018, 'text': "It's going to loop through them and it's going to add each one to the list with this method here.", 'start': 1072.694, 'duration': 5.324}, {'end': 1080.22, 'text': 'So how do we call this.', 'start': 1078.678, 'duration': 1.542}, {'end': 1083.883, 'text': 'We want to do that right here in this event to display the books.', 'start': 1080.32, 'duration': 3.563}, {'end': 1086.645, 'text': "So we're going to do document dot add event listener.", 'start': 1084.003, 'duration': 2.642}, {'end': 1092.548, 'text': 'And the event we want to listen for is Dom content loaded.', 'start': 1087.486, 'duration': 5.062}, {'end': 1099.23, 'text': 'OK So as soon as the Dom loads then we want to call you I dot display books.', 'start': 1092.568, 'duration': 6.662}, {'end': 1101.391, 'text': "So let's go ahead and save this.", 'start': 1100.071, 'duration': 1.32}, {'end': 1102.452, 'text': 'And there we go.', 'start': 1101.771, 'duration': 0.681}, {'end': 1104.052, 'text': 'So now the books are being displayed.', 'start': 1102.472, 'duration': 1.58}, {'end': 1104.953, 'text': 'All right.', 'start': 1104.072, 'duration': 0.881}, {'end': 1109.654, 'text': 'Now the next thing I want to do is is I want to be able to submit the form and add a book to the list.', 'start': 1105.073, 'duration': 4.581}, {'end': 1114.021, 'text': 'Now we already have ad book to list in our ui here.', 'start': 1109.714, 'duration': 4.307}, {'end': 1121.668, 'text': 'so we should be able to utilize this method again, not just with display books, but also when we actually click submit.', 'start': 1114.021, 'duration': 7.647}, {'end': 1124.891, 'text': 'so we need to handle collecting the data from the form.', 'start': 1121.668, 'duration': 3.223}, {'end': 1132.618, 'text': 'we need to handle instantiating a new book and then calling that add to to add to list method.', 'start': 1124.891, 'duration': 7.727}, {'end': 1136.641, 'text': "So let's go down here and let's say document dots.", 'start': 1133.258, 'duration': 3.383}], 'summary': 'Code demonstrates adding and displaying books using event listeners and methods.', 'duration': 81.438, 'max_score': 1055.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581055203.jpg'}, {'end': 1207.218, 'src': 'embed', 'start': 1172.827, 'weight': 4, 'content': [{'end': 1176.008, 'text': 'So one, we need to get form values.', 'start': 1172.827, 'duration': 3.181}, {'end': 1179.35, 'text': "So let's create a variable for each one.", 'start': 1177.269, 'duration': 2.081}, {'end': 1183.192, 'text': "We'll say title equals document dot.", 'start': 1179.41, 'duration': 3.782}, {'end': 1186.713, 'text': "And let's do query selector.", 'start': 1184.312, 'duration': 2.401}, {'end': 1190.135, 'text': 'And the inputs all have IDs.', 'start': 1187.693, 'duration': 2.442}, {'end': 1193.276, 'text': 'So we have title author ISBN.', 'start': 1190.175, 'duration': 3.101}, {'end': 1195.408, 'text': 'So we want to grab on to that.', 'start': 1194.147, 'duration': 1.261}, {'end': 1198.21, 'text': "So let's grab the ID of title.", 'start': 1195.488, 'duration': 2.722}, {'end': 1203.995, 'text': "And since this is an input, we don't want the actual element.", 'start': 1199.091, 'duration': 4.904}, {'end': 1207.218, 'text': "We want the value that's actually placed in it.", 'start': 1204.055, 'duration': 3.163}], 'summary': 'Creating variables to get form values for title, author, and isbn inputs.', 'duration': 34.391, 'max_score': 1172.827, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581172827.jpg'}, {'end': 1313.518, 'src': 'embed', 'start': 1241.985, 'weight': 6, 'content': [{'end': 1243.746, 'text': "OK And this isn't static.", 'start': 1241.985, 'duration': 1.761}, {'end': 1249.17, 'text': 'So we need to actually instantiate a book to to add a book.', 'start': 1243.846, 'duration': 5.324}, {'end': 1251.031, 'text': "So let's do.", 'start': 1249.91, 'duration': 1.121}, {'end': 1255.313, 'text': 'Instantiate book.', 'start': 1253.792, 'duration': 1.521}, {'end': 1267.26, 'text': "So we'll say const book equals and we want to do new book and then pass in the values that we want, which are going to be from the form,", 'start': 1255.773, 'duration': 11.487}, {'end': 1269.361, 'text': 'from the fields above.', 'start': 1267.26, 'duration': 2.101}, {'end': 1273.483, 'text': 'So author ISBN.', 'start': 1269.461, 'duration': 4.022}, {'end': 1279.547, 'text': "And then, you know, what I'll do is just console log book.", 'start': 1275.665, 'duration': 3.882}, {'end': 1282.774, 'text': "So let's save that.", 'start': 1281.693, 'duration': 1.081}, {'end': 1286.415, 'text': "Let's go over here and let's open up our Chrome tools.", 'start': 1282.814, 'duration': 3.601}, {'end': 1290.477, 'text': "And I need to keep this high because I know I'm being displayed down here somewhere.", 'start': 1286.936, 'duration': 3.541}, {'end': 1292.598, 'text': "Let's say title.", 'start': 1291.478, 'duration': 1.12}, {'end': 1295.38, 'text': 'Book one.', 'start': 1294.659, 'duration': 0.721}, {'end': 1298.201, 'text': 'Author Brad.', 'start': 1296.92, 'duration': 1.281}, {'end': 1301.082, 'text': 'Some number and submit.', 'start': 1299.482, 'duration': 1.6}, {'end': 1302.343, 'text': 'Oh, I forgot.', 'start': 1301.663, 'duration': 0.68}, {'end': 1305.665, 'text': 'You see how it flashed real quick because this is a submit event.', 'start': 1302.383, 'duration': 3.282}, {'end': 1308.446, 'text': 'We need to prevent the default value.', 'start': 1306.445, 'duration': 2.001}, {'end': 1313.518, 'text': 'or the default action of the form being submit.', 'start': 1310.097, 'duration': 3.421}], 'summary': 'Instantiating a book with author, isbn, and title values from a form, and preventing default form submission.', 'duration': 71.533, 'max_score': 1241.985, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581241985.jpg'}, {'end': 1382.399, 'src': 'embed', 'start': 1343.884, 'weight': 8, 'content': [{'end': 1347.746, 'text': "But notice it's prefixed with book because that's the class that it uses.", 'start': 1343.884, 'duration': 3.862}, {'end': 1350.348, 'text': 'OK, so good.', 'start': 1347.766, 'duration': 2.582}, {'end': 1351.528, 'text': 'So far, so good.', 'start': 1350.648, 'duration': 0.88}, {'end': 1358.993, 'text': 'Now, the next thing that we want to do is we need to add it to let me close this up.', 'start': 1352.149, 'duration': 6.844}, {'end': 1360.674, 'text': 'We need to add it to our UI.', 'start': 1359.033, 'duration': 1.641}, {'end': 1364.407, 'text': 'Now remember we already have that ad book to list.', 'start': 1361.485, 'duration': 2.922}, {'end': 1382.399, 'text': "Right So let's go right underneath and let's say you I dot ad book to list and then simply pass in the book.", 'start': 1364.527, 'duration': 17.872}], 'summary': 'Add book class to ui for display.', 'duration': 38.515, 'max_score': 1343.884, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581343884.jpg'}, {'end': 1435.836, 'src': 'embed', 'start': 1408.93, 'weight': 9, 'content': [{'end': 1416.252, 'text': 'we have a couple other things to do first, one of one of which is to clear our fields, because right now, if we submit something,', 'start': 1408.93, 'duration': 7.322}, {'end': 1420.226, 'text': 'You see that as soon as we submit, this stuff stays here.', 'start': 1417.604, 'duration': 2.622}, {'end': 1420.846, 'text': "I don't want that.", 'start': 1420.266, 'duration': 0.58}, {'end': 1422.547, 'text': 'I want this stuff to go away.', 'start': 1420.886, 'duration': 1.661}, {'end': 1425.609, 'text': "So we're going to have a method called clear fields.", 'start': 1422.668, 'duration': 2.941}, {'end': 1429.792, 'text': "So let's say clear fields.", 'start': 1426.65, 'duration': 3.142}, {'end': 1435.836, 'text': "And that's going to be on the UI class like that.", 'start': 1430.933, 'duration': 4.903}], 'summary': 'Creating a method to clear fields on the ui class.', 'duration': 26.906, 'max_score': 1408.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581408930.jpg'}], 'start': 1055.203, 'title': 'Implementing form handling and ui update in javascript', 'summary': 'Demonstrates implementing form submission and event handling to display and add books, covering getting form values and instantiating a book object, preventing default form submission, and updating the ui for improved user experience.', 'chapters': [{'end': 1172.727, 'start': 1055.203, 'title': 'Implementing form submission and event handling', 'summary': "Demonstrates implementing form submission and event handling for displaying and adding books to a list using javascript, including using 'list.appendchild', 'display books' method, and 'document.add event listener' to listen for 'dom content loaded', with a plan to utilize 'ad book to list' method for submitting the form.", 'duration': 117.524, 'highlights': ["The chapter demonstrates implementing form submission and event handling for displaying and adding books to a list using JavaScript, including using 'list.appendchild', 'display books' method, and 'document.add event listener' to listen for 'Dom content loaded', with a plan to utilize 'ad book to list' method for submitting the form.", "The method 'list.appendchild' is used to add each book to the list, which aids in dynamically displaying the books, providing a seamless user experience.", "The 'document.add event listener' is utilized to listen for the 'Dom content loaded' event, ensuring that the 'display books' method is called as soon as the Dom loads, enhancing the efficiency of the book display.", "The plan to utilize the 'ad book to list' method for submitting the form demonstrates a cohesive approach to reusing existing methods, promoting code reusability and maintaining consistency."]}, {'end': 1282.774, 'start': 1172.827, 'title': 'Form values and book instantiation', 'summary': 'Covers the process of getting form values for title, author, and isbn, and then instantiating a book object with these values using javascript, emphasizing the steps and code syntax involved.', 'duration': 109.947, 'highlights': ['Creating variables for form values for title, author, and ISBN using JavaScript. title, author, ISBN', 'Using querySelector to grab the input values by their IDs and accessing the value property of the input elements. query selector, ID of input elements', "Instantiating a book object with the form values using JavaScript's new book syntax and logging the book object to the console. instantiating book object, console log"]}, {'end': 1509.026, 'start': 1282.814, 'title': 'Javascript form submission and ui update', 'summary': 'Covers implementing form submission in javascript, preventing default form submission, adding objects to the ui, and clearing form fields, aiming to improve user experience.', 'duration': 226.212, 'highlights': ['Implementing form submission and preventing default action The chapter demonstrates implementing form submission in JavaScript and preventing the default action of the form being submit.', 'Adding objects to the UI The chapter explains how to add objects to the UI by calling a method and passing in the object, improving the user experience by dynamically updating the UI.', 'Clearing form fields after submission It covers the creation of a method to clear form fields after submission, enhancing user experience by providing a clean form for subsequent inputs.']}], 'duration': 453.823, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581055203.jpg', 'highlights': ["The chapter demonstrates implementing form submission and event handling for displaying and adding books to a list using JavaScript, including using 'list.appendchild', 'display books' method, and 'document.add event listener' to listen for 'Dom content loaded', with a plan to utilize 'ad book to list' method for submitting the form.", "The method 'list.appendchild' is used to add each book to the list, which aids in dynamically displaying the books, providing a seamless user experience.", "The 'document.add event listener' is utilized to listen for the 'Dom content loaded' event, ensuring that the 'display books' method is called as soon as the Dom loads, enhancing the efficiency of the book display.", "The plan to utilize the 'ad book to list' method for submitting the form demonstrates a cohesive approach to reusing existing methods, promoting code reusability and maintaining consistency.", 'Creating variables for form values for title, author, and ISBN using JavaScript. title, author, ISBN', 'Using querySelector to grab the input values by their IDs and accessing the value property of the input elements. query selector, ID of input elements', "Instantiating a book object with the form values using JavaScript's new book syntax and logging the book object to the console. instantiating book object, console log", 'Implementing form submission and preventing default action The chapter demonstrates implementing form submission in JavaScript and preventing the default action of the form being submit.', 'Adding objects to the UI The chapter explains how to add objects to the UI by calling a method and passing in the object, improving the user experience by dynamically updating the UI.', 'Clearing form fields after submission It covers the creation of a method to clear form fields after submission, enhancing user experience by providing a clean form for subsequent inputs.']}, {'end': 1818.358, 'segs': [{'end': 1562.821, 'src': 'embed', 'start': 1509.026, 'weight': 0, 'content': [{'end': 1513.771, 'text': "I'm trying to figure out what I want to do next.", 'start': 1509.026, 'duration': 4.745}, {'end': 1518.535, 'text': 'We could move on to the delete or we could go to the validation and the alerts.', 'start': 1513.871, 'duration': 4.664}, {'end': 1521.458, 'text': "So let's..", 'start': 1520.718, 'duration': 0.74}, {'end': 1531.19, 'text': "You know what? Let's do let's do the delete just so we get the functionality, the core functionality down of adding and removing books.", 'start': 1524.281, 'duration': 6.909}, {'end': 1538.921, 'text': "And then we'll work on the the the I guess the luxury of validation and alerts and stuff like that.", 'start': 1531.35, 'duration': 7.571}, {'end': 1545.873, 'text': 'Now, this is something that it confused me in the beginning and it seems to confuse a lot of people.', 'start': 1539.631, 'duration': 6.242}, {'end': 1553.996, 'text': "Since we have multiple deletes here, delete links, we can't just target it for the event to add the click event,", 'start': 1546.894, 'duration': 7.102}, {'end': 1556.717, 'text': "because it'll only delete the first one if we do that.", 'start': 1553.996, 'duration': 2.721}, {'end': 1562.821, 'text': 'We need to use something called event propagation, where we select something above it, like the book list,', 'start': 1557.057, 'duration': 5.764}], 'summary': 'Deciding to prioritize delete functionality to add and remove books, addressing confusion with multiple deletes using event propagation.', 'duration': 53.795, 'max_score': 1509.026, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581509026.jpg'}, {'end': 1657.137, 'src': 'embed', 'start': 1619.199, 'weight': 1, 'content': [{'end': 1624.381, 'text': "All right, so that's how we can actually target a certain element inside of the book list.", 'start': 1619.199, 'duration': 5.182}, {'end': 1634.105, 'text': "So what we're going to do is we're going to pass this target into a method on the UI called delete book.", 'start': 1625.541, 'duration': 8.564}, {'end': 1638.868, 'text': 'All right.', 'start': 1638.487, 'duration': 0.381}, {'end': 1641.589, 'text': "So let's go up here to the UI class.", 'start': 1638.948, 'duration': 2.641}, {'end': 1644.43, 'text': "We'll go right.", 'start': 1643.63, 'duration': 0.8}, {'end': 1650.433, 'text': "Let's go above the clear fields and let's do static delete book.", 'start': 1644.47, 'duration': 5.963}, {'end': 1657.137, 'text': "And then I'm going to pass in whatever that target element is.", 'start': 1653.615, 'duration': 3.522}], 'summary': 'Target and delete a specific element in the book list', 'duration': 37.938, 'max_score': 1619.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581619199.jpg'}, {'end': 1719.585, 'src': 'embed', 'start': 1687.453, 'weight': 5, 'content': [{'end': 1701.451, 'text': "So let's say if the element dot class list dot contains OK.", 'start': 1687.453, 'duration': 13.998}, {'end': 1707.496, 'text': 'so this is how we can see if, if a class is included in, the class we want to look for is delete.', 'start': 1701.451, 'duration': 6.045}, {'end': 1714.02, 'text': "OK, if that's so, then we want to remove that this whole thing.", 'start': 1707.516, 'duration': 6.504}, {'end': 1715.962, 'text': "We don't want to remove just the link.", 'start': 1714.341, 'duration': 1.621}, {'end': 1718.364, 'text': "That would be silly because then we'd be left with the book.", 'start': 1716.002, 'duration': 2.362}, {'end': 1719.585, 'text': 'We would just remove that.', 'start': 1718.384, 'duration': 1.201}], 'summary': "Code checks if 'delete' class is included and removes it if present.", 'duration': 32.132, 'max_score': 1687.453, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581687453.jpg'}, {'end': 1803.139, 'src': 'embed', 'start': 1772.133, 'weight': 2, 'content': [{'end': 1772.433, 'text': 'All right.', 'start': 1772.133, 'duration': 0.3}, {'end': 1782.159, 'text': 'Now, if you were to target just the delete class like down here and say click and then remove it whatever, it would only do the first one,', 'start': 1772.833, 'duration': 9.326}, {'end': 1785.241, 'text': "because it's going to look for the first delete class and just remove it.", 'start': 1782.159, 'duration': 3.082}, {'end': 1795.587, 'text': 'What we did is event propagation, where we targeted the actual list and then inside there we said well, if it contains delete,', 'start': 1785.881, 'duration': 9.706}, {'end': 1797.609, 'text': 'then remove that whatever we click.', 'start': 1795.587, 'duration': 2.022}, {'end': 1798.769, 'text': "OK, I'm sorry.", 'start': 1797.809, 'duration': 0.96}, {'end': 1801.191, 'text': 'Remove the parent parent of whatever we click.', 'start': 1798.829, 'duration': 2.362}, {'end': 1803.139, 'text': 'So I hope that makes sense.', 'start': 1801.917, 'duration': 1.222}], 'summary': 'Using event propagation for targeted removal of elements, improving efficiency.', 'duration': 31.006, 'max_score': 1772.133, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581772133.jpg'}], 'start': 1509.026, 'title': 'Working on functionality and event propagation', 'summary': 'Focuses on implementing the core functionality of adding and removing books, and discusses the concept of event propagation in handling multiple delete links within the book list. it further describes the process of targeting and removing a specific element from a book list using vanilla javascript, including checking for the presence of a class and removing the parent element, enabling the removal of multiple elements.', 'chapters': [{'end': 1619.179, 'start': 1509.026, 'title': 'Working on functionality and event propagation', 'summary': 'Focuses on implementing the core functionality of adding and removing books, and discusses the concept of event propagation in handling multiple delete links within the book list.', 'duration': 110.153, 'highlights': ['Implementing core functionality of adding and removing books The focus is on implementing the core functionality of adding and removing books, emphasizing the importance of achieving this essential functionality first.', 'Discussing event propagation for handling multiple delete links The concept of event propagation is explained in relation to handling multiple delete links within the book list, emphasizing the need to target the parent element to capture click events on child elements.', 'Explaining the use of event delegation and event listeners The use of event delegation and event listeners is demonstrated, showcasing the process of targeting the book list and adding a click event listener to it to capture and handle delete actions.']}, {'end': 1818.358, 'start': 1619.199, 'title': 'Delete book method in ui class', 'summary': 'Describes the process of targeting and removing a specific element from a book list using vanilla javascript, including checking for the presence of a class and removing the parent element, enabling the removal of multiple elements.', 'duration': 199.159, 'highlights': ['The process of targeting and removing a specific element from a book list using vanilla JavaScript The chapter explains the process of targeting a specific element within a book list and removing it using vanilla JavaScript.', 'Checking for the presence of a class and removing the parent element The method involves checking if the targeted element contains a specific class before removing its parent element from the DOM, ensuring the removal of the entire row from the book list.', 'Enabling the removal of multiple elements By utilizing event propagation and targeting the list, the method enables the removal of multiple elements that contain the specified class, providing a more efficient and effective approach to deleting book entries.']}], 'duration': 309.332, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581509026.jpg', 'highlights': ['Implementing core functionality of adding and removing books', 'The process of targeting and removing a specific element from a book list using vanilla JavaScript', 'Enabling the removal of multiple elements', 'Discussing event propagation for handling multiple delete links', 'Explaining the use of event delegation and event listeners', 'Checking for the presence of a class and removing the parent element']}, {'end': 2326.624, 'segs': [{'end': 2014.044, 'src': 'embed', 'start': 1818.458, 'weight': 0, 'content': [{'end': 1823.322, 'text': "So we can now add them to the UI where we haven't dealt with storage yet, but we can add to the UI.", 'start': 1818.458, 'duration': 4.864}, {'end': 1825.864, 'text': 'We can remove them before we go to storage.', 'start': 1823.382, 'duration': 2.482}, {'end': 1829.027, 'text': "Let's deal with validation and alerts.", 'start': 1825.904, 'duration': 3.123}, {'end': 1839.817, 'text': "So we're going to go down to let's see where we add a book and we're going to want to check for.", 'start': 1830.068, 'duration': 9.749}, {'end': 1843.14, 'text': "we're going to want to make sure that all the fields are are filled in.", 'start': 1839.817, 'duration': 3.323}, {'end': 1848.662, 'text': "So, uh, let's see before we instantiate a book.", 'start': 1843.24, 'duration': 5.422}, {'end': 1855.963, 'text': "so i'm just going to go right here and say validate, and let's do a simple if statement here.", 'start': 1848.662, 'duration': 7.301}, {'end': 1858.064, 'text': "i'm just going to check for all fields.", 'start': 1855.963, 'duration': 2.101}, {'end': 1877.853, 'text': "so we'll say if title, if title is equal to nothing, or author is equal to nothing, uh not, and we want, or ISBN is equal to nothing,", 'start': 1858.064, 'duration': 19.789}, {'end': 1880.515, 'text': "then we're going to want to show an alert.", 'start': 1877.853, 'duration': 2.662}, {'end': 1883.316, 'text': "Now, for right now, I'm going to put in a simple JavaScript alert.", 'start': 1880.575, 'duration': 2.741}, {'end': 1891.982, 'text': "Just say, please fill in all fields and then we'll do an else.", 'start': 1885.038, 'duration': 6.944}, {'end': 1895.645, 'text': "So if it passes, then we'll move on and do this.", 'start': 1892.663, 'duration': 2.982}, {'end': 1897.926, 'text': "So let's copy that.", 'start': 1896.525, 'duration': 1.401}, {'end': 1900.548, 'text': 'Paste that in here.', 'start': 1899.327, 'duration': 1.221}, {'end': 1903.796, 'text': 'All right.', 'start': 1903.556, 'duration': 0.24}, {'end': 1905.438, 'text': "So let's try that out now.", 'start': 1903.977, 'duration': 1.461}, {'end': 1911.224, 'text': 'If I were to submit this, we get please fill in all fields, even if I have, you know, two out of the three.', 'start': 1905.598, 'duration': 5.626}, {'end': 1913.447, 'text': 'Still, we need to have everything.', 'start': 1911.465, 'duration': 1.982}, {'end': 1914.688, 'text': 'Then it works.', 'start': 1914.067, 'duration': 0.621}, {'end': 1916.085, 'text': 'All right.', 'start': 1915.765, 'duration': 0.32}, {'end': 1920.026, 'text': "Now we don't want to use that shitty JavaScript alert.", 'start': 1916.145, 'duration': 3.881}, {'end': 1922.827, 'text': 'We want it to have you know, we want it inside the UI.', 'start': 1920.066, 'duration': 2.761}, {'end': 1928.228, 'text': 'So we want that nice bootstrap alert danger class and stuff like that.', 'start': 1922.927, 'duration': 5.301}, {'end': 1934.709, 'text': "So what we'll do is create a special method in our UI class called Show Alert.", 'start': 1928.968, 'duration': 5.741}, {'end': 1942.711, 'text': "So let's go right above clear fields and let's say static show alert.", 'start': 1935.269, 'duration': 7.442}, {'end': 1953.521, 'text': 'All right, now show alert is going to have a couple of properties because we need for one, the message, right? We need the actual text.', 'start': 1945.339, 'duration': 8.182}, {'end': 1957.021, 'text': 'And then we also want a class name because we want to style it.', 'start': 1954.121, 'duration': 2.9}, {'end': 1958.422, 'text': "We want it red if it's an error.", 'start': 1957.061, 'duration': 1.361}, {'end': 1963.683, 'text': "We want it green if it's just a regular, you know, info alert or whatever success message.", 'start': 1958.442, 'duration': 5.241}, {'end': 1968.044, 'text': "So we're going to we're going to build this div from scratch.", 'start': 1964.883, 'duration': 3.161}, {'end': 1971.204, 'text': "Notice we don't have a placeholder in our HTML for the alert.", 'start': 1968.124, 'duration': 3.08}, {'end': 1974.125, 'text': "We're going to build it from scratch and insert it right into the UI.", 'start': 1971.224, 'duration': 2.901}, {'end': 1976.766, 'text': "So first thing we'll do is create a div.", 'start': 1974.805, 'duration': 1.961}, {'end': 1985.311, 'text': "So let's say const div and we'll set that to document dot create element.", 'start': 1976.866, 'duration': 8.445}, {'end': 1989.174, 'text': 'We want to create a div.', 'start': 1988.233, 'duration': 0.941}, {'end': 2000.46, 'text': 'OK And just to show you guys that the way that bootstrap alerts or the way that this is going to be formatted is a div with the class of alerts.', 'start': 1990.717, 'duration': 9.743}, {'end': 2004.561, 'text': "And then if it's if we want it to be red, it'll be alert danger.", 'start': 2001.02, 'duration': 3.541}, {'end': 2009.443, 'text': 'If we want it to be green, it will be alert success like that.', 'start': 2004.681, 'duration': 4.762}, {'end': 2014.044, 'text': "And then we'll have, you know, whatever the message in here.", 'start': 2009.503, 'duration': 4.541}], 'summary': 'Adding validation and alerts to ui for book submission.', 'duration': 195.586, 'max_score': 1818.458, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581818458.jpg'}, {'end': 2110.274, 'src': 'embed', 'start': 2081.793, 'weight': 7, 'content': [{'end': 2085.335, 'text': 'we want to put something in the div and we want text.', 'start': 2081.793, 'duration': 3.542}, {'end': 2088.358, 'text': "so this has to be at what's called a text node,", 'start': 2085.335, 'duration': 3.023}, {'end': 2097.203, 'text': "and we can do that by using document dot create text node and the text is going to be the message that's passed in.", 'start': 2088.358, 'duration': 8.845}, {'end': 2098.244, 'text': 'OK Right here.', 'start': 2097.223, 'duration': 1.021}, {'end': 2100.044, 'text': 'All right.', 'start': 2099.744, 'duration': 0.3}, {'end': 2104.729, 'text': 'Next thing we want to do is we need to start to figure out how to insert it.', 'start': 2100.104, 'duration': 4.625}, {'end': 2110.274, 'text': "And we're going to actually grab the parent element, which is the container.", 'start': 2105.489, 'duration': 4.785}], 'summary': 'Using document.createtextnode to insert text into a div element.', 'duration': 28.481, 'max_score': 2081.793, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582081793.jpg'}, {'end': 2326.624, 'src': 'embed', 'start': 2292.92, 'weight': 2, 'content': [{'end': 2295.862, 'text': 'If you want to change the number of seconds, you can do that.', 'start': 2292.92, 'duration': 2.942}, {'end': 2298.543, 'text': "But let's do set timeout.", 'start': 2296.882, 'duration': 1.661}, {'end': 2302.916, 'text': 'So set time mode actually takes in a function.', 'start': 2300.535, 'duration': 2.381}, {'end': 2304.596, 'text': 'You can do function if you want.', 'start': 2302.996, 'duration': 1.6}, {'end': 2307.537, 'text': "But again, I'm going to use arrow functions.", 'start': 2305.657, 'duration': 1.88}, {'end': 2318.141, 'text': "So let's say we want to document dots and we want to select the alert.", 'start': 2308.398, 'duration': 9.743}, {'end': 2326.624, 'text': 'So document dot query selector, anything that has the class of alerts, then we want to remove it.', 'start': 2318.281, 'duration': 8.343}], 'summary': 'Change the timeout function using query selector to remove alerts.', 'duration': 33.704, 'max_score': 2292.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582292920.jpg'}], 'start': 1818.458, 'title': 'Ui validation, bootstrap alert, and dom manipulation', 'summary': 'Covers adding validation to the ui with if statements, creating bootstrap alerts with customizable messages, and manipulating the dom using javascript, including setting timeouts for alerts to vanish after three seconds.', 'chapters': [{'end': 1911.224, 'start': 1818.458, 'title': 'Ui validation and alerts', 'summary': 'Discusses adding validation to the ui to ensure all fields are filled in before instantiating a book, with a simple if statement checking for empty fields and prompting an alert if any field is empty.', 'duration': 92.766, 'highlights': ['Adding validation to the UI to ensure all fields are filled in before instantiating a book. Ensuring data integrity and preventing incomplete entries.', 'Using a simple if statement to check for empty fields (title, author, ISBN) and triggering an alert if any field is empty. Utilizing conditional logic to validate form input.', "Prompting a JavaScript alert with the message 'Please fill in all fields' if any field is empty. Implementing a user-friendly alert for incomplete form submission."]}, {'end': 2060.846, 'start': 1911.465, 'title': 'Creating bootstrap alert in javascript', 'summary': 'Discusses creating a method in the ui class called show alert, which dynamically builds and inserts a bootstrap alert with customizable message and style into the ui.', 'duration': 149.381, 'highlights': ['The chapter discusses creating a method in the UI class called Show Alert The chapter introduces the creation of a method in the UI class named Show Alert for dynamically building and inserting Bootstrap alerts into the UI.', "The method allows for customizable message and style of the alert The Show Alert method includes properties for the message and class name, enabling customization of the alert's text and style.", 'The process involves building the alert from scratch in JavaScript and inserting it into the DOM The process entails constructing the alert using JavaScript and directly inserting it into the Document Object Model (DOM) without a pre-existing placeholder in the HTML.']}, {'end': 2326.624, 'start': 2060.926, 'title': 'Javascript dom manipulation', 'summary': 'Explains how to manipulate the dom using javascript, covering adding text and inserting elements, as well as customizing alerts with specific classes for different messages and setting a timeout for the alerts to vanish after three seconds.', 'duration': 265.698, 'highlights': ['The chapter covers manipulating the DOM using JavaScript, including adding text and inserting elements.', 'Customizing alerts with specific classes for different messages such as error, success, and info is demonstrated.', 'Setting a timeout for the alerts to vanish after three seconds is explained using the set timeout function.']}], 'duration': 508.166, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW581818458.jpg', 'highlights': ['Adding validation to the UI to ensure all fields are filled in before instantiating a book. Ensuring data integrity and preventing incomplete entries.', 'The chapter introduces the creation of a method in the UI class named Show Alert for dynamically building and inserting Bootstrap alerts into the UI.', 'Setting a timeout for the alerts to vanish after three seconds is explained using the set timeout function.', 'Using a simple if statement to check for empty fields (title, author, ISBN) and triggering an alert if any field is empty. Utilizing conditional logic to validate form input.', 'The process entails constructing the alert using JavaScript and directly inserting it into the Document Object Model (DOM) without a pre-existing placeholder in the HTML.', "Prompting a JavaScript alert with the message 'Please fill in all fields' if any field is empty. Implementing a user-friendly alert for incomplete form submission.", "The Show Alert method includes properties for the message and class name, enabling customization of the alert's text and style.", 'The chapter covers manipulating the DOM using JavaScript, including adding text and inserting elements.', 'Customizing alerts with specific classes for different messages such as error, success, and info is demonstrated.']}, {'end': 3104.257, 'segs': [{'end': 2355.527, 'src': 'embed', 'start': 2327.907, 'weight': 3, 'content': [{'end': 2332.829, 'text': "so dot remove, and then there's a second parameter to set time out.", 'start': 2327.907, 'duration': 4.922}, {'end': 2336.09, 'text': 'so the first is the function, the second is the number of milliseconds.', 'start': 2332.829, 'duration': 3.261}, {'end': 2340.212, 'text': "so i'm going to say 3000, which is three seconds all right.", 'start': 2336.09, 'duration': 4.122}, {'end': 2342.613, 'text': "so let's save this and let's try it.", 'start': 2340.212, 'duration': 2.401}, {'end': 2347.394, 'text': "we'll add book with no fields, and there it goes.", 'start': 2342.613, 'duration': 4.781}, {'end': 2348.975, 'text': 'after three seconds it disappears.', 'start': 2347.394, 'duration': 1.581}, {'end': 2355.527, 'text': "so you're not gonna get gonna get flooded with these alert messages, uh, and it's not gonna just stay there Good.", 'start': 2348.975, 'duration': 6.552}], 'summary': 'Code sets timeout for alert message, disappearing after 3 seconds', 'duration': 27.62, 'max_score': 2327.907, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582327907.jpg'}, {'end': 2443.653, 'src': 'embed', 'start': 2383.93, 'weight': 5, 'content': [{'end': 2389.654, 'text': "So you know what I'll do is right before we clear the fields, let's show success message.", 'start': 2383.93, 'duration': 5.724}, {'end': 2394.697, 'text': 'So we can simply do UI dot show alert.', 'start': 2391.895, 'duration': 2.802}, {'end': 2397.679, 'text': 'Okay, wherever we wanna show an alert now, we can simply do this.', 'start': 2394.717, 'duration': 2.962}, {'end': 2401.101, 'text': "And we'll just say book added.", 'start': 2398.219, 'duration': 2.882}, {'end': 2406.024, 'text': "And for the class name, let's do success.", 'start': 2401.981, 'duration': 4.043}, {'end': 2413.082, 'text': "So now let's just quickly add a book in here and there we go.", 'start': 2409.119, 'duration': 3.963}, {'end': 2413.683, 'text': 'Book added.', 'start': 2413.122, 'duration': 0.561}, {'end': 2414.483, 'text': 'It should go away.', 'start': 2413.743, 'duration': 0.74}, {'end': 2423.691, 'text': "Good So let's also do it when we delete, because right now, if I delete a book, it just it doesn't do anything.", 'start': 2414.503, 'duration': 9.188}, {'end': 2429.996, 'text': "So I'm going to just copy this and let's go down to remove a book and we'll put this.", 'start': 2423.731, 'duration': 6.265}, {'end': 2433.079, 'text': "Yeah, we'll put this right after.", 'start': 2430.016, 'duration': 3.063}, {'end': 2435.681, 'text': 'The delete book.', 'start': 2434.86, 'duration': 0.821}, {'end': 2438.887, 'text': "And let's say book removed.", 'start': 2437.185, 'duration': 1.702}, {'end': 2443.653, 'text': 'So now if I delete a book, we get book removed.', 'start': 2441.09, 'duration': 2.563}], 'summary': 'Successfully implemented ui alerts for adding and removing books.', 'duration': 59.723, 'max_score': 2383.93, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582383930.jpg'}, {'end': 2557.093, 'src': 'embed', 'start': 2529.765, 'weight': 4, 'content': [{'end': 2533.906, 'text': 'I mean, local storage stores different basically key value pairs.', 'start': 2529.765, 'duration': 4.141}, {'end': 2542.07, 'text': "We're only going to be we're going to have an item called books, which is going to be a string version of our entire array of books.", 'start': 2534.006, 'duration': 8.064}, {'end': 2543.911, 'text': "You can't store objects.", 'start': 2542.53, 'duration': 1.381}, {'end': 2547.632, 'text': 'in local storage it has to be a string.', 'start': 2544.611, 'duration': 3.021}, {'end': 2554.133, 'text': 'so before we add it to local storage, we have to stringify it and then, when we pull it out, we have to parse it.', 'start': 2547.632, 'duration': 6.501}, {'end': 2557.093, 'text': "so let's go ahead and forget books.", 'start': 2554.133, 'duration': 2.96}], 'summary': "Local storage stores key-value pairs. the 'books' item is a string version of the array, requiring stringification and parsing.", 'duration': 27.328, 'max_score': 2529.765, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582529765.jpg'}, {'end': 2888.462, 'src': 'heatmap', 'start': 2792.491, 'weight': 0, 'content': [{'end': 2798.936, 'text': 'So json.stringify our books and put it into local storage.', 'start': 2792.491, 'duration': 6.445}, {'end': 2801.679, 'text': "And that's it, those are our methods.", 'start': 2799.697, 'duration': 1.982}, {'end': 2808.124, 'text': "So we'll save this and obviously we've only created these methods, we haven't actually implemented them yet.", 'start': 2802.319, 'duration': 5.805}, {'end': 2813.488, 'text': "So we're gonna go down to our events here and figure out where we need to implement them.", 'start': 2808.644, 'duration': 4.844}, {'end': 2825.215, 'text': "So actually you know what the first thing we'll do is get rid of our dummy data because right now what we're seeing here is just this this dummy data.", 'start': 2817.071, 'duration': 8.144}, {'end': 2827.837, 'text': "So I'm going to completely get rid of this.", 'start': 2825.255, 'duration': 2.582}, {'end': 2839.162, 'text': 'and now we can simply set our books to our store method of get books, because that will reach into local storage and get them for us and return them.', 'start': 2827.837, 'duration': 11.325}, {'end': 2842.024, 'text': "So let's save and notice there's nothing there.", 'start': 2839.262, 'duration': 2.762}, {'end': 2846.939, 'text': "which is correct because we don't we haven't added any to local storage.", 'start': 2843.638, 'duration': 3.301}, {'end': 2851.481, 'text': "So now let's go down to the bottom where we where we actually add a book.", 'start': 2846.999, 'duration': 4.482}, {'end': 2853.622, 'text': "You can see right here we're adding it to the UI.", 'start': 2851.501, 'duration': 2.121}, {'end': 2860.104, 'text': "So now let's add book to we'll just say add book to store.", 'start': 2854.342, 'duration': 5.762}, {'end': 2866.947, 'text': "So store dot add book and then we're going to pass in book.", 'start': 2862.225, 'duration': 4.722}, {'end': 2879.555, 'text': "All right, so now what I'll do is go over here and I'll say book one John Doe and add.", 'start': 2870.768, 'duration': 8.787}, {'end': 2882.377, 'text': 'OK, we get book added now.', 'start': 2879.575, 'duration': 2.802}, {'end': 2888.462, 'text': "Right now I can reload and notice that it's not going anywhere because it's actually in local storage.", 'start': 2882.437, 'duration': 6.025}], 'summary': 'Implementing methods for storing and retrieving books from local storage, adding and displaying books on ui.', 'duration': 60.625, 'max_score': 2792.491, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582792491.jpg'}, {'end': 3069.843, 'src': 'embed', 'start': 3033.773, 'weight': 2, 'content': [{'end': 3038.317, 'text': "Let's say e.target.parentElement, and then previous..", 'start': 3033.773, 'duration': 4.544}, {'end': 3045.404, 'text': "It's previous element sibling.", 'start': 3041.08, 'duration': 4.324}, {'end': 3049.947, 'text': 'And then we want the text content.', 'start': 3045.584, 'duration': 4.363}, {'end': 3052.589, 'text': "It's actually text content like that.", 'start': 3050.007, 'duration': 2.582}, {'end': 3055.211, 'text': 'That should give us the ISBN.', 'start': 3053.39, 'duration': 1.821}, {'end': 3057.793, 'text': 'And then that will be passed in to remove book.', 'start': 3055.652, 'duration': 2.141}, {'end': 3058.694, 'text': "So let's save.", 'start': 3057.834, 'duration': 0.86}, {'end': 3062.297, 'text': "And let's X and reload.", 'start': 3059.555, 'duration': 2.742}, {'end': 3063.438, 'text': "And now it's gone.", 'start': 3062.637, 'duration': 0.801}, {'end': 3068.942, 'text': 'Okay So now we can actually add stuff to local storage and delete it.', 'start': 3063.458, 'duration': 5.484}, {'end': 3069.843, 'text': "Let's just try it.", 'start': 3069.082, 'duration': 0.761}], 'summary': 'Code retrieves isbn from web page, enables adding/deleting from local storage.', 'duration': 36.07, 'max_score': 3033.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW583033773.jpg'}], 'start': 2327.907, 'title': 'Local storage operations in javascript', 'summary': 'Explains how to utilize local storage in javascript for storing, retrieving, and manipulating data, implementing a three-second timeout for success alerts, and creating methods for local storage operations. it also emphasizes the importance of parsing data and traversing the dom for efficient operations.', 'chapters': [{'end': 2827.837, 'start': 2327.907, 'title': 'Adding and removing books with local storage', 'summary': 'Discusses adding and removing books from the ui interface, implementing a three-second timeout for success alerts, and creating methods to get, add, and remove books from local storage.', 'duration': 499.93, 'highlights': ['Implementing a three-second timeout for success alerts The chapter demonstrates setting a three-second timeout for success alerts to prevent flooding of alert messages and ensure they disappear after displaying for three seconds.', "Adding success message after adding a book The chapter adds a success message 'Book added' to display after adding a book, enhancing user feedback and interaction with the UI.", "Removing books and displaying 'Book removed' The chapter discusses the addition of a 'Book removed' message to display after deleting a book from the UI, improving user feedback and interaction with the UI.", "Creating methods for getting, adding, and removing books from local storage The chapter introduces the creation of methods 'get books', 'add book', and 'remove book' to manage the retrieval, addition, and removal of books from local storage, facilitating persistent data storage and management within the application."]}, {'end': 3104.257, 'start': 2827.837, 'title': 'Local storage operations in javascript', 'summary': 'Explains how to utilize local storage in javascript to store and retrieve data, manipulate the stored data, and remove items from local storage, demonstrating the process with a practical example. it also highlights the importance of parsing data and traversing the dom for efficient local storage operations.', 'duration': 276.42, 'highlights': ["The process of adding a book to local storage and retrieving it is demonstrated, showcasing the functionality of local storage operations. The demonstration includes adding a book to local storage using the 'add book to store' function, and retrieving the stored book from local storage. It showcases the successful addition of a book to local storage and the validation of its presence upon reloading the page.", "The method of removing a book from local storage is explained, emphasizing the importance of retrieving the correct identifier (ISBN) and efficiently using DOM traversal to achieve this. The explanation focuses on the process of retrieving the book's ISBN from the DOM using DOM traversal techniques, such as accessing the parent element and utilizing the 'previousElementSibling' method to obtain the ISBN. It underlines the significance of accurately obtaining the ISBN for successful removal of the book from local storage.", "The significance of parsing stored data and the utilization of JavaScript methods for efficient local storage operations are emphasized. The explanation highlights the importance of parsing the stored data as JSON and effectively utilizing JavaScript methods to manipulate and process the data for local storage operations. It underscores the necessity of using appropriate methods, such as 'JSON.parse', to handle the stored data efficiently."]}], 'duration': 776.35, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/JaMCxVWtW58/pics/JaMCxVWtW582327907.jpg', 'highlights': ["Creating methods for getting, adding, and removing books from local storage The chapter introduces the creation of methods 'get books', 'add book', and 'remove book' to manage the retrieval, addition, and removal of books from local storage, facilitating persistent data storage and management within the application.", "The process of adding a book to local storage and retrieving it is demonstrated, showcasing the functionality of local storage operations. The demonstration includes adding a book to local storage using the 'add book to store' function, and retrieving the stored book from local storage. It showcases the successful addition of a book to local storage and the validation of its presence upon reloading the page.", "The method of removing a book from local storage is explained, emphasizing the importance of retrieving the correct identifier (ISBN) and efficiently using DOM traversal to achieve this. The explanation focuses on the process of retrieving the book's ISBN from the DOM using DOM traversal techniques, such as accessing the parent element and utilizing the 'previousElementSibling' method to obtain the ISBN. It underlines the significance of accurately obtaining the ISBN for successful removal of the book from local storage.", 'The chapter demonstrates setting a three-second timeout for success alerts to prevent flooding of alert messages and ensure they disappear after displaying for three seconds.', "The significance of parsing stored data and the utilization of JavaScript methods for efficient local storage operations are emphasized. The explanation highlights the importance of parsing the stored data as JSON and effectively utilizing JavaScript methods to manipulate and process the data for local storage operations. It underscores the necessity of using appropriate methods, such as 'JSON.parse', to handle the stored data efficiently.", "Adding success message after adding a book The chapter adds a success message 'Book added' to display after adding a book, enhancing user feedback and interaction with the UI.", "Removing books and displaying 'Book removed' The chapter discusses the addition of a 'Book removed' message to display after deleting a book from the UI, improving user feedback and interaction with the UI."]}], 'highlights': ['The project emphasizes the use of classes using ES6 for book, UI, and store functionalities.', 'The tutorial encourages not using frameworks or libraries like jQuery for the project, highlighting the importance of sharpening vanilla JavaScript skills.', "The chapter demonstrates implementing form submission and event handling for displaying and adding books to a list using JavaScript, including using 'list.appendchild', 'display books' method, and 'document.add event listener' to listen for 'Dom content loaded', with a plan to utilize 'ad book to list' method for submitting the form.", 'Implementing core functionality of adding and removing books', 'Adding validation to the UI to ensure all fields are filled in before instantiating a book. Ensuring data integrity and preventing incomplete entries.', "Creating methods for getting, adding, and removing books from local storage The chapter introduces the creation of methods 'get books', 'add book', and 'remove book' to manage the retrieval, addition, and removal of books from local storage, facilitating persistent data storage and management within the application."]}