Skip to content
OverviewSolutions
17
Comments
12
Luka
@LukaKobaidze

All comments

  • P
    Miran Legin•740
    @miranlegin
    What are you most proud of, and what would you do differently next time?

    If i would start this project again i would invest some extra time beforehand to find out what are the solutions to filter/search something with multiple search queries/filters.

    What challenges did you encounter, and how did you overcome them?

    I had some problems stacking multiple tags on top of each other and showing items that has multiple selected tags.

    What specific areas of your project would you like help with?

    Although this demo works i'm not so sure if this is the most elegant way to handle filtering with multiple options. I would love to hear other opinions how to achieve this functionality in a different way especially how to write logic when multiple options are selected.

    Job listings with filtering using React

    #react
    1
    Luka•820
    @LukaKobaidze

    Hello👋 Your solution on filtering jobs is nice, great job! There are a few things I would do differently, so I'm going to answer your last question and give you an example of how I would handle filtering by changing things up in your code.

    In your FilterableCards.js component I would remove all 5 useState hooks below...

    function FilterableCards({ cards }) {
  const [role, setRole] = useState(null);
  const [level, setLevel] = useState(null);
  const [languages, setLanguages] = useState([]);
  const [tools, setTools] = useState([]);
  const [filterCounter, setFilterCounter] = useState(0);
...

    And replace it with only one state, like this:

    function FilterableCards({ cards }) {
  const [filter, setFilter] = useState([]);
...

    This filter state is an array of strings that will contain any filtering option, including role, level, languages, and tools. This state also removes the need for having filterCounter state and two functions incrementCounterHandler(), decrementCounterHandler(), because now we can get the "count" by using filter.length.

    Now In the same component, I would remove filterJobs() function and filteredJobs variable and add the following:

    function FilterableCards({ cards }) {
  const [filter, setFilter] = useState([]);
  const [filteredJobs, setFilteredJobs] = useState(cards);

  useEffect(() => {
    if (filter.length > 0) {
      setFilteredJobs(
        cards.filter((card) => {
          const cardTags = [card.role, card.level, ...card.languages, ...card.tools];

          return filter.every((filterOption) => {
            return cardTags.includes(filterOption);
          });
        })
      );
    } else {
      setFilteredJobs(cards);
    }
  }, [filter, cards]);
...

    As you can see, I added one more state filteredJobs and a useEffect hook with dependency array that includes filter. Now, whenever we update filter, useEffect runs the code that's inside of it and updates the filteredJobs state.

    Next up, I would replace addTagHandler() and removeTagHandler() functions with the following:

    ...
function addTagHandler(tag) {
  setFilter((state) => {
    return [...state, tag];
  });
}

function removeTagHandler(tag) {
  setFilter((state) => {
    return state.filter((filteringTag) => filteringTag !== tag);
  });
}
...

    It works just like the functions in your solution, but now I only update filter state, because we save every type of tag in it.

    Now, instead of passing role, level, languages, tools props to the FilterPanel.js component, I only pass filter state as a prop.

    And to the Card.js component instead of passing role, level, languages, tools props, I only pass one prop to it tags={[card.role, card.level, ...card.languages, ...card.tools]}.

    And finally, I would update the way we render filter tags and map over the filter and tags props.

    I forked your repo and updated it just like I explained in this answer, so you can see every file I changed. You can click my latest commit to compare your solution with mine, link here!

    If something's not clear in my solution for filtering, feel free to point it out. Happy Coding! 🤗

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    To center dice properly, you can use left and transform properties together:

    .dice {
left: 50%;
transform: translateX(-50%);
}

    Here's how it works...

  • Luka•820
    @LukaKobaidze

    Hello!

    When i open the website, images are not loading, and when navigating through pages i get 404 error. This happens because src and href paths are not correct. To fix this, for example to get logo icon, instead of /images/logo.svg, write ./images/logo.svg (add . in the beginning) or you can just remove ./ and write images/logo.svg, because ./ will be added if we don't add it ourselves. If you don't know what is ./, it's the path in the same folder, Also check out this source

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Hello!

    To remove extra space to the container, you can add display: block to the image with the class of nft-img

    If you want to know why this happens and why we add display: block to the image, check out this

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Hello!

    In your outputmessage(self) function

    var message;

message = document.createTextNode(self);
errormsg.appendChild(message);

    you can remove these lines and instead of that, add errormsg.textContent = self. This will change the text of that element.

    The reason why border color is not applying is because in this line var address = document.querySelector('[name="email"]').value you are getting value of the element instead of the actual element (remove .value), and then add address.style.borderColor = 'any color'

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Good job, looks great!

    I would suggest adding modal close when backdrop is clicked other than close button

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Hi!

    The reason why transition doesn't work is because in .toggle::before class you have transition: 0.2 ease instead of transition: 0.2s ease (s is missing)

  • Luka•820
    @LukaKobaidze

    Hello!

    To change image on different media queries, you can use picture tag.

    <picture>
  <source srcset="image-mobile.png" media="(max-width: 375px)">
  <img src="image-desktop.png" alt="Image" >
</picture>

    As you can see in the code, i wrote source and img tags inside picture. media attribute is just like how you write CSS media queries. If viewport width is less than or equal 375px, then image-mobile.png is going to apply, and if not, then image-desktop.png applies. You can also write more than one source with different media queries.

    Check out this source, It's about responsive images.

    Hope this is helpful xD

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Hello!

    For background images, you can use position: absolute and top: 0, right: 0, bottom: 0, left: 0 and z-index properties.

    For background image on the top left corner, add following properties:

    position: absolute;
top: 0;
left: 0;
z-index: -1;

    And for background image on the bottom right corner:

    position: absolute;
right: 0;
bottom: 0;
z-index: -1;

    If you aren't familiar with positions and top, right, bottom, left properties, check out this source. There are also lot of other sources about positions on the internet that you can search for.

    I used z-index: -1, because without it, images would be on top of the content, and z-index: -1 puts images behind it.

    Hope this helps xD

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Hello!

    To rotate arrow, you need to use following CSS property: transform: rotate().

    I see that you toggle active class once the element is clicked. Here's the code on how to implement arrow rotate:

    .faq-cont.active > .faq-ques > img {
  transform: rotate(180deg);
}

    If you aren't familiar with > selector, basically it selects direct child of the element (source). As you can see, class faq-ques is direct child of faq-cont, and img is direct child of faq-ques. If you want to be more specific, you can add class to img and select it with the class.

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Hello! on the <a>Learn More</a> element, instead of using some specific value margin-top: 12rem, you can use margin-top: auto, this will push the element to the bottom of the container, from there use margin-bottom: some value.

    This will prevent element from overflowing.

    Marked as helpful
  • Luka•820
    @LukaKobaidze

    Great solution, Good job on the layout!

    There are different ways of changing the theme, But in my opinion the best and the easiest way of changing theme is using CSS Custom properties (CSS Variables) and this is what i would recommend using.

    Check out the one that says 'Using Custom Properties' here

    Marked as helpful