Dynamic Progress Bar using JavaScript

แชร์
ฝัง
  • เผยแพร่เมื่อ 4 ธ.ค. 2024

ความคิดเห็น • 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!

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

    bro code please

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

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

  • @PUDGEMSF
    @PUDGEMSF 3 หลายเดือนก่อน

    thank you

  • @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%

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

    Thank U 👍

  • @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.

  • @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

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

    thanks

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

    send to us the code...
    please

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

      Type it and learn 😊