Aexus Answers

Build A Job Alert Web App With JavaScript

Alex Johnson
-
Build A Job Alert Web App With JavaScript

Are you ready to create your very own job alert web app using vanilla JavaScript? This project is perfect for honing your web development skills and providing a useful tool for job seekers. We'll walk through the process of fetching job listings from a public API, displaying them in a user-friendly table, and adding essential features like a search bar and company logos. So, let's dive in and get started!

Setting Up the Foundation: HTML Structure

First things first, we need to set up our HTML structure. This will serve as the foundation for our web app. We'll create a simple layout with a search bar, a table to display job listings, and placeholders for company logos and apply links. HTML provides the structural framework for the app, acting as the skeleton upon which the content and functionality will be built. We'll start with a basic index.html file and include the necessary elements. The key components include a search input field where users can enter keywords to find specific jobs, and a table element that will dynamically display the job listings fetched from the API. Each column in the table will represent different job attributes such as company name, logo, job title, location, and an apply link. Proper structuring of the HTML ensures that the app is accessible and easy to navigate. Here’s a basic outline of what your HTML structure might look like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Alert App</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Job Alert App</h1>
        <input type="text" id="search-input" placeholder="Search for jobs...">
        <table id="job-table">
            <thead>
                <tr>
                    <th>Company</th>
                    <th>Logo</th>
                    <th>Title</th>
                    <th>Location</th>
                    <th>Apply</th>
                </tr>
            </thead>
            <tbody>
                <!-- Job listings will be inserted here -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

This structure includes a basic layout with a search input and a table. The table headers define the columns we'll populate with data from the API. The script.js file will contain our JavaScript code to fetch and display the job listings. The container div helps in centering and styling the content on the page.

Styling with CSS: Making It Look Good

Now that we have our HTML structure in place, let's make it visually appealing with CSS. We'll create a style.css file to add styles to our elements. CSS is crucial for creating a visually appealing and user-friendly interface, ensuring that the job listings are presented in an organized and easy-to-read manner. The styles will ensure that the app is responsive, meaning it adapts to different screen sizes, providing a consistent experience across devices. We’ll focus on creating a clean and modern look that enhances the user experience. This includes styling the search bar, table, and other elements to make them visually cohesive and easy to interact with. Here’s an example of some basic CSS you might use:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    width: 80%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

#search-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

#job-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

#job-table th, #job-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

#job-table th {
    background-color: #f0f0f0;
    font-weight: bold;
}

#job-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

This CSS provides a basic styling for the body, container, search input, and job table. You can customize these styles to match your preferred design. Remember to link this CSS file in your HTML to apply the styles. Good styling practices not only make the app visually appealing but also improve its usability. For instance, using a clear and readable font, providing sufficient spacing, and employing a consistent color scheme can significantly enhance the user experience.

Fetching Job Listings: JavaScript Magic

Now comes the exciting part: fetching job listings using JavaScript. We'll use the Remotive API, a public API that provides a list of remote jobs. We'll write JavaScript code to fetch data from the API based on user search input and display it in our table. JavaScript is the heart of our web app, enabling us to fetch data from the Remotive API, dynamically update the HTML table with job listings, and implement the search functionality. We'll use the fetch API to make HTTP requests to the Remotive API, retrieve the job data, and then parse the JSON response. This data will then be used to populate the table with the job details. Error handling is also crucial to ensure that the app gracefully handles any issues with the API request. Here’s how you can do it:

const searchInput = document.getElementById('search-input');
const jobTableBody = document.querySelector('#job-table tbody');

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    fetchJobs(searchTerm);
});

async function fetchJobs(searchTerm = '') {
    const apiUrl = `https://remotive.com/api/remote-jobs?search=${searchTerm}`;

    try {
        const response = await fetch(apiUrl);
        const data = await response.json();
        displayJobs(data.jobs);
    } catch (error) {
        console.error('Error fetching jobs:', error);
        jobTableBody.innerHTML = '<tr><td colspan="5">Failed to fetch jobs. Please try again later.</td></tr>';
    }
}

function displayJobs(jobs) {
    jobTableBody.innerHTML = ''; // Clear previous results

    if (jobs.length === 0) {
        jobTableBody.innerHTML = '<tr><td colspan="5">No jobs found matching your search.</td></tr>';
        return;
    }

    jobs.forEach(job => {
        const row = document.createElement('tr');

        const companyName = document.createElement('td');
        companyName.textContent = job.company_name;

        const logo = document.createElement('td');
        const logoImg = document.createElement('img');
        logoImg.src = job.company_logo;
        logoImg.alt = job.company_name + ' Logo';
        logoImg.style.width = '50px'; // Adjust size as needed
        logo.appendChild(logoImg);

        const title = document.createElement('td');
        title.textContent = job.title;

        const location = document.createElement('td');
        location.textContent = job.location;

        const apply = document.createElement('td');
        const applyLink = document.createElement('a');
        applyLink.href = job.url;
        applyLink.textContent = 'Apply Now';
        applyLink.target = '_blank'; // Open in new tab
        apply.appendChild(applyLink);

        row.appendChild(companyName);
        row.appendChild(logo);
        row.appendChild(title);
        row.appendChild(location);
        row.appendChild(apply);

        jobTableBody.appendChild(row);
    });
}

// Fetch jobs on initial load
fetchJobs();

This JavaScript code fetches job listings from the Remotive API based on the search input and displays them in the table. It also includes error handling to display a message if the API request fails. The displayJobs function dynamically creates table rows and populates them with the job data. By using async and await, we ensure that the API request is handled properly and that the data is fully loaded before being displayed. Additionally, the use of forEach simplifies the process of iterating through the job listings and creating the corresponding table rows.

Adding Search Functionality: Making It Interactive

To make our app more interactive, we'll add a search bar that allows users to search for specific job roles or keywords. We'll use JavaScript to listen for changes in the search input and update the job listings accordingly. Implementing a search bar enhances the user experience by allowing job seekers to quickly find relevant job opportunities based on keywords or job titles. This involves adding an event listener to the search input field, which triggers a function whenever the user types in the input box. The function then filters the job listings based on the search term and updates the table with the filtered results. Here’s the code:

searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    fetchJobs(searchTerm);
});

This code listens for input in the search bar and calls the fetchJobs function with the search term. The fetchJobs function then updates the job listings based on the search term. This provides a real-time search experience, allowing users to quickly find the jobs they're looking for. By converting the search term to lowercase, we ensure that the search is case-insensitive, providing more accurate results.

Making It Responsive: Adapting to Different Devices

To ensure our app works well on different devices, we need to make it responsive. We can use CSS media queries to adjust the layout and styles based on the screen size. Creating a responsive design ensures that the job alert web app is accessible and usable on a variety of devices, including desktops, tablets, and smartphones. This involves using CSS media queries to adjust the layout, font sizes, and other styles based on the screen size. By making the app responsive, we provide a consistent user experience regardless of the device used to access it. Here’s an example of how to use media queries in your CSS:

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 10px;
    }

    #job-table th, #job-table td {
        padding: 8px;
        font-size: 12px;
    }
}

This CSS adjusts the container width and table cell padding for screens smaller than 768px, making the app more readable on smaller devices. You can add more media queries to further customize the layout for different screen sizes. Responsive design is essential for providing a seamless user experience on all devices.

Conclusion

Congratulations! You've successfully built a job alert web app using vanilla JavaScript. This project demonstrates your ability to fetch data from an API, display it in a user-friendly format, and add interactive features like a search bar. You can further enhance this app by adding features like pagination, sorting, and user authentication. Happy coding!

For more information on web development best practices, visit Mozilla Developer Network. This resource provides comprehensive documentation and tutorials on HTML, CSS, and JavaScript.

You may also like