Skip to content
OverviewSolutions
7
Comments
13

Andrew

@andreich1980Russia380 points

Full-stack Web Developer

I’m currently learning...

React, Vue3

Latest solutions

View more solutions

Latest comments

  • Andrew•380
    @andreich1980

    Looks good. One note, you could use arbitrary values with tailwind like this: w-[80px] or rounded-br-[100px]. Keep it up 👍🏻

    Marked as helpful
  • Andrew•380
    @andreich1980

    Hi Nadine

    I have a few recommendations for your code:

    • game.js You don't need else in there since every if returns something. And there's a trick to check who wins: you can add an array of choices that win for each choice or have a separate object of winners: { [CHOISES.ROCK]: [CHOICES.PAPER], <the choice>: [<choices that are defeated by the choice>], } The you decide the winner using includes.

    In the computer-turn.jsx you have a nested ternary operator for message. It looks weird and very hard to understand.

    Other than that everything looks good and is very close to the design! Good job

    Marked as helpful
  • Andrew•380
    @andreich1980

    Hi there.

    Your live website not live at all, it's dead :(

    And about your code: it looks alright to me.

    But the submit button should be a button, not just span. And same for ratings: they should be either buttons (since user can click on it) or labels for hidden checkboxes.

    And I think you missed media queries.

    Cheers.

    Marked as helpful
  • Andrew•380
    @andreich1980

    Hi there.

    You can make border radius using border-radius CSS property https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

    Or, since you're using Tailwind CSS, use rounded-l-md for make left corners rounded, and rounded-r-md to make right corners rounded.

    And you should put your sources to github as well, not just compiled result, this is the point of github, so anyone could clone your project, make changes and create a pull request.

    Cheers.

    Marked as helpful
  • Andrew•380
    @andreich1980

    Hey Ephraim

    Since you're using Tailwind CSS you might want to take a look at the Headless UI library. It has drop-down and many other cool component. But it is only for React or Vue. But would save you so many time!

    Otherwise you could use Alpine JS (it's a lightweight js framework). It's extremely useful for cases like yours.

    Other than that seems you haven't implemented any active states (on hover), focus states for links and buttons also look off of the design.

    You shouldn't mix hidden and visible classes - these are different: hidden sets display to none and visible sets visibility to visible. If you want to hide something on mobile then show on wider screens - user hidden md:block or ... md:flex or ... md:grid whatever display type you need.

    In the #hero section you mix up grid and flex, I think you'd better use one thing at a time.

    Marked as helpful
  • Andrew•380
    @andreich1980

    Hey kmsan

    Good job with vanilla JS. Do you want to practice vanilla specifically? Or you just don't know any frameworks that would help you show/hide elements?

    I like how you draw the buttons (with border, box-shadow and before element), somehow I forgot about that and did nested blocks instead.

    By the way, there's a bug. When you open the rules modal and hit Escape key - the modal at the bottom of the page ;p

View more comments