[ Web Proxy ]
URL:
Viewing: https://raw.githubusercontent.com/DailyInvestors/Course_Sheets/main/javaScript/Basic_Guide [Back]  [Original]
~ Basic Tags~ * : The root element. * : Contains meta-information (not displayed). * : Sets the page title (in the browser tab). * : Contains the visible content. *

to

: Headings (different sizes). *

: Paragraphs. * : Links (e.g., Visit Example). * : Images (e.g., Description [Description]). *

: A generic container. * : An inline container. * Example: My First Webpage

Welcome!

This is a paragraph.

My Image [My Image] Part 2: CSS - Styling Your Webpage * What is CSS? Cascading Style Sheets styles the HTML elements (colors, fonts, layout). ~ Ways to add CSS~ * Inline:

This is blue.

(Least recommended) * Internal: Inside

HTML Pretty Printer


Pretty Print

Formatted HTML:




Explanation:
 * textarea#htmlInput: This is where the user will paste their unformatted HTML.
 * button#prettyPrintButton: This button will trigger the JavaScript function to format the HTML.
 * pre#output: This is where the formatted HTML will be displayed.
 * script src="script.js": This line links our JavaScript file.
Step 2: Create the JavaScript Logic (script.js)
document.getElementById('prettyPrintButton').addEventListener('click', function() {
    const htmlInput = document.getElementById('htmlInput').value;
    const outputElement = document.getElementById('output');

    try {
        const formattedHTML = prettyPrint(htmlInput);
        outputElement.textContent = formattedHTML;
    } catch (error) {
        outputElement.textContent = "Error: Invalid HTML";
        console.error("Pretty Print Error:", error);
    }
});

function prettyPrint(html) {
    let tab = '\t';
    let result = '';
    let indent = '';

    html.split(/>\s* {
        if (element.match(/^\s*$/)) {
          return;
        }

        if (element.match(/^/)) {
            result += indent + element + '>\n';
            indent += tab;
        } else if (element.match(/^/)) {
            indent = indent.substring(0, indent.length - tab.length);
            result += indent + element + '>\n';
        } else {
            result += indent + element + (element.substr(element.length-1,1) === '>' ? '\n' : '>\n');
        }

    });
    return result.replace(/]+)>/g, "");
}

Explanation:
 * Event Listener:
   * We add an event listener to the "Pretty Print" button.
   * When the button is clicked, the code inside the listener will execute.
 * Get Input:
   * We get the HTML from the textarea#htmlInput.
   * We also get the output element.
 * Error Handling:
   * The code is wrapped in a try catch block. If the prettyPrint function causes an error, the catch block will display "Error: Invalid HTML" and console log the error.
 * prettyPrint(html) Function:
   * This function takes the HTML as input and returns the formatted HTML.
   * It uses a simple logic:
     * Splits the HTML into elements.
     * Adds indentation based on opening and closing tags.
     * Removes empty tags.
   * It uses a very basic pretty printer. For more complex html you will need to find a more robust solution.
Step 3: Open the HTML File
 * Save both index.html and script.js in the same directory.
 * Open index.html in your web browser.
How to Use:
 * Paste your unformatted HTML into the text area.
 * Click the "Pretty Print" button.
 * The formatted HTML will appear in the pre element below.
Important Notes:
 * This is a basic HTML pretty printer. It may not handle all edge cases or complex HTML structures perfectly.
 * For a more robust pretty printer, consider using existing libraries or tools that specialize in HTML parsing and formatting. There are many Javascript libraries that will do a better job.
 * This code does not include any security measures. If you are going to use this in a production environment, be sure to sanitize the input to prevent XSS attacks.
 * This code is primarily for learning purposes.







Web Proxy Viewer  |  New URL  |  Original Page