Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Bootstrap and JQuery

Cường 845

@docuong0912

Desktop design screenshot for the Social media dashboard with theme switcher coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi, I'm still learning Bootstrap and Jquery and some animation from the internet , but my Jquery code still messy :)), Any advice are welcomed

p/s: I didn't notice the watermark in the background, so just ignore it, okay :))

Community feedback

@pikapikamart

Posted

Hey just to add up, in your day and night toggle . Instead of just left to transition it. You could just use the transform then translateX property since your day and night takes the container size as 100%, then just translating it 100% from x-axis will make sure that it won't be seen until it is toggled. Because there are points where your night toggle is visible and you don't want that right. So instead of left and aligning it to the 110px position, you could just translate it. Well there are many solutions right^

1

Cường 845

@docuong0912

Posted

@pikamart Hi,thank you so much for your suggestion,really appreciate it

Can you explain more, i didn't get your point, did you mean i should change the animate left to transform:translateX(110px), right?

And the bug that you mention is when pressing the toggle too fast so the transition can not catch up with it right?

0

@pikapikamart

Posted

@docuong0912 Ughm no, what I mean in the translate is that, you should translate it like this, transform: translateX(100%) since both containers of night and days takes the whole size of its parent, translating their axis via 100% or -100% sill surely make your day and night toggle hidden. Since in your code in this block

.night {
    position: absolute;
    content: '';
    top: 0;
    left: 110px;
    width: 100%;
    height: 100%;
    background-image: url(images/tk-stars.svg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 40px;
}

that is your css right, when you look at the left property, it goes with fixed pixel, but since your container resizes when its going at mobile state, the size gets bigger, and you are just transitioning it at 110px, then it won't be totally hidden, since at that point, your containerr is now at 160px, so by transitioning at 100%, using left: 100% or transform: translateX(100%) it will make sure that it is hidden

1
Cường 845

@docuong0912

Posted

@pikamart Oh, now i get it, t totally forgot about mobile viewport when writing js, thanks for pointing out my mistake, thank you for your time

0

@pikapikamart

Posted

@docuong0912 well helping out others also gives you ideas about things and you're welcome as well^^

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord