@syedalimansoor
Todo App | React, Redux, Typescript, styled-components, vite
#react#redux#styled-components#typescript#vite
Nika
@nikavolkAll comments
- @nikavolk
Hello!
Checked out your solution and here's a few things to note:
- love that you used Redux, I have to learn that still and it's difficult! 😅
- love the animations!
- when viewing on desktop, the filter "All, Active, Completed" should be within the items list (sandwiched between Items left and Clear completed)
- input and each todo don't show special characters in full height when capitalized (like ČŽŠ)
Great job! Gave me a lot of new ideas for CSS animations 😁
Marked as helpful - @ugochukwuuu@nikavolk
Hello!
#1 If you would like to set a height of any element to the full view height, you can do it by assigning height: 100vh. For a quick fix to your card positioning, what I did was replace the 3em max-height with height:100vh, and added to body {} display: flex; That should center the card.
#3 I used position: absolute and the transform attribute to position the element in a similar project.
No idea on the second point, maybe someone else could help with that 😊
- @victorsonet@nikavolk
Hi Viktor!
Beautifully done! The CSS is readable, the class names are understandable, great work!
The only tiny, minor bug that I found was the background colour of the "main" div. From what I can see in the design brief, that background should be white while yours is a pale blue.
Other than that, awesome work 😊
Marked as helpful - @jgorelik23@nikavolk
Hello Justin!
I had a look through your code and there doesn't seem to be anything wrong on the JS side.
However, in your HTML file, I think you would need to use <input type="radio"> for each choice and group them up, instead of using buttons for each rating. I believe doing it that way the chosen rating will stay selected upon clicking the Submit button.
Marked as helpful - @MatthijsvanderPlas@nikavolk
Hello Matthijs!
Technically, the component works flawlessly and had no issues with it. Your JS code is very optimized and elegant, I really like it!
Visually, there's only a few (very) minor things I've noticed:
- the margins between elements are a touch too small
- the rating buttons background colour is a bit off; what I did was reduce the opacity to get them look like in the brief
- the ratings buttons aren't aligned to the edges of the innermost borders
Other than those very small details, I love your solution. Great job!
Marked as helpful - @mcallec1@nikavolk
Hello Marc!
I've completed this project with React as well, so here's my input:
Visually: looks great! I can't find any faults at all, really.
Technically:
- one minor bug in the ThankYouInner component on line 16 (rating {variable} out of 5).
- choosing a rating and clicking submit works on every rating except for the first, might be just my device?
- just my very personal opinion: there seems to be a lot of code for a rather simple component
I loved your folder and file structure and will definitely work on making mine in a similar fashion (lots of small component files for each part of the app). As for SASS styles and files, I think they need to be imported into every child but honestly, I need to look into this myself.
Great job!
- @elisa-charrier@nikavolk
Hello Elisa!
I've not done this challenge yet, however I figured I could still test it out!
Visually: I think the design is spot-on, looks great! Two (minor) things that I would perhaps implement myself when doing this challenge:
- disabling the Reset button when the input fields are empty
- when entering or selecting a value into the calculator, that same chosen or entered value is displayed. I think it would be better not to display anything when a correct entry is input.
Technically: It might just be on my device, but the reset button doesn't work for me at all (doesn't clear the fields).
Otherwise amazing job for your first project!
Marked as helpful - @DekiDex@nikavolk
I think it looks great!
The only thing I would suggest implementing, is a way to prevent the user being able to submit without choosing a rating 😊 I did it by disabling the submit button, but you could throw an error message instead.
Marked as helpful
