Skip to content
OverviewSolutions
44
Comments
31
P
Dan Marius
@danmlarsen

All comments

  • Dan Marius•945
    @danmlarsenPosted 4 days ago

    Hello, Marc! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the website works as expected 👏

    0
  • Dan Marius•945
    @danmlarsenPosted 11 days ago

    Hello, ferlaxi! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks fantastic, and I love the smooth animations! 👏

    0
  • Dan Marius•945
    @danmlarsenPosted 19 days ago

    Hello, WilliamLop! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the app works as expected 👏

    0
  • Dan Marius•945
    @danmlarsenPosted 26 days ago

    Hello, Marc! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the website works as expected 👏

    Marked as helpful
    0
  • Gakii•560
    @G-GakiiSubmitted 2 months ago
    What specific areas of your project would you like help with?
    • When I deploy the website, it fails in production due to the “Plus Jakarta Sans”, sans-serif font family. I don’t understand why this is happening,. I’ve changed the font to Arial, Helvetica, sans-serif.

    mortgage calculator -Angular

    1
    Dan Marius•945
    @danmlarsenPosted about 1 month ago

    Hello, Gakii! 👋

    Congratulations on finishing another challenge! Good attempt. App is mostly working as expected. I've made a few observations that might interest you:

    • It would be a good idea to add cursor: pointer on buttons, labels & radio elements for accessibility
    • The arrows on the number input fields looks out of place so I would recommend either removing them using css: https://www.w3schools.com/howto/howto_css_hide_arrow_number.asp or putting inputmode="numeric" and type="text" on the input element

    Happy coding. 💻

    Dan

    0
  • Azzy dvyastia kesuma•1,345
    @azzykesumaSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?
    • unlike in previous challenge, i use tailwind responsive class like lg:... instead of using custom hooks then appending the class using string interpolation, resulting in cleaner code
    What specific areas of your project would you like help with?

    any feedback is greatly appreciated

    bookmark landing page challenge

    1
    Dan Marius•945
    @danmlarsenPosted about 1 month ago

    Hello, azzykesuma! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the app works as expected 👏

    0
  • Dan Marius•945
    @danmlarsenPosted about 1 month ago

    Hello, Koen! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the app works as expected 👏

    0
  • Michael•180
    @michael-schlueterSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm getting more and more comfortable building responsive layouts. In particular with Grid. I used to nearly exclusively work with Flexbox to lay things out because I was somewhat overwhelmed with Grid. But I'm finding myself using Grid more often.

    I used shadcn/ui to implement the modal for order confirmation. It was quite handy to work with because you have a lot of freedom to adjust that component to your needs. It took some getting used to, though. But in the end I kind of regretted using it and not building that component completely on my own. I probably would've learnt a bit more which is why we're doing these projects in the first place. In general I still have a bit of trouble deciding when to go with existing solutions/components and when to reinvent the wheel so to speak.

    What challenges did you encounter, and how did you overcome them?

    I learnt the hard way to push my progress to GitHub more often because my laptop broke down in the middle of this project and quite a lot of work was lost with it. That probably won't happen to me again.

    I also had a bit of trouble setting up Vitest & React Testing Library, configuring things etc. Sometimes I tend to get impatient instead of taking a step back and reading the documentation fully to grasp how things are working together. I wanted to use some ESlint plugins for Vitest and React Testing Library but because of recent updates I didn't get them to work properly.

    I'm still not that experienced in testing, so I had some difficulties figuring out what elements to query and how to validate their (non-)existence. In particular. I learnt to use the within() method to limit the scope of the query which helped a great deal (e.g. querying only the content of a specific list). I still have to learn a lot and I'll definitely check out the "Introduction to front-end testing" career path after this one. I also wasn't sure if I should test for keyboard-navigation as well because that would mean quite a lot of duplication of tests and I primarily wanted to test that the interactions are working as expected.

    What specific areas of your project would you like help with?

    I'm not really satisfied with the animation-side of things in this project. There are some transitions in there (e.g. for borders, colors etc.) but also some are missing. The different buttons for adding an item to the cart and selecting the quantity of an item have no transition when they are appearing / disappearing. I probably could've added an animation library to smooth things out but I thought it would be somewhat of an overkill for this project. But I definitely have to refine my skills in that department.

    Also I didn't get to auto-focus certain elements for keyboard-navigation. I got it to work when the user adds an element to the cart, so that the focus is automatically on one of the buttons to adjust the quantity. But it doesn't work the other way around. When a user decreases the quantity to 0 using the 'Enter' key, the "add-to-cart" button is being rendered but not automatically in the focus. Instead the user has to press "tab" to focus the button again. I'm also not sure if its good practice to use auto-focus in these circumstances of if keyboard-users are expecting to press "tab" regardless.

    Responsive Product List with Cart

    1
    Dan Marius•945
    @danmlarsenPosted about 2 months ago

    Hello, Michael! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the app works as expected 👏

    Marked as helpful
    0
  • Dan Marius•945
    @danmlarsenPosted about 2 months ago

    Hello there. Good job on completing the challenge! 👏

    I've made a few observations that might interest you:

    • The mobile view looks very nice, and scales up to small desktop quite well. But when reaching higher resolutions (>768px) it seems to break somewhat.
    • One relatively simple fix would be to use responsive classes such as max-w- and w-full instead of w-1/2 etc.
    • Remember to do the same for height as there seems to be some overflow. Most likely because the component is forced to 50% height of the parent element.

    Happy coding. 💻

    Dan

    Marked as helpful
    0
  • Dan Marius•945
    @danmlarsenPosted about 2 months ago

    Hello, AdamullaOsas! 👋

    Congratulations on finishing another challenge! Your solution responds quite well, looks nice, and the calculator works as expected 👏

    0
  • Dan Marius•945
    @danmlarsenPosted 2 months ago

    Hello there. Congratulations on finishing another challenge! Your solution responds quite well and looks nice 👏

    I've made one observation that might interest you:

    • The borders on your nav links seems to push the other elements 2 pixels down when hovered. One solution to this might be to add "border-b-2" and "border-transparent" to all the links. And then just "hover:border-white" when hovered.

    Happy coding. 💻

    Dan

    Marked as helpful
    0
  • Dan Marius•945
    @danmlarsenPosted 2 months ago

    Hello, mofada! 👋

    Congratulations on finishing another challenge! Your solution responds quite well and looks nice 👏

    0