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

Job listing and filter with React

#react
Florian 50

@Flomhw

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


I created a solution with React, the point wasn't simply to filter on the front with css but i wanted to filter the array accordingly.

I'd love a feedback about my code in Jobs.js

Thank you. :)

Community feedback

P
Vander Santos 1,750

@vanderms

Posted

Hi there! Well done!

I will start making this project and I am happy to have found your solution because I had some doubts about how the app works.

I only have two suggestions:

The first is when you are using Create React App (or other framework), you should remember to change the favicon and the title on the index.html file. Currently the title of your solution is "React App". "Job Listings" would definitely be a better title.

The second is it's much easier to deploy a React App on free services like Netlify or Cloudflare Pages. You should give them a try.

0

@Captressketh001

Posted

Nice attempt. I will love to point out a few things I discovered while checking your design.

  • The filter list has a longer width. You can make the width nice by making the width of the list width:auto in your code. like this: .filterList h2{ width:auto }

  • The filter list container is also displaying when no filtering is happening. You can toggle the display of the list by checking the length of the filter array. if the array does not contain any item, the bar should not show. Example This is how to toggle display in Vue, don't know how to do it in react. <div v-show="filterlength >0"></div>

  • Don't forget to fix the html and accesibility issues.

Nice work once again

0

Florian 50

@Flomhw

Posted

@Captressketh001

Hey thank you for your feedback. Yes i remarked that the filter container is always visible but since i focus more on the js part is figured it wasn't a big deal. But of course i'd be better to stick to the design.

Thanks. :)

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