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

use react for filtering list and react router dom also design in css

oishi 150

@sumyta12

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


-> here i find difficulty for mobile responsiveness through i have tried but i don't yet make it accurate -> if anything need to change please give me feedback it will helpful for me

Community feedback

@felipestefani

Posted

Despite the css gap, the project get very nice!

All the logic seems to be perfect and the classes are bind dynamically, as I could see.

I don’t know if you know tailwind or bootstrap, but it helps a lot with the style.

I’kk let the links here to check it out: tailwind bootstrap

In my projects I’m coding all css as well, but now it’s my focus. If the idea is to code the project, this tools helps a lot!

Great job! I liked a lot 😉

Marked as helpful

0

oishi 150

@sumyta12

Posted

@felipestefani thanks for your feedback yes i know bootstrap but in responsiveness i face difficulties in css i will make it more better . Again thanks for feedback😊😊

1

@felipestefani

Posted

@sumyta12 I'm focusing my efforts on learn css now too.

It looks easy at first, but there are many things and possibilities to achieve the same goal. I'm having some trouble with responsiveness some times, but we just learn and get better making more and more!

If you need some help, and of course I can, just contact me. If I have some problem to share, I look for you too ☺️ This way we learn together!!

Marked as helpful

1

@fazzaamiarso

Posted

Hi @sumyta12! Great job on your project!

I have some quick suggestion for you:

  • It's better to set initial state in useState Initialization, rather than in useEffect.
const [joblist, setJoblisting] = useState([...Joblistingdata]); // initialize state here ✅
  • In your urlParams useEffect, you can refactor it like this:
  for (const [key, searchValue] of Object.entries(displaySearch)) {
      if (Array.isArray(searchValue)) {
        searchValue.forEach((value) => {
          urlParams.append(key, value);
        });
      } else {
        urlParams.set(key, searchValue);
      }
    }

I hope it helps! Cheers!

Marked as helpful

0

oishi 150

@sumyta12

Posted

@fazzaamiarso ohhoo , yes i can also do that way also. thanks for your suggestions😅

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