@Eman-AbdallahSubmitted about 2 years ago
I did not find json file so i wrote advice by my self
CarvalhoVincent
@CarvalhoVincentAll comments
- @CarvalhoVincentPosted about 2 years ago
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 helpful0 - @ferlagherSubmitted over 2 years ago
Go hover and click the button, please! <3
@CarvalhoVincentPosted over 2 years agoNice animations for your buttons in your last 2 projects , I really like it 😄 Eager to see your next solutions !
1 - @FaideJauresSubmitted over 2 years ago
If you have any comments to improve my code, they are welcome.
@CarvalhoVincentPosted over 2 years agoHi, 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 helpful0 - @PhisherFTWSubmitted over 2 years ago
This was a really good challenge, introduced me to how useful changing classnames with DOM is and how to implement some animations although I still have 2 problems I need help with.
- I haven't found a simple way to make it so everytime I open a different FAQ question the others close automatically, every solution I found uses Jquery or Bootstrap and not plain javascript, so currently you have to close each one individually otherwise if you open all of them it messes up the positioning and looks.
- On the solution is shows the corner of the left image is hidden behind the background, there might be a way to do this with overflow, but I couldn't figure it out and I tried hiding it with z-index but I had no luck because then the background would be a higher z-index than the img and hide everything.
If you have any tips or solutions I would be very happy to have input of any kind.
Thanks!
@CarvalhoVincentPosted over 2 years agoYou 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 helpful1 - @KKS1991Submitted over 2 years ago
Hi guys,
I still have struggles with flexbox-positioning. With regard to <div class="container signup-proposal"> and <p class="signup-proposal-txt">: I failed (again) to center the flex-item (<p>) on the x- and y-axis with justify-content: center; and align-items: center; I also tried align-content: center;. So maybe there is someone who can explain to me the issue and can give me some advices.
Another task was to provide an error message when the submitted email address ist not formatted correctly. I also still looking here for an appropriate solution.
Thank you for your support.
Kevin =)
@CarvalhoVincentPosted over 2 years agoHi, 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 helpful0 - @Dileep001Submitted over 2 years ago
I am open to learning from feedback, so please check this out!!
@CarvalhoVincentPosted over 2 years agoGreat 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 helpful0 - @jonathan401Submitted over 2 years ago
Okay... So this challenge was a little tougher than it looked for me. I had a lot of struggle keeping my scss organized, I also struggled with making the desktop version look as close as possible to the design provided. I would love to hear your suggestions
@CarvalhoVincentPosted over 2 years agoYour 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 helpful0 - @tmorisSubmitted over 2 years ago
Hello community, I need some guides, am getting difficulties in updating the Rating card choice value to match with the Thanks card selected value using JS. Any guidance in areas of improvement is highly appreciated. Thanks.
@CarvalhoVincentPosted over 2 years agoHi, 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 helpful0
