Meta Tag Generator

Generate SEO and Social Media Meta Tags for your website

[Top Responsive Ad]

Site Details

---

Site Title

Site Description

Keywords (Comma separated)

Allow Robots to index your site? Yes (Index, Follow) No (Noindex, Nofollow)

Author

Generated Code

---

[Bottom Responsive Ad]

 

Core Features Explained:

1. Reactive Generation: The oninput and onchange event listeners on the form fields trigger the generateTags() function instantly. This creates a "Live" feel where the user doesn't have to click a "Submit" button to see the code.

2. SEO Groups: The code is organized into sections (Primary, Open Graph, and Twitter) using HTML comments, making it easy for the user to understand what they are pasting into their website.

3. Modern Dark-Mode Preview: The output area uses a dark "Monokai" style theme (#1e293b), which contrasts well with the UI and mimics the look of a code editor like VS Code.

4. AdSense Integration: * Strategic Placement: Top and Bottom responsive banners.

   • Responsiveness: Flexible ad-space containers that won't break the layout on mobile.

5. Clipboard Interaction: Uses the select() method and execCommand("copy") for high compatibility across browsers, including a visual button feedback change ("Copied!").

How to use this:

• Save the code as meta-generator.html.

• Replace ca-pub-YOUR_CLIENT_ID with your actual AdSense Publisher ID.

• You can host this on any static site hosting service like GitHub Pages or Netlify.

Morse Code Converter

[Responsive Ad Unit 1]

Morse Converter

Text (English)

Morse Code

[Responsive Ad Unit 2]

 

Key Features Explained

1. Bi-directional Logic: I used two separate input listeners. When you type in the "Text" box, the "Morse" box updates automatically, and vice-versa.

2. Web Audio API: Instead of using an external .mp3 file, this tool generates a 600Hz Sine Wave programmatically. It follows the standard Morse timing:

   • Dot: 1 unit of time.

   • Dash: 3 units of time.

   • Space between parts: 1 unit.

   • Space between letters: 3 units.

   • Space between words: 7 units.

3. Morse Dictionary: Includes letters, numbers, and common punctuation marks.

4. Ad Placement: * Top Banner: Best for desktop users.

   • Bottom Banner: Keeps visibility high without interrupting the conversion flow.

   • Note: Replace ca-pub-YOUR_CLIENT_ID with your own details.

How to Host

• Save the code as index.html.

• You don't need any extra folders or images; it’s a "Single Page App" (SPA).

• Upload it to any static host (GitHub Pages, Netlify, or your own hosting) and your Morse tool is ready to go!

JSON Viewer & Tree Formatter

[Header Ad Space]

Input JSON

Tree View

[Footer Ad Space]

Features & Implementation Details

1. Recursive Tree Generation: The createTree function calls itself whenever it encounters a nested object or array. This allows the tool to handle JSON of any depth.

2. Collapsible Nodes: Clicking the [-] or [+] signs toggles a CSS class that hides or shows nested lists, making it easy to navigate massive data structures.

3. Syntax Highlighting: Different colors are assigned to keys, strings, numbers, and booleans using specific CSS classes to improve readability.

4. Error Handling: If the user pastes invalid code, the tool catches the error and displays a helpful message instead of crashing.

5. AdSense Readiness: * Header Ad: High visibility above the main tool.

   • Footer Ad: Captures revenue as users finish their task.

   • Responsive: Uses a CSS Grid that stacks the input and output vertically on smaller screens.

How to Deploy

• Save the file as json-viewer.html.

• Replace ca-pub-YOUR_CLIENT_ID with your actual AdSense Publisher ID.

• If you want to change the theme, modify the CSS variables in the :root section.

 

Markdown Editor (Live Preview)

[Header Responsive Ad]

[Footer Responsive Ad]

 

Core Functionality Breakdown

1. Marked.js Integration: We use marked.parse(input.value) to transform plain text into HTML. This handles lists, tables, bolding, and links automatically.

2. Live Toolbar: The insertText() function manipulates the cursor position (selectionStart) to wrap selected text in Markdown syntax (e.g., adding ** for Bold).

3. Sync Scroll: It calculates the scroll percentage of the input area and applies that same ratio to the preview area, ensuring your "view" stays roughly aligned.

4. Responsive Panes: * Desktop: Side-by-side view using flex: 1.

   • Mobile: Stacked view (Top/Bottom) via flex-direction: column at the 768px breakpoint.

5. AdSense Placement: * Top Banner: High visibility for revenue.

   • Bottom Banner: Non-intrusive placement for long editing sessions.

   • CSS Note: Fixed min-height for ad units prevents "layout shift" when ads load.

How to use this:

• Replace ca-pub-YOUR_CLIENT_ID with your actual AdSense ID.

• You can extend the preview CSS to include specific themes (like GitHub's dark mode or a classic paper style).

Speech to Text Converter

[Header Ad]

Voice to Text

Click Start to Speak

[Footer Ad]

 

Core Features Explained:

1. Continuous Recognition: By setting recognition.continuous = true, the microphone stays active even after you pause for a second, allowing for long dictations.

2. Visual Status: A pulsing red "indicator" and status text provide immediate feedback so users know exactly when the browser is "hearing" them.

3. Cross-Browser Compatibility: The code checks for both SpeechRecognition (standard) and webkitSpeechRecognition (Chrome/Safari), though Chrome and Edge currently offer the most robust support.

4. ContentEditable Output: The results area is contenteditable="true", allowing users to manually fix typos or format the text directly after speaking.

5. AdSense Integration:

   • Placeholders: Included at the top and bottom to maximize revenue without obstructing the microphone or text area.

   • Responsiveness: Used flexible containers to ensure ads resize correctly on mobile devices.

Important Notes:

• HTTPS Required: Most browsers require your site to be served over HTTPS for the microphone/Speech API to function.

• AdSense: Remember to replace ca-pub-YOUR_CLIENT_ID with your actual Publisher ID for the ads to appear.

Text to Speech Converter

Text to Speech

Convert your text into natural-sounding AI voices

[Responsive Banner Ad]

Select Voice

Pitch

Speed (Rate)

[Responsive Banner Ad]

 

Features & Implementation Details

1. Voice Selection: The populateVoiceList function pulls all available voices from the user's operating system (Windows, macOS, Android, or iOS). This allows users to choose between different languages and local accents.

2. Pitch & Rate Controls: Two range sliders allow users to adjust the speed of the talking and the depth of the voice in real-time.

3. Cross-Browser Fix: Some browsers (like Chrome) load voices asynchronously. I included speechSynthesis.onvoiceschanged to ensure the dropdown fills correctly as soon as the browser is ready.

4. Responsive Layout: The controls use a CSS Grid that automatically collapses from two columns to one on smaller mobile screens.

5. AdSense Integration:

   • Strategic Placement: One ad above the tool and one below. This follows Google's policy of not placing ads too close to buttons to avoid accidental clicks.

   • Setup: To activate, replace ca-pub-YOUR_CLIENT_ID and YOUR_AD_SLOT_1 with your actual AdSense credentials.

How to use this:

1. Save the file as tts.html.

2. Open it in any modern browser.

3. Type something into the box and hit "Speak Text." Note that some premium voices (like those from Google or Microsoft) may require an internet connection to load.

Password Strength Meter

[Responsive Ad Unit]

Password Strength

SHOW

Strength: Too Short

• At least 8 characters
• One uppercase letter
• One number (0-9)
• One special character (@$!%*#?&)

[Responsive Ad Unit]

 

Key Features Explained

1. Regex Validation: It uses JavaScript Regular Expressions (test()) to check for specific character patterns (Numbers, Uppercase, Special Characters).

2. Live Feedback: The input event listener ensures the UI updates instantly with every keystroke—no "Submit" button required.

3. Visual Progress Bar: The bar width and color transition smoothly between red (weak), orange (medium), and green (strong) using CSS transitions.

4. Security Toggle: Includes a "Show/Hide" feature, which is a standard UX practice to help users verify they haven't made a typo.

5. AdSense Integration: * Header & Footer Slots: Positioned outside the main interaction container to avoid interfering with the user's focus.

   • Note: Replace ca-pub-YOUR_CLIENT_ID with your own ID for the ads to load.

Best Practices for Passwords

While this meter checks for complexity, modern security standards (NIST) also emphasize using long "passphrases." You could easily extend this code by adding a check for common dictionary words if you wanted to build a truly advanced tool!