Skip to content
Submitted over 3 years ago

Filtering with lots of animation using CSS and JS

Bonrey•1,130
@Bonrey
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Job listings with filtering
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

This was an interesting challenge. However, I think it would have been much better to complete it using React or some other JS framework. Anyway, I decided to make the site with pure JS and HTML, CSS (with lots of copy & paste) 😏

Functionality:

  • Click filter tablets to select the right jobs;
  • Click on the job title to move the page to the top;
  • Press "ESC" key or click "Clear" button to remove all the filters;
  • You can also TAB through all the job vacancies and chosen filters using "tab" button (or shift + tab to go backwards);

Bugs & small issues:

  • 🔉 In Firefox the clicking sound doesn't work well. (It either doesn't sound the way it should or not sound at all.) The "remove" sound works all right, though.
  • ❎ Firefox depicts "×" (the one that you see on the "remove filter" button) in a different way, which isn't pretty at all.

P.S. I created the JS functionality without using "data-*" attributes in HTML, which was advised in README.md. Probably, I'm missing out on something and don't understand the right way of going about this 🙁

As always, any feedback would be highly appreciated 😊

Community feedback

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    Hi there, Bonrey! 👋

    Amazing job on this challenge! 👏 Those animations are pretty sweet and I love the sound effects you added to your solution! 🤩 Everything works great and I like your idea to add some extra keyboard functionality! 👍

    Keep coding (and happy coding, too)! 😁

    2
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    @ApplePieGiraffe thank you very much 🙂 In fact, I borrowed the "whoosh" sound from one of your projects, since it's very difficult to find some good mp3 sounds online for free. Is it okay that I didn't attribute it to you? 😓

    1
    ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 3 years ago

    @Bonrey

    Haha, no problem! 🙂 (I thought that "whoosh" sounded familiar.) 😅

    I actually had to do a bit of searching around, too, in order to find some sounds that I liked. I believe I found the sounds I used in my project from Freesound.com. You can find lots of free, royalty-free sounds there (ranging from poor quality to pretty awesome), so if you're looking for more, you might want to give that place a shot. 😀

    1
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    @ApplePieGiraffe great website! Thanks a lot 😊

    1
  • Vinci Taylaran•185
    @vincitaylaranPosted over 3 years ago

    I love the work you've put into the animations. The animations don't ruin the user experience for me. They're also quite satisfying with the sound they make and the way they animate in and out of view. I tried doing that myself when I attempted this challenge but kinda failed.

    Fantastic work!!!

    1
    Bonrey•1,130
    @BonreyPosted over 3 years ago

    @vincitaylaran thank you 😊 I think you will be able to do same kind of animations quite easily if you continue practicing. It's not as difficult as it seems 😉 Happy coding!

    1

Please log in to post a comment

Log in with GitHub

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