Skip to content

Commit e4ca285

Browse files
sahilataharsahilatahar
committed
Lorem Ipsum Generator Added
1 parent 5967d7e commit e4ca285

File tree

4 files changed

+211
-1
lines changed

4 files changed

+211
-1
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
| 28 | [Word Counter](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/word-counter) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/word-counter/) |
3636
| 29 | [Git Logo](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/git-logo) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/git-logo/) |
3737
| 30 | [Image Expansion](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-expansion) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-expansion/) |
38-
38+
| 31 | [Lorem Ipsum Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/lorem-ipsum-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/lorem-ipsum-generator/) |
3939

4040

4141
## Disclaimer Regarding Ownership of this repository

‎lorem-ipsum-generator/index.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Lorem Ipsum Generator</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<div class="header">
15+
<h1>Lorem Ipsum Generator</h1>
16+
<form id="form">
17+
<div class="form-group">
18+
<label>No of paragraph</label>
19+
<input type="number" name="paragraph" id="para-input" min="1" value="3" required>
20+
</div>
21+
<button type="submit" id="generate-btn">Generate</button>
22+
</form>
23+
</div>
24+
25+
<section class="output-section">
26+
<div class="options">
27+
<button id="copy-btn">Copy to Clipboard</button>
28+
</div>
29+
<div class="output-container">
30+
</div>
31+
</section>
32+
</div>
33+
<script src="script.js"></script>
34+
</body>
35+
36+
</html>

‎lorem-ipsum-generator/script.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const text = [
2+
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor justo ac nisi sodales, vel semper nulla convallis. Aliquam blandit volutpat purus, sit amet sollicitudin enim pretium eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas ac dui lacinia, luctus metus nec, interdum risus. Nam commodo ex ut dolor malesuada, eu ullamcorper massa bibendum. Etiam rhoncus quam et efficitur malesuada. Nunc sagittis, nibh vitae hendrerit bibendum, lacus mauris ornare nulla, in varius turpis ex nec lectus.',
3+
'Suspendisse feugiat bibendum justo, sed consectetur nisl commodo vel. Sed lobortis sit amet elit eu fringilla. Sed imperdiet mi vitae nulla malesuada venenatis. Curabitur gravida vitae tellus ac congue. Phasellus tincidunt tellus et finibus efficitur. Donec posuere malesuada augue, vel molestie nulla tincidunt nec. Aenean vel consectetur risus. In maximus, nisi sit amet ullamcorper sodales, velit sapien iaculis dolor, vel malesuada nunc metus eu lectus. Sed non quam nec nisi gravida dignissim. Donec et leo vel risus molestie aliquet.',
4+
'Nullam et velit est. Proin congue volutpat tellus, eu convallis sapien gravida vel. Nullam pretium lacus in convallis pretium. Nam id nisl quis ex volutpat consequat ac non orci. In eu libero quis nulla dictum consectetur in a dolor. Fusce quis efficitur turpis, eget viverra nibh. Donec fringilla, ipsum vel scelerisque volutpat, velit risus commodo nisl, et consequat elit elit sit amet nulla. Duis faucibus tincidunt risus vel malesuada.',
5+
'Cras ac risus vel massa posuere malesuada in a metus. Sed vel enim at lectus lacinia facilisis. Sed eget tortor sagittis, commodo purus id, mattis nunc. Etiam elementum felis sit amet dapibus bibendum. Sed vitae ipsum quis mauris pellentesque tristique sed vel nisi. Nullam aliquet lorem at nisl bibendum, ut commodo turpis bibendum. Suspendisse commodo lectus sed turpis dapibus, eget tempor nisl sollicitudin. Sed nec ultrices enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc scelerisque ac tellus a commodo. Sed interdum, sapien nec fermentum laoreet, felis lectus sagittis elit, vitae vulputate elit quam vel elit. Vivamus bibendum, odio eu rhoncus pharetra, sapien sapien consectetur ipsum, vel vehicula turpis odio sed orci.'
6+
];
7+
8+
const copyBtn = document.querySelector('#copy-btn');
9+
const form = document.querySelector('#form');
10+
const outputContainer = document.querySelector('.output-container');
11+
const para = document.querySelector('#para-input');
12+
13+
document.body.onload = (e) => {
14+
for (let i = 1; i <= 3; i++) {
15+
outputContainer.innerHTML += `<div class='output-para'>${text[i]}</div>`;
16+
}
17+
}
18+
19+
form.onsubmit = (e) => {
20+
e.preventDefault();
21+
let index = 0;
22+
outputContainer.innerHTML = '';
23+
for (let i = 1; i <= para.value; i++) {
24+
if (index == text.length - 1) {
25+
index = 0;
26+
} else {
27+
index++;
28+
}
29+
outputContainer.innerHTML += `<div class='output-para'>${text[index]}</div>`;
30+
}
31+
copyBtn.textContent = 'Copy to Clipboard';
32+
}
33+
34+
copyBtn.addEventListener('click', async (e) => {
35+
let text = '';
36+
const outputParas = document.querySelectorAll('.output-para');
37+
outputParas.forEach((outputPara) => {
38+
text += `${outputPara.textContent}\n\n`;
39+
})
40+
41+
await navigator.clipboard.writeText(text);
42+
copyBtn.textContent = 'Copied';
43+
});

‎lorem-ipsum-generator/style.css

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: Verdana, Geneva, Tahoma, sans-serif;
6+
}
7+
8+
body {
9+
height: 100vh;
10+
min-height: 100vh;
11+
display: grid;
12+
place-items: center;
13+
background-color: #8395a7;
14+
}
15+
16+
.container {
17+
width: min(800px, 90vw);
18+
display: flex;
19+
}
20+
21+
.header {
22+
width: 300px;
23+
min-width: 300px;
24+
height: 90vh;
25+
display: flex;
26+
align-items: center;
27+
flex-direction: column;
28+
background-color: #30336b;
29+
color: white;
30+
user-select: none;
31+
-webkit-user-select: none;
32+
-moz-user-select: none;
33+
}
34+
35+
.header>h1 {
36+
text-align: center;
37+
padding-top: 3rem;
38+
}
39+
40+
.header>form {
41+
width: 100%;
42+
display: flex;
43+
justify-content: center;
44+
align-items: center;
45+
gap: 1rem;
46+
flex-direction: column;
47+
padding-top: 5rem;
48+
}
49+
50+
.form-group {
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
flex-direction: column;
55+
grid-template: 0.5rem;
56+
}
57+
58+
.form-group>label {
59+
margin-bottom: 0.5rem;
60+
font-size: 1.1rem;
61+
}
62+
63+
.form-group>input {
64+
border: 1px solid black;
65+
border-radius: 3px;
66+
outline: none;
67+
padding: 0.5rem;
68+
font-size: 1rem;
69+
}
70+
71+
#generate-btn {
72+
height: 50px;
73+
width: 120px;
74+
padding: 0.5rem 1rem;
75+
font-size: 1rem;
76+
border-radius: 3px;
77+
background-color: white;
78+
color: #30336b;
79+
font-weight: bold;
80+
border: none;
81+
outline: none;
82+
margin-bottom: 2rem;
83+
}
84+
85+
.output-section {
86+
height: 90vh;
87+
width: 100%;
88+
padding: 1rem;
89+
background-color: white;
90+
display: grid;
91+
place-items: center;
92+
}
93+
94+
.output-container {
95+
height: 90%;
96+
overflow: auto;
97+
}
98+
99+
.options {
100+
height: 100%;
101+
user-select: none;
102+
-webkit-user-select: none;
103+
-moz-user-select: none;
104+
}
105+
106+
#copy-btn {
107+
padding: 0.5rem 1rem;
108+
font-size: 1.1rem;
109+
}
110+
111+
.output-para {
112+
margin-bottom: 1.5rem;
113+
}
114+
115+
@media screen and (max-width: 768px) {
116+
.container {
117+
flex-direction: column;
118+
}
119+
120+
.header {
121+
width: 100%;
122+
min-width: auto;
123+
height: max-content;
124+
padding-bottom: 1rem;
125+
margin-top: 1rem;
126+
}
127+
128+
.output-section {
129+
margin-bottom: 1rem;
130+
}
131+
}

0 commit comments

Comments
 (0)