index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="./assets/favicon.png" type="image/png">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.src.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.js"></script>
    <script src="script.js"></script>
    <title>Leetcode Compensation</title>
</head>

<style>
    .dropdown-container {
      position: relative;
      display: inline-block;
    }
    .dropdown {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      margin-top: 20px;
      margin-left: -80px;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      border: 1px solid #ddd;
      border-radius: 4px;
      padding: 12px 16px;
      z-index: 1;
    }
    .show {display: block;}
    .custom-input-width {
        width: 60px;
    }
</style>

<body>
    <div class="container" style="font-size: 12px;">
        <div class="mt-3">
            <blockquote class="blockquote text-center" style="font-size: 16px;">
                <div>Leetcode Compensation
                    <a href="https://github.com/kuutsav/leetcode-compensation/stargazers">
                        <img alt="star this repo"
                            src="https://img.shields.io/github/stars/kuutsav/leetcode-compensation?=social">
                    </a>
                </div>
                <footer class="blockquote-footer mt-0" style="font-size: 14px;">From
                    <cite title="Source Title">
                        <a href="https://leetcode.com/discuss/compensation">leetcode/compensation</a>
                    </cite>
                    / <span style="color: green;">updated weekly ↺</span>
                </footer>
            </blockquote>
        </div>
        <div class="row">
            <div id="salaryBarPlot" class="col-12 col-md-8" style="height:300px;"></div>
            <div id="yoeBucketBoxPlot" class="col-12 col-md-4" style="height:300px;"></div>
        </div>
        <div class="row">
            <div id="companyBoxPlot" class="col-12 col-md-8" style="height:300px;"></div>
            <div id="companyBarPlot" class="col-12 col-md-4" style="height:300px;"></div>
        </div>
        <div id="statsStr" class="row m-0 mt-3 p-2 border-top border-bottom bg-light justify-content-center">
        </div>
        <div class="row mt-3">
            <div class="col-12 col-md-6 d-flex align-items-center justify-content-start">
                <input type="text" id="searchInput" class="form-control form-control-sm" placeholder="Company/Location/Role" style="max-width: 240px;">
                <button id="searchButton" class="ms-2 px-2 btn btn-primary btn-sm">Search</button>
                <button class="ms-2 px-2 btn btn-light btn-sm" id="filterButton" style="min-width: 80px;">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M3 4.6C3 4.03995 3 3.75992 3.10899 3.54601C3.20487 3.35785 3.35785 3.20487 3.54601 3.10899C3.75992 3 4.03995 3 4.6 3H19.4C19.9601 3 20.2401 3 20.454 3.10899C20.6422 3.20487 20.7951 3.35785 20.891 3.54601C21 3.75992 21 4.03995 21 4.6V6.33726C21 6.58185 21 6.70414 20.9724 6.81923C20.9479 6.92127 20.9075 7.01881 20.8526 7.10828C20.7908 7.2092 20.7043 7.29568 20.5314 7.46863L14.4686 13.5314C14.2957 13.7043 14.2092 13.7908 14.1474 13.8917C14.0925 13.9812 14.0521 14.0787 14.0276 14.1808C14 14.2959 14 14.4182 14 14.6627V17L10 21V14.6627C10 14.4182 10 14.2959 9.97237 14.1808C9.94787 14.0787 9.90747 13.9812 9.85264 13.8917C9.7908 13.7908 9.70432 13.7043 9.53137 13.5314L3.46863 7.46863C3.29568 7.29568 3.2092 7.2092 3.14736 7.10828C3.09253 7.01881 3.05213 6.92127 3.02763 6.81923C3 6.70414 3 6.58185 3 6.33726V4.6Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
                    Filters
                </button>
                <div>
                    <div id="filterDropdown" class="dropdown p-3">
                        <div>
                            <p class="m-0 mb-1"><b>Years of Experience:</b></p>
                            <div class="row g-3 align-items-center">
                                <div class="col-auto"><label for="yoe-min" class="col-form-label">Min:</label></div>
                                <div class="col-auto"><input type="number" id="yoeMin" name="yoe-min" class="form-control form-control-sm custom-input-width" min="0" max="30" value="0"></div>
                                <div class="col-auto"><label for="yoe-max" class="col-form-label">Max:</label></div>
                                <div class="col-auto"><input type="number" id="yoeMax" name="yoe-max" class="form-control form-control-sm custom-input-width" min="0" max="30" value="30"></div>
                            </div>
                        </div>
                        <div class="mt-3">
                            <p class="m-0 mb-1"><b>Total Salary (₹ LPA):</b></p>
                            <div class="row g-3 align-items-center">
                                <div class="col-auto"><label for="salary-min" class="col-form-label">Min:</label></div>
                                <div class="col-auto"><input type="number" id="salaryMin" name="salary-min" class="form-control form-control-sm custom-input-width" min="1" max="200" value="1"></div>
                                <div class="col-auto"><label for="salary-max" class="col-form-label">Max:</label></div>
                                <div class="col-auto"><input type="number" id="salaryMax" name="salary-max" class="form-control form-control-sm custom-input-width" min="1" max="200" value="200"></div>
                            </div>
                        </div>

                        <div class="mt-3 d-flex" >
                            <input type="checkbox" id="interviewExpFilterCheckbox">
                            <label for="interviewExpFilterCheckbox" style="margin-left: 8px;"><b>Includes Interview Experience</b></label>
                        </div>

                        <div class="d-flex justify-content-between mt-3">
                            <button id="filter" class="px-2 btn btn-primary btn-sm">Apply</button>
                            <button id="clearFiltersButton" class=" btn btn-sm" style="background-color: grey; border-color: grey; color: white;">Clear Filters</button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="col-12 col-md-6 d-flex align-items-center justify-content-md-end justify-content-start mt-2 mt-md-0">
                <select id="pageSelect" class="form-select form-select-sm" style="max-width: 72px;"></select>
                <button id="prevPage" class="ms-2 px-2 btn btn-secondary btn-sm">Previous</button>
                <button id="nextPage" class="ms-2 px-2 btn btn-primary btn-sm">Next</button>
            </div>
        </div>
        <div id="offersTable"></div>
    </div>

    <script>
        function toggleDropdown() {
            var filterDropdown = document.getElementById('filterDropdown');
            if (filterDropdown.style.display !== 'block') {
                filterDropdown.style.display = 'block';
            } else {
                filterDropdown.style.display = 'none';
            }
        }
        function setupOutsideClickListener() {
            document.addEventListener('click', function(event) {
                var filterButton = document.getElementById('filterButton');
                if (filterButton.contains(event.target)) {
                    toggleDropdown();
                    return;
                }
                var filterDropdown = document.getElementById('filterDropdown');
                if (filterDropdown && !filterDropdown.contains(event.target)) {
                    filterDropdown.style.display = 'none';
                }
            });
        }
        setupOutsideClickListener();
    </script>
</body>

</html>