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

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.

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @WaltonMukwenha Hi, Walton! Very happy to have given you some inspiration on your solution! This was definitely the hardest of the all the challenges I've done, so don't feel bad. Trust me, I wanted to give up on it many times.

  If this is the first challenge you're attempting on FEM, I definitely suggest switching over and doing a few newbie challenges before coming back to this one because...oof! The design looks so simple, but as you've already found out, it's not a simple project at all! You got this though. 💪 If you need help, the Slack channel is great!

  0

  Account deleted

  @brasspetals Thanks a lot for the encouragement. I have done a few challenges but not as demanding as this one. It looked easy on the eye so decided to go for it. Let me jump onto other relatively less challenging then work my way up.

  1
• 

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  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

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @dwhenson Hi, Dave! Thanks again for suggesting the course - and also thanks so much for taking the time to give my code such a thorough look and provide suggestions! Yes, this challenge was easily the hardest one I’ve done. I don’t think people who haven’t tried it out realize how difficult it is, because the design is so deceptively simple. It certainly fooled me! 😂

  1. I think a checkbox could indeed work here, and you’re absolutely correct that using “checked” styling would clean up the JS a bit. I believe I was just trying to save myself the trouble of having to hide and “hack” another input. I was also thinking a button might be best, since in a real case scenario you would be submitting the bookmarked info to a user database, right? I’m probably totally off base.

  2. & 3. The radio inputs are all in the same group, so only one can be selected at a time - precisely why I decided to go with radio groups. 😄 The problem was in applying the styling. There were two main issues I had:

  • The first, and boy oh boy did I try to restructure to accommodate this while still following the design, is that some styling needs to be applied to the parent element of the selected radio button, not just children. In CSS there’s currently no way to select parent elements, so using :checked couldn’t tick all the boxes as it were (sorry, I couldn’t avoid the pun!). I really tried.
  • The second is that the “change” event listener for radio buttons detects when a radio button is checked but not when it is unchecked/deselected. Hence every time one radio button is checked, you have to loop through all of them to remove styling from those that are unchecked. Believe me when I tell you, the tedium of this solution was maddening. I avoided writing a fully on essay in the README, but I was definitely tempted.

  1

  

  P

  Dave•5,295

  @dwhensonPosted over 3 years ago

  @brasspetals - this one is painful for sure! On point one, true, I think either a checkbox or button could work depending on how we interpret things would work.

  For 2 & 3, I had to have another look how you did the inputs - I love the idea of overlapping grid items. I would have messed around with positioning forever and not got such a nice result!

  On second look I also see that you grouped the inputs using the name attribute but in different forms - again really nice I would not have thought of that.

  I just had a look how I dealt with the styling of the inputs, I don't think my solution looks as nice as yours, but I used:

  input[type="radio"]:checked::after

  Which basically applies the styling to the input (or rather a psudo element position in its center) with the background color set to fill the input, only when checked, and being in the same group means on one can be checked.

  When I look at my solution now it seems messy but I think this works OK and avoids the need to loop over the elements applying and removing classes with JS (and no need to worry about listening for 'deselect').

  In the long run, I'm not sure any of this makes any difference as if your JS wasn't working the modal wouldn't even appear, but it's really nice having a good look at your approach and I've learnt a few tricks

  1
• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted over 3 years ago

  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)! 😁

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @ApplePieGiraffe Thanks, APG! 😊 The toggle button was probably the one fun part of this project, and one of the few things that actually went well, lol! Glad you like it!

  I was so stubbornly determined to do this in vanilla JS to prove that you could, but I really have made things difficult for myself. 🙈 But I have a feeling I'll be diving into a library or framework very soon...😉

  0
• 

  P

  tediko•6,680

  @tedikoPosted over 3 years ago

  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! 💪

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @tediko Thank you for such kind words, tediko!

  I originally had a form reset function on modal close, but had some issues with it and decided to remove it. I'll dig into my old code to see if I can work out a fix now that most of the other modal issues I was having at the time are solved. 👍 I'll also look into the cursor: no-drop you mentioned! Thanks for taking the time to poke through my mess of code. 🙏

  1
• 

  Michal•665

  @mbart13Posted over 3 years ago

  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

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @mbart13 The amount I struggled with this challenge...🤦‍♀️😂 You are DEFINITELY not the only one!

  So close to the modal trap fully functioning! This video was super helpful in getting me there.

  I really want to get my JS solid before checking out a framework, hence sticking with plain JS here. Clearly, I have chosen the way of pain. I'm starting to think I might be a masochist. 😂

  Edit: If you meant my JS could use some restructuring and be broken up into modules - I definitely agree!

  0
• 

  P

  Patrick•14,265

  @palgrammingPosted over 3 years ago

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

  1

  ---

  

  Anna Leigh•5,135

  @brasspetalsPosted over 3 years ago

  @palgramming Thanks, Patrick! 😊

  It looks great if you don't look at the code! 😂😂😂

  0