Skip to content
Submitted about 2 years ago

Galleria-slideshow-site - Vanilla JS

tomhill10•70
@tomhill10
A solution to the Galleria slideshow site challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Galleria-slideshow-site Frontend Mentor - Galleria slideshow site - HTML CSS JAVASCRIPT

Stuff I learned: trying to force GRID to do what you want might mean that flexbox is the answer. Those 4 hours I will never get back.

"pointer-events" a usefull css attribute that allows the mouse to ignor that element. Had an issue where the hover on the image would be interrupted due to the text-div.

I managed to get the JSON data to parce into the webpage okay. Now need to figureout how to load the data of the picture to a website template! -- Changed this to fetch() as it doesn't require the use of Jquery

Learning the important of eventListeners in JS. Had some trouble with the element in HTML not being found as it hadn't been loaded into the DOM.

To fix this I put the eventListeners inside the function that pushes the elements into the DOM apon loading the JSON data. MediaQ took a while trying to get eveything to fit nicely. It's not exactly how I wanted it but I'm happy enough with the outcome for now.

I'm happy with this project. I didn't get time to add a bar at the bottom of the screen depending on how far along you were. There is also some work to be done on general sizing of elements like the pop-up windows for the "view picture".

The showNext() and showPrev() functions proved to be quite challanging and I feel like I have duplicated code in places. But after much trial and error it works at the moment so I'll be leaving it as is. I should possibly look at how to properly manage my scope accross the JS file.

Also need to think about how I am naming variables. Alot I kept the same through different funtions to try and make it uniform but I think this added to my confusion later down the line. Any comments or reviews are most welcome. Thanks!

Code

Please log in to post a comment

Log in

Community feedback

  • Abdul Khaliq 🚀•72,360
    @0xabdulkhaliq

    Hello there 👋. Congratulations on successfully completing the challenge! 🎉

    • I have other recommendations regarding your code that I believe will be of great interest to you.

    HEADINGS ⚠️:

    • This solution lacks usage of <h1> so it can cause severe accessibility errors due to lack of level-one headings <h1>
    • Every site must want only one h1 element identifying and describing the main content of the page.
    • An h1 heading provides an important navigation point for users of assistive technologies, allowing them to easily find the main content of the page.
    • So we want to add a level-one heading to improve accessibility by reading aloud the heading by screen readers, you can achieve this by adding a sr-only class to hide it from visual users (it will be useful for visually impaired users)
    • Example: <h1 class="sr-only">Galleria slideshow site</h1>
    • If you have any questions or need further clarification, you can always check out my submission for another challenge where i used this technique and feel free to reach out to me.

    JAVASCRIPT 🟡:

    • During code inspection i have found that the functions are logging some values in console, so make sure to remove the console.log()'s from your code to get rid of that issue

    .

    I hope you find this helpful 😄 Above all, the solution you submitted is great !

    Happy coding!

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