Building a Simple Job Finder Tool Using RapidAPI’s Free API

AI, IT

Introduction

In today’s competitive job market, finding suitable employment opportunities can be challenging. However, with the power of technology, we can leverage APIs to create tools that streamline the job search process. In this article, we will explore how to build a simple job finder tool using a free API from RapidAPI. By combining HTML and JavaScript, we can create a user-friendly application that fetches and displays job listings, empowering job seekers to discover relevant opportunities with ease.

rapidapi

Understanding RapidAPI

RapidAPI (https://rapidapi.com/hub) is a popular API marketplace that provides access to a wide range of APIs, including job search APIs. These APIs allow developers to retrieve job-related data, such as job titles, descriptions, locations, and more. For this project, we will be utilizing a free job search API available on RapidAPI to retrieve job listings.

Setting Up the HTML Structure

To begin, let’s create the basic structure of our job finder tool using HTML. We will need an input field to enter search queries, a search button, and a results section to display the retrieved job listings. You can use the following code as a starting point:

<h4> Fast and Simple Job Search for jobs posted on LinkedIn, Indeed, Glassdoor, ZipRecruiter, BeBee and many others</h4> 
<label for="inputText">Enter Text (Example: Automation Testing in Chennai):</label> 
<input type="text" id="inputText"> 
<button id="fetchButton">Fetch Jobs</button> 
 
<label for="outputTextArea">Output:</label> 
<textarea id="outputTextArea" rows="10" cols="50" readonly=""></textarea> 
 
<button id="downloadButton">Download (output.txt)</button> 
 
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 
<script src="get_jobs.js"></script> 
<script src="downloadtotext.js"></script>

Implementing JavaScript Functionality

get_jobs.js

Next, let’s add the JavaScript code to fetch job listings based on the user’s search query and display them on the page. Create new files named get_jobes.js and downloadtotext.js and add the following code:

document.getElementById('fetchButton').addEventListener('click', fetchData);

async function fetchData() {
  const inputText = document.getElementById('inputText').value;
  const outputTextArea = document.getElementById('outputTextArea');

  const options = {
    method: 'GET',
    url: 'https://jsearch.p.rapidapi.com/search',
    params: {
      query: inputText,
      page: '1',
      num_pages: '1'
    },
    headers: {
      'X-RapidAPI-Key': 'YOUR RAPID API',
      'X-RapidAPI-Host': 'jsearch.p.rapidapi.com'
    }
  };

  try {
    const response = await axios.request(options);
    const data = response.data;

    console.log(data); // Print the response data to the console for debugging

    // Parse the data and format it for display
    const formattedData = formatData(data);

    outputTextArea.value = formattedData;
  } catch (error) {
    console.error(error); // Print the complete error object to the console for debugging
    outputTextArea.value = 'Error: ' + error.message;
  }
}

function formatData(data) {
  let formattedData = '';

  if (data.status === 'OK' && Array.isArray(data.data)) {
    data.data.forEach(job => {
      formattedData += 'Job Title: ' + job.job_title + '\n';
      formattedData += 'Job Employment Type: ' + job.job_employment_type + '\n'; 
      formattedData += 'Employer: ' + job.employer_name + '\n';
      formattedData += 'Employer Website: ' + job.employer_website + '\n';
      formattedData += 'Job Title: ' + job.job_title + '\n';  
      formattedData += 'Job Description: ' + job.job_description + '\n';
         formattedData += 'Job Apply Link: ' + job.job_apply_link + '\n';
      formattedData += 'Job Quality Score: ' + job.job_apply_quality_score + '\n';
      formattedData += 'Job Expiration Date and Time (UTC): ' + job.job_offer_expiration_datetime_utc + '\n';
       
       
      formattedData += '---------------------------------------------------------------------------------\n';
    });
  } else {
    formattedData = 'No results found.';
  }

  return formattedData;
}

downloadtotext.js

// downloadtotext.js

function downloadToTextFile() {
const content = document.getElementById(‘outputTextArea’).value;
const formattedContent = formatContent(content);
const blob = new Blob([formattedContent], { type: ‘text/plain’ });
const url = URL.createObjectURL(blob);

const a = document.createElement(‘a’);
a.href = url;
a.download = ‘output.txt’;
a.click();

URL.revokeObjectURL(url);
}

function formatContent(content) {
const lines = content.split(‘\n’);
const formattedLines = lines.map(line => line.trim()).join(‘\r\n’);
return formattedLines;

}
document.getElementById(‘downloadButton’).addEventListener(‘click’, downloadToTextFile);

Obtaining the RapidAPI Key

To make requests to the job search API, you need to obtain an API key from RapidAPI. Visit the RapidAPI website (https://www.rapidapi.com) and sign up for a free account. Once registered, search for the job search API you want to use and subscribe to the free plan. RapidAPI will provide you with an API key that you can insert into the JavaScript code where indicated.

Testing the Job Finder Tool

With everything set up, open the HTML file in a web browser. Enter a job title or keyword in the search input field and click the search button. The JavaScript code will make a request to the RapidAPI endpoint, passing the search query and your API key. The response containing job listings will be displayed in the results section of the page.

Conclusion

Creating a simple job finder tool using RapidAPI’s free job search API is a powerful way to assist job seekers in finding relevant employment opportunities. By combining HTML and JavaScript, we can easily build an application that retrieves job listings based on user input. The flexibility of APIs allows developers to integrate various functionalities and tailor the tool to suit specific requirements. With this knowledge, you can expand upon the provided code and enhance the job finder tool to further assist individuals in their job search endeavors.

Link to Project: https://techhorizoncity.com/job-finder/

Further Reading: https://techhorizoncity.com/building-a-crypto-website-using-binance-api/

RapidAPI Link: https://rapidapi.com/hub

Translate »