This is a solution to the Job listings with filtering challenge on Frontend Mentor. Have you completed this challenge? What was your solution?
Table of contents
Overview
The challenge
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Filter job listings based on the categories
Links
- Solution: Click to view
- Live Site: Click to view
My process
Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- Vue.js - JS library
My Solution (In-Depth)
- Using the JavaScript Fetch API, I loaded the job listing data and saved it to an array,
jobList
.
loadDataFromJson: async function () {
let url = "./data.json";
await fetch(url)
.then(async (response) => {
this.jobList = await response.json();
})
.catch((error) => console.log(error));
},
- The visibility of the filter bar is based on the length of the array,
jobFilters
.
<div class="job-list-filter" v-show="jobFilters.length>0">
...
</div>
On initial load, the jobFilters
array is empty and, as a result, the filter bar is hidden. When a user clicks on the filter tabs on the right side of each job listing, the addFilter() method is invoked which checks to see if the filter already exists in jobFilters
. If not, the value is stored in the array and the filter bar becomes visible.
addFilter: function (filter) {
var filterExists = this.jobFilters.includes(filter);
if (!filterExists) {
this.jobFilters.push(filter);
}
},
- The jobList is rendered to the webpage using a computed property,
filteredJobList
. On initial load, all job listings are rendered since the user hasn't clicked on any filters yet. However, when the user clicks on a filter, the program uses the array methods,.filter()
and.every()
, to loop throughjobList
and display only the jobs that match the filters injobFilters
array.
filteredJobList: function () {
return this.jobList.filter((job) => {
let items = [job.role, job.level, ...job.languages, ...job.tools];
let filters = this.jobFilters;
return filters.every((filter) => items.includes(filter));
});
},
What I Learned
This challenge was a great way to refamiliarize myself with array helper methods such as .every()
, and with using the Fetch API. I was also able to use CSS Grid and FlexBox to get the desired layout, which is always fun.
Useful resources
- JavaScript Tutorial - JavaScript Fetch API
- Learn CSS Grid
- A Complete Guide to CSS Flexbox
- MDN Web Docs - Array
Author
- Website - Phoebe Michel
- Frontend Mentor - @awkwardblackcoder
Top comments (0)