Created Lorem Ipsum generator · reboot100/30DaysOfJavaScript@131520d · GitHub
Skip to content

Commit 131520d

Browse files
ilokeshghoshilokeshghosh
committed
Created Lorem Ipsum generator
Created new project using javascript to generate lorem Ipsum text
1 parent 3664bc3 commit 131520d

5 files changed

Lines changed: 277 additions & 0 deletions

File tree

‎215 - Lorem Ipsum Generator/index.html‎

Lines changed: 46 additions & 0 deletions

‎215 - Lorem Ipsum Generator/script.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
const form = document.querySelector('#form')
2+
const copy = document.querySelector('.copy')
3+
4+
// handling form
5+
form.addEventListener('submit', (e) => {
6+
e.preventDefault()
7+
const size = parseInt(form.input.value);
8+
document.querySelector('.text-section').innerHTML = loremIpsum(size);
9+
10+
11+
})
12+
13+
// generation text
14+
function loremIpsum(size) {
15+
const lorem = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vehicula odio non risus finibus feugiat.
16+
Donec bibendum, sapien eget volutpat dapibus, urna velit malesuada tortor, et fermentum arcu velit non dui.
17+
Vestibulum condimentum, justo sed rhoncus laoreet, nunc tellus viverra nulla, nec eleifend purus velit non justo.
18+
Proin sit amet venenatis velit, eu varius nunc. Integer eget ligula eu metus elementum sodales.
19+
Sed efficitur, mi a rhoncus vehicula, odio orci malesuada elit, at fermentum justo nulla et urna.
20+
Cras auctor, elit at lacinia eleifend, metus ex condimentum purus, ut lacinia tortor lectus id ipsum.
21+
Nunc viverra sit amet justo in lacinia. Vestibulum scelerisque, orci id cursus placerat, purus purus bibendum urna, at scelerisque quam libero sed arcu.
22+
Fusce eget purus eget purus sodales tristique ac nec nunc. Pellentesque eleifend laoreet ultrices.`;
23+
24+
const array = lorem.split('\n')
25+
let result = '';
26+
27+
for (let i = 0; i < size; i++) {
28+
result += `<p class='text-white font-semibold'>${array[i % array.length]}<p/>`
29+
}
30+
31+
//showing or hiding the text container
32+
if (result) {
33+
document.querySelector('.text-wrapper').style.display = 'flex'
34+
} else {
35+
document.querySelector('.text-wrapper').style.display = 'none'
36+
}
37+
return result;
38+
39+
}
40+
41+
42+
// adding event to copy button
43+
copy.addEventListener('click', (e) => {
44+
const text = document.querySelector('.text-section').textContent
45+
const textArea = document.createElement('textarea')
46+
textArea.value = text;
47+
48+
document.body.appendChild(textArea);
49+
textArea.style.display = 'none';
50+
51+
textArea.select();
52+
textArea.setSelectionRange(0, 99999);
53+
54+
if (textArea.select) {
55+
navigator.clipboard.writeText(textArea.value)
56+
copy.classList.add('fa-clipboard')
57+
copy.classList.remove('fa-copy')
58+
setTimeout(() => {
59+
copy.classList.remove('fa-clipboard')
60+
copy.classList.add('fa-copy')
61+
}, 500);
62+
}
63+
})

‎215 - Lorem Ipsum Generator/style.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
* {
2+
box-sizing: border-box;
3+
margin: 0;
4+
padding: 0;
5+
6+
}
7+
8+
body {
9+
display: flex;
10+
background-color: #9BBEC8;
11+
background-size: cover;
12+
margin: 0px auto;
13+
justify-content: center;
14+
align-items: start;
15+
padding: 5rem 0px;
16+
}
17+
18+
.wrapper {
19+
width: 80%;
20+
display: flex;
21+
flex-direction: column;
22+
align-items: center;
23+
gap: 2rem;
24+
25+
}
26+
27+
28+
/* upper section heading */
29+
.heading {
30+
width: 100%;
31+
text-align: center;
32+
margin: 7px;
33+
font-size: 2.5rem;
34+
font-weight: bolder;
35+
color: #0C356A;
36+
font-family: cursive;
37+
}
38+
39+
/* lower section */
40+
.lowerSection {
41+
display: flex;
42+
flex-direction: column;
43+
justify-content: center;
44+
align-items: center;
45+
gap: 8px;
46+
padding: 5px;
47+
}
48+
49+
#form {
50+
width: 100%;
51+
display: flex;
52+
justify-content: center;
53+
align-items: center;
54+
gap: 10px;
55+
}
56+
57+
.label {
58+
color: #0C356A;
59+
font-weight: bolder;
60+
font-size: 1.2rem;
61+
font-weight: bold;
62+
}
63+
64+
.inputField {
65+
border-radius: 1.4rem;
66+
font-weight: bold;
67+
border: none;
68+
border: 2px solid white;
69+
width: 20%;
70+
font-size: larger;
71+
font-weight: bold;
72+
text-align: center;
73+
outline: none;
74+
padding: 5px 18px;
75+
76+
}
77+
78+
.inputField:focus {
79+
background-color: #176B87;
80+
color: white;
81+
border: 2px solid skyblue;
82+
}
83+
84+
.submitButton {
85+
border: 2px solid #0174BE;
86+
padding: 5px 18px;
87+
background-color: #0C356A;
88+
border-radius: 1.4rem;
89+
color: white;
90+
font-weight: bold;
91+
font-size: large;
92+
cursor: pointer;
93+
}
94+
95+
.submitButton:hover {
96+
border: 2px solid #0C356A;
97+
background-color: #0174BE;
98+
}
99+
100+
101+
/* generated text section */
102+
.text-wrapper {
103+
background-color: #F1EFEF;
104+
/* display: none; */
105+
display: none;
106+
flex-direction: column;
107+
align-items: center;
108+
justify-content: center;
109+
gap: 2px;
110+
width: 80%;
111+
padding: 10px 18px;
112+
border-radius: 1.4rem;
113+
font-weight: bold;
114+
overflow-y: hidden;
115+
116+
}
117+
118+
119+
.copy-container {
120+
width: 100%;
121+
display: flex;
122+
justify-content: end;
123+
align-items: center;
124+
125+
}
126+
127+
.copy {
128+
color: #7C81AD;
129+
130+
}
131+
132+
.copy:hover {
133+
color: #4B527E;
134+
}
135+
136+
@media screen and (max-width: 768px) {
137+
body {
138+
padding: 1rem 0; /* Adjusted padding for smaller screens */
139+
}
140+
141+
.wrapper{
142+
width: 100%;
143+
padding: 2px 8px;
144+
}
145+
.inputField{
146+
width: 50%;
147+
}
148+
.label {
149+
150+
font-size: 1.2rem;
151+
width: 50%;
152+
}
153+
.text-wrapper{
154+
width: 90%;
155+
}
156+
157+
158+
}

‎30DaysOfJavaScript/assets/215.png‎

46.9 KB
Loading

‎index.html‎

Lines changed: 10 additions & 0 deletions

0 commit comments

Comments
 (0)