Skip to content
Submitted over 4 years ago

Job listings with filtering

Lee•495
@leecockcroft
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

I found I got myself in some unexpected problems. Ideally I wanted to have all the filter options on top of the page once selected, and removing the tab the filter would refresh. How would I do that? You can click on the tab and they all work accordingly.

Should I have approached this a different way? As this was practice there may be some ambiguous variables eg let x = .....! The only way I will get better is if someone could look at my code and advise me, what am I doing wrong? where should i approve? All advice would be appreciated.

Thanks

Community feedback

  • Lee•495
    @leecockcroftPosted over 4 years ago

    Hi Roman, Thank you for your feedback.

    Yes I checked your code, I had a few issues using the svg as an "img" so I just embed it and swaped via JS, which obviuously didn't make it responsive.

    "As for js part - you should probably insert all the content into html, and only in js aplly filter functionality. "

    Usually I do, the only reason I did it this way was due to all the information being in an object, I thought it would be easier running a script (so I'n not repeating myself)

    Future projects is it wise to separate, HTML,CSS,JS as much as possible? even if it takes longer?

    Also, if I did separate them all, would it have been a very simple, event handler, and using my switch statement to get grab the relevent data tags?

    I used this approach as I tried to use the same mentality as using React.

    Many thanks for your feed much, it's much appreciated Lee

    0
  • Roman Filenko•3,335
    @rfilenkoPosted over 4 years ago

    Hi Lee, I've created a pull request on github (css and html changes). As for js part - you should probably insert all the content into html, and only in js aplly filter functionality. You can check my solution to this challenge - I've made it with Vue, but its js in code :)

    Good luck, Roman

    0

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