We Keep Coding

Modal pop-up won't pop up

I was trying to make a pop-up modal. It shows up if opacity set to 1, but it won't appear when button is clicked.
The show has opacity 1, but it won't work.
I'd appreciate any sort of help, thanks!
I'd appreciate any sort of help, thanks!
I'd appreciate any sort of help, thanks!
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
console.log('clicks');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container .show {
opacity: 1;
pointer-events: auto;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

You are defining the .show class as a child of the modal because you put a space between. So instead of
.modal-container .show {
opacity: 1;
pointer-events: auto;
}
it should be without the space in between like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
Full Example:
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
console.log('clicks');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
.modal-container.show {
opacity: 1;
pointer-events: auto;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
.input {
width: 80%;
display: block;
margin: 15px auto;
padding: 12px 20px;
}
.input:focus {
background-color: lightblue;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<input type="text" placeholder='Donation Amount' class='input'>
<button class="close" id='donateClose'>Cancel</button>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

You have to define the .show class autonomously in the CSS file.
.show {
opacity: 1;
pointer-events: auto;
}
const donateOpen = document.getElementById('donateOpen');
const modal_container = document.getElementById('modal_container');
const donateClose = document.getElementById('donateClose');
donateOpen.addEventListener('click', () => {
donateOpen.classList.add('hide');
modal_container.classList.add('show');
});
donateClose.addEventListener('click', () => {
modal_container.classList.remove('show');
});
.modal-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-color: rbga(0,0,0,0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
opacity: 0;
pointer-events: none;
}
/* You have to define the show class autonomously in the CSS file. */
.show {
opacity: 1;
pointer-events: auto;
}
.hide {
opacity: 0;
}
.modal {
padding: 30px 50px;
max-width: 100%;
border-radius: 5px;
width: 350px;
height: 350px;
background-color: white;
text-align: center;
}
.input {
width: 80%;
display: block;
margin: 15px auto;
padding: 12px 20px;
}
.input:focus {
background-color: lightblue;
}
<button id='donateOpen'>DONATE NOW</button>
<div class='modal-container' id='modal_container'>
<div class='modal'>
<h2>Donate Now</h2>
<form action="">
<input type="text" placeholder='Name' class='input' id='name'>
<input type="email" placeholder='E-Mail' class='input'>
<input type="text" placeholder='Donation Amount' class='input'>
<button class="close" id='donateClose'>Cancel</button>
<button class='submit' id='donateClose'>Submit</button>
</form>
</div>
</div>

How To Validate Form Through JavaScript Before Entering To The Next Page?

This is a register form I'm currently working on it. The problem is that the JavaScript only validates the first field in the form which is the "username" field only, but not the rest of it. If i change the code by moving the password field to above, then the code validates for the passwords only. and same goes for the email address field. May I know, how to solve this issue?. Your help is much appreciated. I'm having this error only in Eclipse IDE application. BUT, WHEN THIS CODE IS DONE IN FIDDLE, IT WORKS FINE. THE CODE IN THE FIDDLE IS IN THIS LINK: https://jsfiddle.net/dbvnkcfm/5/.
Please help solve this issue, because I'm new to JavaScript.
Below is the code in my Eclipse IDE.
#charset "ISO-8859-1";
#import url("https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700;800&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #ECB365;
}
body,
input {
font-family: "Poppins", sans-serif;
}
.container {
position: relative;
width: 100%;
background-color: #041C32;
min-height: 100vh;
overflow: hidden;
}
.forms-container {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.login-signup {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 75%;
width: 50%;
transition: 1s 0.7s ease-in-out;
display: grid;
grid-template-columns: 1fr;
z-index: 5;
}
form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0rem 5rem;
transition: all 0.2s 0.7s;
overflow: hidden;
grid-column: 1 / 2;
grid-row: 1 / 2;
}
form.sign-up-form {
opacity: 0;
z-index: 1;
}
form.log-in-form {
z-index: 2;
}
.title {
font-size: 2.2rem;
color: #ECB365;
margin-bottom: 10px;
}
.input-field {
max-width: 380px;
width: 100%;
background-color: #ECB365;
margin: 10px 0;
height: 55px;
border-radius: 55px;
display: grid;
grid-template-columns: 15% 85%;
padding: 0 0.4rem;
position: relative;
}
.input-field i {
text-align: center;
line-height: 55px;
color: #444444;
transition: 0.5s;
font-size: 1.1rem;
}
.input-field input {
background: none;
outline: none;
border: none;
line-height: 1;
font-weight: 600;
font-size: 1.1rem;
color: #041C32;
}
.input-field input::placeholder {
color: #444444;
font-weight: 500;
}
.social-text {
padding: 0.7rem 0;
font-size: 1rem;
}
.social-media {
display: flex;
justify-content: center;
}
.social-icon {
height: 46px;
width: 46px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0.45rem;
color: #ECDBBA;
border-radius: 50%;
border: 1px solid #fff;
text-decoration: none;
font-size: 1.1rem;
transition: 0.3s;
}
.social-icon:hover {
color: #ECB365;
border-color: #ECB365;
}
.btn {
width: 150px;
background-color: #064663;
border: none;
outline: none;
height: 49px;
border-radius: 49px;
color: #fff;
text-transform: uppercase;
font-weight: 600;
margin: 10px 0;
cursor: pointer;
transition: 0.5s;
}
.btn:hover {
background-color: #4d84e2;
}
.panels-container {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.container:before {
content: "";
position: absolute;
height: 2000px;
width: 2000px;
top: -10%;
right: 48%;
transform: translateY(-50%);
background-image: linear-gradient(-45deg, #064663 0%, #064663 100%);
transition: 1.8s ease-in-out;
border-radius: 50%;
z-index: 6;
}
.image {
width: 100%;
transition: transform 1.1s ease-in-out;
transition-delay: 0.4s;
}
.panel {
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: space-around;
text-align: center;
z-index: 6;
}
.left-panel {
pointer-events: all;
padding: 3rem 17% 2rem 12%;
}
.right-panel {
pointer-events: none;
padding: 3rem 12% 2rem 17%;
}
.panel .content {
color: #fff;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel h3 {
font-weight: 600;
line-height: 1;
font-size: 1.5rem;
}
.panel p {
font-size: 0.95rem;
padding: 0.7rem 0;
}
.btn.transparent {
margin: 0;
background: #041C32;
/*border: 2px solid #fff;*/
width: 130px;
height: 41px;
font-weight: 600;
font-size: 0.8rem;
}
.btn.transparent:hover {
background-color: #4d84e2;
}
.right-panel .image,
.right-panel .content {
transform: translateX(800px);
}
/* ANIMATION */
.container.sign-up-mode:before {
transform: translate(100%, -50%);
right: 52%;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateX(-800px);
}
.container.sign-up-mode .login-signup {
left: 25%;
}
.container.sign-up-mode form.sign-up-form {
opacity: 1;
z-index: 2;
}
.container.sign-up-mode form.log-in-form {
opacity: 0;
z-index: 1;
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateX(0%);
}
.container.sign-up-mode .left-panel {
pointer-events: none;
}
.container.sign-up-mode .right-panel {
pointer-events: all;
}
#media (max-width: 870px) {
.container {
min-height: 800px;
height: 100vh;
}
.login-signup {
width: 100%;
top: 95%;
transform: translate(-50%, -100%);
transition: 1s 0.8s ease-in-out;
}
.login-signup,
.container.sign-up-mode .login-signup {
left: 50%;
}
.panels-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr 2fr 1fr;
}
.panel {
flex-direction: row;
justify-content: space-around;
align-items: center;
padding: 2.5rem 8%;
grid-column: 1 / 2;
}
.right-panel {
grid-row: 3 / 4;
}
.left-panel {
grid-row: 1 / 2;
}
.image {
width: 200px;
transition: transform 0.9s ease-in-out;
transition-delay: 0.6s;
}
.panel .content {
padding-right: 15%;
transition: transform 0.9s ease-in-out;
transition-delay: 0.8s;
}
.panel h3 {
font-size: 1.2rem;
}
.panel p {
font-size: 0.7rem;
padding: 0.5rem 0;
}
.btn.transparent {
width: 110px;
height: 35px;
font-size: 0.7rem;
}
.container:before {
width: 1500px;
height: 1500px;
transform: translateX(-50%);
left: 30%;
bottom: 68%;
right: initial;
top: initial;
transition: 2s ease-in-out;
}
.container.sign-up-mode:before {
transform: translate(-50%, 100%);
bottom: 32%;
right: initial;
}
.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
transform: translateY(-300px);
}
.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
transform: translateY(0px);
}
.right-panel .image,
.right-panel .content {
transform: translateY(300px);
}
.container.sign-up-mode .login-signup {
top: 5%;
transform: translate(-50%, 0);
}
}
#media (max-width: 570px) {
form {
padding: 0 1.5rem;
}
.image {
display: none;
}
.panel .content {
padding: 0.5rem 1rem;
}
.container {
padding: 1.5rem;
}
.container:before {
bottom: 72%;
left: 50%;
}
.container.sign-up-mode:before {
bottom: 28%;
left: 50%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="Style.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous" ></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="get">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" value="Login" class="btn solid" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<i class="fab fa-facebook-f"> </i>
<i class="fab fa-twitter"> </i>
<i class="fab fa-google"> </i>
<i class="fab fa-linkedin-in"></i>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" onSubmit="return Register()">
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id = "user" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id = "emailAddress" class = "text-danger"/>
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id = "pass" class = "text-danger"/>
</div>
<br>
<input type="submit" class="btn" value="Sign up" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register()
{
return validation();
}
function validation()
{
var user = document.getElementById('user').value;
var emailAddress = document.getElementById('emailAddress').value;
var pass = document.getElementById('pass').value;
console.log(user)
if (user == null || user == "")
{
alert ("Username cannot be empty");
return false;
}
else if(user.length < 3 || user.length > 30)
{
alert ("Username must be at least 3 characters long.");
return false;
}
else
{
return true;
}
console.log(emailAddress)
if (emailAddress == null || emailAddress == "")
{
alert ("Email cannot be empty");
return false;
}
else if(emailAddress.indexOf('#') <= 0)
{
alert (" # symbol is on invalid position");
return false;
}
else
{
document.getElementById('emailAddress').innerHTMl = "";
}
console.log(pass)
if (pass == null || pass == "")
{
alert ("Password cannot be empty");
return false;
}
else if(pass.length <= 4 || pass.length >= 20)
{
alert ("Password must be at least 4 characters long.");
return false;
}
else
{
document.getElementById('pass').innerHTMl = "";
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>

You have duplicated IDs so I add 's' for each ID in signup form also when you use return It's something like you break the function. This should work for you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="main.css" />
<title>Sign in & Sign up Form</title>
</head>
<script src="https://kit.fontawesome.com/64d58efce2.js" crossorigin="anonymous"></script>
<body>
<div class="container">
<div class="forms-container">
<!---------------------------- this is for login form ------------------------------------->
<div class="login-signup">
<form action="Logsuccess" class="log-in-form" method="post">
<h2 class="title">Log-in</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="username" placeholder="Username" id="luser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="password" placeholder="Password" id="lpass" class="text-danger" />
</div>
<br>
<input type="button" value="Login" class="btn solid" onclick="Register('login')" />
<p class="social-text">Or Sign in with social platforms</p>
<div class="social-media">
<i class="fab fa-facebook-f"> </i>
<i class="fab fa-twitter"> </i>
<i class="fab fa-google"> </i>
<i class="fab fa-linkedin-in"></i>
</div>
</form>
<!---------------------------- this is for signup form ------------------------------------->
<!-- <form action="#" class="sign-up-form" method="post" onsubmit="return validation()"> -->
<!-- <form action="RegSuccess" class="sign-up-form" method="post">-->
<form action="RegConfirm.php" class="sign-up-form" method="post" o>
<h2 class="title">Sign up</h2>
<div class="input-field">
<i class="fas fa-user"></i>
<input type="text" name="Username" placeholder="Username" id="suser" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-envelope"></i>
<input type="email" name="email" placeholder="Email" id="semailAddress" class="text-danger" />
</div>
<br>
<div class="input-field">
<i class="fas fa-lock"></i>
<input type="password" name="Password" placeholder="Password" id="spass" class="text-danger" />
</div>
<br>
<input type="button" class="btn" value="Sign up" onclick="Register('signup')" />
</form>
</div>
</div>
<!---------------------------- this is in login page for asking to signup------------------------------------->
<div class="panels-container">
<div class="panel left-panel">
<div class="content">
<h3>Don't Have An Account ?</h3>
<p>
Your are always welcome to join us!!!
</p>
<button class="btn transparent" id="sign-up-btn"> Sign up </button>
</div>
<img src="img/log.svg" class="image" alt="" />
</div>
<!---------------------------- this is in signup page for asking to login------------------------------------->
<div class="panel right-panel">
<div class="content">
<h3>Are You One of Us ?</h3>
<p>
Let's Log In Then !!!
</p>
<button class="btn transparent" id="sign-in-btn"> Log in </button>
</div>
<img src="img/register.svg" class="image" alt="" />
</div>
</div>
</div>
<script>
//---------------------------- this is javascript for the buttons -------------------------------------//
const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");
sign_up_btn.addEventListener("click", () => {
container.classList.add("sign-up-mode");
});
sign_in_btn.addEventListener("click", () => {
container.classList.remove("sign-up-mode");
});
//---------------------------- start of javascript for validation -------------------------------------//
function Register(formType) {
return validation(formType);
}
function validation(formType) {
if (formType == "login") {
var user = document.getElementById("luser").value;
var pass = document.getElementById("lpass").value;
} else {
var user = document.getElementById("suser").value;
var pass = document.getElementById("spass").value;
var emailAddress = document.getElementById("semailAddress").value;
}
var errors = [];
// var user = document.getElementById('suser').value;
// var emailAddress = document.getElementById('semailAddress').value;
// var pass = document.getElementById('spass').value;
console.log(user)
if (user == null || user == "") {
errors.push("Username is required");
// return false;
} else if (user.length < 3 || user.length > 30) {
errors.push("Username must be at least 3 characters long.");
// return false;
}
if (formType == "signup") {
console.log(emailAddress)
if (emailAddress == null || emailAddress == "") {
errors.push("Email cannot be empty");
//return false;
} else if (emailAddress.indexOf('#') <= 0) {
errors.push(" # symbol is on invalid position");
} else {
document.getElementById('semailAddress').innerHTMl = "";
}
}
console.log(pass)
if (pass == null || pass == "") {
errors.push("Password cannot be empty");
// return false;
} else if (pass.length <= 4 || pass.length >= 20) {
errors.push("Password must be at least 4 characters long.");
// return false;
} else {
document.getElementById('spass').innerHTMl = "";
}
if (errors.length > 0) {
alert(errors.join("\n"));
return false;
} else {
return true;
}
}
//---------------------------- end of javascript for validation -------------------------------------//
</script>
</body>
</html>

Contact Form Animation

I have the following code:
input[type=text], [type=email], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index:2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom:auto;
margin-top:1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column, input[type=submit] {
width: auto;
margin-top:0;
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST">
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>
So what I am basically looking for is the shake effect when the user submits without entering any inputs.
Expected Output
When the user hits the submit button without entering anything, the border of the box should turn red as well as shake. I just want the boxes of the placeholders to shake and turn red, not the whole element. I tried adding keyframes to make this possible but got stuck since I was not getting the desired output, any suggestions?
In other words, I just would like the first name, last name, email, and subject borders of the boxes to turn red and shake.

Add an event listener for submit that loops through all the input and textarea fields and checks whether they are valid with checkValidity(). If they are not valid, we set their border color to red with the borderColor style attribute and set their animation with the animation style attribute.
To be able to play the same animation over and over again, we can use setTimeout to wait a specified number of milliseconds and then set the animation style attribute back to unset.
document.querySelector('form').addEventListener('submit', function(e) {
var isValid = true;
this.querySelectorAll('input, textarea').forEach(function(f) {
if (!f.checkValidity()) {
isValid = false;
f.style.borderColor = "red";
f.style.animation = "shake 0.82s forwards";
setTimeout(function(){f.style.animation="unset";},820);
}else{
f.style.borderColor = "initial";
//Sets it back to normal if the field is valid
}
})
if (!isValid) {
e.preventDefault();
}
})
input[type=text],
[type=email],
select,
textarea {
width: 100%;
padding: 12px;
border: 1px solid #555;
margin-top: 6px;
margin-bottom: 16px;
resize: vertical;
}
input[type=submit] {
background-color: #0563bb;
color: white;
padding: 12px 20px;
border: none;
cursor: pointer;
}
input[type=submit]:hover {
opacity: 0.9;
}
.contactform {
position: relative;
border-radius: 50px;
background-color: #f2f2f2;
padding: 5px;
z-index: 2;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: 1%;
width: 100%;
animation-name: gradient;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.contactform:hover {
animation-name: gradient;
animation-duration: 15s;
animation-iteration-count: infinite;
}
.column {
float: center;
width: 50%;
margin-top: 6px;
padding: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column,
input[type=submit] {
width: auto;
margin-top: 0;
}
}
#keyframes shake {
10%,
90% {
transform: translate3d(-1px, 0, 0);
}
20%,
80% {
transform: translate3d(2px, 0, 0);
}
30%,
50%,
70% {
transform: translate3d(-4px, 0, 0);
}
40%,
60% {
transform: translate3d(4px, 0, 0);
}
}
<section id="contact">
<div class="container" data-aos="fade-up">
<div class="contactform">
<div style="text-align:center">
<div class="section-title">
<h2><br/>Get In Touch</h2>
</div>
<p>Feel Free To Reach Out To Me Through This Form! </p>
</div>
<div class="row">
<div class="column">
<form name="myform" action="thankyou.html" method="POST" novalidate>
<label for="firstname">First Name</label>
<input type="text" id="first name" name="firstname" placeholder="Your firstname.." required>
<label for="lastname">Last Name</label>
<input type="text" id="lastname" name="lastname" placeholder="Your last name.." required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Your Email.." required>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Lets Collaborate..." style="height:170px" required></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</div>
</div>
</section>

Sign in & Slide Out format

I have a question and would love to get some feedback from you all. I'm stuck in a situation with my code that will not slide left to right. I have a SignUp/SignIn form and I need the slide in animation going left to right when you click either those 2 buttons. I feel like I have everything intact but it just does not want to work! :( Any help will be a blessing.
window.onload - function() {
const signupButton = document.getElementById('signup');
const signinButton = document.getElementById('signin');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
}
* {
box-sizing: border-box;
}
body {
font-family: "Monteserrat", sans-serif;
background: #f6f5f7;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: -20px 0 50px;
}
h2 {
font-weight: bold;
margin: 0;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container form {
background: white;
display: flex;
flex-direction: column;
padding: 0 50px;
height: 100%;
align-items: center;
text-align: center;
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #ddd;
border-radius: 50%;
display: inline-flex;
justify-content: center;
text-align: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
.form-container input {
background: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
button {
border-radius: 20px;
border: 1px solid;
#ff4b2b;
background: #ff4b2b;
color: white;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #fff;
}
.form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
.form-container {
position: absolute;
top: 00;
height: 100%;
transition: all 0.6 ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.sign-up-container {
left: 0;
width: 50%;
z-index: 1;
opacity: 0;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.overlay {
background: #ff416c;
background: linear-gradient(to right, #ff4b2b, #ff416c) no-repeat 0 0 / cover;
color: #fff;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-panel {
position: absolute;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
height: 100%;
width: 50%;
text-align: center;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.overlay-left {
transform: translateX(-20%);
}
/* Animation */
/* Move sign in to the right */
.container.right-panel-active .sign-In-container {
transform: translateX(100%);
}
.container.right-panel-active .overlay-container {
transform: translateX(-100%);
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
<html>
<link rel="stylesheet" href="style.css" />
<script src="buttonwork.js"></script>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div class="social-container">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-linkedin-in"></i>
</div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
<button>Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="signIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="signUp">Sign Up</button>
</div>
</div>
</div>
</div>
<footer>
</footer>
</html>
Thanks again!
Dominik

You just have a few typo in your javascript code . Your "signup" and "signin" should be "signUp" and "signIn"
const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');
signUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
Here is the codepen if you want to see it in action => https://codepen.io/l0609890/pen/dyyKBeo

In React we don't directly mutate the DOM. It is also considered anti-pattern to query the DOM to access the DOMNodes (document.getElementById), use React refs instead to gain access to the underlying DOMNodes. I have converted it in react hope it helps
In this case you should use and update some React state to conditionally add the "right-panel-active" class to the ".container" div element.
const SignInForm = () => {
const [swapPanel, setSwapPanel] = useState(false);
const signUpButton = () => {
setSwapPanel(true);
};
const signInButton = () => {
setSwapPanel(false);
};
return (
<div className="sigin">
<div
className={["container", swapPanel ? "right-panel-active" : null]
.filter(Boolean)
.join(" ")}
id="container"
>
<div className="form-container sign-up-container">
<form action="#">
<h1>Create Account</h1>
<div className="social-container"></div>
<span>or use your email for registration</span>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
<button onClick={signUpButton}>Sign Up</button>
</form>
</div>
<div className="form-container sign-in-container">
<form action="#">
<h1>Sign in</h1>
<div className="social-container"></div>
<span>or use your account</span>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Password" />
Forgot your password?
{/* Forgot your password? */}
<button onClick={signInButton}>Sign In</button>
</form>
</div>
<div className="overlay-container">
<div className="overlay">
<div className="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>
To keep connected with us please login with your personal info
</p>
<button
type="button"
onClick={signInButton}
className="ghost"
id="signIn"
>
Sign In
</button>
</div>
<div className="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button
type="button"
onClick={signUpButton}
className="ghost"
id="signUp"
>
Sign Up
</button>
</div>
</div>
</div>
</div>
</div>
);
};

Add and remove class if input is empty

I've a problem with adding and removing a class when input is empty.
Code also available on JSFiddle.
var name = document.getElementById("name").value;
var lastname = document.getElementById("lastname").value;
var underlineFocus = document.getElementsByClassName("underline-focus");
function changeUnderline() {
if (name === "") {
underlineFocus[0].classList.add("underline-focus-empty");
} else {
underlineFocus[0].classList.remove("underline-focus-empty");
}
if (lastname === "") {
underlineFocus[1].classList.add("underline-focus-empty");
} else {
underlineFocus[1].classList.remove("underline-focus-empty");
}
}
changeUnderline();
form {
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
input {
width: 100%;
height: 24px;
font-size: 14px;
background: none;
border: none;
outline: none;
}
.underline {
width: 100%;
height: 1px;
margin-bottom: 18px;
background-color: #1a2c5b;
position: relative;
top: -3px;
}
.underline-focus {
width: 0;
height: 3px;
background-color: #7971ea;
transition: width .3s ease-in-out;
z-index: 10;
}
input:focus+.underline-focus {
width: 100%;
}
.underline-empty,
.underline-focus-empty {
background-color: #f95959;
}
<form>
<label for="name">Name *</label>
<input type="text" name="name" id="name" onchange="changeUnderline();" required>
<div class="underline-focus"></div>
<div class="underline"></div>
<label for="lastname">Last Name *</label>
<input type="text" name="lastname" id="lastname" onchange="changeUnderline();" required>
<div class="underline-focus"></div>
<div class="underline"></div>
</form>
I've already looked at other questions and can't find the answer.

2 major errors in your code.
1) by using <form> each enter send your data to nowhere and refresh all input to null
2) you can't use the word "name" for a variable.
var X_name = document.getElementById("name");
var underlineFocus = document.getElementsByClassName("underline-focus");
function changeUnderline() {
if (X_name.value === "") {
underlineFocus[0].classList.add("underline-focus-empty");
} else {
underlineFocus[0].classList.remove("underline-focus-empty");
}
}
changeUnderline();
form {
justify-content: flex-start;
align-content: flex-start;
align-items: flex-start;
}
input {
width: 100%;
height: 24px;
font-size: 14px;
background: none;
border: none;
outline: none;
}
.underline {
width: 100%;
height: 1px;
margin-bottom: 18px;
background-color: #1a2c5b;
position: relative;
top: -3px;
}
.underline-focus {
width: 0;
height: 3px;
background-color: #7971ea;
transition: width .3s ease-in-out;
z-index: 10;
}
input:focus+.underline-focus {
width: 100%;
}
.underline-empty,
.underline-focus-empty {
background-color: #f95959;
}
<!--form -->
<label for="name">Name *</label>
<input type="text" name="name" id="name" onchange="changeUnderline();" required>
<div class="underline-focus"></div>
<div class="underline"></div>
<!--/form -->