I don't really understand how to position the items in the summary section (how to make the 80/100 stick to the right etc.) so I solved it by using position relative but that created some problems when I was making this component responsive.
Hey Kmigel,
A trick to making a flex item "stick to the right" is to use margin-left: auto. That causes the item's left margin to expand to take up as much free space as possible, which pushes it all the way to the right.
Taking a quick look at your code, here are a few suggestions:
your-points and max-points in a new div (making them a single flex item within the summary-item container) and style that div with margin-left: autojustify-content: center from summary-item (you want the flex items to be justified left, except for the last one that you push to the right)summary-item container. You shouldn't need that.That should address the responsive issues. Hope that helps 👍
(here's my code for the summary item if you want to take a closer look at the css)
Aaron
Hello, Frontend Mentor coding community. This is my solution for Job listings with filtering.
I wanted to practice what I have learned recently in a tutorial. The only downside that I encountered was adding global styles in Svelte since the component styles are scoped by default. To define global styles in Svelte you have to use the ":global" selector and apply it to every selector which is very verbose but besides that, I enjoyed using it.
Nice work Stefano. I just completed this challenge using Svelte as well. Per your comment on adding global styles, if you're using Vite to start a standard Svelte project there should be an app.css file in your src directory. You can add global styles there and they will apply to all your components. Hope that helps!
This was a fun project, I used Hygraph to make a CMS for the listings and then queried it with GraphQL. I was going to make a filter function to filter through the listings based on the selected tag but in the end, I found that a much better solution was
const match = tagsArray.some((i) => itemsArray.includes(i));
if (itemsArray.length === 0 || match) {
return (
//show cards that match selected tags, or show all cards if no tags are selected...
)
}
This is a great way to compare two arrays to see if any of the items match to one another!
Please feel free to leave comments or suggestions!
Nice work Eileen! I was playing with your live app and noticed the filters aren't quite working as intended. According to the the readme: For each filter added, only listings containing all selected filters should be returned. When I was clicking multiple filters it looked like it was returning listings that included any of the filter terms rather than all of them.
Here's a snippet from my code (jobListings is the source data and userFilters is an array of the selected filters). I'm doing something very similar to you except using the every() method instead of some(). So probably an easy fix!
let filteredJobListings = [];
jobListings.forEach(job => {
let listingFilterTerms = [job.role, job.level, ...job.languages, ...job.tools];
if (userFilters.every(term => listingFilterTerms.includes(term))) {
filteredJobListings.push(job);
}
});
return filteredJobListings;
Hope that's helpful!
Aaron