Ro'yxatdan o'tish

├── README.md ├── index.html ├── style.css ├── app.js └── sign.svg /README.md: -------------------------------------------------------------------------------- 1 | # My regestration page with - Vanilla JavaScript 2 | 3 | My Registration page created by Vanilla JavaScript. The logic is a very well structured program. 📃 4 | 5 | # Connect:🚩 6 | 7 | Telegram: t.me/akhror_web 8 | 9 | # Linkedin: https://www.linkedin.com/in/akhrorsoliev/ 10 | 11 | Phone: +998 97 206 2922 12 | 13 | # Email: akhsoliev@gmail.com 14 | 15 | Instagram: @ahror_soliyev98 16 | 17 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ro'yxatdan o'tish 8 | 9 | 10 | 11 | 12 |

13 |

Ro'yxatdan o'tish

14 | 38 |

39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;200;300;400;500;600;800&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Open Sans', sans-serif; 9 | 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | min-height: 100vh; 14 | margin: 0; 15 | background: linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5) 100%), 16 | url('https://source.unsplash.com/1920x1280/?abstract'); 17 | background-position: center; 18 | background-size: cover; 19 | background-repeat: no-repeat; 20 | } 21 | 22 | h2 { 23 | text-align: center; 24 | } 25 | 26 | .container { 27 | background-color: rgba(255, 255, 255, 0.8); 28 | border-radius: 15px; 29 | width: 400px; 30 | -webkit-box-shadow: -3px 19px 27px 14px rgba(0, 0, 0, 0.25); 31 | -moz-box-shadow: -3px 19px 27px 14px rgba(0, 0, 0, 0.25); 32 | box-shadow: -3px 19px 27px 14px rgba(0, 0, 0, 0.25); 33 | } 34 | 35 | .form-control label { 36 | font-weight: 400px; 37 | } 38 | 39 | .form-control input { 40 | width: 100%; 41 | padding: 10px; 42 | border: 2px solid #f0f0f0; 43 | outline: none; 44 | margin: 10px auto; 45 | font-family: 'Open Sans', sans-serif; 46 | 47 | border-radius: 3px; 48 | font-size: 16px; 49 | font-weight: bold; 50 | } 51 | 52 | .form { 53 | padding: 30px 20px; 54 | } 55 | 56 | .form-control input:focus { 57 | outline: none; 58 | border-color: #777; 59 | } 60 | 61 | .form-control { 62 | margin-bottom: 10px; 63 | position: relative; 64 | } 65 | 66 | .form-control.success input { 67 | border-color: rgb(71, 166, 255); 68 | -webkit-box-shadow: 1px 1px 50px 0px rgba(49, 255, 0, 0.5); 69 | -moz-box-shadow: 1px 1px 50px 0px rgba(49, 255, 0, 0.5); 70 | box-shadow: 1px 1px 50px 0px rgba(49, 255, 0, 0.5); 71 | } 72 | 73 | .form-control.error input { 74 | border-color: tomato; 75 | -webkit-box-shadow: 1px 1px 50px 0px rgba(255, 11, 0, 0.5); 76 | -moz-box-shadow: 1px 1px 50px 0px rgba(255, 11, 0, 0.5); 77 | box-shadow: 1px 1px 50px 0px rgba(255, 11, 0, 0.5); 78 | } 79 | 80 | .form-control span { 81 | visibility: hidden; 82 | } 83 | 84 | .form-control.error span { 85 | visibility: visible; 86 | } 87 | 88 | .form button { 89 | cursor: pointer; 90 | width: 100%; 91 | border-radius: 5px; 92 | background-color: rgb(47, 0, 255); 93 | color: #fff; 94 | padding: 10px; 95 | outline: none; 96 | border: none; 97 | font-family: 'Open Sans', sans-serif; 98 | 99 | font-weight: 500; 100 | font-size: 18px; 101 | } 102 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | const formEl = document.getElementById('form') 2 | const usernameEl = document.getElementById('username') 3 | const emailEl = document.getElementById('email') 4 | const parol1El = document.getElementById('parol1') 5 | const parol2El = document.getElementById('parol2') 6 | 7 | function showError(input, massage) { 8 | const formContorl = input.parentElement 9 | formContorl.className = 'form-control error' 10 | const span = formContorl.querySelector('span') 11 | span.textContent = massage 12 | } 13 | 14 | function showSuccess(input) { 15 | const formContorl = input.parentElement 16 | formContorl.className = 'form-control success' 17 | } 18 | 19 | function checkEmial(input) { 20 | const re = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 21 | if (re.test(input.value)) { 22 | showSuccess(input) 23 | } else { 24 | showError(input, 'Email is not valid.') 25 | } 26 | } 27 | 28 | function checkRequired(inputArr) { 29 | inputArr.forEach((input) => { 30 | if (input.value.trim() === '') { 31 | showError(input, `${correcName(input)} is required`) 32 | } else { 33 | showSuccess(input) 34 | } 35 | }) 36 | } 37 | 38 | function checkLength(input, min, max) { 39 | if (input.value.length < min) { 40 | showError(input, `${correcName(input)} ${min} ta kiritilishi kerak.`) 41 | } else if (input.value.length > max) { 42 | showError(input, `${correcName(input)} ${max} ta kiritilishi kerak.`) 43 | } 44 | } 45 | 46 | function checkPassword(input1, input2) { 47 | if (input1.value !== input2.value) { 48 | showError(input2, `Parol mos emas`) 49 | } 50 | } 51 | 52 | function correcName(input) { 53 | return input.id.charAt(0).toUpperCase() + input.id.slice(1).toLowerCase() 54 | } 55 | 56 | formEl.addEventListener('submit', (e) => { 57 | e.preventDefault() 58 | 59 | checkRequired([usernameEl, emailEl, parol1El, parol2El]) 60 | checkLength(usernameEl, 3, 15) 61 | checkLength(parol1El, 6, 15) 62 | checkEmial(emailEl) 63 | checkPassword(parol1El, parol2El) 64 | }) 65 | 66 | /*if (usernameEl.value === '') { 67 | showError(usernameEl, 'Ism kiritilmadi') 68 | } else { 69 | showSuccess(usernameEl) 70 | } 71 | 72 | if (emailEl.value === '') { 73 | showError(emailEl, 'Email kiritilmadi') 74 | } else if (!validateEmail(emailEl.value)) { 75 | showError(emailEl, `Email tog'ri emas`) 76 | } else { 77 | showSuccess(emailEl) 78 | } 79 | 80 | if (parol1El.value === '') { 81 | showError(parol1El, 'Parol kiritilmadi') 82 | } else { 83 | showSuccess(parol1El) 84 | } 85 | 86 | if (parol2El.value === '') { 87 | showError(parol2El, 'Parol kiritilmadi') 88 | } else { 89 | showSuccess(parol2El) 90 | } 91 | 92 | if (parol2El.value === '') { 93 | showError(usernameEl, 'Parol kiritilmadi') 94 | } else { 95 | showSuccess(usernameEl) 96 | } */ 97 | -------------------------------------------------------------------------------- /sign.svg: -------------------------------------------------------------------------------- 1 | --------------------------------------------------------------------------------