Skip to content
Submitted almost 4 years ago

Crowdfunding Product Page - SCSS, JS, Grid, CSS Animations

sass/scss
Anna Leigh•5,135
@brasspetals
A solution to the Crowdfunding product page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi, everyone! 👋 This project ended up being far more complicated and time-consuming than I anticipated, but was a great learning experience.

The desktop bookmark button interaction is a bit different than the design - it toggles. I wanted to experiment and have a bit of fun. 😄 Check out the README for my full list of “additions” and “deviations” if you’re curious!

Questions:

  • How much of a hot mess is my JS? 😅 Up until now I’ve only used it for menu toggling, so this was a challenge. I’m sure there’re a million better and more efficient ways to go about everything I did. Please, let me know!
  • The largest challenge was keyboard accessibility, which I’m still having major issues with. The selection modal focus trap works when you open the modal using the “back this project” button, but doesn’t function correctly if you use the “select reward” buttons. It also breaks once one of the radio buttons has been selected, so I think that may be the issue. Does the focus trap have to be reapplied/"refreshed" every time an input is selected? Any insight would be appreciated!

Shoutouts:

Code

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deleted

    Top work there Anna. I did struggle a lot with this project and almost at the point of giving up. You have inspired me to keep at it. Hopefully i will get it right.

  • P
    Dave•5,295
    @dwhenson

    Anna!! This is ace! I think I have to go back and redo this one now! My solution seems clunky in comparison!

    I'm really glad that you found the Udacity course useful. I thought it was excellent and not at all easy!

    That said I'm going to go against the advice from @ApplePieGiraffe (eek!), and say that I would suggest seeing if you could do more with HTML and CSS before bringing in a framework, thus making your JS easier to manage that way? (But I haven't learnt any frameworks yet so I may not know what I'm talking about!).

    For example, and I'm not 100% that this could work but:

    1. I think that the bookmark button could be a checkbox - this means that we could easily save the checked status in localStorage, but more importantly we could probably use the :checked attribute to trigger your lovely animation?

    2. On the 'pledge selection' modal, if we wrapped everything in a single form, then the radio inputs would automatically only allow one to be selected at a time (less need for the JS again there - and perhaps more semantic?); and

    3. On the same modal, we can also try to use the :checked ~ .pledge-selected on the inputs to adjust the display property on the sections that appear below? (This may end up being too hectic to structure in HTML but might be worth a try!)

    All that said, don't let anything detract from the great work here. I think it's lovely, and I'm putting this one back on my list to have another crack at one day!!

    Cheers! Dave

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Anna! 👋

    I've been waiting for you to complete this challenge! 😀 I knew it it was going to come out well and I was right! 😆 I really, really like the toggable bookmark button (I've spent some time just spam clicking that) and the rest of your solution looks great and works very well (as expected)! 👏

    I don't really have anything to suggest about your solution, but as mbart13 mentioned, a framework or library really would make things easier for you. Consider giving one a go—you'll have lots of opportunities to learn about JS along the way, so don't feel too pressured to have your JS game super-solid before you start. 😉 If you're looking for any suggestions for one to start with, you probably already know my recommendation is... Svelte! 😊

    Anyways, you've done an awesome job, once again! Keep going! 👍

    Of course, keep coding (and happy coding, too)! 😁

  • tediko•6,700
    @tediko

    Hello, Anna! 👋

    Awesome work! As always your solution is pixel perfect and everything looks very polished. I really like your approach to even small details, it is appreciated since we see here and there solutions that are not even done. Bookmark button interaction feels and looks great, that was a good idea and I'm happy to implement something similar in my future projects. Again, great job! 🔥

    I found that after I select reward -> enter my pledge and then send it by clicking continue button if I want to again go to add this reward .amount__label value is like the previous one. I think it is better to reset this value to default. Another thing is to change the alt text for the .intro__logo, as it doesn't add any extra context. And lastly, maybe since .reward--unavailable is disabled from clicking and interacting you can add cursor: no-drop to it. Not sure about that, but it occurred to me right now :D

    Thanks for shoutout. This community benefits from your presence. Keep up the good work! 💪

  • Michal•665
    @mbart13

    Glad to hear I'm not the only one who suffered through this challenge 😂

    Really admire that to you even tried to implement modal trap, I just gave up

    As to js, well... I would advice to check some framwework like react, vue. It would help you structure your code and save you pain of this endleess classlist add/remove

  • P
    Patrick•14,265
    @palgramming

    Congrats looks like you did a great job 🌟🌟🌟🌟🌟

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