SEO Audit Tool

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>SEO Audit Tool</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <div class="container">

        <h1>SEO Audit Tool</h1>

        <p>Enter a website URL to analyze its SEO aspects.</p>


        <input type="text" id="urlInput" placeholder="Enter URL (e.g., https://example.com)">

        <button id="auditBtn">Audit Website</button>


        <div id="results" class="results">

            <!-- SEO results will be displayed here -->

        </div>


        <div class="buttons">

            <button id="themeToggle">🌙</button>

        </div>

    </div>


    <script src="script.js"></script>

</body>

</html>

/* General Styles */
body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transition: background 0.3s ease;
}

/* Container */
.container {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    width: 90%;
    max-width: 600px;
}

/* Heading */
h1 {
    color: #333;
}

/* Input Field */
input {
    padding: 10px;
    width: 70%;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

/* Button */
button {
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background: #28a745;
    color: white;
    transition: background 0.3s ease;
}

button:hover {
    background: #218838;
}

/* Results Section */
.results {
    margin-top: 20px;
    text-align: left;
}

.results div {
    padding: 10px;
    margin: 5px;
    border-radius: 5px;
    background-color: #f0f8ff;
    font-size: 14px;
}

.results div.error {
    background-color: #f8d7da;
}

.results div.success {
    background-color: #d4edda;
}

/* Dark Mode */
.dark-mode {
    background: #222;
    color: white;
}

.dark-mode .container {
    background: #333;
}

.dark-mode button {
    background: #007bff;
}

.dark-mode button:hover {
    background: #0056b3;
}

.dark-mode .results div {
    background-color: #444;
}

.dark-mode .results div.error {
    background-color: #f8d7da;
}

.dark-mode .results div.success {
    background-color: #d4edda;
}

/* Responsive */
@media (max-width: 500px) {
    input, button {
        width: 100%;
    }
}
document.getElementById('auditBtn').addEventListener('click', function () {
    let url = document.getElementById('urlInput').value;
    if (!url) {
        alert("Please enter a valid URL.");
        return;
    }

    fetch(url)
        .then(response => response.text())
        .then(data => analyzeSEO(data, url))
        .catch(error => {
            alert("Error fetching the website. Please check the URL.");
        });
});

function analyzeSEO(htmlContent, url) {
    let results = document.getElementById('results');
    results.innerHTML = '';

    // Title Tag Check
    let titleMatch = htmlContent.match(/<title>(.*?)<\/title>/);
    let titleResult = titleMatch ? `<div class="success">Title Tag: <strong>${titleMatch[1]}</strong></div>` 
                                 : `<div class="error">Title Tag is missing!</div>`;
    
    // Meta Description Check
    let metaDescMatch = htmlContent.match(/<meta name="description" content="(.*?)">/);
    let metaDescResult = metaDescMatch ? `<div class="success">Meta Description: <strong>${metaDescMatch[1]}</strong></div>`
                                       : `<div class="error">Meta Description is missing!</div>`;

    // Heading Tags Check
    let h1Match = htmlContent.match(/<h1[^>]*>(.*?)<\/h1>/);
    let h1Result = h1Match ? `<div class="success">H1 Tag: <strong>${h1Match[1]}</strong></div>`
                           : `<div class="error">H1 Tag is missing!</div>`;

    let headingResults = [titleResult, metaDescResult, h1Result];
    results.innerHTML = headingResults.join("");

    // Print Results
    let siteInfo = `<h2>SEO Audit Results for: <a href="${url}" target="_blank">${url}</a></h2>`;
    results.insertAdjacentHTML('afterbegin', siteInfo);
}

document.getElementById('themeToggle').addEventListener('click', function () {
    document.body.classList.toggle('dark-mode');
    this.textContent = document.body.classList.contains('dark-mode') ? '☀️' : '🌙';
});

Contact Form