Dynamic Progress Bar using JavaScript 

16 Intermediate/Advanced JavaScript Projects to Dominate Your Next Technical Interview Get it now- xplodivity.graphy.com/courses/16-js-projects-65883553e4b08ebe75f39885 - Lifetime access - Full video explanations of building each project from scratch - 10+ hours of premium content - No bullshit, No time waste - This project list Should get you ready for any JavaScript live coding interview round. - Extremely cheap (less than $10) Content list: 1. File Explorer (similar to vs-code) 2. Infinitely Nested comments 3. Advanced Custom Toast notification from scratch 4. Drag & Drop, Swap, Add and delete elements using JavaScript 5. Custom Calendar/Date-picker 6. Multi-Select dropdown with support to add & remove elements 7. Build a Memory game with all rules integrated 8. Build an analog clock with smooth animation 9. Dynamic Progress bar with custom input support 10. Build a Star rating system with dynamic hover effects 11. Build a tic tac toe game with best practices 12. Advanced To-Do List with Local Storage support 13. Accordion with smooth transition effects 14. Countdown timer & days remaining timer 15. Create a custom modal 16. Build an optimised Chessboard

Great tutorial! Super fun way to learn more ways to use Javascript, thanks so much!

thank you

bro code please

How could I show the final html code on the web in a text area?

Thank U 👍

Thanks for the tutorial. I have a question how would I also add the value beside the percentage to make it look like this? EX: $100/50%

Shouldn't the changeWidth function change the width of the progress-done div, not the progress div? That's the one with the gradient that starts with a width of 0.

Here you go: const progress = document.querySelector(".progress-done") const input = document.querySelector(".input") const maxInput = document.querySelector(".maxInput") let finalValue = 0; let max = 0; function changeWidth(){ progress.style.width = "${(finalValue / max ) * 100}%" progress.innerText = "${Math.ceil(finalValue / max ) * 100}%"" } input.addEventListener("keyup", function() { finalValue = parseInt(input.value, 10); changeWidth() }); maxInput.addEventListener("keyup", function() { max = parseInt(maxInput.value, 10); changeWidth() });

thanks

send to us the code... please