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

Entertainment Web App using Vue3 + Typescript, Pinia & Vue-router

@kevinndlc

Desktop design screenshot for the Entertainment web app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
4advanced
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello,

I'd like to know if there is a way to scroll horizontally wihtout having to press SHIFT while I'm scrolling ? If possible without JS :)

Thank you in advance, and feel free to give me other advices about my webapp.

Community feedback

@MarkoLukesevik

Posted

Nice work Kevin, if you want make horizontal scroll with pure css you can check this site: https://css-tricks.com/pure-css-horizontal-scrolling/ Its pretty easy, you just need to rotate the container 90 degrees counterclockwise so the bottom is to the right and then rotate the items back to correct-side up. everything is well explained here on the link for css-tricks. Hope this was helpful. Keep up the good work!

Marked as helpful

1

@kevinndlc

Posted

Thank you for your answer @MarkoLukesevik ,

I had seen this article but the main problem was that I had to set the initial height of my container to the size of 100% of my remaining width in my layout (to have an equivalent of width: 100% after rotation) ; And unfortunately I don't think there is a way to specify the width of a parent block when setting the height of an element (unless I do a calc(100vw - the space of all horizontal margins, paddings - the width of my sidebar)) but that makes it quite complex)

So I think next time I'll do it directly in JS, thanks anyway :D

1
ritik jain 200

@theritikshah

Posted

Great work!

1
ritik jain 200

@theritikshah

Posted

How long it took you to finish the project?

0

@kevinndlc

Posted

@theritikshah Thanks mate,

It took me 2 days but to be honest, I did not track the number of hours ; I think it's around 8 hours (but I struggled importing my images dynamically into Vite in my components)

1
ritik jain 200

@theritikshah

Posted

@kevinndlc Check out this video similar to the project: https://www.youtube.com/watch?v=jmLdZY_Lo1k&t=3s

Marked as helpful

0

@kevinndlc

Posted

@theritikshah Awesome video, thank you very much !

0

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