<p><br></p><div class="iframe-wrapper"><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FHeF8AqbU9QY%3Ffeature%3Doembed&amp;display_name=YouTube&amp;url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DHeF8AqbU9QY&amp;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FHeF8AqbU9QY%2Fhqdefault.jpg&amp;type=text%2Fhtml&amp;schema=youtube" frameborder="0" allowfullscreen="true"></iframe></div><p>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!</p><p>VSCODE SETUP: <a target="_blank" href="https://www.precodecamp.com/course-detail/vs-code-setup/6662"><u>https://www.precodecamp.com/course-detail/vs-code-setup/6662</u></a></p><p>CODE WITH ME CODE: <a target="_blank" href="https://codepen.io/precodecamp/pen/dPbBLYb"><u>https://codepen.io/precodecamp/pen/dPbBLYb</u></a></p><p>COMPLETED CODE: <a target="_blank" href="https://codepen.io/precodecamp/pen/gbYNyaM"><u>https://codepen.io/precodecamp/pen/gbYNyaM</u></a></p><h2 id="09a3651d-604e-48be-a541-56fc67ba3cc6" data-toc-id="09a3651d-604e-48be-a541-56fc67ba3cc6"><strong>Project Overview</strong></h2><p>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.</p><img src="https://miro.medium.com/v2/0*F3GybC4l0l95mp-V" alt="Project overview of job tracker" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="c05b0eb2-4f6e-4d80-9b68-4298019c18c0" data-toc-id="c05b0eb2-4f6e-4d80-9b68-4298019c18c0"><strong>Setting Up The Project</strong></h2><p>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 <a target="_blank" rel="noopener ugc nofollow" class="af mi" href="https://www.precodecamp.com/course-detail/vs-code-setup/6662"><u>Visual Studio Code Setup</u></a> guide to configure your environment. Once you have it set up, create an HTML file and a JavaScript file linked together.</p><img src="https://miro.medium.com/v2/0*Xrxg3B3eHLBashPB" alt="Setting up the project in Visual Studio Code" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="dbdad278-22b6-4b11-b7ee-89c3e6d81087" data-toc-id="dbdad278-22b6-4b11-b7ee-89c3e6d81087"><strong>Creating Our First Class</strong></h2><p>The first step in our JavaScript file is to create a class called <code>JobApplication</code>. This class will hold all the job applications we submit. Here’s how we can define it:</p><pre><code>class JobApplication {
  constructor() {
    this.jobApplications = [];
  }
}</code></pre><p>In the constructor, we initialize an empty array to hold our job applications. This will allow us to store each application we submit.</p><img src="https://miro.medium.com/v2/0*rV9EtBXcVPmNA-mP" alt="Defining the JobApplication class" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="847b364b-8834-40a0-8b2f-b1ba359f5442" data-toc-id="847b364b-8834-40a0-8b2f-b1ba359f5442"><strong>Adding Event Listeners to the Form</strong></h2><p>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:</p><pre><code>const formElement = document.querySelector('#job-application-form');
formElement.addEventListener('submit', (event) =&gt; {
  event.preventDefault();
  // Handle form submission
});</code></pre><p>By calling <code>event.preventDefault()</code>, we prevent the page from refreshing when the form is submitted.</p><img src="https://miro.medium.com/v2/0*IuRZsfJhgSEShN9c" alt="Adding event listeners to the form" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="d1d05588-61ad-4850-9981-8d7e72fd40ed" data-toc-id="d1d05588-61ad-4850-9981-8d7e72fd40ed"><strong>Collecting Form Data</strong></h2><p>Inside the event listener, we’ll collect the data from the form inputs. We will create an object to hold this data:</p><pre><code>const jobApplicationData = {
  company: formElement['company'].value,
  position: formElement['position'].value,
  date: formElement['date'].value,
  status: formElement['status'].value,
  notes: formElement['notes'].value
};</code></pre><p>Each input field’s value is accessed using the form element’s name attribute, which allows us to build our job application object easily.</p><img src="https://miro.medium.com/v2/0*Kc3ZDge7OhPFAFUj" alt="Collecting form data from inputs" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="df9049b5-5382-415e-9892-978141039b79" data-toc-id="df9049b5-5382-415e-9892-978141039b79"><strong>Adding New Job Applications</strong></h2><p>Now, let’s add a method to our <code>JobApplication</code> class to handle adding new applications:</p><pre><code>addJobApplication(jobApplication) {
  this.jobApplications.push(jobApplication);
}</code></pre><p>We will call this method after collecting the form data to store the new application in our array.</p><img src="https://miro.medium.com/v2/0*rPAbD5xQ9c7LtEsg" alt="Adding new job applications to the class" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="616380a1-7090-4d6a-86b7-d900b212b311" data-toc-id="616380a1-7090-4d6a-86b7-d900b212b311"><strong>Displaying Job Applications</strong></h2><p>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:</p><pre><code>displayDataAndBuildTable() {
  const tableBody = document.querySelector('#table-body');
  tableBody.innerHTML = ''; // Clear existing data
  this.jobApplications.forEach((application, index) =&gt; {
    const row = `
      ${application.company}
      ${application.position}
      ${application.date}
      ${application.status}
      ${application.notes}
      Delete
    `;
    tableBody.innerHTML += row;
  });
}</code></pre><p>This function clears the table body and then loops through the job applications, adding a new row for each application.</p><img src="https://miro.medium.com/v2/0*SCALf0-akDrMkMb7" alt="Displaying job applications in a table" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="047ecd77-e7b8-4163-8fca-cb04dd8a2b0a" data-toc-id="047ecd77-e7b8-4163-8fca-cb04dd8a2b0a"><strong>Saving to Local Storage</strong></h2><p>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:</p><pre><code>saveJobApplicationsToLocalStorage() {
  localStorage.setItem('jobApplications', JSON.stringify(this.jobApplications));
}</code></pre><p>We will call this method each time we add a new application to update the local storage with the current state of our applications.</p><img src="https://miro.medium.com/v2/0*iIcuOa0x8cC_lnLw" alt="Saving job applications to local storage" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="b507a8a3-c065-49ff-bc5e-75ce4e3633cc" data-toc-id="b507a8a3-c065-49ff-bc5e-75ce4e3633cc"><strong>Loading from Local Storage</strong></h2><p>We also need to load the job applications from local storage when the page is loaded. We can create a method to handle this:</p><pre><code>loadJobApplicationsFromLocalStorage() {
  const storedJobs = JSON.parse(localStorage.getItem('jobApplications')) || [];
  this.jobApplications = storedJobs;
  this.displayDataAndBuildTable();
}</code></pre><p>This method retrieves the job applications from local storage and populates the table if there are any stored applications.</p><img src="https://miro.medium.com/v2/0*yckNzPfZgyzwauK4" alt="Loading job applications from local storage" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="40a30c83-2a89-48e9-9b14-9d0ba689523e" data-toc-id="40a30c83-2a89-48e9-9b14-9d0ba689523e"><strong>Adding a Delete Button</strong></h2><p>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 <code>displayDataAndBuildTable()</code> function. Now we need to implement the delete functionality:</p><pre><code>deleteJobApplication(index) {
  this.jobApplications.splice(index, 1);
  this.saveJobApplicationsToLocalStorage();
  this.displayDataAndBuildTable();
}</code></pre><p>This method removes the application at the specified index and updates local storage and the displayed table.</p><img src="https://miro.medium.com/v2/0*QqsG_2r3RGotdUlB" alt="Adding delete functionality to job applications" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="e761b520-f641-4a98-b4c0-c814e77f9747" data-toc-id="e761b520-f641-4a98-b4c0-c814e77f9747"><strong>Testing the Delete Button</strong></h2><p>We also need to add event listeners to the delete buttons to call our delete method when clicked:</p><pre><code>const deleteButtons = document.querySelectorAll('.delete-btn');
deleteButtons.forEach((button) =&gt; {
  button.addEventListener('click', (event) =&gt; {
    const index = event.target.dataset.index;
    this.deleteJobApplication(index);
  });
});</code></pre><p>This ensures that each delete button corresponds to the correct job application.</p><img src="https://miro.medium.com/v2/0*Njyi2bmD4SHqA9Xg" alt="Testing the delete button functionality" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" class="ki bh nr c" draggable="true"><h2 id="fd4c7488-b98b-4b67-a3ab-bcaf55764e92" data-toc-id="fd4c7488-b98b-4b67-a3ab-bcaf55764e92"><strong>Final Thoughts</strong></h2><img src="https://miro.medium.com/v2/resize:fit:700/1*WfquBD2_rBcBeE5c81pIMw.png" alt="" style="width: 700px; height: auto; cursor: pointer;" loading="lazy" width="700" height="394" class="bh ki nr c" draggable="true"><p>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.</p><p>For more resources and tutorials to further enhance your coding skills, visit <a target="_blank" rel="noopener ugc nofollow" class="af mi" href="https://www.precodecamp.com/all-products"><u>PreCodeCamp</u></a>.</p><p>Happy coding, and good luck with your job applications!</p><p></p><p></p>

Learn how to build a job application tracker using JavaScript classes. Stay organized and improve your coding skills with this practical project!

Job Hunting? Build This JavaScript Tracker to Stay Organized!

PreCodeCamp has tutorials and lessons covering a variety of topics, from programming to Bootcamp News

PreCodeCamp | Blog Articles

You need to know certain things as a Coding Boot Camp Learner. We will share news and tutorials.

Job Hunting? Build This JavaScript Tracker to Stay Organized!

Job Hunting? Build This JavaScript Tracker to Stay Organized!

Related Posts

Mastering Loops in JavaScript: Why, What, and How

Mastering Average Calculation in JavaScript

Create a Filtered List from an Input Field in JavaScript

A Culinary Journey in Code: Asynchronously Hamburger or Fries?

Understanding Type Coercion in JavaScript