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

Jhones

@jownsuPhilippines920 points

Frontend developer with a creative touch, specializing in turning design concepts into pixel-perfect clickable prototypes.

Latest solutions

  • Personal Finance App with Next and Typescript

    #next#shadcn#tailwind-css#typescript#zustand

    Jhones•920
    Submitted 5 months ago

    1 comment
  • Link sharing app using Next JS, Typescript, Tailwind and Radix UI

    #next#shadcn#tailwind-css#typescript

    Jhones•920
    Submitted 11 months ago

    0 comments
  • Responsive e-commerce product page

    #accessibility

    Jhones•920
    Submitted about 1 year ago

    1 comment
  • aaa


    Jhones•920
    Submitted about 1 year ago

    1 comment
  • aa

    #accessibility

    Jhones•920
    Submitted about 1 year ago

    1 comment
  • zzz

    #accessibility

    Jhones•920
    Submitted about 1 year ago

    1 comment
View more solutions

Latest comments

  • Sebastian Jakubowski•470
    @SebastianJakubowski95
    Submitted about 2 years ago

    E-commerce product page

    #accessibility#animation#react#redux-toolkit#redux
    1
    Jhones•920
    @jownsu
    Posted about 1 year ago

    nice

  • tortaruga•790
    @tortaruga
    Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    I'm proud I didn't toss the laptop or myself out the window, next time i'd go on a pilgrimage to compostela before doing the challenge to ask for the miracle of understanding grids

    What challenges did you encounter, and how did you overcome them?

    The layout just kept doing whatever it wanted without my consent. In the end it didn't turn out too bad, but I wouldn't exactly say I overcame anything, since the content is still not aligned properly in the grid. I just gave up because I wanted to preserve what little sanity I have left. Also I had one hell of a hard time making that menu thing work in the mobile version, but my perseverance and refusal to bow to the whims of a dialog tag lead me to victory. Come through!

    What specific areas of your project would you like help with?

    honestly i'm a mess at everything so any help is appreciated

    news homepage

    1
    Jhones•920
    @jownsu
    Posted about 1 year ago

    nice

  • P
    Boris•4,150
    @makogeboris
    Submitted about 1 year ago

    Contact form

    #accessibility#bem
    2
    Jhones•920
    @jownsu
    Posted about 1 year ago

    nice

  • KrishnaPoddar1•400
    @KrishnaPoddar1
    Submitted over 1 year ago
    What specific areas of your project would you like help with?

    The image and the card have been made relative and absolute but when you zoom in or out the card position keeps changing. Is there a better way to change it so that it looks good.

    Any Advice or suggestions are welcomed

    FAQ Card using HTML,CSS,Javascript

    #accessibility#semantic-ui
    1
    Jhones•920
    @jownsu
    Posted about 1 year ago

    nice

  • KrishnaPoddar1•400
    @KrishnaPoddar1
    Submitted over 1 year ago
    What specific areas of your project would you like help with?

    Any ideas/suggestions would be welcomed

    Reactive Rating Component using HTML,CSS and JavaScript

    #accessibility#semantic-ui
    1
    Jhones•920
    @jownsu
    Posted about 1 year ago

    nice

  • Shiloh George•40
    @ShilohGeorge12
    Submitted almost 2 years ago

    Responsive Mobile and Desktop Layout Using Tailwindcss

    #react#tailwind-css#typescript#react-router
    1
    Jhones•920
    @jownsu
    Posted almost 2 years ago

    Hello there 👋. Good job on completing the challenge !

    Your solution looks great, and you've done a fantastic job overall! However, I have other small suggestions to make it even better:

    Instead of hardcoding the text for the winner. You can create an objects with rules on it and another one for the result.

    const RESULT = {
        "tie": "Tie Game",
        "win": "You win",
        "lose": "House win"
    };
    
    const RULES = {
        "scissors"  : "paper",
        "paper"     : "rock",
        "rock"      : "scissors"
    };
    
    const [winner, setWinner] = useState(null);
    

    Then you can make a function like this for computing the winner.

    const calculateResult = (computerPicked) => {
        if(userPicked === computerPicked){
            setWinner("tie");
        }
        else if(RULES[userPicked] === computerPicked){
            setWinner("win");
            onWinCallback();
        }
        else{
            setWinner("lose");
            onLoseCallback();
        }
    }
    

    Then you can render the result text like this.

    return (
        <div id="winner_text">RESULT[winner]</div>
    )
    

    I hope you find it useful! 😄

    Happy coding!

View more comments
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