Skip to content
Submitted over 3 years ago

Static Job Postings - SCSS and Vanilla JS

Dave•5,295
@dwhenson
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

Any feedback would be most welcome on this one.

I was a bit unsure of the best markup for this one. In the end I went for checkboxes rather than buttons, and I think this holds up OK - if you remove the CSS it is easier to see.

I also had to add in some odd padding values to the pill shaped elements and the labels as I couldn't get the font vertically centered. Any alternative suggestions on this would be welcome.

I should also add that having tested this with a screen reader there is still quite a bit of work needed with labels and focus to make this work nicely.

Thanks again for any feedback.

Sept 21: I just updated this to improve the transitions of elements on and off the page and remove the janky feel to the page. Any comments most welcome.

Community feedback

  • Marlon Passos•940
    @MarlonPassos-gitPosted about 3 years ago

    good work,

    In a real project, each of those cards would take us to a page with more information about the job opening, so it should have some part of the card like the image or the title should indicate that it is clickable, I would add at least one cursor: pointer on these elements.

    I don't know why but the transition between the elements is really fast, I think it should be a little smoother, but I don't even know how to do it hehe

    I would particularly put each element <h2> in the job title, and <h3> in the company name

    Marked as helpful
    0
    Dave•5,295
    @dwhensonPosted about 3 years ago

    @MarlonPassos-git Thanks for the feedback - I fixed up and pointer and the transitions so they should be slower now. I think it's looking OK now.

    0
  • tediko•6,680
    @tedikoPosted over 3 years ago

    Hello, Dave! 👋

    You're going like crazy! Good job, yet again! This is only my suggestion but since your .split labels trigger some action (filter in this case) so maybe change them to buttons. It'll get rid of these errors. The only thing you'll need to add is to prevent somehow form from submitting after button is clicked.

    Good luck with that, have fun coding! 💪

    1
    Dave•5,295
    @dwhensonPosted over 3 years ago

    @tediko thanks again. Much appreciated. I was working on this one at the same time as the other!

    I did some reading yesterday of the specs, yes really! And I’m going to remove the form elements that wrap my inputs. This should help usability I hope and it seems the forms aren’t needed if I’m just updating a user interface.

    On buttons or checkboxes, I’m thinking that because we can have multiple options for filtering a checkbox makes more sense?

    Thanks again for having a look! Much appreciated.

    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