i modified the html code, the problem is all buttons working fine but the undo button is not working
Pls help me regarding this.
here is the modified html
body {
font-family: Arial, sans-serif;
}
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 5px;
}
textarea {
width: 100%;
height: 150px;
resize: none;
padding: 5px;
border: 1px solid black;
font-size: 15px;
font-family: Arial, sans-serif;
text-align: left;
opacity: 0;
transform: translateY(-20px);
transition: opacity 1s, transform 1s;
animation: slideInTop 1s forwards;
}
.button {
padding: 8px 15px;
border: 1px solid black;
border-radius: 5px;
font-size: 14px;
font-family: Arial, sans-serif;
cursor: pointer;
transition: background-color 1s, color 1s;
opacity: 0;
transform: translateY(20px);
}
#c1 {
background-color: black;
color: white;
animation: slideInTopLeft 1s forwards;
}
#c2 {
background-color: white;
color: black;
animation: slideInTopRight 1s forwards;
}
#c3 {
background-color: lightgray;
color: black;
animation: slideInBottomLeft 1s forwards;
}
#c4 {
background-color: blue;
color: yellow;
animation: slideInBottomRight 1s forwards;
}
#b1 {
background-color: #ff3333;
color: white;
animation: slideInBottom 1s forwards;
}
#b2 {
background-color: #3f51b5;
color: white;
animation: slideInBottom 1s forwards;
}
#b3 {
background-color: #3f51b5;
color: white;
animation: slideInBottom 1s forwards;
}
q {
display: block;
text-align: center;
font-size: 30px;
margin-top: 20px;
padding: 10px;
border: 1px solid black;
border-radius: 5px;
transition: background-color 1s, color 1s;
cursor: pointer;
opacity: 0;
transform: translateY(20px);
animation: slideInBottom 1s forwards;
}
q:hover {
background-color: #333;
color: white;
}
.label {
text-align: center;
font-size: 14px;
margin-top: 10px;
font-style: italic;
opacity: 0;
transform: scale(0.2);
animation: zoomIn 2s forwards;
}
.title {
text-align: center;
font-size: 30px;
font-weight: bold;
color: black;
opacity: 0;
animation: flipIn 2s forwards;
}
.code-label {
text-align: center;
font-size: 18px;
font-weight: bold;
color: black;
opacity: 0;
animation: flipIn 2s forwards;
}
@keyframes slideInTop {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInTopLeft {
from {
opacity: 0;
transform: translate(-20px, -20px);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes slideInTopRight {
from {
opacity: 0;
transform: translate(20px, -20px);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes slideInBottomLeft {
from {
opacity: 0;
transform: translate(-20px, 20px);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes slideInBottomRight {
from {
opacity: 0;
transform: translate(20px, 20px);
}
to {
opacity: 1;
transform: translate(0, 0);
}
}
@keyframes slideInBottom {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.2);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes flipIn {
from {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
to {
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
</style>
Code Explainer
The code you want explained:
Explain the code!
Made by Pralaya
let ta = document.getElementById("ta");
let undoCodeValue = "";
function undoCode() {
if (undoCodeValue !== "") {
ta.value = undoCodeValue;
undoCodeValue = "";
}
ta.focus();
}
function changeColor(element) {
ta.style.backgroundColor = element.style.backgroundColor;
ta.style.color = element.style.color;
}
function textInfo() {
let pos = ta.value.substring(0, ta.selectionStart).split("\n").length;
let x = "x: " + ta.selectionStart + " | ";
let y = "y: " + (pos - 1) + " | ";
elem("x").innerHTML = x + y + "size: " + ta.value.length;
}
function clearCode() {
ta.value = "";
undoCodeValue = "";
ta.focus();
}
function elem(id) {
return document.getElementById(id);
}
textInfo();
</script>