Friday, January 5, 2024

Lorem Ipsum Generator

 Description:

The Lorem Ipsum Generator is a web-based tool that allows users to easily generate Lorem Ipsum text by specifying the number of paragraphs and words per paragraph. Users can customize the length of the generated text and utilize it as a placeholder or filler content in their projects. The tool provides a straightforward interface with adjustable input fields, making it a convenient solution for quickly generating dummy text for design and development purposes.

code in project

Lorem Ipsum Generator tool that allows users to specify the number of paragraphs and words with HTML, CSS, and JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lorem Ipsum Generator</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            text-align: center;
            margin: 50px;
        }

        #output {
            margin-top: 20px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            min-height: 100px;
            background-color: #f8f8f8;
        }
    </style>
</head>
<body>
    <h1>Lorem Ipsum Generator</h1>
    <label for="paragraphs">Paragraphs:</label>
    <input type="number" id="paragraphs" value="3" min="1" max="10">
    
    <label for="words">Words per Paragraph:</label>
    <input type="number" id="words" value="50" min="1" max="1000">

    <button onclick="generateLorem()">Generate Lorem Ipsum</button>

    <div id="output"></div>

    <script>
        function generateLorem() {
            const paragraphsInput = document.getElementById('paragraphs');
            const wordsInput = document.getElementById('words');
            const outputDiv = document.getElementById('output');

            const paragraphs = parseInt(paragraphsInput.value);
            const words = parseInt(wordsInput.value);

            if (isNaN(paragraphs) || isNaN(words)) {
                alert('Please enter valid numbers for paragraphs and words.');
                return;
            }

            outputDiv.innerHTML = '';

            for (let i = 0; i < paragraphs; i++) {
                const paragraph = document.createElement('p');
                paragraph.textContent = generateParagraph(words);
                outputDiv.appendChild(paragraph);
            }
        }

        function generateParagraph(words) {
            const loremIpsumWords = ["Lorem", "ipsum", "dolor", "sit", "amet,", "consectetur", "adipisicing", "elit.", "Sed", "do", "eiusmod", "tempor", "incididunt", "ut", "labore", "et", "dolore", "magna", "aliqua.", "Ut", "enim", "ad", "minim", "veniam,", "quis", "nostrud", "exercitation", "ullamco", "laboris", "nisi", "ut", "aliquip", "ex", "ea", "commodo", "consequat.", "Duis", "aute", "irure", "dolor", "in", "reprehenderit", "in", "voluptate", "velit", "esse", "cillum", "dolore", "eu", "fugiat", "nulla", "pariatur.", "Excepteur", "sint", "occaecat", "cupidatat", "non", "proident,", "sunt", "in", "culpa", "qui", "officia", "deserunt", "mollit", "anim", "id", "est", "laborum."];

            let paragraphText = '';
            for (let i = 0; i < words; i++) {
                const randomIndex = Math.floor(Math.random() * loremIpsumWords.length);
                paragraphText += loremIpsumWords[randomIndex] + ' ';
            }

            return paragraphText.trim();
        }
    </script>
</body>
</html>


No comments:

Post a Comment

Responsive TechGadgetsHub eCommerce Website

  Description: Create a fully responsive eCommerce website for TechGadgetsHub using HTML, CSS, and JavaScript. This example provides a basic...