URL Status Checker

by Faisal Khan Janjua

HTML

<div class="container">
        <h1>URL Status Checker</h1>
        
        <div>
            <label for="urls"><b>Enter URLs (one per line):</b></label>
            <textarea id="urls"></textarea>
        </div>
        
        <button id="checkUrls">Check URLs</button>
        
        <div class="progress" id="progress" style="display: none;">
            Checking URLs... <span id="progressText">0/0</span>
        </div>
        
        <div class="results">
            <h3>Results:</h3>
            <div id="resultsContainer"></div>
        </div>
    </div>

CSS

body { font-family: Arial, sans-serif; margin: 20px; }
.container { max-width: 800px; margin: 0 auto; }
textarea { width: 100%; height: 100px; margin: 10px 0; }
button { padding: 10px 20px; margin: 10px 0; background: #007cba; color: white; border: none; cursor: pointer; }
button:hover { background: #005a87; }
button:disabled { background: #ccc; cursor: not-allowed; }
.results { margin-top: 20px; }
.url-item { padding: 8px; margin: 5px 0; border-radius: 4px; }
.success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.loading { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; }
.progress { margin: 10px 0; }

JavaScript

document.getElementById('checkUrls').addEventListener('click', checkAllUrls);

async function checkAllUrls() {
    const urlsText = document.getElementById('urls').value;
    const urls = urlsText.split('\n')
        .map(url => url.trim())
        .filter(url => url.length > 0);
    
    if (urls.length === 0) {
        alert('Please enter at least one URL');
        return;
    }

    const button = document.getElementById('checkUrls');
    const progress = document.getElementById('progress');
    const progressText = document.getElementById('progressText');
    const resultsContainer = document.getElementById('resultsContainer');
    
    button.disabled = true;
    progress.style.display = 'block';
    resultsContainer.innerHTML = '';
    
    const brokenUrls = [];
    const workingUrls = [];
    const unknownUrls = [];
    let proxyRateLimited = false;
    
    for (let i = 0; i < urls.length; i++) {
        const url = urls[i];
        progressText.textContent = `${i + 1}/${urls.length}`;
        
        // Create loading element
        const loadingElement = document.createElement('div');
        loadingElement.className = 'url-item loading';
        loadingElement.textContent = `⏳ Checking: ${url}`;
        resultsContainer.appendChild(loadingElement);
        
        try {
            const result = await checkUrlStatus(url, proxyRateLimited);
            
            // Check if we got rate limited by proxy
            if (result.status === 429) {
                proxyRateLimited = true;
                // Retry without proxy
                const retryResult = await checkUrlStatus(url, true);
                result.status = retryResult.status;
                result.finalUrl = retryResult.finalUrl;
                result.redirected = retryResult.redirected;
                result.verified = retryResult.verified;
            }
            
            // Remove loading element
           ...