Skip to content
OverviewSolutions
4
Comments
6
hidayahmsabah
@hidayahmsabah

All comments

  • Aperlae•80
    @AperlaeSubmitted almost 3 years ago

    Ok so far I have two issues with this page that I still can't figure out. I'm still a newbie so I'd greatly appreciate if anyone has any suggestions/explanations for the following:

    1. The background on the destination page moves around when one switches between 'moon' and 'mars', 'europa' and 'titan'.
    2. Dev tools is giving me an error --Uncaught TypeError: Cannot read properties of null (reading 'querySelectorAll') at index.js:18 -- can't quite understand what it means.

    Responsive Multi-page Website using CSS-Grid, JQuery, utility classes

    1
    hidayahmsabah•160
    @hidayahmsabahPosted almost 3 years ago

    Hi Aperlae,

    Good job overall on the whole site! This is just some preliminary debug I did from looking at your code snippets which you can correct me if you've done that but the issue still persists.

    1. I notice the bg inconsistency happens when you're in tablet/mobile view so my guess it's because the page itself is inconsistent in terms of height due to scroll function. You can try specifying a height for that particular page, maybe make it consistent across all pages that it be at 100vh, or the other one, which I'm not sure would work, is specifying background-size: cover.

    2. On the index.html page you have no elements that can be query selected using '[role="tablist"] so it returns a null. That's why dev tools flagged that as an error because in line 18 of your index.js, you were referring to those elements which are null. Can simply add a conditional before that specific line to remove it the error.

    Marked as helpful
    0
  • hidayahmsabah•160
    @hidayahmsabahPosted almost 3 years ago

    Hi Natallia, really great job overall! Your end result looks spot on with the original in the design comparison.

    I would advise checking the padding-right of your form for the mobile view because it looks inconsistent with the left padding. Using % is great but do try experimenting with em/rem.

    Amazing job again!

    0
  • Neil Khatri•620
    @nkhatri7Submitted almost 3 years ago

    I can't get the gradient border to work on hover, I tried a few different things but still didn't end up getting it. It's also my first time using React Beautiful DnD so it's not the best drag and drop todo app you'll see. Apart from that, how did I go?

    Mobile first todo app built with React Beautiful DnD and SCSS

    1
    hidayahmsabah•160
    @hidayahmsabahPosted almost 3 years ago

    Hi Neil, you did a good job overall!

    I would advice on specifying width for your header as 100vw so that it extends to the whole width of the monitor regardless of its viewport. You might want to check on the clear completed functionality because it does not work when all of the items are completed.

    Good job again!

    Marked as helpful
    1
  • hidayahmsabah•160
    @hidayahmsabahPosted almost 3 years ago

    Hi Clifford, awesome job on the app! I especially loved that you disabled the navigation button when no items are in that state (for example, Completed nav is disabled if none of the items are completed yet).

    You would want to check on your light theme because when I added an item while I'm in light mode, it switched back to dark mode. Adding top and bottom padding on the create a new to-do div can give a more consistent style with the bottom portion of the to-do lists.

    All in all, great job!

    Marked as helpful
    0
  • Christian Glenogo•130
    @CHRISTIANGLENOGOSubmitted about 3 years ago

    This is quite challenging one. I've learned a lot working this challenge and it take a while to come up with the solution specially the toggle and mobile to desktop design. After all, I guess it works well, for me. But you guys can check my code if you have suggestion/comment just let me know. Ps. I'm still stuck on drag and drop. I'm still trying to make it work. Hope you can help me guys. Thank you!

    Todo App - Mobile first Vanilla JavaScript

    1
    hidayahmsabah•160
    @hidayahmsabahPosted about 3 years ago

    Hi Christian, loved your smooth transition from dark to light theme and vice versa. For the drag and drop functionality, I referred to a youtube tutorial to achieve that https://www.youtube.com/watch?v=jfYWwQrtzzY, hope it helps you too.

    A couple of things to add, it would be best to make sure that the footer font is not as big as the drag and drop div unless you want to emphasize things on your footer as well. I would advise enabling keydown event or handler for pressing the enter key to add an item into the list. Pressing the circle on the left side of the textbox is not quite interactive.

    Great job on the rest of the functionality overall!

    Marked as helpful
    0
  • Tamera•110
    @tlbodrickSubmitted about 3 years ago

    I can't figure out how to do the drag and drop functionality. My current solution includes inserting the item you're dragging after the one you're hovering over, which works just fine, unless you want to move it to the top of the list which doesn't work (of course). But I don't understand how to do both.

    To-do app with Drag & Drop and Theme Changer, Vanilla JS

    1
    hidayahmsabah•160
    @hidayahmsabahPosted about 3 years ago

    Hi Tamera, I got my solution from a youtube tutorial https://youtu.be/jfYWwQrtzzY. I don't know if you've checked that out. Loved that you had pseudo-class on your cross icon for hover state which makes it very interactive. I would advise adding cursor: pointer on some of the clickable elements such as the moon/sun icon and clear completed element on top of changing their font-color on hover state.

    Good job!

    0