Lorem Ipsum Generator
Lorem Ipsum Text Generator
/* General styles for body and container */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #333;
}
.container {
background-color: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
}
h1 {
text-align: center;
color: #4CAF50;
font-size: 2em;
}
/* Controls section */
.controls {
margin-top: 20px;
text-align: center;
}
.control-group {
margin-bottom: 15px;
}
label {
font-size: 1.1em;
display: block;
margin-bottom: 5px;
color: #4CAF50;
}
input {
padding: 10px;
font-size: 1em;
border: 1px solid #ccc;
border-radius: 4px;
width: 100%;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: #fff;
border: none;
padding: 12px 20px;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
/* Styling for the generated text area */
.lorem-text {
margin-top: 30px;
padding: 15px;
background-color: #f9f9f9;
border-radius: 8px;
border: 1px solid #ddd;
font-size: 1.2em;
line-height: 1.6;
white-space: pre-wrap; /* preserves spaces and line breaks */
color: #555;
}
/* Media Query for responsiveness */
@media (max-width: 600px) {
h1 {
font-size: 1.5em;
}
.controls {
margin-top: 15px;
}
button {
padding: 10px 15px;
font-size: 1em;
}
}
// Lorem Ipsum text generator function
const loremIpsum = (words, sentences, paragraphs) => {
const sentenceStructure = [
"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
"Vestibulum faucibus suscipit diam, non sollicitudin velit.",
"Quisque sit amet venenatis erat.",
"Morbi nec massa nec purus tristique viverra.",
"Nullam facilisis lacinia tortor, ac fermentum erat.",
"Sed convallis diam at ante facilisis, sed auctor turpis fringilla.",
"Ut non metus et ante fringilla varius eu ut leo."
];
let result = '';
for (let p = 0; p < paragraphs; p++) {
let paragraph = '';
for (let s = 0; s < sentences; s++) {
let sentence = sentenceStructure[Math.floor(Math.random() * sentenceStructure.length)];
// Trim the sentence to match the desired word count
let wordsArray = sentence.split(' ');
if (wordsArray.length > words) {
wordsArray = wordsArray.slice(0, words);
}
paragraph += wordsArray.join(' ') + ' ';
}
result += paragraph.trim() + '\n\n';
}
return result.trim();
};
// Function to generate and display the text
const generateText = () => {
const numParagraphs = parseInt(document.getElementById('paragraphs').value);
const numWords = parseInt(document.getElementById('words').value);
const numSentences = parseInt(document.getElementById('sentences').value);
const generatedText = loremIpsum(numWords, numSentences, numParagraphs);
document.getElementById('loremText').textContent = generatedText;
};
// Add event listener to the generate button
document.getElementById('generate').addEventListener('click', generateText);
