var login = document.getElementById('login').value;
var username = document.getElementById('name').value;
var password = document.getElementById('password').value;
var mistake = document.getElementById('miss');
var reg = document.getElementById('reg');
class Validate{
constructor(gmail, username, password){
this.gmail = gmail;
this.username = username;
this.password = password;
}
validateGmail(){
if(this.gmail.indexOf('@')> -1){
return(true);
}
else{
mistake.classList.add('visible');
}
}
validateUsername(){
this.username.maxlength == 20;
if(this.username.length <= 20){
return (true);
}
else if(this.username.length >= 21){
mistake.classList.add('visible');
}
}
validatePassword(){
this.password.maxlength == 16;
if(this.password.length <= 20){
return (true);
}
else if(this.password.length >= 21){
mistake.classList.add('visible');
}
}
all(){
if(Validate == true){
mistake.classList.remove('visible');
}
}
}
reg.onclick = function(){
const Start = new Validate(login, username, password);
}
*{
padding: 0;
margin: 0;
}
.content{
width: 100%;
min-height: 100vh;
background-color: rgb(43, 43, 43);
display: flex;
justify-content: center;
align-items: center;
}
.block{
width: 400px;
height: 520px;
background-color: rgb(0, 124, 207);
border-radius: 7px;
box-shadow: 0 10px 15px black;
}
.image-header{
background-image: url(https://images.wallpaperscraft.ru/image/noutbuk_stol_ruki_166631_1920x1080.jpg);
background-size: 100%;
border-radius: 7px 7px 0 0;
background-color: rebeccapurple;
height: 120px;
}
.blur{
right: 0;
left: 0;
top: 0;
bottom: 0;
width: 100%;
border-radius: 7px 7px 0 0;
height: 100%;
background-color: rgba(0, 0, 0, 0.473);
}
.iput-group{
width: 100%;
height: 250px;
}
.inp-for{
display: flex;
justify-content: center;
align-items: center;
}
.inp{
width: 80%;
height: 40px;
margin-top: 25px;
outline: none;
border: none;
text-align: center;
font-size: 18px;
font-weight: 500;
}
.inp:focus{
outline:solid 4px rgba(43, 43, 43, 0.384);
transition: 0.1s;
}
.inp:not(:focus){
transition: 0.2s;
}
.button-group{
display: flex;
justify-content: center;
}
.glob-btn{
border: solid 3px white;
border-radius: 10px;
outline: none;
background-color: rgba(255, 255, 255, 0);
width: 120px;
height: 50px;
font-size: 18px;
font-weight: 700;
color: wheat;
margin: 15px;
}
.google{
color: white;
}
.google:hover{
color: rgb(255, 42, 42) !important;
transition: 0.5s;
}
.glob-btn:hover{
background-color: white;
color: rgb(0, 124, 207);
transition: 0.3s;
}
.glob-btn:not(:hover){
transition: 0.2s;
}
.link{
display: flex;
justify-content: center;
font-size: 16px;
color: rgb(255, 255, 255);
}
.NO{
width: 80%;
height: 20px;
background-color: rgb(255, 46, 46);
border-radius: 5px;
color: white;
margin: auto;
text-align: center;
margin-top: 5px;
display: none;
}
.visible{
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>JavaScript</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg">
<div class="content">
<div class="block">
<div class="image-header">
<div class="blur">
</div>
</div>
<div class="iput-group">
<div class="inp-for">
<input type="text" name="log" id="login" class="inp" placeholder="[email protected]">
</div>
<div class="inp-for">
<input type="text" name="name" id="name"class="inp" placeholder="name">
</div>
<div class="inp-for">
<input type="password" name="pass" id="password"class="inp" placeholder="password">
</div>
<div class="NO" id="miss">
Mistake!!!
</div>
</div>
<div class="button-group">
<button class="ok glob-btn" id="reg">
Registration
</button>
<button class="google glob-btn" id="google" glob-btn">
Google
</button>
</div>
<a href="#" class="link"><p>Create</p></a>
</div>
</div>
</div>
<script src="Child.js"></script>
</body>
</html>