@dhananjaysahu79Submitted almost 3 years ago
Latest solutions
Todo App | React, Redux, Typescript, styled-components, vite
#react#redux#styled-components#typescript#viteSubmitted almost 3 years agoTime Tracking Dashboard | Svelte, TS, Sass
#sass/scss#svelte#typescript#vite#jestSubmitted almost 3 years ago
Latest comments
- @syedalimansoorPosted almost 3 years ago
Hello,
Your solution looks great! A few points I would add:
- Try adding transitions and animations to your sites, to give a more professional feel
- It would be nice if the app had the style
min-height: 100vh. This ensures that there is no whitespace at the bottom for taller screens - You can display the close icon on hover by adding
onMouseEnterandonMouseLeaveevents to the todo-input-wrapper and then styling the close-icon based on those events - Also break your app into smaller components and write each component in a separate file. There is no benefit to using React if you are gonna write your entire app inside
App.js
You may have a look at my solution to get an idea of what I mean. Cheers!
0 - @EdenExperimentsSubmitted almost 3 years ago@syedalimansoorPosted almost 3 years ago
Hello Macaulay!
You have a great solution here, and you made it responsive too, which is awesome.
A few suggestions from my side would be to:
- add transitions to your styles, so that when you hover over something, its color changes smoothly instead of switching instantly; this will make your apps look more professional, just don't overdo it
- replace the "last daily/last weekly/last monthly" with "Yesterday/Last week/Last month", which makes more grammatical sense and is what the challenge asked
You may view my solution to see what I mean
Other than that, wonderful job!
Marked as helpful0 - @titocsSubmitted about 3 years ago@syedalimansoorPosted about 3 years ago
Hello @titocs!
Your solution looks great and works well. One thing I would recommend you to work on is animations and microinteractions. They can really improve the quality of your website. If you wish, you can check out my solution to this problem and tinker with the interactable elements to see what I mean!
0 - @csimomelianSubmitted almost 4 years ago@syedalimansoorPosted almost 4 years ago
Nice work dude! This is so good. Also matches the design accurately. +1
0 - @PedroRezzSubmitted almost 4 years ago@syedalimansoorPosted almost 4 years ago
Hi there Pedro!
Your solution is really great, love that animation on load.
A tip from me would be to include padding on your wrapper element, so that the card doesn't touch the browser's edges on tablet and mobile sizes.
1 - @shrvnashSubmitted almost 4 years ago@syedalimansoorPosted almost 4 years ago
Hello,
You can colorize the image by adding an element with a purple background-color on top of that and then setting the element's
mix-blend-mode: multiply0
