Custom Lorem Ipsum/Random Text Generator - add your own lines and go!
A Pen by Nolan Luna on CodePen.
Custom Lorem Ipsum/Random Text Generator - add your own lines and go!
A Pen by Nolan Luna on CodePen.
<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; | |
} |