1. Introduction

Now that you’ve got a bit more comfortable with JavaScript, let’s practice some filtering. In this challenge, you’ll need to filter the job listings by the categories selected.

2. Project Brief

Your challenge is to build out this landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you’ve got something you’d like to practice, feel free to give it a go There are two options to choose from for how to approach it:

Option 1: Filter job listings based on the categories using the HTML data- attribute. In this option, you’d use the hardcoded content that already exists in the index.html file. Option 2: Use the local data.json file to pull the data and then dynamically add the content. This would be perfect if you’re looking to practice a JS library/framework like React, Vue, or Svelte.

image

3. Learning Objective

You’ll learn how to use JavaScript to filter items in the DOM. This is a key skill when building client-side applications, so this challenge will be great practice!

4. Minimum Acceptance Criteria

  • 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 selected

5. Optional Challenges

6. Technical Setup

  1. Download the starter code, includes assets, JPG images of the design files, and a basic style guide. There’s also a README to help you get started. To download it: https://www.frontendmentor.io/challenges/job-listings-with-filtering-ivstIPCt/hub/job-listings-with-filtering-HLnhrX1mRS
  2. Set up the project with version control (e.g. Git)
  3. Read the README.md file and have a look around the project
  4. Get colors, fonts etc from the style-guide.md file
  5. Set up your project/file architecture however you want
  6. Start coding!

Technologies:

  • HTML
  • CSS
  • JS

Link to boilerplate repo: https://github.com/ReDI-School/js-nrw-2022-fall/blob/master/project_ideas.md

7. Resources / Hints & Tips