Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
5
Comments
5

Jesse Good

@jessegoodJapan120 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

  • Interactive comments section solution

    #solid-js

    Jesse Good•120
    Submitted over 2 years ago

    0 comments
  • Interactive card details form

    #accessibility

    Jesse Good•120
    Submitted almost 3 years ago

    1 comment
  • Interactive rating component

    #accessibility

    Jesse Good•120
    Submitted almost 3 years ago

    2 comments
  • Product preview card solution

    #accessibility

    Jesse Good•120
    Submitted almost 3 years ago

    2 comments
  • QR code component first submission

    #accessibility

    Jesse Good•120
    Submitted almost 3 years ago

    0 comments

Latest comments

  • Joatan Carlos•110
    @Joatancarlos
    Submitted over 2 years ago

    Interactive card using Sass

    #sass/scss
    1
    Jesse Good•120
    @jessegood
    Posted over 2 years ago

    Nice solution!

    Here are some tips to improve your code.

    1. To improve validation: It seems you are performing validation on the keyup event. However, the form can still be submitted even if the form is not filled out. I would suggest listening to the submit event, perform validation and only allow submitting the form when there are no errors.

    2. I think learning the built in JavaScript Validation API would be good. For example, you can set the required attribute to input forms and then just check input.validity.valueMissing to see if the field is blank.

    3. Putting numbers into groups of 4: Here is the function I use. You could listen to the input event on your input field and then format the input using the function below.

    function formatCreditCardNumber(num) {
      num = num.split(" ").join("");
      let arr = num.split("");
      let formattedNum = [];
      if (arr.length < 4) return num;
    
      for (let i = 0; i < arr.length; i++) {
        if (i !== 0 && i % 4 === 0) {
          formattedNum.push(" ");
        }
    
        formattedNum.push(arr[i]);
      }
    
      return formattedNum.join("");
    }
    

    For improving your SASS, I highly recommend looking into nesting to make your CSS more compact and readable: Here is a tiny example using your code. However,

    .container {
      .aside {
        width: 100%;
        height: 40vh;
        background-repeat: no-repeat;
        background-size: cover;
        
        .front-card {
            position: absolute;
            top: 70%;
            left: 10%;
            z-index: 1;
        }
      }
    }
    

    The above compiles to:

    .container .aside {
      width: 100%;
      height: 40vh;
      background-repeat: no-repeat;
      background-size: cover;
    }
    .container .aside .front-card {
      position: absolute;
      top: 70%;
      left: 10%;
      z-index: 1;
    }
    

    Also, to space our your numbers, use font-variant-numeric: tabular-nums;!

  • Kaan Karameşe•110
    @KaanKaramese
    Submitted almost 3 years ago

    Responsive interactive card details form

    #accessibility
    1
    Jesse Good•120
    @jessegood
    Posted almost 3 years ago

    Hi Kaan

    Nice solution! Here is some feedback, I hope it helps:

    1. It appears you did all the validation by yourself, but I would highly recommend looking into the validation API built-in to browsers. Basically let the browser do the checking for you! For example, to check for empty input, you can do something like the following:

      • Add the required attribute to your input like this: <input required ... >
      • In Javascript, you can check the input like this:
      var validity = input.validity;
      if (validity.valueMissing) // Do something
      
      • I recommend reading this article about it. Let me know if you have any questions.
    2. Concerning responsiveness. I see a media query for max-width: 372px and then the next one is min-width: 500px so anything in between that is not accounted for. As a quick test, try resizing your browser and see how the layout changes. Also, I would recommend setting a min-width on the cards so they do not become too small.

    3. Try setting the card number to all 1s like this: 1111 1111 1111 1111. You will see that the width is off. To fix this set the following css property font-variant-numeric: tabular-nums;.

    Marked as helpful
  • P
    arey•350
    @arey-dev
    Submitted almost 3 years ago

    Interactive Rating Component Built with JavaScript.

    1
    Jesse Good•120
    @jessegood
    Posted almost 3 years ago

    Hi arey

    I just submitted a solution for the same problem. Here is some feedback I hope it helps!

    1. The <div> element is a block element and is not allowed inside <label> elements. I assume you meant to use the numbers as labels? In that case you could just remove the <div> from them and they would become the label.

    2. You had two media queries, one for 400px and 360px. I wasn't sure why you split them up as they seem very close.

    3. I see that you built the Thank You part in JavaScript. One easier way might be to use display: none and then just set it to display when you want to show it (and set the other part to display: none).

    4. Instead of adding event listeners on each element you want. Another idea would be to just add an event listener on the document and then just only react to click events when a user clicks a radio-input or the button. You could also remove type="submit" from your button so it does not act like a submit button.

    Also, doesn't affect your case, but as a JavaScript best practice, always use the === (the triple equals).

    Marked as helpful
  • Tanya•20
    @TanyaJunior
    Submitted almost 3 years ago

    1st attempt QR code component

    1
    Jesse Good•120
    @jessegood
    Posted almost 3 years ago

    Hi Tanya

    Welcome to frontend mentor. Here is some feedback, hopefully it will come in handy.

    1. Wrapping everything in a <main> element helps for accessibility (as they know where the main to go for the main portion of the document). Also, semantically also this is preferred.
    2. Did you look at the style-guide.md file? It provides information on fonts and colors that should be used.
    3. The <img> is missing an alt attribute. Also, type is not a valid attribute for this element.
    4. Try minimizing the use of <div>. For example you could get away with the following structure:
    <main> <img> <h1> <p>

    Also, In your CSS, you set the font-family, etc. multiple times. CSS has a notion of "inheritance". If you look at other examples, the font is often times set only once in the body as this is inherited by all other elements.

    Hopefully that helps.

  • M.SADHASIVAM•10
    @sadhap
    Submitted almost 3 years ago

    QR-code component by using HTML & CSS

    3
    Jesse Good•120
    @jessegood
    Posted almost 3 years ago

    Here are a few points I saw. Hopefully this helps.

    (1) Looks like you mispelled card-img-containere which is causing some of the styles not to work.

    (2) I would recommend not wrapping everything in a div and it will cut down on how much styling you have to use.

    (3) The other comment already addressed it, but using a main landmark for accessibility is also a plus.

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