Added Feedback Form-2 (#997)

Rakesh9100 · Jun 13, 2024 · 14a62e3 · 14a62e3
1 parent 0b3b2bf
commit 14a62e3
Show file tree

Hide file tree

Showing 4 changed files with 259 additions and 0 deletions.
diff --git a/Components/Forms/Feedback-Form-2/index.html b/Components/Forms/Feedback-Form-2/index.html
@@ -0,0 +1,50 @@
+<!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="style.css">
+    <script src="script.js" defer></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
+    <title>Feedback Form-2</title>
+</head>
+<body>
+    <div id="modal" class="modal-content">
+        <span class="close">&times;</span>
+        <h2>FEEDBACK FORM</h2>
+        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
+        <form id="feedback-form">
+            <div class="form-group">
+                <div class="icon">
+                    <i class="fas fa-user"></i>
+                </div>
+                <input type="text" placeholder="Your Name" name="name" required>
+            </div>
+            <div class="form-group">
+                <div class="icon">
+                    <i class="fas fa-envelope"></i>
+                </div>
+                <input type="email" placeholder="Email Id" name="email" required>
+            </div>
+            <div class="form-group">
+                <textarea cols="30" rows="5" placeholder="Your Feedback" name="feedback" required></textarea>
+            </div>
+            <div class="rating">
+                <h2>Rate us:</h2>
+                <i class="rating__star far fa-star"></i>
+                <i class="rating__star far fa-star"></i>
+                <i class="rating__star far fa-star"></i>
+                <i class="rating__star far fa-star"></i>
+                <i class="rating__star far fa-star"></i>
+            </div>
+            <button type="submit" disabled>Submit</button>
+        </form>
+        <div id="thank-you-message" style="display:none; font-size:20px; color: green; margin-top: 20px;">
+            Thank you for your feedback!
+        </div>
+        <div id="error-message" style="display:none; color: red;font-size:20px; margin-top: 20px;">
+            Please fill in all fields before submitting.
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Components/Forms/Feedback-Form-2/script.js b/Components/Forms/Feedback-Form-2/script.js
@@ -0,0 +1,80 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const feedbackForm = document.getElementById('feedback-form');
+    const submitButton = document.querySelector("#feedback-form button[type='submit']");
+    const thankYouMessage = document.getElementById('thank-you-message');
+    const errorMessage = document.getElementById('error-message');
+    const ratingStars = [...document.getElementsByClassName("rating__star")];
+
+    function allFieldsFilled() {
+        const inputs = feedbackForm.querySelectorAll("input[type='text'], input[type='email'], textarea");
+        for (let input of inputs) {
+            if (!input.value.trim()) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    function ratingSelected() {
+        for (let star of ratingStars) {
+            if (star.classList.contains('fas')) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    feedbackForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+        if (allFieldsFilled() && ratingSelected()) {
+            thankYouMessage.style.display = 'block';
+            errorMessage.style.display = 'none';
+            setTimeout(function() {
+                thankYouMessage.style.display = 'none';
+            }, 3000);
+            feedbackForm.reset();
+            for (let star of ratingStars) {
+                star.classList.remove('fas');
+                star.classList.add('far');
+            }
+        } else {
+            thankYouMessage.style.display = 'none';
+            errorMessage.style.display = 'block';
+            setTimeout(function() {
+                errorMessage.style.display = 'none';
+            }, 3000);
+        }
+    });
+
+    feedbackForm.addEventListener("input", function() {
+        if (allFieldsFilled()) {
+            submitButton.removeAttribute("disabled");
+        } else {
+            submitButton.setAttribute("disabled", "disabled");
+        }
+    });
+
+    function executeRating(stars) {
+        const starClassActive = "rating__star fas fa-star";
+        const starClassInactive = "rating__star far fa-star";
+        stars.map((star, index) => {
+            star.onclick = () => {
+                for (let i = 0; i < stars.length; ++i) {
+                    stars[i].className = i <= index ? starClassActive : starClassInactive;
+                }
+            };
+        });
+    }
+
+    executeRating(ratingStars);
+
+    document.querySelector('.close').addEventListener('click', function() {
+        document.getElementById('modal').style.display = 'none';
+    });
+
+    window.onclick = function(event) {
+        if (event.target == document.getElementById('modal')) {
+            document.getElementById('modal').style.display = 'none';
+        }
+    };
+});
diff --git a/Components/Forms/Feedback-Form-2/style.css b/Components/Forms/Feedback-Form-2/style.css
@@ -0,0 +1,116 @@
+.modal-content {
+    background-color: #ffffff;
+    padding: 50px;
+    border-radius: 10px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+    position: relative;
+    text-align: center;
+    margin: 10% auto;
+}
+
+.modal-content h2 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: black;
+    font-size: 24px;
+}
+
+.modal-content button[type="submit"] {
+    background: linear-gradient(to right, rgb(75, 179, 75), rgb(42, 228, 42));
+    color: white;
+    border: none;
+    border-radius: 5px;
+    padding: 10px;
+    font-size: 16px;
+    cursor: pointer;
+    width: 100%;
+}
+
+.modal-content button[type="submit"]:hover {
+    background: linear-gradient(to right, rgb(63, 220, 63), rgb(20, 124, 20));
+}
+
+.modal-content button[type="submit"]:focus {
+    outline: none;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: #000;
+}
+
+.form-group {
+    position: relative;
+    margin-bottom: 20px;
+}
+
+.form-group .icon {
+    position: absolute;
+    top: 50%;
+    left: 10px;
+    transform: translateY(-50%);
+    background-color: rgb(75, 179, 75);
+    color: white;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.form-group input,
+.form-group textarea {
+    width: 100%;
+    padding: 10px 10px 10px 38px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    font-size: 14px;
+    box-sizing: border-box;
+}
+
+.form-group input::placeholder,
+.form-group textarea::placeholder {
+    color: #bbb;
+    padding-left: 8px
+}
+
+.form-group textarea {
+    height: 80px;
+
+}
+
+.rating {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 20px;
+}
+
+.rating h2 {
+    margin: 0;
+    margin-right: 10px;
+    font-size: 18px;
+}
+
+.rating__star {
+    font-size: 24px;
+    margin: 0 5px;
+    cursor: pointer;
+    color: #dabd18b2;
+}
+
+.rating__star:hover,
+.rating__star.active {
+    color: #ffc107;
+}
diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html
@@ -216,6 +216,19 @@ <h1>Feedback Form</h1>
                     </a>
                 </div>
             </div>
+            <div class="box">
+                <h1>Feedback Form-2</h1>
+                <div class="preview">
+                    <a href="../../Components/Forms/Feedback-Form-2/index.html" title="Live Preview" target="_blank">
+                        <img src="../images/link.png">
+                    </a>
+                </div>
+                <div class="source">
+                    <a href="https://github.com/Rakesh9100/Beautiify/tree/main/Components/Forms/Feedback-Form-2" title="Source Code" target="_blank">
+                        <img src="../images/github.png">
+                    </a>
+                </div>
+            </div>
             <div class="box">
                 <h1>File Upload Form</h1>
                 <div class="preview">