Job Search App (API) | HTML, CSS & JavaScript

Job Search App (API) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #26

Project Overview

A Job Search App built using HTML, CSS, and JavaScript that allows users to search and browse job listings based on keywords.
The application fetches real-time job data from a public jobs API and dynamically displays relevant openings, making it suitable for frontend-only applications.

Key Features

Search jobs by role, skill, or keyword.
Fetches real-time job listings using a public API.
Displays job title, company name, and location.
Provides direct links to full job descriptions.
Handles loading and no-result scenarios gracefully.
Clean, responsive, and user-friendly interface.
No API key required.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Job Search App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="job-container">
    <h2>Job Search</h2>

    <div class="search-box">
      <input
        type="text"
        id="searchInput"
        placeholder="Search jobs (e.g. frontend, react)"
      />
      <button onclick="getJobs()">Search</button>
    </div>

    <div id="jobList" class="job-list"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 40px;
}

.job-container {
  background: #ffffff;
  width: 440px;
  padding: 25px;
  border-radius: 14px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

h2 {
  text-align: center;
  margin-bottom: 15px;
}

.search-box {
  display: flex;
  margin-bottom: 15px;
}

.search-box input {
  flex: 1;
  padding: 10px;
  border-radius: 6px 0 0 6px;
  border: 1px solid #ccc;
}

.search-box button {
  padding: 10px 16px;
  border: none;
  border-radius: 0 6px 6px 0;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

.job-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.job-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
}

.job-card h4 {
  font-size: 15px;
  margin-bottom: 6px;
}

.job-card p {
  font-size: 13px;
  color: #555;
  margin-bottom: 6px;
}

.job-card a {
  font-size: 13px;
  color: #4f46e5;
  text-decoration: none;
}

.error {
  color: red;
  text-align: center;
}

Javascript Code

const jobList = document.getElementById("jobList");

function getJobs() {
  const query = document.getElementById("searchInput").value.trim() || "developer";

  jobList.innerHTML = "Loading...";

  fetch(`https://remotive.com/api/remote-jobs?search=${encodeURIComponent(query)}`)
    .then(res => res.json())
    .then(data => {
      if (!data.jobs || data.jobs.length === 0) {
        jobList.innerHTML = `<p class="error">No jobs found</p>`;
        return;
      }

      jobList.innerHTML = "";

      data.jobs.slice(0, 5).forEach(job => {
        jobList.innerHTML += `
          <div class="job-card">
            <h4>${job.title}</h4>
            <p><strong>Company:</strong> ${job.company_name}</p>
            <p><strong>Location:</strong> ${job.candidate_required_location}</p>
            <a href="${job.url}" target="_blank">View Job</a>
          </div>
        `;
      });
    })
    .catch(() => {
      jobList.innerHTML = `<p class="error">Error loading jobs</p>`;
    });
}