├── .vscode
└── settings.json
├── index.html
├── script.js
└── style.css
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "liveServer.settings.port": 5501
3 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | Novo usuario - Sujeito Programador
15 |
16 |
17 |
18 |
69 |
70 |
71 |
72 |
73 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 |
2 | const form = document.getElementById("form");
3 | const username = document.getElementById("username")
4 | const email = document.getElementById("email")
5 | const password = document.getElementById("password")
6 | const passwordConfirmation = document.getElementById("password-confirmation");
7 |
8 |
9 | form.addEventListener("submit", (event) => {
10 | event.preventDefault();
11 |
12 | checkForm();
13 | })
14 |
15 | email.addEventListener("blur", () => {
16 | checkInputEmail();
17 | })
18 |
19 |
20 | username.addEventListener("blur", () => {
21 | checkInputUsername();
22 | })
23 |
24 |
25 | function checkInputUsername(){
26 | const usernameValue = username.value;
27 |
28 | if(usernameValue === ""){
29 | errorInput(username, "Preencha um username!")
30 | }else{
31 | const formItem = username.parentElement;
32 | formItem.className = "form-content"
33 | }
34 |
35 | }
36 |
37 | function checkInputEmail(){
38 | const emailValue = email.value;
39 |
40 | if(emailValue === ""){
41 | errorInput(email, "O email é obrigatório.")
42 | }else{
43 | const formItem = email.parentElement;
44 | formItem.className = "form-content"
45 | }
46 |
47 |
48 | }
49 |
50 |
51 | function checkInputPassword(){
52 | const passwordValue = password.value;
53 |
54 | if(passwordValue === ""){
55 | errorInput(password, "A senha é obrigatória.")
56 | }else if(passwordValue.length < 8){
57 | errorInput(password, "A senha precisa ter no mínimo 8 caracteres.")
58 | }else{
59 | const formItem = password.parentElement;
60 | formItem.className = "form-content"
61 | }
62 |
63 |
64 | }
65 |
66 |
67 | function checkInputPasswordConfirmation(){
68 | const passwordValue = password.value;
69 | const confirmationPasswordValue = passwordConfirmation.value;
70 |
71 | if(confirmationPasswordValue === ""){
72 | errorInput(passwordConfirmation, "A confirmação de senha é obrigatória.")
73 | }else if(confirmationPasswordValue !== passwordValue){
74 | errorInput(passwordConfirmation, "As senhas não são iguais.")
75 | }else{
76 | const formItem = passwordConfirmation.parentElement;
77 | formItem.className = "form-content"
78 | }
79 |
80 |
81 | }
82 |
83 |
84 | function checkForm(){
85 | checkInputUsername();
86 | checkInputEmail();
87 | checkInputPassword();
88 | checkInputPasswordConfirmation();
89 |
90 | const formItems = form.querySelectorAll(".form-content")
91 |
92 | const isValid = [...formItems].every( (item) => {
93 | return item.className === "form-content"
94 | });
95 |
96 | if(isValid){
97 | alert("CADASTRADO COM SUCESSO!")
98 | }
99 |
100 | }
101 |
102 |
103 | function errorInput(input, message){
104 | const formItem = input.parentElement;
105 | const textMessage = formItem.querySelector("a")
106 |
107 | textMessage.innerText = message;
108 |
109 | formItem.className = "form-content error"
110 |
111 | }
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 |
2 | *{
3 | box-sizing: border-box;
4 | margin: 0;
5 | padding: 0;
6 | font-family: "Poppins", sans-serif;
7 | }
8 |
9 | body{
10 | background: #121212;
11 | width: 100%;
12 | min-height: 100vh;
13 | display: flex;
14 | justify-content: center;
15 | align-items: center;
16 | }
17 |
18 | .container{
19 | background-color: #fafafa;
20 | border-radius: 14px;
21 | margin: 14px;
22 | max-width: 600px;
23 | width: 100%;
24 | box-sizing: 0 3px 5px rgba(0,0,0, 0.5);
25 | overflow: hidden;
26 | }
27 |
28 | .header{
29 | background: linear-gradient(120deg, #3acbf0 0%, #8bb0ff 100%);
30 | padding: 24px;
31 | text-align: center;
32 | color: #FFF;
33 | }
34 |
35 | .form{
36 | padding: 18px;
37 | }
38 |
39 | .form-content{
40 | margin-bottom: 8px;
41 | padding-bottom: 18px;
42 | position: relative;
43 | }
44 |
45 | .form-content label{
46 | display: inline-block;
47 | margin-bottom: 4px;
48 | }
49 |
50 | .form-content input{
51 | display: block;
52 | width: 100%;
53 | border-radius: 8px;
54 | padding: 8px;
55 | border: 2px solid #dfdfdf;
56 | }
57 |
58 | .form-content a{
59 | position: absolute;
60 | bottom: -8px;
61 | left: 0;
62 | visibility: hidden;
63 | }
64 |
65 | .form button{
66 | background-color: #00c3ff;
67 | color: #FFF;
68 | width: 100%;
69 | border-radius: 14px;
70 | padding: 10px;
71 | border: 0;
72 | font-size: 16px;
73 | cursor: pointer;
74 | margin-top: 14px;
75 | }
76 |
77 | .form-content.error input{
78 | border-color: #ff3b25;
79 | }
80 |
81 | .form-content.error a{
82 | color: #ff3b25;
83 | visibility: visible;
84 | }
--------------------------------------------------------------------------------