as I built the project using the react.js library, I used react Spring to give animation for age numbers while coming on the screen, using react spring was new to me, so I kind of found it hard at first, but it was a great experience.
The area that I'm not sure of is the responsiveness through different devices, I don't think it's working properly, and I wish someone could correct this for me.
Looks good. One note, you could use arbitrary values with tailwind like this: w-[80px] or rounded-br-[100px].
Keep it up 👍🏻
Hi Nadine
I have a few recommendations for your code:
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
I feel like I have a lot of css attributes being altered. I've done tutorials where they were able to do very similar layouts, but they have what seems to be 25% of the code in their css than I do. Do I just have a lot of redundant code? What could I do to clean it up a bit?
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.
How should I make the borders of column 1 and column 3 round?
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.
I'd like more guidance on
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.
practice vanilla js
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
Hello dear community! I just finished this challenge and I would really appreciate your feedback 🥰 Happy coding and keep it up 💪
Hey Dania
You got the error you mentioned in your script.js file because you imported it twice: the first time in the head and then in the end of the body.
I like that you make the ratings and "submit" - buttons. Some people here make those as divs, but since we click on them, they should be buttons. Good job.
And I like that you used transitions for hover states, so the changes are smooth and nice. ♥
Also, having buttons with class button isn't helpful for those who read your code, you might call the class rating or rating-button or something like this. I'm not even sure if you use this .button class anywhere. You style rating buttons via .buttons button.
UPD: Oh, you use .button in JS, so it's okay. Just might rename the class to something more readable.
You declared .finished class as just display: none and then you override this later in the same css file to display: flex. And you never use any of them, you set display property in JS via style.
Your .buttons class has cursor: pointer. What is the point of this if buttons usually have cursor as a pointer by default. With that setting cursor turns into a pointer even if I hover on an empty space between rating buttons.
Same think with cursor: pointer on submit button, I think you don't need it.
Also you forgot your debugging console.logs :)
Good job
Hey Moise
There are a few comments on your solution.
node_modules folder to git.Other than that looks good.
This was fun!
First time trying out Tailwind.css, Vercel, and GraphQL!
Also checkout the server-side application that runs on localhost..!
Your github repo has a wrong website link. It leads to interactive comments section demo.
You might want to make items clickable and toggle the completion status once user clicks on it. It's good for UX
On small resolutions filters section should go below the todo list. You made it as it should be on desktop.
Also need to remove blue outline on input focus. I believe it looks different on design (check active states image).
How can i improve it??
You make things responsive via media-queries: you instruct your browser like this: when screen width is greater than X, make the width (or anything else) of the component Y.
There's a problem with you solution. On wide screens rating buttons look like ovals, not like circles. To fix that you'd give .circleDiv class fixed width and height, i.e. 50px looks like your intended size but never changes on wider screens.
I didn't understand about "how to change bg color of the selected rating" question.
Other than that - you did a good job.
Thank you for checking my solution.
Here I used React for the very first time. I'd like to kindly ask you to review my code. I'd appreciate if you check any React component I made and tell me what I did good and wrong.
Cheers!
Whew, I just pushed v2 of the solution. At first I didn't read the challenge carefully, so I messed it up and implemented as I understood. Now I made it as it should be. Not pixel-perfect though. And the colors are different somehow, but I used the values from the task... How is that possible? What did I do wrong here?
What might be a more optimal way to setup media queries when adjusting to smaller or bigger screens? I ended up just writing 5 different media queries to adjust the width of the main content when the screen would get smaller, but I feel like there is a better way to do that rather than writing so many queries
Hey Spencer.
First of all, the live website has scrollbars what isn't nice UX. Looks it is because your .container class has height of 100vh and then you have frontend mentor links below it.
Other tiny problem is you didn't provide the solution URL in your README.md (should take us to this page)
Submit button is a div, but it should be <button> tag instead. This is what users expect to see.
Other than that everything looks alright.
Cheers!
