Latest solutions
Interactive card implemented using Vue and Typescript
#typescript#vue#sass/scssSubmitted about 2 years agoMulti step form using React, Typescript and MUI Joy
#react#typescript#sass/scssSubmitted over 2 years ago
Latest comments
- @arey-devSubmitted about 2 years ago@katjadanilovaPosted about 2 years ago
Hey there! Yep, I can't see anything. You might want to try deploying it on Vercel - I have found it easier with react apps.
Marked as helpful0 - @nyrellclSubmitted about 2 years ago@katjadanilovaPosted about 2 years ago
Hi, Nyrell!
Well done! I liked it that you added an extra feature and your neat HTML structure :)
I think your implementation would benefit from adding a background color for the whole page, so that the notifications container stands out more. Additionally, you missed some hover states - bold texts should change color when hovered over.
When I implemented this project, I also made it more challenging by adding the ability to interact with each notification (or ´article´ in your case) - so that the user can read them one by one. I learned a lot from doing this, so you may want to give it a try too.
Hope it helps!
Marked as helpful0 - @czechoslovakia36Submitted about 2 years ago@katjadanilovaPosted about 2 years ago
Hi, Vivek!
I really liked some of your design choices; rolling dice in particular was nicely done!
I noticed that the HTML and Accessibility report had some complaints. This is because it is expected to have button texts and image descriptions, so that people who rely on screen readers can understand what is happening on the screen. To make it accessible for a screen reader, you could use a
div
instead of a button and addaria-label="Get another quote"
.Additionally, on hover, you could add a glowing effect behind the dice container, as it was offered in the task.
Hope it helps :)
0 - @rkritchatSubmitted about 2 years ago@katjadanilovaPosted about 2 years ago
Hey there!
That's a great start! Your design implementation looks good. There is a minor issue in mobile view (the Kimberley Smith block is misaligned with the text), and some hover states are not implemented as specified in the task.
You could also add functionality, as the task requires. The text "Mark all as read" could be a button that changes the notification state, and clicking on each notification could also change its state. The number of unread notifications should also be updated accordingly.
I hope that helps :)
Marked as helpful0 - @SebastianGula1Submitted about 2 years ago@katjadanilovaPosted about 2 years ago
Hey, Sebastian!
Congratulations on completing your project!
I suggest removing the container height as it causes issues with longer quotes; gaps between elements can disappear or elements can be superimposed on each other.
You could also consider adding a loading element to your app, as the API has a noticeable loading time. Of course, this wasn't part of the initial task :).
Marked as helpful1 - @shavindaLSubmitted about 2 years ago@katjadanilovaPosted about 2 years ago
Hey there!
The design looks good and has been implemented according to the initial description - well done!
I noticed that your design isn't mobile-friendly when I tested it with Google Developer Tools. It has no margins and the attribution is too low.
1