template-job-board

by sheet2api

HTML

<!doctype html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>Job Board</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .bg-paid-ad {
            background: #fff7b9;
        }
    </style>

</head>

<body class="bg-light">
    <div id="menu-container"></div>
    <div class="container" id="jobs-container">
        <!-- This gets replaced when we have some jobs -->
        <div class="text-center p-5 m-5">
            <div class="text-muted p-2">Loading jobs...</div>
            <div class="spinner-border text-primary" role="status"></div>
        </div>
    </div>
    <div class="container" id="footer">
        <div class="text-muted text-center p-3">Powered by <a href="https://sheet2api.com" target="_blank">sheet2api</a>
        </div>
    </div>

    <script>
        var jobs = [];
        var categories = [];
        var title = '';

        // Called once the page has loaded
        document.addEventListener('DOMContentLoaded', function (event) {
            loadJobs();
            loadCategories();
        });

        // Replace this with your sheet2api API URL
        var projectUrl = 'https://sheet2api.com/v1/FgI6zV8qT121/template-job-board';

        function loadJobs() {
            fetch(projectUrl + '/jobs')
                .then((response) => response.json())
                .then(json => {
                    this.jobs = json;
                    showAllJobs();
                });
        }

        function loadCategories() {
            fetch(projectUrl + '/categories')
                .then((response) => response.json())
                .then(json => {
                    this.categories = json;
                    outputCategories();
                })
        }

...