Add files

Task 3/script.js

@@ -0,0 +1,91 @@
+const form = document.getElementById('form');
+const username = document.getElementById('username');
+const email = document.getElementById('email');
+const password = document.getElementById('password');
+const password2 = document.getElementById('password2');
+
+form.addEventListener('submit', e => {
+    e.preventDefault();
+    checkInputs();
+});
+
+const sendData = (sRate, count) => {
+    if (sRate === count) {
+        swal("Welcome!", "Registration successful", "success").then(() => {
+            // Refresh the page after showing the success message
+            setTimeout(() => {
+                location.reload();
+            }, 1000);
+        });
+    }
+}
+const successMsg = () => {
+    let formCon = document.getElementsByClassName('form-control');
+    var count = formCon.length - 1;
+    for (var i = 0; i < formCon.length; i++) {
+        if (formCon[i].className === "form-control success") {
+            var sRate = 0 + i;
+            sendData(sRate, count);
+        }
+        else {
+            return false;
+        }
+    }
+}
+
+function checkInputs() {
+    const usernameValue = username.value.trim();
+    const emailValue = email.value.trim();
+    const passwordValue = password.value.trim();
+    const password2Value = password2.value.trim();
+
+    if (usernameValue === '') {
+        setErrorFor(username, 'Username cannot be blank');
+    } else if (usernameValue.length <= 2) {
+        setErrorFor(username, 'Username min 3 character');
+    }
+    else {
+        setSuccessFor(username);
+    }
+
+    if (emailValue === '') {
+        setErrorFor(email, 'Email cannot be blank');
+    } else if (!isEmail(emailValue)) {
+        setErrorFor(email, 'Not a valid email');
+    } else {
+        setSuccessFor(email);
+    }
+
+    if (passwordValue === '') {
+        setErrorFor(password, 'Password cannot be blank');
+    } else if (passwordValue.length <= 3) {
+        setErrorFor(password, 'Min 4 character');
+    } else {
+        setSuccessFor(password);
+    }
+
+    if (password2Value === '') {
+        setErrorFor(password2, 'Password cannot be blank');
+    } else if (passwordValue !== password2Value) {
+        setErrorFor(password2, 'Passwords does not match');
+    } else {
+        setSuccessFor(password2);
+    }
+    successMsg();
+}
+
+function setErrorFor(input, message) {
+    const formControl = input.parentElement;
+    const small = formControl.querySelector('small');
+    formControl.className = 'form-control error';
+    small.innerText = message;
+}
+
+function setSuccessFor(input) {
+    const formControl = input.parentElement;
+    formControl.className = 'form-control success';
+}
+
+function isEmail(email) {
+    return /^(([^<>()\[\]\\.,;:\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,}))$/.test(email);
+}

Task 3/style.css

@@ -0,0 +1,146 @@
+@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,500&display=swap');
+
+* {
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Open Sans', sans-serif;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 100vh;
+    margin: 0;
+    position: relative;
+    overflow: hidden;
+}
+
+body::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url('wp6844037.jpg');
+    background-repeat: no-repeat;
+    background-size: cover;
+    opacity: 0.7;
+    z-index: -1;
+}
+
+.container {
+    background-color: #fff;
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+    width: 400px;
+    max-width: 100%;
+}
+
+.header {
+    border-bottom: 1px solid #f0f0f0;
+    background-color: #ebb1fd;
+    padding: 20px 40px;
+}
+
+.header h2 {
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.form {
+    padding: 30px 40px;    
+}
+
+.form-control {
+    margin-bottom: 10px;
+    padding-bottom: 20px;
+    position: relative;
+}
+
+.form-control label {
+    display: inline-block;
+    margin-bottom: 5px;
+}
+
+.form-control input {
+    border: 2px solid #f0f0f0;
+    border-radius: 4px;
+    display: block;
+    font-family: inherit;
+    font-size: 14px;
+    padding: 10px;
+    width: 100%;
+}
+
+.form-control input:focus {
+    outline: 0;
+    border-color: #777;
+}
+
+.form-control.success input {
+    border-color: #2ecc71;
+}
+
+.form-control.error input {
+    border-color: #e74c3c;
+}
+
+.form-control i {
+    visibility: hidden;
+    position: absolute;
+    top: 40px;
+    right: 10px;
+}
+
+.form-control.success i.fa-check-circle {
+    color: #2ecc71;
+    visibility: visible;
+}
+
+.form-control.error i.fa-exclamation-circle {
+    color: #e74c3c;
+    visibility: visible;
+}
+
+.form-control small {
+    color: #e74c3c;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    visibility: hidden;
+}
+
+.form-control.error small {
+    visibility: visible;
+}
+
+.form .btn {
+    background-color: #8e44ad;
+    border: 2px solid #8e44ad;
+    border-radius: 4px;
+    color: #fff;
+    display: block;
+    font-family: inherit;
+    font-size: 16px;
+    padding: 10px;
+    margin-top: 20px;
+    width: 100%;
+}
+
+#submitbtn {
+    cursor: pointer;
+    transition: opacity 0.3s;
+}
+
+#submitbtn:hover {
+    opacity: 0.7;
+}
+
+#submitbtn:active {
+    opacity: 0.4;
+}