Frontend Mentor - Job listings with filtering solution

This is a solution to the Job listings with filtering challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

Screenshot

Links

• Solution URL: https://github.com/anas-cd/Job-listings
• Live Site URL: https://anas-cd.github.io/Job-listings/

My process

Built with

• Semantic HTML5 markup
• SCSS
• Flexbox
• Desktop-first workflow
• Fetch API
• Gulp
• Vue.js - JS Framework

What I learned

Learned about many things here are the most important onse:

• Vue.js Transition html element that can be used to make transitions of v-show/v-if smoothly, Note: this doesn't work on components so you need to but them inside the components to take effect, more info about it is linked down below on Useful resources>

<Transition name="fade">
    ...
</Transition>

• Vue.js encapsulates arrays and objects in proxies this solves many things and one of them is the reactivtiy of arrays, the content of that array can be accessed normally but when shown it shows as a proxy, here is how to show the content directly> (this.jobsData is the array)

console.log(JSON.parse(JSON.stringify(this.jobsData))); 

• Checking the filters by checking if all elements of that array is in the job's tags array, here we can see how it works>

this.filterBar.every(tag => {return this.JobTags.includes(tag)}); 

• Including elements of array into another>

this.arr = [...this.arr1, ...this.arr2, ...this.arr3];

Useful resources

• Vue.js Transition component - This helped me in using the transition component.

• Check if Array has all Elements of Another Array - JavaScript - How to check if Array has all Elements of Another Array - JavaScript.

• Vue.js documentation - Vue.js documentation.

Author

• Website - dev.anasali.info
• Frontend Mentor - @anas-cd
• Twitter - @AnasCd