html
Copy code
Dummy Placeholder Generator
Dummy Placeholder Generator
CSS (styles.css)
css
Copy code
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #ff7e5f, #feb47b);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background: rgba(0, 0, 0, 0.7);
padding: 20px;
border-radius: 10px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
h1 {
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
font-size: 1.2em;
margin-bottom: 10px;
}
input {
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
width: 80px;
text-align: center;
}
button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background: #ff7e5f;
color: #fff;
font-size: 1em;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #feb47b;
}
#placeholderOutput {
margin-top: 20px;
background: #333;
padding: 20px;
border-radius: 10px;
white-space: pre-wrap;
}
JavaScript (script.js)
javascript
Copy code
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('placeholderForm');
const output = document.getElementById('placeholderOutput');
form.addEventListener('submit', (event) => {
event.preventDefault();
const length = document.getElementById('length').value;
const placeholderText = generatePlaceholderText(length);
output.textContent = placeholderText;
});
function generatePlaceholderText(length) {
const lorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
let result = "";
while (result.length < length) {
result += lorem + " ";
}
return result.slice(0, length);
}
});
