HTTP Status Code Checker A Tool

Overview

The HTTP Status Code Checker is a web-based tool designed to analyze the HTTP status codes of any given URL. It allows users to check for redirect chains (301, 302), identify broken links (404), and troubleshoot server errors (500). This tool is particularly useful for web developers, SEO specialists, and anyone interested in understanding the behavior of URLs.

Features

• Check the HTTP status code of any URL.

• Trace redirect paths and chains.

• Identify broken links and server errors.

• User-friendly interface with loading indicators and error handling.

Technologies Used

• HTML5

• CSS (Tailwind CSS)

• JavaScript

• Font Awesome for icons

• Google Analytics for tracking

Setup Instructions

1. Clone the Repository:

   git clone <repository-url>
   cd <repository-directory>

2. Open the HTML File:

   Open index.html in your preferred web browser.

3. Google Analytics:

   Replace G-XXXXXXXXXX in the script tags with your actual Google Analytics ID to enable tracking.

4. CORS Proxy:

   The application uses a free CORS proxy (https://api.allorigins.win/get?url=) to bypass browser security restrictions. For production use, consider setting up a self-hosted proxy.

Usage Instructions

1. Enter a URL:

   In the input field, enter the URL you wish to check (e.g., https://example.com).

2. Check Status:

   Click the "Check Status" button to initiate the status check.

3. View Results:

   The results will display the final destination URL, its HTTP status code, and a description. If there are redirects, the redirect chain will also be shown.

4. Try a Sample Redirect:

   Click the "Try a sample redirect" button to test with a known redirect URL (e.g., http://google.com).

5. Reset:

   After viewing results, you can click "Check Another URL" to reset the form and check a different URL.

Code Structure

HTML Structure

• Head Section: Contains meta tags for SEO, links to external stylesheets, and scripts for Google Analytics and Tailwind CSS.

• Body Section:

  • Main container for the application.

  • Input form for URL submission.

  • Results area for displaying loading indicators, errors, and success messages.

  • Footer with links to related tools.

CSS Styles

• Inlined CSS styles for layout and design, including styles for buttons, input fields, and status badges.

• Responsive design using Tailwind CSS classes.

JavaScript Functionality

• Event Listeners:

  • Handles form submission and button clicks.

• Fetch API:

  • Uses the Fetch API to retrieve HTTP status codes and redirect information.

• State Management:

  • Manages loading, error, and success states to provide feedback to the user.

Key Functions

• traceRedirects(initialUrl): Traces the redirect chain for the provided URL.

• displayResults(chain): Displays the results of the URL check, including the final destination and redirect chain.

• showLoadingState(), showErrorState(message), showSuccessState(): Manage UI states for loading, error, and success.

Example

To check the status of a URL:

1. Enter https://example.com in the input field.

2. Click "Check Status".

3. View the results displayed below the form.

Related Tools

• URL Redirect Checker

• Broken Link Checker

• Robots.txt Generator

• Website Crawler