Skip to content

Instantly share code, notes, and snippets.

@enlineaweb
Created December 5, 2021 04:59
Show Gist options
  • Save enlineaweb/567bb4acf6724406df1740dfbf5342f3 to your computer and use it in GitHub Desktop.
Save enlineaweb/567bb4acf6724406df1740dfbf5342f3 to your computer and use it in GitHub Desktop.
A Random Text Generator

A Random Text Generator

Custom Lorem Ipsum/Random Text Generator - add your own lines and go!

A Pen by Nolan Luna on CodePen.

License.

<div class="container">
<h1>Your Ipsum<h1>
<h2>A Random Text Generator</h2>
<form action="" method="GET" name="options" id="options">
<div class="pnum">
<label for="pnum">Number of Paragraph(s):</label>
<input type="number" id="pnum" name="pnum" value="3" step="1" min="1" max="10" required />
</div>
<div class="plength">
<p>Length of Paragraph(s): </p>
<div class="plength-radio">
<input type="radio" id="sm-p" name="psize" class="psize" value="7" checked />
<label for="sm-p">Short</label>
<input type="radio" id="md-p" name="psize" class="psize" value="19" />
<label for="md-p">Medium</label>
<input type="radio" id="lg-p" name="psize" class="psize" value="42" />
<label for="lg-p">Long</label>
</div>
</div>
<div class="checkbox">
<label for="first">Start text with "Random ipsum dolor sit..."</label>
<input type="checkbox" name="first" id="first" />
</div>
</form>
<input type="submit" id="btn" value="Generate Text!">
<div id="random"></div>
</div>
let btn = document.querySelector('#btn');
let blockDisp = document.querySelector('#random');
let first = "Random ipsum dolor sit amet, consectetur adipiscing elit.";
let lines = [
"",
"This is one sentence.",
"This is another sentence.",
"You can put anything you want in here.",
"Words.",
"Quotes from movies, books, people.",
"Anything goes!"
];
function blockRequest() {
let data = document.getElementById("options");
let pnum = Number(data.querySelector("#pnum").value);
let psize = Number(data.querySelector("input.psize:checked").value);
let firstLine = document.getElementById("first").checked;
blockRequest.createParagraph = function() {
let size = psize;
let paragraph = "";
for (var i = 0; i < size; i++){
paragraph += (lines[Math.floor(Math.random() * lines.length)] + " ");
}
return paragraph;
};
blockRequest.createBlock = function(numberOfParagraphs){
let allParagraphs = [];
if (firstLine === true){
allParagraphs.push(first + " " + this.createParagraph());
while (allParagraphs.length > 0 && allParagraphs.length < pnum) {
allParagraphs.push(this.createParagraph());
}
} else {
while (allParagraphs.length < pnum) {
allParagraphs.push(this.createParagraph());
}
};
let phtml = "";
allParagraphs.forEach(function(p) {
phtml += "<p>" + p + "</p>";
});
return phtml;
};
blockDisp.innerHTML= blockRequest.createBlock(pnum);
};
btn.addEventListener("click", blockRequest);
body {
margin: 0;
background-color: #725599;
background-image:
linear-gradient(#725599, #aaa);
background-repeat: no-repeat;
background-attachment: fixed;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Montserrat', sans-serif;
width: 500px;
height: auto;
margin: 0 auto;
padding: 25px 50px;
border-radius: 6px;
border: 1px solid #fff;
color: #fff;
}
.container h1 {
padding: 0;
margin: 0;
}
.plength {
display: flex;
align-items: center;
justify-content: space-around;
}
.checkbox {
padding-bottom: 15px;
}
#btn {
border-radius: 6px;
border: 1px solid #fff;
color: #fff;
padding: 1rem;
font-family: 'Montserrat', sans-serif;
text-transform: uppercase;
font-weight: 600;
background-color: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment