Printer with text input in HTML,CSS,JS

HTML

<div class="container">
<div class="container-input">
<input id="input-text" type="text" placeholder="Write something">
<button id="button" onclick="printSomething()">PRINT</button>
</div>
<div class="sheet-in"></div>
<div class="containerBoxPrinter">
<div class="boxPrinter">
<div id="led"></div>
</div>
<div class="boxPrinter">
<div class="sheetOut one"></div>
</div>

<div class="boxPrinter">
<div class="sheetOut two"></div>
</div>
<div id="sheet">
<p id="text"></p>
</div>
</div>

</div>

CSS

body {
background-color: dodgerblue;
margin: 0;
}

.container-input{
margin-bottom: 50px;
margin-top: 10px;
display: flex;
flex-direction: row;
}

button {
border: none;
outline: none;
background: chartreuse;
color: gray;
font-weight: bold;
letter-spacing: 1px;
padding-right: 10px;
padding-left: 10px;
}

button:hover {
cursor: pointer;
}

.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
min-height: 400px;
}

.containerBoxPrinter {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
}

.sheet-in {
width: 209px;
height: 77px;
border-radius: 10px 10px 0 0;
background: #e0e0e0;
}

.boxPrinter {
width: 320px;
background: #f5f5f5;
position: relative;
z-index: 2;
}

.boxPrinter:nth-child(1) {
height: 82px;
background: #f5f5f5;
border-radius: 30px 30px 0 0;
}

.boxPrinter:nth-child(2) {
height: 53px;
background: #E0E0E0;

}

.boxPrinter:nth-child(3) {
height: 29px;
background: #E0E0E0;
border-radius: 0 0 30px 30px;
z-index: 0;
margin-top: -1px;
}

#led {
width: 13px;
height: 13px;
background: orangered;

position: absolute;
right: 0;
margin-top: 20px;
margin-right: 20px;
border-radius: 50%;
}

.sheetOut {
width: 188px;
height: 7px;
position: absolute;
left: 0;
right: 0;
margin: auto;
}

.sheetOut.one {
border-radius: 7px 7px 0 0;
background: #424242;
bottom: 0;
}

.sheetOut.two {
border-radius: 0 0 7px 7px;
background: #424242;
top: 0;
}

input {
padding-left: 10px;
padding-right: 10px;
height: 40px;
border: none;
outline: none;

}

#sheet {
width: 140px;
height: 170px;
background: #fafafa;
position: absolute;
z-index: 1;
transition: 3s;
transform: translateY(-110px);
padding: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
box-shadow: 0 0 5px grey;
}

#sheet.mymove {
animation: mymove 10s;
}

#text {
font-size: 12px;
height: 0;
max-height: 90%;
overflow: hidden;
transform: scale(-1, -1);
word-wrap: break-word;
transition: 3s;
}

@keyframes mymove {

0% {
top: 0px;
}
45% {
transform: rotate(0deg)
}
50% {
top: 180px;
transform: rotate(-180deg);
z-index: 1
}
51% {
z-index: 2
}
60%, 70% {
top: 0;
transform: rotate(-180deg);
z-index: 2
}
90% {
top: -180px;
transform: rotate(0deg);
z-index: 2
}
95% {
z-index: 1
}
100% {
top: 0;
}

}

let textInput = document.getElementById('input-text');
let textOutput = document.getElementById('text');
let sheet = document.getElementById('sheet');
let led = document.getElementById('led');
let button = document.getElementById('button');
let isAnimating = false;

function printSomething() {
if (isAnimating === false) {
let text = textInput.value;
textOutput.innerHTML = text;
textInput.value = "";
textOutput.style.height = "90%"
sheet.setAttribute("class", "mymove");
sheet.addEventListener("animationend", animationFinished, false);
isAnimating = true;
led.style.background = "chartreuse";
button.style.background = "#E0E0E0";
}
}

function animationFinished(e) {
isAnimating = false;
led.style.background = "orangered";
textOutput.style.height = "0";
button.style.background = "chartreuse";
sheet.removeAttribute("class");
}