Skip to content

README.md

Latest commit

 

History

History
76 lines (54 loc) · 2.56 KB

README.md

File metadata and controls

76 lines (54 loc) · 2.56 KB

Frontend Mentor - GitHub Jobs API solution

This is a solution to the GitHub Jobs API challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

Overview

The challenge

Users should be able to:

  • View the optimal layout for each page depending on their device's screen size
  • See hover states for all interactive elements throughout the site
  • View all jobs currently live on the GitHub Jobs API
  • Be able to click a job from the index page so that they can read more information and apply for the job

Screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • Mobile-first workflow
  • LocalStorage
  • React - JS library

What I learned

I was struggling with filtering the jobs correctly. At first I was only able to filter based on the job title, or location, or full time but not all criteria at once. I kept working through the issue and finally found a solution. I had to add the filtering in the onSubmit and filter based on all inputs at once. I also used react lazy state to control the light/dark theme toggle. I provided code snippets for both of these, below.

const filteredItems = jobs.filter(
  (job) =>
    job.position.toLowerCase().includes(searchTerm.toLowerCase()) &&
    job.location.toLowerCase().includes(searchLocation.toLowerCase()) &&
    job.contract === "Full Time"
);
const [darkTheme, setDarkTheme] = useState(
  () => localStorage.getItem("dark_theme") === "false"
);

Continued development

I will continue working on searching/filtering arrays and strings by solving alrgothim problems on CodeWars. I also want to refine my application architecture. I am always looking for ways to cleanup my code.

Author