Article Generator Blog–A Complete Single-Page Blogger Website

 

Introduction

Create a fully functional Blogger-style single-page website using only HTML, CSS, and JavaScript. This page allows users to generate articles instantly based on keywords, word count, language, and tone.

Website Structure

1. Header Section

  • Gradient background (#2c3e50 to #3498db).
  • White text, centered title: "Article Generator Blog".
  • Tagline: "Create unique articles instantly for your blog!"

2. Main Content Container

  • Max-width: 900px, centered on the page.
  • Styling: White background, subtle box-shadow, and rounded corners.
  • Contains two sections:
    1. Article Generator Form (h2 title: "Generate Your Article")
    2. Output Display (h2 title: "Your Generated Article") – styled like a blog post.

Article Generator Form

Form Fields:

  • Keywords: Text input (required) – placeholder: "e.g., Urdu poetry, nature".
  • Word Count: Dropdown selection – options: 100, 200, 300, 500, 750, 1000 words.
  • Language: Dropdown – English, Urdu, Bilingual (Urdu & English).
  • Tone: Dropdown – Formal, Casual, Creative.

Buttons:

  • Generate Article: Blue (#3498db) – Submit button.
  • Clear: Red (#e74c3c) – Resets form and output.

Generated Article Display

  • The article is displayed inside a <p> with id="articleText".
  • Word count is shown in <p> with id="wordCountDisplay" (e.g., "Word Count: 300").
  • Download Button: Green (#27ae60), disabled by default, enabled when an article is generated.
  • Styling: Left border #3498db, padding, subtle shadow.

Styling (CSS)

  • Body: Light gray background #f5f5f5.
  • Header:
    • Gradient background, 20px padding, centered text.
  • Container:
    • White background, 30px auto margin, 20px padding, 8px border-radius, box-shadow.
  • Form Section:
    • Flex column layout, 15px gap, light gray background #f9f9f9, 15px padding.
  • Buttons:
    • 10px padding, rounded corners, hover effects (darker shades).
  • Output Styling:
    • 20px padding, 5px left border, subtle shadow.
  • Urdu Text:
    • Right-to-left direction, Jameel Noori Nastaleeq font (Google Fonts), 1.3em font size.
  • Default Font: Arial, sans-serif.

JavaScript Functionality

On Form Submission:

  1. Prevent default form submission.
  2. Fetch values (keywords, wordCount, language, tone).
  3. Generate an article using static templates (no external APIs).
  4. Display the article inside "articleText".
  5. Update "wordCountDisplay" with actual word count.
  6. Enable "Download Article" button, allowing users to save the article as a .txt file (filename based on keywords).
  7. Apply "urdu-text" class if Urdu or Bilingual mode is selected.

On "Clear" Button Click:

  1. Reset the form.
  2. Set "articleText" to default text ("Enter keywords above to generate your article...").
  3. Remove "urdu-text" class.
  4. Reset word count to 0.
  5. Disable the "Download Article" button.

Static Templates for Article Generation

  • Uses predefined chunks of text (e.g., 25-word blocks).
  • Includes connectors like "Moreover," and "مزید برآں،" for natural flow.
  • Avoids excessive keyword repetition.
  • Example (English Creative Tone):
    • "${keyword} dances like a whisper in the wind, unfolding stories...".

Additional Requirements

  • Include <link> for Google Fonts (Jameel Noori Nastaleeq) in <head>.
  • Ensure the code runs entirely in a browser (no external files/APIs).
  • Save the file as index.html and test in a browser.

Complete Code Implementation

The full HTML, CSS, and JavaScript code is provided in a single-file format (index.html). This ensures the website runs smoothly without needing additional files.

Comments

Post a Comment