registration form fork

by MD Hasan Patwary

HTML

<div class="right">
	<form class="right-authorization">
		  <div class="sign-in">
			<i class='bx bx-user bx-sm'></i>
			SIGN-UP
		  </div>
		  <hr>
		  <div class="login one-container">
			<div class="login-outside" >
				<div class="login-write">
					<i class='bx bx-user bx-xs'></i>
					<input class="inside" type="text" placeholder="email" id="email" >
				</div>
			</div>
			<div id="emailDiv" class="invalid"></div>

			<div class="login-outside">
				<div class="password login-write">
					<i class='bx bx-lock-alt bx-xs'></i>
					<input class="inside" type="password" placeholder="password" minlength="6" id="password">
					
				</div>
			</div>
			<div id="passDiv" class="invalid"></div>

			<div class="login-outside">
				<div class="name-surname login-write">
					<i class='bx bx-edit-alt bx-xs'></i>
					<input class="inside" type="text" placeholder="full name" id="fullName">
				</div>
			</div>
			<div id="fullNameDiv" class="invalid"></div>
			
			<div class="login-outside">
				<div class="number login-write">
					<i class='bx bx-phone bx-xs'></i>
					<input class="inside" type="text" placeholder="phone number" id="phoneNumber">
				</div>
			</div>
			<div id="phoneDiv" class="invalid"></div>

			<button type="button" onclick="userRegister()">Sign up</button>
			  <div class="register-text">
			      <span>Already have an account ? <br><a href="web-site_login.html">Sign in</a></span>
		      </div>
		  </div>
	</form>
</div>

CSS

.right{
    background-color: #222222;
    border-radius: 12px;
    max-width: 320px;
    width: 100%;
    display: flex;
    justify-content: center;
}
.right-authorization{
    width: 90%;
    border: 1px solid  #363738;
    border-radius: 12px;
    background-color: #2d2d2d;
    color: white;
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 400;
    justify-content: center;
    gap: 8px;
    margin-block: 15px;
   
    
}

.sign-in{
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 15px;
}


.login-outside {
    background-color: #222222;
    border-radius: 10px;
    border: 1px solid  #363738;
    padding: 5px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
}


.login-write{
    margin-left: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.login-write input{
    margin-bottom: 2px;
    color: white;
    width: 100%;
}

.login-write input:focus{
    border-color: transparent;
    outline: none;
}


.inside{
    background-color: transparent;
    border-color: transparent;
}

.login{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login button{
    background-color: #5e8abe;
    border: 1px solid  #363738;
    border-radius: 10px;
    padding: 3px 20px;
    font-weight: 500;
    width: 110px;
    height: 35px;
    margin-top: 20px;
    color: white;
}

.login button:hover{
    background-color: white;
    color: black;
}


.register-text{
    font-size: 12px;
    color: #8f8f8f;
    padding: 10px;
    display: flex;
    text-align: center;
    margin-top: 10px;
}

.register-text a{
    text-decoration: underline rgb(193, 193, 193);
    color: white;
}

.register-text a:hover{
    color: #7a7a7a;
}

.invalid {
    color: #ff2748;
    border-color: #ff2748;
    margin-top: 5px;
}

JavaScript

function userRegister(){
    let emailField = document.getElementById("email").value;
    let passField = document.getElementById("password").value;
    let fullNameField = document.getElementById("fullName").value;
    let phoneField = document.getElementById("phoneNumber").value;
    

    let person = {
        email: emailField,
        password: passField,
        fullName: fullNameField,
        phoneNumber: phoneField,
    };

    
    let users = JSON.parse(localStorage.getItem("UsersVK")) || [];
    if(emailField==""){
        emailDiv.innerHTML="Please inter Email";
    }
    if(passField==""){
        passDiv.innerHTML="Please inter password";
    }
    if(fullNameField==""){
        fullNameDiv.innerHTML="Please inter full name";
    }
    if(phoneField==""){
        phoneDiv.innerHTML="Please inter phone number";
    }

    else{users.push(person);

    localStorage.setItem("UsersVK",JSON.stringify(users));
    alert("User saved successfully");}


}