Job Hunting? Build This JavaScript Tracker to Stay Organized!

Are you learning JavaScript and looking for a practical project that can help you stay organized during your job search? This guide will walk you through building a job application tracker using JavaScript classes. By the end of this project, you’ll have a functional tool to keep track of your job applications while practicing your coding skills!

VSCODE SETUP: https://www.precodecamp.com/course-detail/vs-code-setup/6662

CODE WITH ME CODE: https://codepen.io/precodecamp/pen/dPbBLYb

COMPLETED CODE: https://codepen.io/precodecamp/pen/gbYNyaM

Project Overview

In this project, we will create a simple job tracker that allows you to submit job applications, view them in a table, and delete entries as needed. The tracker will also persist data even after refreshing the page, making it a useful tool during your job hunt.

Setting Up The Project

To get started, we will set up our project in Visual Studio Code. If you’re not familiar with Visual Studio Code, you can check out this Visual Studio Code Setup guide to configure your environment. Once you have it set up, create an HTML file and a JavaScript file linked together.

Creating Our First Class

The first step in our JavaScript file is to create a class called JobApplication. This class will hold all the job applications we submit. Here’s how we can define it:

class JobApplication {
  constructor() {
    this.jobApplications = [];
  }
}

In the constructor, we initialize an empty array to hold our job applications. This will allow us to store each application we submit.

Adding Event Listeners to the Form

Next, we need to grab the form from our HTML and add an event listener to it. This will allow us to handle the submission of job applications. Here’s how to do it:

const formElement = document.querySelector('#job-application-form');
formElement.addEventListener('submit', (event) => {
  event.preventDefault();
  // Handle form submission
});

By calling event.preventDefault(), we prevent the page from refreshing when the form is submitted.

Collecting Form Data

Inside the event listener, we’ll collect the data from the form inputs. We will create an object to hold this data:

const jobApplicationData = {
  company: formElement['company'].value,
  position: formElement['position'].value,
  date: formElement['date'].value,
  status: formElement['status'].value,
  notes: formElement['notes'].value
};

Each input field’s value is accessed using the form element’s name attribute, which allows us to build our job application object easily.

Adding New Job Applications

Now, let’s add a method to our JobApplication class to handle adding new applications:

addJobApplication(jobApplication) {
  this.jobApplications.push(jobApplication);
}

We will call this method after collecting the form data to store the new application in our array.

Displaying Job Applications

To display the job applications in a table, we need to create a function that builds the table based on the current job applications stored in our array:

displayDataAndBuildTable() {
  const tableBody = document.querySelector('#table-body');
  tableBody.innerHTML = ''; // Clear existing data
  this.jobApplications.forEach((application, index) => {
    const row = `
      ${application.company}
      ${application.position}
      ${application.date}
      ${application.status}
      ${application.notes}
      Delete
    `;
    tableBody.innerHTML += row;
  });
}

This function clears the table body and then loops through the job applications, adding a new row for each application.

Saving to Local Storage

To ensure that our applications persist even after refreshing the page, we will use local storage. We need to create a method to save the job applications to local storage:

saveJobApplicationsToLocalStorage() {
  localStorage.setItem('jobApplications', JSON.stringify(this.jobApplications));
}

We will call this method each time we add a new application to update the local storage with the current state of our applications.

Loading from Local Storage

We also need to load the job applications from local storage when the page is loaded. We can create a method to handle this:

loadJobApplicationsFromLocalStorage() {
  const storedJobs = JSON.parse(localStorage.getItem('jobApplications')) || [];
  this.jobApplications = storedJobs;
  this.displayDataAndBuildTable();
}

This method retrieves the job applications from local storage and populates the table if there are any stored applications.

Adding a Delete Button

To allow users to delete job applications, we need to add a delete button in each row of our table. We’ve already added the button in the displayDataAndBuildTable() function. Now we need to implement the delete functionality:

deleteJobApplication(index) {
  this.jobApplications.splice(index, 1);
  this.saveJobApplicationsToLocalStorage();
  this.displayDataAndBuildTable();
}

This method removes the application at the specified index and updates local storage and the displayed table.

Testing the Delete Button

We also need to add event listeners to the delete buttons to call our delete method when clicked:

const deleteButtons = document.querySelectorAll('.delete-btn');
deleteButtons.forEach((button) => {
  button.addEventListener('click', (event) => {
    const index = event.target.dataset.index;
    this.deleteJobApplication(index);
  });
});

This ensures that each delete button corresponds to the correct job application.

Final Thoughts

Congratulations! You have built a functional job application tracker using JavaScript classes. This project not only helps you stay organized during your job hunt but also gives you valuable practice in JavaScript fundamentals like classes, event listeners, and local storage.

For more resources and tutorials to further enhance your coding skills, visit PreCodeCamp.

Happy coding, and good luck with your job applications!