use the enter key to submit <input> with javascript – Html

function animatedForm() {
const arrows = document.querySelectorAll('.fa-arrow-right');
const inputs = document.getElementsByTagName("form")[0].querySelectorAll("input");

    inputs.forEach((input) => {
      input.addEventListener("keypress", (e) => {
        if (e.keyCode === 13) {
            const parent = input.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        }
      });
    });
    
    arrows.forEach(arrow => {
        arrow.addEventListener("click", () => {
            const input = arrow.previousElementSibling;
            const parent = arrow.parentElement;
            const nextForm = parent.nextElementSibling;

            //check for validation
            if(input.type === "text" && validateUser(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'email' && validateEmail(input)){
                nextSlide(parent, nextForm);
            } else if(input.type === 'password' && validateUser(input)){
                nextSlide(parent, nextForm);
            } else {
                parent.style.animation = "shake 0.5s ease";
            };
            //animation reset
            parent.addEventListener('animationend', () => {
                parent.style.animation = "";
            });
        });
    });
    
}

//check if username or password has more than 6 characters 
function validateUser(user){
    if(user.value.length < 6){
        console.log('error not enough characters');
        error("rgb(189,87,87");
    } else {
        error("rgb(87, 189, 130");
        return true;
    }
}

//check if email is valid 
function validateEmail(email){
    const validation = /^[^s@]+@[^s@]+.[^s@]+$/;
    if(validation.test(email.value)){
        error("rgb(87, 189, 130");
        return true;
    } else {
        error("rgb(189,87,87");
    }
}

//change which input is active 
function nextSlide(parent, nextForm){
    parent.classList.add('innactive');
    parent.classList.remove('active');
    nextForm.classList.add('active');
}

//change background color if you fail to meet minimum requirements 
function error(color){
    document.body.style.backgroundColor = color;
}

//start
animatedForm();

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
}

body{
    height: 100vh;
    display: flex;
    background-color: rgb(87, 189, 130);
    transition: background 0.5s ease;
    position: relative;
}

.field-name, .field-email, .field-password, .field-finish {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    height: 50px;
    width: 400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 5px;
    transition: all 0.5s ease;
}

.field-name i, .field-email i, .field-password i, .field-finish i {
    padding: 10px;
}

.field-name i:last-child, .field-email i:last-child, .field-password i:last-child, .field-finish i:last-child {
    padding: 10px;
    cursor: pointer;
}

.field-name input, .field-email input, .field-password input {
    background: none;
    border: none;
    flex: 1;
    height: 100%;
    outline: none;
}

div.innactive{
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 50%);
}

div.active {
    opacity: 1;
    pointer-events: all;
    transform: translate(-50%, -50%);
}

@keyframes shake{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    50%{
        transform: translate(-50%, -50%) rotate(10deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(0deg);
    }   
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7781ca377a.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css" >
    <title>simple form</title>
</head>
<body>
<!-- icons by fontawesome.com -->
    <form>
        <div class="field-name">
            <i class="fa-solid fa-user"></i>
            <input type="text" placeholder="Username" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-email innactive">
            <i class="fa-solid fa-envelope"></i>
            <input type="email" placeholder="Email" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-password innactive">
            <i class="fa-solid fa-key"></i>
            <input type="password" placeholder="Password" required> 
            <i class="fa-sharp fa-solid fa-arrow-right"></i>
        </div>
        <div class="field-finish innactive">
            <i class="fa-solid fa-heart"></i>
            <p>Thank you!</p>
            <i class="fa-solid fa-heart"></i>
        </div>
    </form>

    <script src="app.js"></script>
</body>
</html>