title
Create a Custom PDF Viewer With JavaScript

description
In this practical project we will use pdf.js to create a custom pdf view interface with pagination using JavaScript. We will be using modern syntax such as arrow functions and promises. Sponsor: DevMountain Bootcamp https://goo.gl/6q0dEa Code: https://github.com/bradtraversy/pdf_viewer 💖 Become a Patron: Show support & get perks! http://www.patreon.com/traversymedia Carlos Mafla YouTube Channel: https://www.youtube.com/channel/UCnFRgYETwUg6eoeHACuVkcA 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': 'Create a Custom PDF Viewer With JavaScript', 'heatmap': [{'end': 702.939, 'start': 679.533, 'weight': 0.94}, {'end': 1078.646, 'start': 1052.851, 'weight': 1}, {'end': 1659.209, 'start': 1638.625, 'weight': 0.799}], 'summary': 'Learn to create a custom pdf viewer with javascript, including setting up the viewer in html, rendering pdf content, implementing pdf.js library, adding page navigation, and customizing pdf embedding while promoting engagement and practical coding projects.', 'chapters': [{'end': 429.644, 'segs': [{'end': 49.873, 'src': 'embed', 'start': 24.18, 'weight': 1, 'content': [{'end': 30.183, 'text': "So in this project, we're going to be building something pretty practical, something that a lot of people have asked me for through the years,", 'start': 24.18, 'duration': 6.003}, {'end': 33.464, 'text': 'and that is how to load a PDF in a web page.', 'start': 30.183, 'duration': 3.281}, {'end': 42.167, 'text': "And we're going to basically not just load the PDF, but we're going to have some pagination at the top if it is a multi page document.", 'start': 34.144, 'duration': 8.023}, {'end': 44.388, 'text': 'So as you can see, this is page one of five.', 'start': 42.268, 'duration': 2.12}, {'end': 45.909, 'text': "We're going to create this little nav bar.", 'start': 44.408, 'duration': 1.501}, {'end': 49.873, 'text': 'where we can just scroll through the different pages of the pdf.', 'start': 46.249, 'duration': 3.624}], 'summary': 'Building a web page to load and paginate pdf documents.', 'duration': 25.693, 'max_score': 24.18, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs24180.jpg'}, {'end': 352.402, 'src': 'embed', 'start': 291.974, 'weight': 0, 'content': [{'end': 297.175, 'text': "And we're going to have an icon, so we're going to do I with the class of FAS, font awesome.", 'start': 291.974, 'duration': 5.201}, {'end': 305.236, 'text': 'And then the icon we want is FA dash arrow dash circle dash left.', 'start': 297.675, 'duration': 7.561}, {'end': 311.057, 'text': "Okay, and then to the right of that, we're just going to say prev page.", 'start': 305.256, 'duration': 5.801}, {'end': 314.198, 'text': "All right, and then let's just copy this.", 'start': 312.037, 'duration': 2.161}, {'end': 317.738, 'text': "This whole button here, we'll just bring this down.", 'start': 315.458, 'duration': 2.28}, {'end': 321.059, 'text': "And let's change this ID to..", 'start': 319.339, 'duration': 1.72}, {'end': 331.87, 'text': "next page, change the icon to right, and let's put the text on the other side.", 'start': 322.924, 'duration': 8.946}, {'end': 338.255, 'text': "So over here we'll say next page.", 'start': 331.89, 'duration': 6.365}, {'end': 340.09, 'text': 'All right.', 'start': 339.79, 'duration': 0.3}, {'end': 345.816, 'text': "And then underneath the div with the class of top bar, actually, I'm sorry, we still want to be in here.", 'start': 340.23, 'duration': 5.586}, {'end': 349.74, 'text': 'We want to put the page, you know, one of five or whatever.', 'start': 346.216, 'duration': 3.524}, {'end': 352.402, 'text': 'And those numbers are going to be dynamic.', 'start': 350.761, 'duration': 1.641}], 'summary': 'Adding navigation buttons with dynamic page numbers.', 'duration': 60.428, 'max_score': 291.974, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs291974.jpg'}], 'start': 7.059, 'title': 'Setting up pdf viewer in html', 'summary': 'Details how to set up a pdf viewer in html, including loading a pdf with pagination using pdf.js, setting up the viewer in html, and creating the viewer body with dynamic page numbers and canvas for pdf rendering.', 'chapters': [{'end': 109.319, 'start': 7.059, 'title': 'Loading pdf with pagination', 'summary': 'Details how to load a pdf in a web page with pagination, using pdf.js, a popular library with 25,000 stars on github, and emphasizes the need to run the code on a server for it to work.', 'duration': 102.26, 'highlights': ['The chapter explains how to load a PDF in a web page with pagination, addressing the practical need and the inclusion of error handling for missing PDFs.', "It emphasizes the use of pdf.js, a widely popular library with 25,000 stars on GitHub, and the importance of running the code on a server, using VS Code's live server for demonstration.", 'It mentions the simplicity of integrating pdf.js using CDN without the need for installation with NPM, and highlights its use of modern JavaScript, asynchronous syntax, and promises.']}, {'end': 262.857, 'start': 109.859, 'title': 'Setting up pdf viewer in html', 'summary': 'Covers setting up a pdf viewer in html by creating a folder structure, including an index.html file, css and js folders, and referencing pdf.js and font awesome using cdns.', 'duration': 152.998, 'highlights': ['Creating a folder structure for PDF Viewer The speaker explains the process of creating a folder structure with specific files for the PDF Viewer, including an index.html file, CSS and JS folders, and the inclusion of PDF.js and Font Awesome using CDNs.', 'Inclusion of PDF.js and Font Awesome using CDNs The speaker emphasizes the inclusion of PDF.js and Font Awesome using CDNs, providing the specific CDN link for PDF.js and advising to visit fontawesome.com for including Font Awesome.', "Naming and storing the sample PDF file The speaker mentions naming and storing the sample PDF file in a 'Docs' folder, allowing flexibility in naming the file and emphasizing the visual demonstration of the process."]}, {'end': 429.644, 'start': 264.053, 'title': 'Creating pdf viewer body', 'summary': 'Covers creating the body of a pdf viewer using html, including adding top bar with previous and next page buttons, dynamic page numbers, and canvas for pdf rendering.', 'duration': 165.591, 'highlights': ['Adding top bar with previous and next page buttons The chapter explains adding a top bar with previous and next page buttons to the HTML for the PDF viewer.', 'Dynamic page numbers using JavaScript The transcript mentions the use of JavaScript to dynamically display page numbers in the PDF viewer.', 'Canvas for PDF rendering The chapter includes the use of a canvas element for rendering the PDF in the HTML for the PDF viewer.']}], 'duration': 422.585, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs7059.jpg', 'highlights': ['The chapter explains how to load a PDF in a web page with pagination, addressing the practical need and the inclusion of error handling for missing PDFs.', 'The speaker explains the process of creating a folder structure with specific files for the PDF Viewer, including an index.html file, CSS and JS folders, and the inclusion of PDF.js and Font Awesome using CDNs.', 'Adding a top bar with previous and next page buttons to the HTML for the PDF viewer.']}, {'end': 605.15, 'segs': [{'end': 490.245, 'src': 'embed', 'start': 457.979, 'weight': 0, 'content': [{'end': 459.882, 'text': "And we're going to create a bunch of other variables.", 'start': 457.979, 'duration': 1.903}, {'end': 464.988, 'text': "I'm going to use lead here because these are global variables that will be reassigned at some point.", 'start': 459.902, 'duration': 5.086}, {'end': 472.636, 'text': "So we're going to have one called PDF doc which is going to represent the document that we get with PDF dot J.S.", 'start': 465.548, 'duration': 7.088}, {'end': 475.46, 'text': 'And this is going to be set to null by default.', 'start': 472.677, 'duration': 2.783}, {'end': 481.111, 'text': "And then I'm gonna put a comma here and we're also gonna set a page num value to one.", 'start': 476.344, 'duration': 4.767}, {'end': 483.615, 'text': 'So we wanna start on the first page.', 'start': 481.131, 'duration': 2.484}, {'end': 490.245, 'text': "We're gonna set page is rendering and we're gonna set that to false.", 'start': 484.076, 'duration': 6.169}], 'summary': 'Creating global variables: pdf doc, page num, page is rendering.', 'duration': 32.266, 'max_score': 457.979, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs457979.jpg'}, {'end': 613.411, 'src': 'embed', 'start': 581.597, 'weight': 2, 'content': [{'end': 585.959, 'text': "You can use regular functions if you want, but I'm just going to say const render page.", 'start': 581.597, 'duration': 4.362}, {'end': 587.46, 'text': "It's going to take in a num.", 'start': 586.339, 'duration': 1.121}, {'end': 590.362, 'text': 'So a page number needs to know which one to render.', 'start': 587.66, 'duration': 2.702}, {'end': 596.565, 'text': "And before I do anything here, I'm going to go down and get the document.", 'start': 591.842, 'duration': 4.723}, {'end': 605.15, 'text': "OK, so we want to get the document and then inside the inside here, once we get the document, we're going to call render page.", 'start': 596.585, 'duration': 8.565}, {'end': 613.411, 'text': 'Now the way that we get it is we have access to this PDF JS lib object since we use the CDN.', 'start': 605.663, 'duration': 7.748}], 'summary': 'Using const renderpage to render a page based on a given num, utilizing the pdf js lib object.', 'duration': 31.814, 'max_score': 581.597, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs581597.jpg'}], 'start': 431.531, 'title': 'Pdf rendering code setup', 'summary': 'Explains setting up variables for url and pdf document, creating global variables for page number and rendering state, and defining constants like scale, canvas, and context for rendering pdf on a canvas.', 'chapters': [{'end': 605.15, 'start': 431.531, 'title': 'Pdf rendering code setup', 'summary': 'Explains setting up variables for url and pdf document, creating global variables for page number and rendering state, and defining constants like scale, canvas, and context for rendering pdf on a canvas.', 'duration': 173.619, 'highlights': ['Setting up variables for URL and PDF document The transcript explains the process of setting a variable for the URL of the PDF document, including its location and name.', 'Defining global variables for page number and rendering state The chapter introduces global variables for page number and rendering state, which will be reassigned at some point.', 'Defining constants like scale, canvas, and context for rendering PDF on a canvas The chapter covers the definition of constants such as scale, canvas, and context for rendering the PDF document on a canvas.']}], 'duration': 173.619, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs431531.jpg', 'highlights': ['Defining constants like scale, canvas, and context for rendering PDF on a canvas', 'Setting up variables for URL and PDF document', 'Defining global variables for page number and rendering state']}, {'end': 835.985, 'segs': [{'end': 660.667, 'src': 'embed', 'start': 605.663, 'weight': 0, 'content': [{'end': 613.411, 'text': 'Now the way that we get it is we have access to this PDF JS lib object since we use the CDN.', 'start': 605.663, 'duration': 7.748}, {'end': 620.98, 'text': "OK Since we included the CDN right here we have access to this object and there's a method called get document.", 'start': 613.652, 'duration': 7.328}, {'end': 623.25, 'text': 'which does just that.', 'start': 622.25, 'duration': 1}, {'end': 627.772, 'text': 'And that is going to take in the URL of the document which we described above.', 'start': 623.35, 'duration': 4.422}, {'end': 629.992, 'text': 'Now this will give us a promise back.', 'start': 628.352, 'duration': 1.64}, {'end': 633.914, 'text': "However if we do just dot then it'll give us a warning.", 'start': 630.373, 'duration': 3.541}, {'end': 635.354, 'text': 'It wants to do promise.', 'start': 633.994, 'duration': 1.36}, {'end': 638.415, 'text': "I'm sorry dot promise dot then.", 'start': 636.254, 'duration': 2.161}, {'end': 641.856, 'text': "And then what it's going to give us is the doc.", 'start': 638.435, 'duration': 3.421}, {'end': 647.598, 'text': "So I'm going to say PDF doc and I'm going to use an arrow function.", 'start': 642.276, 'duration': 5.322}, {'end': 652.744, 'text': "All right, we'll handle the possible error after.", 'start': 650.123, 'duration': 2.621}, {'end': 660.667, 'text': 'But basically, what this is is it includes the document, all the info, everything that we need.', 'start': 653.624, 'duration': 7.043}], 'summary': 'Access pdf document using pdf js lib object with a promise return.', 'duration': 55.004, 'max_score': 605.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs605663.jpg'}, {'end': 708.602, 'src': 'heatmap', 'start': 679.533, 'weight': 0.94, 'content': [{'end': 684.194, 'text': "And just to show you what that gives us, it's just console log it.", 'start': 679.533, 'duration': 4.661}, {'end': 689.115, 'text': 'So if I save this, this should run and it should log the PDF doc that it gives us.', 'start': 684.434, 'duration': 4.681}, {'end': 691.956, 'text': "So let's open up the tools Chrome tools here.", 'start': 689.236, 'duration': 2.72}, {'end': 696.437, 'text': "Look in our console and you'll see we have this loading task.", 'start': 692.416, 'duration': 4.021}, {'end': 698.098, 'text': 'We have PDF info.', 'start': 696.477, 'duration': 1.621}, {'end': 702.939, 'text': 'But what we want to look at is num pages, which you can see is five.', 'start': 699.438, 'duration': 3.501}, {'end': 708.602, 'text': 'because when we call the render page method that we created, we need to pass in the number of pages.', 'start': 703.539, 'duration': 5.063}], 'summary': 'The pdf document has 5 pages, as shown in the console log.', 'duration': 29.069, 'max_score': 679.533, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs679533.jpg'}], 'start': 605.663, 'title': 'Pdf.js library and pdf rendering in chrome tools', 'summary': 'Covers implementing the pdf.js library through cdn, accessing document urls, setting a global pdf doc variable, and rendering pdf information using chrome tools, including displaying page content and total page count.', 'chapters': [{'end': 689.115, 'start': 605.663, 'title': 'Implementing pdf.js library', 'summary': "Discusses accessing and utilizing the pdf js lib object via cdn, including the method 'get document' to retrieve a document's url and handling the promise to obtain the document, with an emphasis on setting a global pdf doc variable for access to the document information and logging the retrieved pdf doc.", 'duration': 83.452, 'highlights': ["Accessing the PDF JS lib object via CDN and using the 'get document' method to retrieve a document's URL. The chapter explains how to access the PDF JS lib object via CDN and utilize the 'get document' method to retrieve the URL of the document.", 'Handling the promise to obtain the document and setting a global PDF doc variable for access to the document information. It emphasizes handling the promise to obtain the document and setting a global PDF doc variable for access to the document information.', 'Logging the retrieved PDF doc for verification and testing purposes. The chapter demonstrates the process of logging the retrieved PDF doc for verification and testing purposes.']}, {'end': 835.985, 'start': 689.236, 'title': 'Pdf rendering in chrome tools', 'summary': 'Demonstrates how to use chrome tools to extract pdf information and render the pages, with a focus on setting the total number of pages and rendering specific pages, using a console log to display the page content.', 'duration': 146.749, 'highlights': ['The PDF contains a total of five pages, which is set using the num pages property and displayed in the console log.', 'The process involves setting the total number of pages and then rendering specific pages using a series of functions to navigate through the pages.', "The rendering process involves setting the page's rendering value to true and using the get page method to retrieve the content of the page."]}], 'duration': 230.322, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs605663.jpg', 'highlights': ["Accessing the PDF JS lib object via CDN and using the 'get document' method to retrieve a document's URL.", 'Handling the promise to obtain the document and setting a global PDF doc variable for access to the document information.', 'Logging the retrieved PDF doc for verification and testing purposes.', 'The PDF contains a total of five pages, which is set using the num pages property and displayed in the console log.', 'The process involves setting the total number of pages and then rendering specific pages using a series of functions to navigate through the pages.', "The rendering process involves setting the page's rendering value to true and using the get page method to retrieve the content of the page."]}, {'end': 1455.442, 'segs': [{'end': 860.015, 'src': 'embed', 'start': 836.946, 'weight': 5, 'content': [{'end': 844.789, 'text': "So we'll go back and you can see it gives us a bunch of stuff here, some of which I don't even know what it is, but just a bunch of info.", 'start': 836.946, 'duration': 7.843}, {'end': 848.611, 'text': 'And then if we look in the prototype, there is a render method.', 'start': 844.849, 'duration': 3.762}, {'end': 852.132, 'text': "That's what we want to call to actually render it on the canvas.", 'start': 849.011, 'duration': 3.121}, {'end': 855.874, 'text': 'OK, and it takes in a couple of parameters and then this you get viewport.', 'start': 852.152, 'duration': 3.722}, {'end': 860.015, 'text': "We're also going to deal with this because we want to set the size, the scaling of the PDF.", 'start': 855.894, 'duration': 4.121}], 'summary': 'Reviewing the prototype for rendering on canvas with parameters and pdf scaling.', 'duration': 23.069, 'max_score': 836.946, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs836946.jpg'}, {'end': 1078.646, 'src': 'heatmap', 'start': 1052.851, 'weight': 1, 'content': [{'end': 1058.697, 'text': "And we're going to grab the ID of page dash num.", 'start': 1052.851, 'duration': 5.846}, {'end': 1062.501, 'text': "And let's add text content.", 'start': 1060.099, 'duration': 2.402}, {'end': 1064.603, 'text': 'And we want to set that simply to num.', 'start': 1062.561, 'duration': 2.042}, {'end': 1068.568, 'text': 'Okay So whatever is passed in right here as the num.', 'start': 1064.623, 'duration': 3.945}, {'end': 1070.83, 'text': 'So if I save that.', 'start': 1069.929, 'duration': 0.901}, {'end': 1078.646, 'text': "And we go back, you'll see that it says page one of five and it's showing the PDF and the canvas.", 'start': 1071.844, 'duration': 6.802}], 'summary': "Setting the text content to the id of page dash num, displaying 'page one of five' with pdf and canvas.", 'duration': 25.795, 'max_score': 1052.851, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1052851.jpg'}, {'end': 1183.994, 'src': 'embed', 'start': 1152.03, 'weight': 4, 'content': [{'end': 1159.575, 'text': "Now where we call this is going to be within the show previous page and show next page functions that we're going to create,", 'start': 1152.03, 'duration': 7.545}, {'end': 1162.757, 'text': 'which are the functions that will fire off when we, when we hit the buttons.', 'start': 1159.575, 'duration': 3.182}, {'end': 1165.619, 'text': "So let's say show.", 'start': 1163.498, 'duration': 2.121}, {'end': 1170.162, 'text': "Let's do show previous page.", 'start': 1167.26, 'duration': 2.902}, {'end': 1176.326, 'text': "And we'll say const show previous page.", 'start': 1171.743, 'duration': 4.583}, {'end': 1179.228, 'text': "Which doesn't take in anything.", 'start': 1177.807, 'duration': 1.421}, {'end': 1183.994, 'text': 'And we want to check the current page number.', 'start': 1180.991, 'duration': 3.003}], 'summary': 'Creating functions for show previous and show next page functionality.', 'duration': 31.964, 'max_score': 1152.03, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1152030.jpg'}, {'end': 1393.257, 'src': 'embed', 'start': 1324.586, 'weight': 0, 'content': [{'end': 1326.748, 'text': "So we'll do a little bit of DOM manipulation here.", 'start': 1324.586, 'duration': 2.162}, {'end': 1331.873, 'text': "So let's close that up and let's head into our style sheet.", 'start': 1327.669, 'duration': 4.204}, {'end': 1334.898, 'text': "And this isn't going to be too much.", 'start': 1333.576, 'duration': 1.322}, {'end': 1337.9, 'text': "I'm just going to let's first of all, add a reset.", 'start': 1334.958, 'duration': 2.942}, {'end': 1344.887, 'text': 'So set the margin to zero padding to zero.', 'start': 1338.801, 'duration': 6.086}, {'end': 1348.931, 'text': "And then let's take the top bar.", 'start': 1345.848, 'duration': 3.083}, {'end': 1355.938, 'text': "Let's add a background of dark gray color.", 'start': 1350.092, 'duration': 5.846}, {'end': 1361.248, 'text': "White and let's do some padding, we'll do one rem.", 'start': 1357.364, 'duration': 3.884}, {'end': 1368.355, 'text': "And then for the button, remember, they have a class of BTN, I'm going to add a background of.", 'start': 1361.268, 'duration': 7.087}, {'end': 1374.42, 'text': "Coral Let's do color white.", 'start': 1370.256, 'duration': 4.164}, {'end': 1376.602, 'text': "Let's do border.", 'start': 1375.421, 'duration': 1.181}, {'end': 1380.326, 'text': "None Let's also do outline.", 'start': 1378.224, 'duration': 2.102}, {'end': 1391.577, 'text': "none. and let's change the cursor to a pointer, because they're buttons, not links.", 'start': 1382.754, 'duration': 8.823}, {'end': 1393.257, 'text': "and then let's add a little bit of padding.", 'start': 1391.577, 'duration': 1.68}], 'summary': 'Dom manipulation and stylesheet adjustments made for top bar and button with specific styles and properties.', 'duration': 68.671, 'max_score': 1324.586, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1324586.jpg'}], 'start': 836.946, 'title': 'Pdf rendering and page navigation', 'summary': 'Explains rendering a pdf on a canvas, setting canvas scale, handling rendering process, and adding page navigation functionality with styling, enhancing the pdf viewing experience.', 'chapters': [{'end': 986.988, 'start': 836.946, 'title': 'Pdf rendering and canvas scaling', 'summary': 'Explains how to render a pdf on a canvas, set the scale and size of the canvas, and handle the rendering process, concluding with the page rendering status update.', 'duration': 150.042, 'highlights': ['The chapter explains how to render a PDF on a canvas, set the scale and size of the canvas, and handle the rendering process, concluding with the page rendering status update.', 'The render method is utilized to render the PDF on the canvas, taking in parameters and obtaining the viewport for setting the scale.', "Instructions are provided for setting the canvas height and width based on the viewport's dimensions, using the page's render method in conjunction with a render context and handling the rendering status."]}, {'end': 1455.442, 'start': 986.988, 'title': 'Adding page navigation and styling', 'summary': 'Covers adding functionality to navigate through pages, including checking for pending page numbers and rendering the current page. it also includes adding styling to the top bar, buttons, and error handling, enhancing the pdf viewing experience.', 'duration': 468.454, 'highlights': ["Adding functionality to navigate through pages The chapter includes adding the functionality to navigate through pages using the 'show previous page' and 'show next page' functions.", "Checking for pending page numbers and rendering the current page The chapter covers checking for pending page numbers and rendering the current page, including setting 'page num is pending' and updating the current page number.", 'Adding styling to the top bar, buttons, and error handling The chapter includes adding styling to the top bar, buttons, and error handling, such as setting the background, color, padding, and hover state for buttons, and defining the style for error messages.']}], 'duration': 618.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs836946.jpg', 'highlights': ['The chapter explains how to render a PDF on a canvas, set the scale and size of the canvas, and handle the rendering process, concluding with the page rendering status update.', "Adding functionality to navigate through pages The chapter includes adding the functionality to navigate through pages using the 'show previous page' and 'show next page' functions.", 'The render method is utilized to render the PDF on the canvas, taking in parameters and obtaining the viewport for setting the scale.', "Checking for pending page numbers and rendering the current page The chapter covers checking for pending page numbers and rendering the current page, including setting 'page num is pending' and updating the current page number.", "Instructions are provided for setting the canvas height and width based on the viewport's dimensions, using the page's render method in conjunction with a render context and handling the rendering status.", 'Adding styling to the top bar, buttons, and error handling The chapter includes adding styling to the top bar, buttons, and error handling, such as setting the background, color, padding, and hover state for buttons, and defining the style for error messages.']}, {'end': 1706.569, 'segs': [{'end': 1497.721, 'src': 'embed', 'start': 1455.902, 'weight': 3, 'content': [{'end': 1459.124, 'text': 'So you can build your your your own interface from now on.', 'start': 1455.902, 'duration': 3.222}, {'end': 1465.188, 'text': "when you have to include a PDF on your site or your application whatever, you don't have to do the standard you know.", 'start': 1459.124, 'duration': 6.064}, {'end': 1467.27, 'text': 'just browser showing a PDF file.', 'start': 1465.188, 'duration': 2.082}, {'end': 1473.174, 'text': 'You can you can embed it however you want and have whatever kind of UI you want, which comes in really handy.', 'start': 1467.29, 'duration': 5.884}, {'end': 1483.957, 'text': "Now, like I said, I want it to have an error, because right now, if I go, let's see if I go to main JS and I change this to, let's say, PDF one,", 'start': 1474.234, 'duration': 9.723}, {'end': 1488.878, 'text': "something that's not actually there, and reload, it's just blank, which may be OK.", 'start': 1483.957, 'duration': 4.921}, {'end': 1492.739, 'text': "But I mean, it's it's not I'd rather it have an error.", 'start': 1488.938, 'duration': 3.801}, {'end': 1494.62, 'text': "I'd rather it not show the top bar.", 'start': 1492.799, 'duration': 1.821}, {'end': 1497.721, 'text': 'So what we want to do is go back in.', 'start': 1495.34, 'duration': 2.381}], 'summary': 'Custom interface for embedding pdfs, with error handling and ui customization.', 'duration': 41.819, 'max_score': 1455.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1455902.jpg'}, {'end': 1613.543, 'src': 'embed', 'start': 1524.825, 'weight': 0, 'content': [{'end': 1532.009, 'text': "And we're going to create a variable called div, and we want it called document.createElement.", 'start': 1524.825, 'duration': 7.184}, {'end': 1535.85, 'text': 'Okay, so this will create an element for us to put in the DOM.', 'start': 1532.029, 'duration': 3.821}, {'end': 1536.851, 'text': 'I want it to be a div.', 'start': 1535.89, 'duration': 0.961}, {'end': 1539.052, 'text': "And then let's add a class name.", 'start': 1537.471, 'duration': 1.581}, {'end': 1540.673, 'text': "Oops, I don't want that.", 'start': 1539.072, 'duration': 1.601}, {'end': 1546.175, 'text': "Let's do div.className.", 'start': 1543.034, 'duration': 3.141}, {'end': 1549.637, 'text': 'And remember, I created a style called error.', 'start': 1547.456, 'duration': 2.181}, {'end': 1551.238, 'text': "That's what I want to give this as a class.", 'start': 1549.677, 'duration': 1.561}, {'end': 1558.651, 'text': 'OK, now we want to take that div and we want to call a pen child because we want to add some text to it.', 'start': 1552.329, 'duration': 6.322}, {'end': 1560.012, 'text': 'We want to create a text node.', 'start': 1558.691, 'duration': 1.321}, {'end': 1568.835, 'text': "So in here we'll say document dot create text node and the text node is going to be that error that we passed in.", 'start': 1560.552, 'duration': 8.283}, {'end': 1571.016, 'text': 'It has a property of message.', 'start': 1568.875, 'duration': 2.141}, {'end': 1575.037, 'text': 'OK, so whatever is wrong will go in there as text as a message.', 'start': 1571.036, 'duration': 4.001}, {'end': 1579.119, 'text': "And then I'm going to grab the body.", 'start': 1575.617, 'duration': 3.502}, {'end': 1580.099, 'text': 'So query.', 'start': 1579.299, 'duration': 0.8}, {'end': 1584.384, 'text': "selector and let's grab the body.", 'start': 1581.562, 'duration': 2.822}, {'end': 1591.087, 'text': "We basically just need a parent and then we're going to say dot insert before.", 'start': 1584.424, 'duration': 6.663}, {'end': 1598.731, 'text': 'OK, so we basically want to take that div and we want to insert it before the canvas element.', 'start': 1591.107, 'duration': 7.624}, {'end': 1605.194, 'text': "OK, and then the last thing I want to do is remove the top bar so that doesn't show it all.", 'start': 1598.751, 'duration': 6.443}, {'end': 1613.543, 'text': "So we'll say top bar Actually, we don't have that, do we? Let's say document dot query selector.", 'start': 1605.254, 'duration': 8.289}], 'summary': 'Creating a div element with a class name, adding text, and inserting it into the dom before a canvas element.', 'duration': 88.718, 'max_score': 1524.825, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1524825.jpg'}, {'end': 1668.052, 'src': 'heatmap', 'start': 1638.625, 'weight': 0.799, 'content': [{'end': 1640.126, 'text': "And it tells us what's going on.", 'start': 1638.625, 'duration': 1.501}, {'end': 1642.426, 'text': "It's missing the this PDF file.", 'start': 1640.166, 'duration': 2.26}, {'end': 1649.169, 'text': 'And if I go back and I change this to be correct and save, go back.', 'start': 1643.327, 'duration': 5.842}, {'end': 1649.709, 'text': 'There it is.', 'start': 1649.289, 'duration': 0.42}, {'end': 1651.726, 'text': 'all right.', 'start': 1651.206, 'duration': 0.52}, {'end': 1653.067, 'text': "so that's it, guys.", 'start': 1651.726, 'duration': 1.341}, {'end': 1655.047, 'text': 'hopefully you found this useful.', 'start': 1653.067, 'duration': 1.98}, {'end': 1659.209, 'text': 'i like to try and look for you know practical projects.', 'start': 1655.047, 'duration': 4.162}, {'end': 1662.95, 'text': 'i know we do a lot of crash courses with to-do lists and stuff like that.', 'start': 1659.209, 'duration': 3.741}, {'end': 1668.052, 'text': "that's really to teach you the syntax of a particular language or framework.", 'start': 1662.95, 'duration': 5.102}], 'summary': 'Fixing the pdf file issue, demonstrating practical projects, and teaching syntax.', 'duration': 29.427, 'max_score': 1638.625, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1638625.jpg'}], 'start': 1455.902, 'title': 'Customizing pdf embedding and encouraging practical coding projects', 'summary': "Covers customizing pdf embedding with error handling and emphasizing the importance of practical coding projects. it also encourages engagement through likes and promotes the presenter's youtube channel and patreon page.", 'chapters': [{'end': 1642.426, 'start': 1455.902, 'title': 'Custom pdf embedding and error handling', 'summary': 'Explains how to customize the interface for embedding a pdf, including error handling to display a custom error message and remove the top bar if the pdf file is missing.', 'duration': 186.524, 'highlights': ['Customizing PDF embedding interface The chapter explains how to customize the UI for embedding a PDF, allowing users to embed PDFs the way they want on their site or application.', 'Error handling for missing PDF file It demonstrates adding error handling to display a custom error message when a PDF file is missing, along with removing the top bar from the display.', 'Creating a custom error message It details the process of creating a custom error message using JavaScript to inform users about a missing PDF file, enhancing user experience.']}, {'end': 1706.569, 'start': 1643.327, 'title': 'Practical coding projects', 'summary': "Discusses the importance of practical coding projects in addition to crash courses, and encourages viewers to engage by leaving a like and checking out the presenter's patron's youtube channel and patreon page.", 'duration': 63.242, 'highlights': ['The chapter emphasizes the value of practical coding projects over crash courses, aiming to provide viewers with useful projects for their careers.', "The presenter encourages viewers to engage by leaving a like and checking out the patron's YouTube channel and Patreon page for additional content.", 'A shout-out is given to a patron, Carlos Mafla, who has a YouTube channel focused on front-end development and DevOps, with a new video on React Hooks.']}], 'duration': 250.667, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/ydCSSgwZjzs/pics/ydCSSgwZjzs1455902.jpg', 'highlights': ['Customizing PDF embedding interface The chapter explains how to customize the UI for embedding a PDF, allowing users to embed PDFs the way they want on their site or application.', 'Error handling for missing PDF file It demonstrates adding error handling to display a custom error message when a PDF file is missing, along with removing the top bar from the display.', 'Creating a custom error message It details the process of creating a custom error message using JavaScript to inform users about a missing PDF file, enhancing user experience.', 'The chapter emphasizes the value of practical coding projects over crash courses, aiming to provide viewers with useful projects for their careers.', "The presenter encourages viewers to engage by leaving a like and checking out the patron's YouTube channel and Patreon page for additional content.", 'A shout-out is given to a patron, Carlos Mafla, who has a YouTube channel focused on front-end development and DevOps, with a new video on React Hooks.']}], 'highlights': ['The chapter explains how to load a PDF in a web page with pagination, addressing the practical need and the inclusion of error handling for missing PDFs.', 'The speaker explains the process of creating a folder structure with specific files for the PDF Viewer, including an index.html file, CSS and JS folders, and the inclusion of PDF.js and Font Awesome using CDNs.', 'Adding a top bar with previous and next page buttons to the HTML for the PDF viewer.', 'Defining constants like scale, canvas, and context for rendering PDF on a canvas', 'Setting up variables for URL and PDF document', 'Defining global variables for page number and rendering state', "Accessing the PDF JS lib object via CDN and using the 'get document' method to retrieve a document's URL.", 'Handling the promise to obtain the document and setting a global PDF doc variable for access to the document information.', 'Logging the retrieved PDF doc for verification and testing purposes.', 'The PDF contains a total of five pages, which is set using the num pages property and displayed in the console log.', 'The process involves setting the total number of pages and then rendering specific pages using a series of functions to navigate through the pages.', "The rendering process involves setting the page's rendering value to true and using the get page method to retrieve the content of the page.", 'The chapter explains how to render a PDF on a canvas, set the scale and size of the canvas, and handle the rendering process, concluding with the page rendering status update.', "Adding functionality to navigate through pages The chapter includes adding the functionality to navigate through pages using the 'show previous page' and 'show next page' functions.", 'The render method is utilized to render the PDF on the canvas, taking in parameters and obtaining the viewport for setting the scale.', "Checking for pending page numbers and rendering the current page The chapter covers checking for pending page numbers and rendering the current page, including setting 'page num is pending' and updating the current page number.", "Instructions are provided for setting the canvas height and width based on the viewport's dimensions, using the page's render method in conjunction with a render context and handling the rendering status.", 'Adding styling to the top bar, buttons, and error handling The chapter includes adding styling to the top bar, buttons, and error handling, such as setting the background, color, padding, and hover state for buttons, and defining the style for error messages.', 'Customizing PDF embedding interface The chapter explains how to customize the UI for embedding a PDF, allowing users to embed PDFs the way they want on their site or application.', 'Error handling for missing PDF file It demonstrates adding error handling to display a custom error message when a PDF file is missing, along with removing the top bar from the display.', 'Creating a custom error message It details the process of creating a custom error message using JavaScript to inform users about a missing PDF file, enhancing user experience.', 'The chapter emphasizes the value of practical coding projects over crash courses, aiming to provide viewers with useful projects for their careers.', "The presenter encourages viewers to engage by leaving a like and checking out the patron's YouTube channel and Patreon page for additional content.", 'A shout-out is given to a patron, Carlos Mafla, who has a YouTube channel focused on front-end development and DevOps, with a new video on React Hooks.']}