Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
13
Comments
12
Amobi Jonathan Chukwudi
@Jonathanthedeveloper

All comments

  • Pastor Enrique Sánchez•20
    @pastyenrique
    Submitted over 2 years ago

    Qr-code-component

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hey Enrigue, Your challenge looks excellent, Kudos to that but, I noticed that you failed to add a closing HTML tag and with that, you may end up with unexpected issues with your webpage. However, excluding a closing tag will not cause error messages or crashes, so they technically are not an absolute requirement. But, this does not mean you should exclude them.

    Marked as helpful
  • Welangai Eric•160
    @welangaieric
    Submitted over 2 years ago

    interactive-card-details-form-main

    #jss#sass/scss
    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hello Eric, your solution looks great except for the fact that it isn't interactive.

    In case you're wondering what Event listener could be used you can use the keyup event listener

    here's a sample solution code

    // dom elements
    const inputs= document.querySelectorAll('input');
    const outputs = document.querySelectorAll('output');
    
    inputs.forEach(function(input, index){
    input.addEventListener("keyup", function('keyup', function(){
    if(validation code === true) {
    outputs[index].textcontent = input.value; 
    }
    })
    )
    });
    
    Marked as helpful
  • shalash23•280
    @shalash23
    Submitted over 2 years ago

    Tip Calculator App

    #sass/scss
    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hey shalash23, Your overall solution looks great.

    However, you didn't save the total for each person, you are supposed to save the total of every calculation until the reset button is pressed please, do well to look into it.

  • soles•40
    @loicsolbes
    Submitted over 2 years ago

    Product preview card component

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hello Soles, Whilst your solution looked great and responsive I've noticed that has an overflow-X maybe you could try changing your container's max-width to 80% or you could also try setting the body's overflow to hidden. Thank you

    Marked as helpful
  • David Iván Cabello•110
    @davidicabello
    Submitted over 2 years ago

    Product preview card component

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hello David, Your Solution looks great, however, you should that the following into account

    1. your div.productDescription needs some more padding 30px should be great

    2. your button.addToCartButton needs some resizing as it's too high, and the top margin seems to be too high

    3. you should also add a line-height to your <p>...</p> say 1.2

    4. Then on mobile view the picture on the left seems to be distorted, maybe you could try changing the <img> src on the mobile view to the image provided for mobile devices.

    But overall your solution looks great

    Marked as helpful
  • Konstantin Christ•450
    @Konstantinchrist
    Submitted over 2 years ago

    Responsive Sign-in page

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hello Konstatin, your solution to this challenge was great and awesome, very responsive and that's really cool, However Instead of putting the required keyword on the HTML input tags. you could use some form validation using javascript to verify that an input was filled and if not, you then display its dedicated error messages, also you should also add some box shadow to the div.special-offer and button attached below is a code that might help you understand what I mean

    inputs.forEach( input => {
    // check if the input is empty
    })
    
    Marked as helpful
  • Sebastian•300
    @SebastianLaka
    Submitted over 2 years ago

    Interactive rating

    #accessibility#bem#sass/scss#remix
    2
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hello Sebastian, You did excellent work on your rating component, however, it would be best if you validated that a button has been clicked before displaying the thank you message. I added a code below to help you with that

    
    submitButton.addEventListener("click", () => {
    if (/* check if user has click on a rating*/  ){
      secondCard.classList.remove("hidden");
      firstCard.style.display = "none";
    } else {
    // prompt user to click on a rating
    }
    });
    
    Marked as helpful
  • Nabil Wasir•680
    @NabilWasir
    Submitted over 2 years ago

    This a solution Article Preview Component challenge

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hey Nabil, whilst your solution looked great, I however noticed that you used px and now your solution isn't fully responsive on some mobiles changing you width units to % percentages would go a long way

    example you could do

    .main-container {
      width: 60%;
    }
    
  • Marek Brzezinski•40
    @marekbrze
    Submitted over 2 years ago

    QR Code

    2
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Hey Marek, I noticed that you used a lot of divs . so you can refactor your code to

    
            <div class="cardContent">
              <h1>Improve your front-end skills by building projects</h1>
                <p>
                  Scan the QR code to visit Frontend Mentor and take your coding
                  skills to the next level
                </p>
            </div>
    
    

    instead of

    
            <div class="cardContent">
              <h1>Improve your front-end skills by building projects</h1>
              <div class="cardContent">
                <p>
                  Scan the QR code to visit Frontend Mentor and take your coding
                  skills to the next level
                </p>
              </div>
            </div>
    

    You

    Marked as helpful
  • Benjamin•120
    @BennyBenV
    Submitted over 2 years ago

    Intro component with sign up form by BBV

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Benjamin nice work you did there. however, I noticed your solution wasn't responsive even though you used flex on your div#main, try adding this to help improve responsivity

    #main {
        flex-direction: row;
    }
    
    @media (max-width: $width ){
        #main {
        flex-direction: column;
    /* add more styles for your solution*/
    }
    }
    
    

    replace $width with the screen width you want to make it responsive at e.g 800px Thank you

    Marked as helpful
  • Okudero Michael•350
    @MicMond01
    Submitted over 2 years ago

    Advice generator

    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted over 2 years ago

    Nice work you did there Micheal. Notice how your div.container is small on mobile devices, make it have a total width of 90% of the view width, then try reducing the font size of your h3 of smaller devices, and lastly change the let keyword you used while targeting your dom elements in your script.js to const as the dom elements are static, the only thing that changes it their values. Thank you.

  • Giang Nhật Khánh (Kayden)•150
    @KaydenGiang2512
    Submitted about 3 years ago

    Introduction Section With Navigation using HTML5, CSS3 & Vanilla JS

    #accessibility
    1
    Amobi Jonathan Chukwudi•350
    @Jonathanthedeveloper
    Posted about 3 years ago

    I noticed that you picture was aligned to the top right, Which isn't supposed to be so.

    I think this would solve it

    img { width: #px; height: #px; position: absolute; left: #px; }

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub