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

All comments

  • CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    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

    0
  • CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    Nice animations for your buttons in your last 2 projects , I really like it 😄 Eager to see your next solutions !

    1
  • seruaJ• 230

    @FaideJaures

    Submitted

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

    CarvalhoVincent• 500

    @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
  • Keagan Dickinson• 160

    @PhisherFTW

    Submitted

    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.

    1. 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.
    2. 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!

    CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    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

    1
  • Kevin• 110

    @KKS1991

    Submitted

    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 =)

    CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    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

    0
  • CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    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

    0
  • Kehinde• 660

    @jonathan401

    Submitted

    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

    CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    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

    0
  • CarvalhoVincent• 500

    @CarvalhoVincent

    Posted

    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

    0