Developing a RESTful API to Compare Salaries

Implement a Node.js server with Express to fetch and compare salary data from various sources, empowering developers with information to break through pay ceilings.

const express = require('express');
const axios = require('axios');
const app = express();
const PORT = process.env.PORT || 3000;

// Middleware to parse JSON bodies
app.use(express.json());

// Route to fetch and compare salaries
app.post('/compare-salaries', async (req, res) => {
  try {
    const { jobs } = req.body;
    // Store promises of salary data requests
    const salaryPromises = jobs.map(job => axios.get(`https://salary.api.example.com/${job}`));
    // Resolve all promises and extract salary data
    const salaryData = await Promise.all(salaryPromises);
    const salaries = salaryData.map(response => response.data.salary);
    res.json({ salaries });
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

Node.js server using Express framework to set up an endpoint for comparing salaries. It posts to '/compare-salaries', expecting a body with job titles, fetching salary data from an example API, and then returns the salaries in response.

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Salary Comparison</title>
</head>
<body>

  <form id='salary-form'>
    <input type='text' id='job1' placeholder='Job Title 1'>
    <input type='text' id='job2' placeholder='Job Title 2'>
    <button type='submit'>Compare Salaries</button>
  </form>

  <script src='app.js'></script>
</body>
</html>

HTML form to input two job titles to be compared. It includes a simple structure with placeholders indicating where to type the job titles.

document.getElementById('salary-form').addEventListener('submit', function(event) {
  event.preventDefault();

  const job1 = document.getElementById('job1').value;
  const job2 = document.getElementById('job2').value;

  // Perform a POST request to the server
  fetch('/compare-salaries', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ jobs: [job1, job2] })
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
});

JavaScript handling the form submission, preventing the default form action, grabbing the job titles, and performing a POST request to the server's '/compare-salaries' route.

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

#salary-form {
  display: flex;
  justify-content: space-around;
  margin: 20px;
}

#salary-form input[type='text'] {
  padding: 10px;
  margin-right: 10px;
}

#salary-form button {
  padding: 10px;
  cursor: pointer;
}

CSS styling for the HTML form, including box-sizing, font, layout for the form, styling for the input fields, and the submit button.