Dynamic Progress Bar using JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 8 ธ.ค. 2024
  • In this video I show you how to build a dynamic progress bar in JavaScript. I will show you how to replicate the progress bar provided by html on your own. And you will also learn how to display the appropriate percentage in the progress bar based on the value and max value provided.
    Crush Your React Interview: A Last Minute Preparation Guide
    Link- www.buymeacoff...
    Details:
    Have only a week before your following react interview? Or maybe just 2 days? Get ready for your React JS interview in no time with this comprehensive last-minute preparation guide! This handbook covers all the essential React JS interview questions and provides answers, tips, and explanations to help you confidently tackle any interview situation. Don't let stress and lack of preparation hold you back, grab your copy now and be fully prepared for your next big opportunity!
    Pay once and you get the following:
    Lifetime access
    Frequent updates
    Lifetime access to all new questions and answers that get added with time
    36 in-depth conceptual Questions + Answers (with free access to upcoming questions)

ความคิดเห็น • 14

  • @xplodivity
    @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
    @heyitsjaredbender ปีที่แล้ว

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

  • @bashita159
    @bashita159 2 ปีที่แล้ว +2

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

  • @ManojKumar-pb6he
    @ManojKumar-pb6he 2 ปีที่แล้ว +9

    bro code please

  • @GamingWithMim
    @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
    @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
    @PUDGEMSF 4 หลายเดือนก่อน

    thank you

  • @gabrielmoreno3027
    @gabrielmoreno3027 ปีที่แล้ว +3

    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
      @muhammadhusaynamilaiyub6911 7 หลายเดือนก่อน

      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
      @gabrielmoreno3027 7 หลายเดือนก่อน

      @@muhammadhusaynamilaiyub6911 ask chatgpt it's not hard

  • @it9hektar
    @it9hektar ปีที่แล้ว

    Thank U 👍

  • @살랑시
    @살랑시 2 ปีที่แล้ว

    thanks

  • @paulosenaijr3146
    @paulosenaijr3146 2 ปีที่แล้ว

    send to us the code...
    please

    • @wpl_jradio
      @wpl_jradio 8 หลายเดือนก่อน

      Type it and learn 😊