Skip to content
OverviewSolutions
8
Comments
7
Arpad Gabor Bondor [Gabriel, Red]
@ArpadGBondor

All comments

  • Iza•40
    @izafitSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    The uniqueness of this project lies in its simplicity yet engaging nature, allowing me to focus on managing state, persisting data with localStorage, and enhancing the user experience through CSS transitions and animations.

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

    The entire project was an enormous challenge. Keeping the game state (scores) consistent across page reloads. I used localStorage to save and retrieve the state. This way, the game could maintain the player's progress and scores even after a page reload.

    Enhancing the user experience with smooth transitions and animations. Solution: I used CSS transitions to animate the state changes, such as sliding the options off-screen and bringing in the fight scene. CSS animations were also applied to highlight the winner.

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

    I'd like help with ensuring the project works well on mobile devices.

    This is a solution to the Rock, Paper, Scissors

    1
    Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted 4 months ago

    Hi,

    The animation is soo fast, it gives me a headache. I think you should give it a bit longer transition duration. Also, the blue circle component is missing its bottom part.

    Wish you good luck with fixing it, and keep up the good work! :)

    Gabriel

    0
  • Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted 5 months ago

    Hi,

    I think it is a good start, but there are some obvious differences between your solution and the original design.

    Some examples:

    • The green circle behind the dice should be larger.
    • The corners of the component should be rounded more.
    • The title and the text should be bold.
    • There should be quote marks around the advice.

    I wish you good luck with the improvements, and keep up the good work! :)

    Marked as helpful
    0
  • Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted over 2 years ago

    Looks good. :)

    Maybe try to set "max-width" for your <main> element, so the advice won't spread all across the screen. Also maybe try to use media queries to set different design for mobile and desktop views.

    Marked as helpful
    1
  • Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted over 3 years ago

    1.: border-radius: 0 8px 8px 0; 2.: mix-blend-mode: multiply; opacity: 0.75;

    1
  • Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted over 3 years ago

    Thanks for reviewing my solution, I also checked yours. :)

    Nice use of relative units, but I think the one place you should not use them, is setting up media queries. Relative units are great when we don't hardcode the font-size of the root element to a fix value, and we let the browser to change font sizes, but we shouldn't switch between mobile and desktop view just because the root font-size changed.

    An other thing I noticed, there's an extra picture in the document showing that the button should change it's border+background color when you move the mouse over it. You can set it by adding a new css rule with ".cta:hover{}" selector. Use "cursor: pointer" to change the mouse here as well.

    0
  • Parth•75
    @ParthPatel76Submitted over 3 years ago

    Please review the code and design. I Would appreciate your feedback for the same. I have tried my best to make the design as close as possible to the given challenge.

    Thank-you!! Parth :)

    Designed a Stats-Card component

    1
    Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted over 3 years ago

    try setting "max-width: 1100px;" on the component on desktop view

    on the image, try using "object-fit: cover"

    0
  • Arpad Gabor Bondor [Gabriel, Red]•185
    @ArpadGBondorPosted over 3 years ago

    Set ".stat-list {flex-direction: column}" on mobile size

    0