<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Article Checker</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>Article Checker</h1>
    </header>
    <main>
        <section class="article-input">
            <textarea id="article-text" placeholder="Paste article text here"></textarea>
        </section>
        <section class="checker-options">
            <label>
                <input type="checkbox" id="check-spelling"> Check Spelling
            </label>
            <label>
                <input type="checkbox" id="check-grammar"> Check Grammar
            </label>
            <label>
                <input type="checkbox" id="check-plagiarism"> Check Plagiarism
            </label>
            <label>
                <input type="checkbox" id="check-readability"> Check Readability
            </label>
            <label>
                <input type="checkbox" id="check-originality"> Check Originality
            </label>
        </section>
        <section class="checker-results">
            <button id="check-article-btn">Check Article</button>
            <div id="results"></div>
        </section>
        <section class="statistics">
            <h2>Article Statistics</h2>
            <p id="word-count"></p>
            <p id="sentence-count"></p>
            <p id="reading-time"></p>
        </section>
        <section class="guide">
            <h2>How to Use:</h2>
            <ol>
                <li>Paste your article text into the textarea.</li>
                <li>Select the checks you want to perform.</li>
                <li>Click the "Check Article" button.</li>
                <li>View the results and statistics below.</li>
            </ol>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>
/* styles.css */

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f2f2f2; /* Added background color */
}

header {
    background-color: #333;
    color: #fff;
    padding: 1em;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2em;
}

.article-input {
    width: 80%;
    height: 200px;
    padding: 1em;
    font-size: 1.2em;
    border: 1px solid #ccc;
    border-radius: 10px;
}

.checker-options {
    margin-top: 1em;
}

.checker-options label {
    margin-right: 1em;
}

.checker-results {
    margin-top: 1em;
}

#check-article-btn {
    background-color: #333;
    color: #fff;
    padding: 0.5em 1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

#check-article-btn:hover {
    background-color: #444;
}

#results {
    margin-top: 1em;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f7f7f7;
}

.statistics {
    margin-top: 2em;
}

.statistics h2 {
    margin-bottom: 0.5em;
}

.statistics p {
    margin-bottom: 0.5em;
}

.guide {
    margin-top: 2em;
}

.guide h2 {
    margin-bottom: 0.5em;
}

.guide ol {
    list-style: decimal;
    padding-left: 20px;
}

.guide li {
    margin-bottom: 0.5em;
}
// script.js

console.log("Script running");

// Get elements
const articleText = document.getElementById('article-text');
const checkSpelling = document.getElementById('check-spelling');
const checkGrammar = document.getElementById('check-grammar');
const checkPlagiarism = document.getElementById('check-plagiarism');
const checkReadability = document.getElementById('check-readability');
const checkOriginality = document.getElementById('check-originality');
const checkArticleBtn = document.getElementById('check-article-btn');
const resultsDiv = document.getElementById('results');
const wordCount = document.getElementById('word-count');
const sentenceCount = document.getElementById('sentence-count');
const readingTime = document.getElementById('reading-time');

// Function to check spelling
function checkSpellingErrors(text) {
    const errors = [];
    const words = text.split(' ');
    words.forEach((word) => {
        if (word.length > 10) {
            errors.push(`Unknown word: ${word}`);
        }
    });
    return errors;
}

// Function to check grammar
function checkGrammarErrors(text) {
    const errors = [];
    const sentences = text.split('.');
    sentences.forEach((sentence) => {
        if (sentence.length > 20) {
            errors.push(`Long sentence: ${sentence}`);
        }
    });
    return errors;
}

// Function to check plagiarism
function checkPlagiarism(text) {
    const percentage = Math.random() * 100;
    return `Plagiarism detected: ${percentage}%`;
}

// Function to check readability
function checkReadability(text) {
    const score = Math.random() * 100;
    return `Readability score: ${score}`;
}

// Function to check originality
function checkOriginality(text) {
    const score = Math.random() * 100;
    return `Originality score: ${score}`;
}

// Function to count words
function countWords(text) {
    return text.split(' ').length;
}

// Function to count sentences
function countSentences(text) {
    return text.split('.').length;
}

// Function to calculate reading time
function calculateReadingTime(text) {
    const words = countWords(text);
    const readingSpeed = 200; 
    return Math.ceil(words / readingSpeed);
}

// Function to check article
function checkArticle() {
    const text = articleText.value.trim();
    const spellingErrors = checkSpelling.checked ? checkSpellingErrors(text) : [];
    const grammarErrors = checkGrammar.checked ? checkGrammarErrors(text) : [];
    const plagiarismResult = checkPlagiarism.checked ? checkPlagiarism(text) : '';
    const readabilityResult = checkReadability.checked ? checkReadability(text) : '';
    const originalityResult = checkOriginality.checked ? checkOriginality(text) : '';
    const wordCountValue = countWords(text);
    const sentenceCountValue = countSentences(text);
    const readingTimeValue = calculateReadingTime(text);

    resultsDiv.innerHTML = '';
    spellingErrors.forEach((error) => {
        const p = document.createElement('p');
        p.textContent = error;
        resultsDiv.appendChild(p);
    });
    grammarErrors.forEach((error) => {
        const p = document.createElement('p');
        p.textContent = error;
        resultsDiv.appendChild(p);
    });
    if (plagiarismResult) {
        const p = document.createElement('p');
        p.textContent = plagiarismResult;
        resultsDiv.appendChild(p);
    }
    if (readabilityResult) {
        const p = document.createElement('p');
        p.textContent = readabilityResult;
        resultsDiv.appendChild(p);
    }
    if (originalityResult) {
        const p = document.createElement('p');
        p.textContent = originalityResult;
        resultsDiv.appendChild(p);
    }

    wordCount.textContent = `Word count: ${wordCountValue}`;
    sentenceCount.textContent = `Sentence count: ${sentenceCountValue}`;
    readingTime.textContent = `Reading time: ${readingTimeValue} minutes`;
}

// Event listener
checkArticleBtn.addEventListener('click', checkArticle);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.