How to create a Download Progress Bar with JavaScript
4 هزار بار بازدید -
2 سال پیش
-
In this project, I’m going
In this project, I’m going to show you how to build a JavaScript progress download bar whilst teaching you some of the fundamentals of JavaScript promises.
00:00 Introduction
00:23 Introduction to JavaScript Promises and getting progress events
11:30 Download progress bar Markup
12:27 Adding Styling
18:26 Updating progress in the UI
22:10 Trigger download when ready
25:51 Handling errors in a Promise chain
28:34 Disabling download button and reactivating using .finally()
So this is cool little project to add to your portfolio which will introduce you to several concepts but will mainly focus on JavaScript promises and and how you can use the .then, .catch and .finally properties of a promise to handle events as they happen in your asynchronous JavaScript code.
I’ll show you how to build this JavaScript progress bar which represents how to download a large file whilst uploading the web user interface at the same time.
If you’ve ever struggled with JavaScript promises before, I will show you how to chain requests using multiple promises by accessing the .then() property and catch any errors that might occur during the download using the JavaScript promise .catch() property. At the end of the tutorial, I’ll show you how to disable the button whilst the download is in progress so the user can’t keep pressing the download button and re-activate the button using the .finally() property which is available on JavaScript promises.
#javascript #javascriptproject #javascriptbeginners
Channel Handle @codebubb
00:00 Introduction
00:23 Introduction to JavaScript Promises and getting progress events
11:30 Download progress bar Markup
12:27 Adding Styling
18:26 Updating progress in the UI
22:10 Trigger download when ready
25:51 Handling errors in a Promise chain
28:34 Disabling download button and reactivating using .finally()
So this is cool little project to add to your portfolio which will introduce you to several concepts but will mainly focus on JavaScript promises and and how you can use the .then, .catch and .finally properties of a promise to handle events as they happen in your asynchronous JavaScript code.
I’ll show you how to build this JavaScript progress bar which represents how to download a large file whilst uploading the web user interface at the same time.
If you’ve ever struggled with JavaScript promises before, I will show you how to chain requests using multiple promises by accessing the .then() property and catch any errors that might occur during the download using the JavaScript promise .catch() property. At the end of the tutorial, I’ll show you how to disable the button whilst the download is in progress so the user can’t keep pressing the download button and re-activate the button using the .finally() property which is available on JavaScript promises.
#javascript #javascriptproject #javascriptbeginners
Channel Handle @codebubb
2 سال پیش
در تاریخ 1401/07/27 منتشر شده
است.
4,020
بـار بازدید شده