
CarvalhoVincent
@CarvalhoVincentAll comments
- @Eman-Abdallah@CarvalhoVincent
Hello @Eman-Abdallah, It's not a JSON file, you need to connect an API, then you can generate random advices. The information is in the README file inside the main folder you download when you start the challenge. You can find all the information you need in this file and the API website.
Hope this helps !
Marked as helpful - @ferlagher@CarvalhoVincent
Nice animations for your buttons in your last 2 projects , I really like it 😄 Eager to see your next solutions !
- @FaideJaures@CarvalhoVincent
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 - @PhisherFTW@CarvalhoVincent
You can look at my solution, I managed to do it by including all the images in the HTML file, with two divs, inside the white Box, with the overflow: hidden.
<div class="white-box"> <div class="images"> <img src="./images/illustration-woman-online-desktop.svg" class="illustration-woman-online-desktop" alt="illustration-woman-online-desktop"> <img src="./images/bg-pattern-desktop.svg" class="bg-pattern-desktop" alt="bg-pattern-desktop"> </div> <div class="square"> <img src="./images/illustration-box-desktop.svg" class="illustration-box-desktop" alt="illustration-box-desktop"> </div> </div>
.images { overflow: hidden; }
Hope this helps. Happy coding !
Marked as helpful - @KKS1991@CarvalhoVincent
Hi, this looks good.
- For your issue, you can use same margin or padding for top and bottom, like:
p { padding-top: .5rem; padding-bottom: .5rem; } or p { margin: .5rem 0; }
- For the mail format, you can use a pattern, like this :
<input type="email" id="mail" placeholder="Email Address" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
Hope this is helpful. Happy coding !
Marked as helpful - @Dileep001@CarvalhoVincent
Great solution! You can easily fix your accessibility and html issues:
- Replace the first div by main :
<body> <main> "your code" </main> </body>
- Replace the <h3> by a <h1> :
<h1>Equilibrium #3429</h1>
- Fill in the alt="" in the img tag.
<div class="ic-view"><img src="./images/icon-view.svg" alt="icon view" width="30px" height="30px"></div> <img src="./images/icon-ethereum.svg" alt="Ethereum symbol" height="15px" width="10px"> <img src="./images/icon-clock.svg" alt="a clock" height="15px" width="15px"> <div class="in"><img src="./images/image-avatar.png" alt="avatar" height="25px" width="25px"></div>
maybe you already know these things, if not I hope this helps. Happy coding !
Marked as helpful - @jonathan401@CarvalhoVincent
Your Solution looks good ! One thing, on Safari, your summaries still have the black arrow on the left. Maybe it can be fix with this.
details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; }
Marked as helpful - @tmoris@CarvalhoVincent
Hi, seems there's an error in your JS line 37, check the console with inspector. And duplicate id for "numbtn-5". The report show also : bad value put for attribute method on element form. Maybe it's a first step to resolve your problem. I'm not able to help you more this time, I did it with an array. Happy coding !
Marked as helpful