Line Printer Simulation
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Line Printer</title>
<style>
body {
background-color: #333;
color: #00FF00;
font-family: monospace;
padding: 20px;
}
#printer {
white-space: pre-wrap; /* Preserves formatting like line breaks */
border: 2px solid #00FF00;
padding: 20px;
width: 80%;
margin: 0 auto;
height: 400px;
overflow-y: auto;
background-color: #111;
}
.line {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.line.visible {
opacity: 1;
}
</style>
</head>
<body>
<h1>Line Printer Simulation</h1>
<div id=”printer”></div>
<script>
const lines = [
“Initializing printer…”,
“Loading data…”,
“Printing line 1…”,
“Printing line 2…”,
“Printing line 3…”,
“Complete.”
];
function printLine(text, delay) {
const lineElement = document.createElement(“div”);
lineElement.classList.add(“line”);
lineElement.textContent = text;
document.getElementById(“printer”).appendChild(lineElement);
setTimeout(() => {
lineElement.classList.add(“visible”);
}, delay);
}
function startPrinting() {
let delay = 500; // Initial delay for the first line
lines.forEach((line, index) => {
printLine(line, delay * (index + 1)); // Increment delay for each line
});
}
// Start printing after 1 second
setTimeout(startPrinting, 1000);
</script>
</body>
</html>
overflow – Renders content outside of the text box.
transition – Interpolates between values.
white-space – How much white space is handled inside of an element.
white-space: pre-wrap – Texts wraps on line breaks or whenever needed.
border – Draws a border around the element.