-Responsive-Login-Form/index.html at master · MaheshSindhiya/-Responsive-Login-Form · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!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="css/main.css">
    <title>Wellcome</title>
</head>
<body>
    <div class="page">
        <div class="werep">
            <div class="pageLeft">
                <div class="top">
                    <div class="formDiv">
                        <span id="span1"> Login Account </span>
                        <form action="" method="post" id="form">
                            <div class="form-field__control" id="inputemail">
                                <input id="email" type="email" class="form-field__input" autocomplete="off" onkeydown="validation()"
                                    placeholder="Your Email " />
                                <img src="images/check-circle.gif" id="emailCheck" alt="">
                                <div class="form-field__bar"></div>
                            </div>
                            <div class="form-field__control">
                                <input id="myInput" type="password" class="form-field__input" placeholder="Your password" /> <img src="images/blink.png" id="Eyeimg" onclick="myFunction()" alt="">
                                <div class="form-field__bar"></div>
                            </div>
                            <div class="bottom">
                                <a href="#" id="pswdA"> Forgot password? </a>
                                <button type="submit" name="sign_in"> Sign In </button>
                            </div>
                        </form>
                    </div>
                   <p> Dosen`t have an account yet? <span id="span3"> <a href="#">Sign Up</a> </span> </p>
               </div>
            </div>
            <div class="pageRight">
                <img src="images/3907317.jpg" alt=""> <a href='https://www.freepik.com/free-photos-vectors/user'></a>
            </div>
        </div>
    </div>
    <script>

        function validation(){
            var form = document.getElementById("form");
            var img = document.getElementById("emailCheck");
            var email = document.getElementById("email").value;
            var pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;

            if (email.match(pattern)){
                form.classList.add("valid");
                form.classList.remove("invalid");
                img.style.display = "grid";
            }
            else{
                form.classList.add("invalid");
                form.classList.remove("valid");
                img.style.display = "none";
            }

            if (email == "") {
                form.classList.remove("valid");
                form.classList.remove("invalid");
                img.style.display = "none";
            }
        }

        function myFunction() {
            var x = document.getElementById("myInput");
            var img  = document.getElementById("Eyeimg");
            if (x.type === "password") {
                x.type = "text";
                img.src="images/blink.png"
            } else {
                x.type = "password";
                img.src="images/eye (1).png"
            }
        }
    </script>
</body>
</html>