Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions30Comments10

All comments

  • Raymart Pamplona• 16,140

    @pikapikamart

    Submitted

    Hello. This is my 25th challenge here at fem and my first challenge into using testing!!

    This challenge was fun to do and it is my first time into coding a tic tac toe game as well and I hope I did fine on this one. For the logic of the game, I used the minimax algorithm to get the most optimal move for the AI and since it uses the optimal move, I can't even win :>

    As I mentioned, it is my first time using jest or doing testing in general using javascript. For the implementation of the backtrack algorithm, I used a test first approach which I find really nice and i'll be adapting this one for further challenges and I kind of relate now to others saying seeing green light on their test soothes :>

    But for the most component in next, I haven't made the same test approach because I don't know how to test them initially and don't know when I should test a component so this is not a consistent one. But hey, I test first again on the new user experience (NUX) and for the grid navigations for keyboard keys!

    For the grid itself, initially, those were created using button inside in their own div role="gridcell" inside the role="grid", but at the end, I changed them into just using the div role="gridcell and completely removing the button elements. The reason for this is that I find it confusing as a user when placing a move mark on the grid, because a button have 2 states right, a pressed/toggled and not pressed/toggled, I don't want the user to think that they can undo a move after placing. Adding disabled or aria-pressed on it would be much confusing and mess up the grid navigations. That is why I just use the div role="gridcell" itself as the placement for each move mark with their own sr-only text.

    Overall, i'm happy on the outcome but I need to learn more about testing and using it! Another one, maybe adding some threshold for the scores to whether make cpu more smart would be nice, you know, so that we could win:>>

    Thanks for checking this one out!

    Update.

    I added an online mode as well so that everyone could play against different players. I use socket.io on this one. Thank you again!

    Tic Tac Toe | Next.js

    #framer-motion#jest#next#styled-components#react-testing-library

    3

    Volodymyr Balashov• 510

    @volod-one

    Posted

    PS, You will never win.. xD

    0
  • Volodymyr Balashov• 510

    @volod-one

    Submitted

    Howdy community.

    It been a while since my last solution but here is my new one. This project is pretty small but really good to get into how to use TypeScript with React. Maybe it is not perfect but this is my solution and if you don't like something just let's disscuss about it.

    Please, leave your feedback and let me know what I could improve here. And see you next time!

    Advice generator app with React/TypeScript/TailwindCSS

    #axios#react#typescript#tailwind-css

    1

    Volodymyr Balashov• 510

    @volod-one

    Posted

    By the way. I realize that my app have some problems with fething data in Firefox browser. May I have any clue what is going on there and why I cannot get any new advice after smash the button?

    0
  • Kate Davies• 50

    @KatieD11

    Submitted

    I would like to make the list items draggable so that the order of items can be changed by a user -- any suggestions on good React libraries to use for this and tips for implementing this? :)

    To Do app, React implementation

    #react

    1

    Volodymyr Balashov• 510

    @volod-one

    Posted

    Hey! Your solution looks good.

    Pay attention to tablet size layout. Your content is moving too far to the top.

    Good luck on your journey!

    Marked as helpful

    0
  • jackzorola• 40

    @jackzorola10

    Submitted

    I'm happy with the results, but would be honored to receive your opinion.

    I met a few problems along the way, and have some doubts to know if that was ok.

    • I was unable to place the <footer> at the very bottom of the screen it kept going up whenever the view got more mobile, to the point of overlapping with the main elements. I did that because when I left it untouched some background appeared on it (not sure from where and made a horrible white line at the bottom of the elements, rendering my shadow-box useless).

    • I added an <a> inside the <button> to place the link to the login there, is that alright? Should it be an href inside the <button>?

    • Please (is possible) let me know if the CSS is easy to read as this is the first time I share a project with someone and I really don't know if I should be doing something else to make it easier for people to navigate my docs.

    Thanks in advance!!

    Responsive landing page using css in (what I thought) was ok

    4

    Volodymyr Balashov• 510

    @volod-one

    Posted

    Hey! Layout looks good.

    Here some things better to fix:

    • In your body tag you use "grid-column" and "grid-row". It is "grit-template-columns". For rows it is not necessary.
    • Also you can stop using "grid-template-areas". "grit-template-columns" will fix layout for you and then you can use "grid-column: span 2" for your wide element.
    • Try new "margin-inline: auto" for body tag instead "margin-left" and "margin-right"

    Good luck on your journey!

    Marked as helpful

    1
  • Volodymyr Balashov• 510

    @volod-one

    Posted

    Hey! Layout looks good. Structure of your code is pretty clean.

    Some things which could improve your solution a little bit.

    • Seems like you use BEM methodology. In this case use double underscore(__) in class names not one underscore(_). One underscore reserved for modifiers.
    • Not a really good approach to style your ids. Again, you use BEM here, instead ids you could use something like class="card card--first" class="card card--second" (global standard) or class="card card_first" class="card card_second" (Yandex standard).

    Good luck on your journey!

    Marked as helpful

    0
  • Volodymyr Balashov• 510

    @volod-one

    Posted

    Hey!

    First, what I could say. Your card centering approach is not very good. Instead of using margins with values better to wrap your card with a container and use flex or grid and center your card with it.

    Next you have a div "change" with a link inside. It could be better if you use margin-left: auto for your div than for your link.

    Then, your blue button looks unhappy on small devices. Try to unwrap your button from the div tag and replace your horizontal paddings to width:100%.

    Also your layout looks not really good on mobile devices. Don't let your card stick to the horizontal borders of the screen. Just put some paddings on the container component.

    Good luck!

    Marked as helpful

    0
  • Qstar12• 70

    @Qstar12

    Submitted

    Hi!

    let feedback = ("Say whatever you think of my work") if (feedback > 0) { console.log("Keep practicing!") }

    ;0

    Leave any feedback. I'm looking to grow and improve. Thanks!

    nft-preview

    #sass/scss

    2

    Volodymyr Balashov• 510

    @volod-one

    Posted

    Hey!

    As for the layout it looks not bad. But I have a strange feeling about your ETH and days elements. It seems not being centered comparable to icons.

    Also, could you please explain to me why you decided to use double low dash for class names?

    And it could be a good idea to think about responsiveness at small devices like Galaxy Fold (280px).

    Btw, in your feedback request. I don't think you want to use let for functions, better to use const. Just keep it in mind.

    Good luck!

    0
  • Volodymyr Balashov• 510

    @volod-one

    Posted

    Hey there! Your component looks good. There is one thing what I want to mention. Basically when you are trying to put your block tag into your inline tag it is seems like bad practice and compiler may complain about it. In your case you have a link inside "card-image" which contains a div tag. Maybe it would be better to display your svg with using css instead of html. Good luck mate!

    Marked as helpful

    0
  • Volodymyr Balashov• 510

    @volod-one

    Posted

    I like your fancy code. Simple and effective.

    0
  • Volodymyr Balashov• 510

    @volod-one

    Posted

    For images display: block can be really helpful

    0