Skip to content
Submitted over 2 years ago

Crowdfund Project Page

Aidan•100
@aidan57
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Crowdfunding product page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

The hardest part of this project was the Javascript portion. Specifically trying to update the price on the screen live. I had to jump through hoops trying to get that working properly and it's still not the best it can be. If I pledge an amount, it adds that to the total. but when I pledge a second time, the amount is added only to the original price instead of what its worth currently. Is there any way I can get it to continually update as long as I don't refresh the page? Thanks! Happy coding!

Community feedback

  • Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    Hi, Aidan! Congrats on tackling this challenge with vanilla JS. I can say from experience, it's definitely not easy. I seriously HATED this challenge by the time I was done with it. 😆

    Anyway, I believe the problem is because your totalMoney variable is never updated to add the value of the pledge amount. Therefore, every time a new pledge amount is submitted, the amount is simply added to the declared value of 89914. Instead of declaring a new variable (ex: newTotal2), you should be able to just update totalMoney and use it instead: totalMoney += parseInt(priceUpdate2);

    Also, you may find toLocaleString() a very handy alternative to splice() in this case.

    Marked as helpful
    0
    Aidan•100
    @aidan57Posted over 2 years ago

    @brasspetals Thats how I feel! I didn't think it was going to be as complicated as it was XD Your advice is very helpful though, I'll definitely update the site using your advice! Thank you!

    On a side note, I snooped on your profile and saw your version of this project and I LOVE IT! I love all the smooth transitions and animations in the little details. Everything about it was fantastic!

    0
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @aidan57 At many points I was ready to throw my laptop out the window. I was so determined to prove I could do it without a framework/library - not sure if the struggle was worth it. 🤣 Thank you for the kind words! 😊 The solution looks nice...until you open the JS file. 🙈

    Glad my advice could be of some help! 😄

    1
  • Kofi Quist•280
    @GuyTitoPosted over 2 years ago

    Good job on this challenge. These are my tips to improve it:

    1. For good user experience, increase the hit area of each radio button by adding a corresponding label tag
    2. Also, instead of using placeholder for the inputs for the pledges, I think it is better to prepopulate it with value so the user can submit right away.
    2
    Aidan•100
    @aidan57Posted over 2 years ago

    @GuyTito Thank you for your advice! i'll be sure to increase the hit area. I thought about it but I wasn't sure how to do it. But now I can! Originally I had the inputs pre-populated, but I personally didn't like the way it looked. Thats why I ended up with the placeholder instead. Your advice was very helpful, thank you!

    0
    Kofi Quist•280
    @GuyTitoPosted over 2 years ago

    @aidan57 You're welcome

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord