Skip to content
OverviewSolutions
36
Comments
232

Mojtaba Mosavi

@MojtabaMosaviSweden3,740 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!

I’m currently learning...

Js

Latest solutions

Latest comments

  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    Good job, I working on this one as well. Take a look at the following points:

    • In my opinion the more interactive a UI is the better and therefor as frontend dev you should use at every at you disposal where it makes sence for example for simple link a hover state suffices but somewhere else you might wanna spice things up with custom animation/transitions.

      1. the toggle button for the theme needs a hover state to communicate to the users it could be changed.

      2. the card representing each contry needs a hover state as well to let the user know there is more.

      3. The border contries displayed in the footer of when you click on contry

    • Take a look at the issu rapport generated and correct them.

    • The mode toggle button is not keybord accessible and has a too wide of a clickable area by which I mean if you click in the middle of header you can change the theme, the clickable area should be a small rectangle covering the toggle button.

    • The queries that don't mapp to a real country, it should display a "no result" message to let the user know it does not exist.

    Happy coding :=)

    Marked as helpful
  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    Hi Kaung!, Congrats on completing this, it's not a easy beast to sly. I think the the sound effects a positively supplemental to the interactivity, it's always fun and inspirational to see individuals mark up the interactivity (pun intended) and get creative.

    • Using ES6 module system you can easily split this into sperate chunks by functionality something like:
    game:
    modal.js
    rockPaperScissors.js
    rockPaperScissors-extended.js
    main.js

    • The close icon in the modal has a simple hover state where the bg color is changed to red.

    • Upon tabbin the game button excute the styles of the hover state, it would be benefiery to visual user if the aslo had some kind of visual marker like a ouline:

    game-button{

    &:hover,&:focus{
        outline: 1px solid color;
        outline-offset: 0.25rem; 

} 
}

    • A note about you implentation of the mode, using a unordered list has accessibility implication such as a screen reader would take much longer time to read all the five list item reather tha a simple heading one therefore the mode is semantically better descriebed be a <h1>.

    • The pluse animation is key visual, suggetively it should be amplified.

    Keep coding :=)

    Marked as helpful
  • Mojtaba Mosavi•3,740
    @MojtabaMosavi
    • Add a hover state to the social icons, a color or size change suffices.
    • The markup implenetation is a bit interesting, I think something the you missed is to ask youself where this would be used ? The answer is most like that is going to be a constituent of something bigger and it that case you might wanna resue it somewhere else. Here is an alternative markup
    <article class="article">
    <div class="article__content">
       <h3 class="article__heading"></h3>
      <p class="article__text"></p>
       <div class="article__profile">...<div>
    </div>
   <div class="article__img-wrapper">
      <img  class="article__img"/>
   </div>
</article>
```
Keep coding :=)
    Marked as helpful
  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    • It would've looked better with original background-color, totatly respect your choci (just a suggestion).

    • Add hover state to the soical icon, a minimal hover state would be a subtle change in size, something like

    .icon:hover{
    transform:scale(1.1)
}
    • "class="top-text"" would be better semantically as a h1 than p element since it explains the whole function of the UI.

    Keep coding :=)

    Marked as helpful
  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    Regarding you query:

    • Correct inutition (or maybe you read it somewhere!), css unit generally can be categoried as relative units and absolute unit. Pixel belongs to the letter category which are not so well suited for responsive behavior. Using relative units such rem or em gives are better choices, I would recomand using rem becausing em are a bit more diffcult to wrap you're head around since the are base depend on font-size.

    • For projects of this scope a proper section style will due but as you take on bigger projects something like 7-1 scss architecture is a good candidate for modularizing you styles. You can apply to css if you dont want to use scss or sass.

    Keep coding :=)

    Marked as helpful
  • Mojtaba Mosavi•3,740
    @MojtabaMosavi

    Regarding you query:

    I not sure if i understand you're question correctly, it would help a great deal if you describe the desired outcome that you're trying to accomplish.

    If you're mean not flex-items don't have eaqual width by "not correctly aligned", there are different ways of making that happen. The first item is taking more space that the two other because it's has more content.

    • By explicitly telling flex container how you want to distribute the space between flex item:
    .container{
        justify-content:center;
 }

.container > * {
     flex:1;
}
    • By giving each flex-item a max-width:
    .container{
justify-content:space-between;
 }

.container > * {
     max-width: value 
}

    Keep coding :=)

    Marked as helpful
View more comments