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

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

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

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

@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

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

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

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

@palgramming Thanks, Patrick! 😊

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