Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Static Job Postings - SCSS and Vanilla JS

P
Dave 5,245

@dwhenson

Desktop design screenshot for the Job listings with filtering coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

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

@MarlonPassos-git

Posted

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

P
Dave 5,245

@dwhenson

Posted

@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
P
tediko 6,580

@tediko

Posted

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

P
Dave 5,245

@dwhenson

Posted

@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
Discord logo

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