Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
21
Comments
7
Jackson Whiting
@jacksonwhiting

All comments

  • Jorge Sánchez•420
    @Jorge-sanchez09
    Submitted almost 2 years ago

    Interactive pricing component

    #bem
    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted over 1 year ago

    Nice work. I liked how you used a background gradient to color the slider. I tried that at first but abandoned it because I couldn't figure out how to resize the thumb without making the track a bigger size. Looks like making it position:relative did the trick for you unless I missed something else?

    I think that's a simpler way to solve it than what I did (which was to use a box shadow and clip-path).

  • Bekar Shekiladze•550
    @beqarion
    Submitted almost 2 years ago

    GitHub user search app [TailwindCSS, Vanila JS, AnimeJS library]

    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted almost 2 years ago

    Nice work on this. I learned quite a bit by looking at your code. I like how you used restructuring to pull out variables from the API data.

    How do you like writing HTML in Javascript files using inner.html. Using querySelector and updating textContent on each node is getting old for me. I'm looking at possibly implementing a lightweight templating language while I keep working with vanilla javascript (and no framework) just to make things a bit quicker and easier updating DOM nodes.

    Thoguhts?

  • Omar Mohy•670
    @omarmohy98
    Submitted almost 2 years ago

    Advice-generator-app

    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted almost 2 years ago

    Nice work on the app.

    My code looks very similar. I had an issue with Firefox where the button (icon) listener doesn't seem to work. Firefox does not generate new data and display it. I didn't have issues with any other browser.

    I tried your app in Firefox and you have the same issue. I'm researching it and will let you know if I find out why. Please let me know if you find a solution.

    Marked as helpful
  • Bryan Li•3,530
    @Zy8712
    Submitted almost 2 years ago

    Expenses Chart Component

    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted almost 2 years ago

    Hi,

    Nice job on the project. I'm not sure how the chart library works that you used, but I struggled with centering the tooltip and not having it change the width of the bars. In the example, the tooltip is wider than the individual bars so I didn't want the tooltip to cause the bar to expand

    Because of this I positioned the tooltip with position: absolute and use a negative top value to put it above the bar itself.

    I hope that helps.

    Jackson

  • Adrian Pacholak•350
    @Adiiks
    Submitted almost 2 years ago

    interactive-card-details-form

    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted almost 2 years ago

    I just took a look at your code. Nice job with the validation.

    It looks like you used javascript to generate all your error messages and error message classes.

    I like to minimize the amount of javascript I have to write and load because it can be expensive to a website.

    Did you consider adding the messages in the HTML and then writing a function to hide or display the message based on validation. Same with the CSS classes.

    Here's my solution, let me know what you think...

    https://jw-credit-card-details-form.netlify.app/

  • Antonio•160
    @AntonioUngolo
    Submitted about 2 years ago

    BMI Calculator

    #tailwind-css
    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted about 2 years ago

    Nice work with this project. I just finished it as well and used Tailwind CSS. It looks like you're using the CDN to install Tailwind, have you tried using the CLI to build it into your project?

    I like how you used body:after for the gradient. I used a grid for the entire hero section and it worked out well, though I had to add "display:contents" for the mobile version in order to get the gradient throughout the hero on mobile and split the gradient and white column on desktop. That was the challenge for me with the layout.

    Also - looks like you're still displaying KG in your ideal weight when selecting Imperial so you may want to look at that. Take a look at my code if you'd like.

    • Jackson
  • auriga•210
    @auriga2124
    Submitted about 2 years ago

    Art Gallery Website Using CSS Grid and Nested Grid

    1
    Jackson Whiting•360
    @jacksonwhiting
    Posted about 2 years ago

    Nice job on this. I like how you used nested grid to solve the problem. I'll incorporate that in the future.

    Check out what I did to make the two-toned logo responsive when you expand and shrink the screen (the black portion always stays in the second (picture) section of the hero). Basically, I took the two logos and put them on top of each other, but the black logo only extends to the end of the first section and it has a higher z-index than the white logo. I used an image mask, but that's not required.

    https://jwhiting-art-gallery-home-page.netlify.app/

    I positioned the logo and the the text / button absolutely, but in the future, I'll use your technique of a nested grid. I like that much better. Hope it helps!

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