Submitted about 3 years ago

Filtering with lots of animation using CSS and JS

Bonrey• 1,130

@Bonrey

Preview site View code

This is a solution for...

Job listings with filtering

HTML
CSS
JS

3intermediate

View challenge

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,565

@ApplePieGiraffe

Posted about 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)! 😁

Bonrey• 1,130

@Bonrey

Posted about 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? 😓

ApplePieGiraffe• 30,565

@ApplePieGiraffe

Posted about 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. 😀

Bonrey• 1,130

@Bonrey

Posted about 3 years ago

@ApplePieGiraffe great website! Thanks a lot 😊

Vinci Taylaran• 185

@vincitaylaran

Posted about 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!!!

Bonrey• 1,130

@Bonrey

Posted about 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!

Please log in to post a comment

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