Dynamic Progress Bar using JavaScript

[@xplodivity]

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

[@heyitsjaredbender]

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

[@ManojKumar-pb6he]

bro code please

[@bashita159]

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

[@gabrielmoreno3027]

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()
});

[@muhammadhusaynamilaiyub6911]

just want to ask bro, how do i create a progress tracker where i can create a a project that has percentage on how much progress it's making hope someone can answer... thank you

[@gabrielmoreno3027]

@@muhammadhusaynamilaiyub6911 ask chatgpt it's not hard

[@GamingWithMim]

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%

[@AlanBermanMusic]

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.

[@PUDGEMSF]

thank you

[@it9hektar]

Thank U 👍

[@살랑시]

thanks

[@paulosenaijr3146]

send to us the code...
please

[@wpl_jradio]

Type it and learn 😊