Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

vanilla js, flex

seruaJ 230

@FaideJaures

Desktop design screenshot for the Crowdfunding product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


If you have any comments to improve my code, they are welcome.

Community feedback

@CarvalhoVincent

Posted

Hi, nice solution ! A simple thing you can do is to check your radio buttons with JS when you click on Select Reward for Bamboo Stand or Black Edition :

<div>
            <span><strong>101</strong> left</span>
            <button onclick="checkRadio1()">Select Reward</button>
</div>

<div>
            <span><strong>64</strong> left</span>
            <button onclick="checkRadio2()">Select Reward</button>
</div>
const pledge1= document.getElementById("pledge_1");
const pledge2= document.getElementById("pledge_2");

function checkRadio1() {
        modal.style.display = "block";
        pledge1.checked = true;   
};

function checkRadio2() {
        modal.style.display = "block";
        pledge2.checked = true;   
};

And maybe after you can try to update the progress bar dynamically, or update the total backed, total backers, or stand left numbers. You can check my solution if you want, it's not perfect but it could be a starting point.

Hope it helps !

Marked as helpful

0

seruaJ 230

@FaideJaures

Posted

@CarvalhoVincent thank you very much.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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