RAIZERO-Team · Omniazedan · Dec 8, 2024 · Dec 10, 2024 · Dec 11, 2024 · Dec 12, 2024
diff --git a/projects/Shahd/1-javaScript Form Validate/bg.png b/projects/Shahd/1-javaScript Form Validate/bg.png
diff --git a/projects/Shahd/1-javaScript Form Validate/index.html b/projects/Shahd/1-javaScript Form Validate/index.html
@@ -0,0 +1,65 @@
+<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <link rel="stylesheet" href="style.css">
+    <title>JavaScript Form Validator</title>
+</head>
+
+<body>
+
+    <div class="container">
+        <img src="bg.png">
+        <form id="mainForm" novalidate>
+            <h2>JavaScript Form Validator</h2>
+            <div class="form-control">
+                <label for="name">Name</label>
+                <input type="text" id="name" placeholder="Enter your name" autocomplete="off">
+                <i class="icon"></i>
+            </div>
+
+            <div class="form-control">
+                <label for="email">Email</label>
+                <input type="email" id="email" placeholder="Enter your email" autocomplete="off">
+                <i class="icon"></i>
+            </div>
+
+            <div class="form-control">
+                <label for="phone">Phone</label>
+                <input type="tel" id="phone" placeholder="Enter your phone" autocomplete="off">
+                <i class="icon"></i>
+            </div>
+
+            <div class="form-control">
+                <label for="password">Password</label>
+                <input type="password" id="password" placeholder="Enter your password" autocomplete="off">
+                <i class="icon"></i>
+            </div>
+
+            <div class="form-control">
+                <label for="message">Message</label>
+                <textarea id="message" placeholder="Enter your message"></textarea>
+                <i class="icon"></i>
+            </div>
+
+            <button type="submit">Submit</button>
+
+        </form>
+    </div>
+
+    <div id="successModal" class="modal">
+        <div class="modal-content">
+            <span class="close-button">&times;</span>
+            <h2>Success!</h2>
+            <p>Your form has been submitted successfully.</p>
+        </div>
+    </div>
+
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/projects/Shahd/1-javaScript Form Validate/script.js b/projects/Shahd/1-javaScript Form Validate/script.js
@@ -0,0 +1,102 @@
+document.addEventListener('DOMContentLoaded', function () {
+
+    const form = document.getElementById('mainForm');
+    const name = document.getElementById('name');
+    const email = document.getElementById('email');
+    const phone = document.getElementById('phone');
+    const password = document.getElementById('password');
+    const message = document.getElementById('message');
+
+    form.addEventListener('submit', function (e) {
+        e.preventDefault();
+        if (checkInputs()) {
+            showModal();
+        }
+    });
+
+    name.addEventListener('input', () => {
+        validateField(name, name.value.trim() !== '', 'Name cannot be blank');
+    });
+
+    email.addEventListener('input', () => {
+        validateField(email, isEmail(email.value.trim()), 'Not a valid email');
+    });
+
+    phone.addEventListener('input', () => {
+        validateField(phone, isPhone(phone.value.trim()), 'Not a valid phone number');
+    });
+
+    password.addEventListener('input', () => {
+        validateField(password, password.value.trim().length >= 8, 'Password must be at least 8 characters');
+    });
+
+    message.addEventListener('input', () => {
+        validateField(message, message.value.trim() !== '', 'Message cannot be blank');
+    });
+
+    function checkInputs() {
+        let isValid = true;
+        validateField(name, name.value.trim() !== '', 'Name cannot be blank');
+        validateField(email, isEmail(email.value.trim()), 'Not a valid email');
+        validateField(phone, isPhone(phone.value.trim()), 'Not a valid phone number');
+        validateField(password, password.value.trim().length >= 8, 'Password must be at least 8 characters');
+        validateField(message, message.value.trim() !== '', 'Message cannot be blank');
+
+        document.querySelectorAll('.form-control').forEach((control) => {
+            if (control.classList.contains('error')) {
+                isValid = false;
+            }
+        });
+
+        return isValid;
+
+    }
+
+    function validateField(input, condition, errorMessage) {
+        if (condition) {
+            setSuccess(input);
+        } else {
+            setError(input, errorMessage);
+        }
+    }
+
+    function setError(input, message) {
+        const formControl = input.parentElement;
+        const icon = formControl.querySelector('.icon');
+        formControl.className = 'form-control error';
+        icon.className = 'icon fas fa-times-circle';
+        input.placeholder = message;
+    }
+
+    function setSuccess(input) {
+        const formControl = input.parentElement;
+        const icon = formControl.querySelector('.icon');
+        formControl.className = 'form-control success';
+        icon.className = 'icon fas fa-check-circle';
+    }
+
+    function isEmail(email) {
+        return /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/.test(email);
+    }
+
+    function isPhone(phone) {
+        return /^\+?(\d.*){3,}$/.test(phone);
+    }
+
+    function showModal() {
+        const modal = document.getElementById('successModal');
+        modal.style.display = 'block';
+
+        const closeBtn = document.querySelector('.close-button');
+        closeBtn.onclick = function () {
+            modal.style.display = 'none';
+        };
+
+        window.onclick = function (event) {
+            if (event.target === modal) {
+                modal.style.display = 'none';
+            }
+        };
+    }
+
+});
diff --git a/projects/Shahd/1-javaScript Form Validate/style.css b/projects/Shahd/1-javaScript Form Validate/style.css
@@ -0,0 +1,154 @@
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', sans-serif;
+}
+
+body{
+    background-color: #dcdcdc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    padding: 0 20px;
+}
+
+.container{
+    display: flex;
+    gap: 20px;
+    background-color: #fff;
+    width: 100%;
+    max-width: 920px;
+    padding: 25px;
+    border-radius: 10px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+
+.container img{
+    width: 50%;
+    border-radius: 20px;
+    object-fit: cover;
+}
+
+.container form{
+    width: 50%;
+}
+
+form h2{
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+.form-control{
+    position: relative;
+    margin-bottom: 15px;
+}
+
+.form-control label{
+    display: block;
+    margin-bottom: 5px;
+}
+
+.form-control input,
+.form-control textarea{
+    width: 100%;
+    padding: 10px;
+    padding-right: 40px;
+    border: 2px solid #ddd;
+    border-radius: 10px;
+    outline: none;
+}
+
+button{
+    width: 100%;
+    border: none;
+    padding: 10px;
+    background-color: #77b7cd;
+    color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: all 0.3s ease;
+}
+
+button:hover{
+    background-color: #295580;
+}
+
+.form-control .icon{
+    position: absolute;
+    right: 10px;
+    top: 71%;
+
+}
+
+.form-control.success input,
+.form-control.success textarea{
+    border-color: #2ecc71;
+}
+
+.form-control.success .icon{
+    color: #2ecc71;
+}
+
+.form-control.error input,
+.form-control.error textarea{
+    border-color: #e74c3c;
+}
+
+.form-control.error .icon,
+.form-control.error input::placeholder,
+.form-control.error textarea::placeholder{
+    color: #e74c3c;
+}
+
+.modal{
+    display: none;
+    position: fixed;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content{
+    background-color: #fefefe;
+    margin: 15% auto;
+    padding: 20px;
+    width: 80%;
+    border: 1px solid #888;
+    max-width: 500px;
+    border-radius: 10px;
+    text-align: center;
+}
+
+.close-button{
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    transition: all 0.3s ease;
+}
+
+.close-button:hover,
+.close-button:focus{
+    color: #000;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+@media screen and (max-width: 450px) {
+
+    .container img{
+        display: none;
+    }
+
+    .container form{
+        width: 100%;
+    }
+
+}