Server Status Checker A Tool

 

Overview

The Server Status Checker is a web-based tool designed to check the live status of any web server by analyzing its HTTP status code and response time. It determines if a website is online or down, providing a user-friendly interface for web developers, SEO specialists, and website owners to monitor server health.

Features

• Check the HTTP status code of any URL.
• Measure server response time in milliseconds.
• Display server status (Online or Down/Error) with visual indicators.
• User-friendly interface with loading animations, error handling, and a sample URL option.
• Responsive design for desktop and mobile users.

Technologies Used

• HTML5: For semantic structure.
• CSS (Tailwind CSS): For responsive styling.
• JavaScript: For fetching server status and managing UI states.
• Font Awesome: For icons.
• Google Analytics: For tracking (placeholder ID).
• Google Fonts (Poppins): For typography.
• CORS Proxy: Uses https://api.allorigins.win/get?url= for cross-origin requests.

Setup Instructions

1. Clone the Repository (if applicable):
   bash

   git clone <repository-url> cd <repository-directory>
2. Open the HTML File:
   • Save the provided code as index.html.
   • Open it in a web browser.
3. Google Analytics:
   • Replace G-XXXXXXXXXX with your actual Google Analytics ID in the <script> tags to enable tracking.
4. CORS Proxy:
   • The tool uses https://api.allorigins.win/get?url= to bypass CORS restrictions. For production, consider a self-hosted proxy for reliability.

Usage Instructions

1. Enter a URL:
   • Input a URL (e.g., https://www.example.com) in the provided field.
2. Check Status:
   • Click “Check Status” to analyze the server’s status and response time.
3. View Results:
   • See the server status (Online or Down/Error), HTTP status code, description, and response time.
4. Try a Sample:
   • Click “Try a sample (github.com)” to test with https://github.com.
5. Reset:
   • Click “Check Another URL” or “Try Again” (on error) to clear the form and check another URL.

Code Structure

HTML Structure:

• Head Section: Includes SEO meta tags, Tailwind CSS, Font Awesome, Google Fonts, and Google Analytics scripts.
• Body Section:
  • Main container with a form for URL input and a results area.
  • Results include loading indicator, error display, and success display with status, response time, and HTTP status cards.
  • Footer with links to related tools.

CSS Styles:

• Uses Tailwind CSS for responsive design.
• Inlined custom styles for the main container, buttons, input fields, status badges (color-coded by status code range), and loading spinner.
• Hover animations on the main container for visual appeal.

JavaScript Functionality:

• Event Listeners: Handle form submission, sample button, and reset button clicks.
• Fetch API: Uses a CORS proxy to fetch server status and measure response time.
• State Management: Manages loading, error, and success states.
• Key Functions:
  • fetchStatus(url): Fetches server status and calculates response time.
  • displayResults(statusData, duration): Renders status, response time, and HTTP code.
  • getStatusInfo(code): Maps HTTP status codes to descriptions and CSS classes.
  • showLoadingState(), showErrorState(message), showSuccessState(): Update UI states.
  • resetUI(): Resets the form and UI.

Example

1. Check a Live Site:
   • Input: https://github.com
   • Click “Check Status”
   • Results:
     • Overall Status: Server is Online
     • URL: https://github.com
     • Response Time: 250 ms (example)
     • HTTP Status: 200 OK
2. Check a Down Site:
   • Input: https://example.com/nonexistent
   • Results:
     • Overall Status: Server is Down / Has Error
     • URL: https://example.com/nonexistent
     • Response Time: 300 ms (example)
     • HTTP Status: 404 Not Found
3. Sample Test:
   • Click “Try a sample (github.com)”
   • Results: As above for https://github.com.

Related Tools

• Uptime Monitoring Tools
• Performance Monitoring
• Error Tracking Tools
• Server Log Analyzer