Bug fixes and adding of additional styling for the error messages

mnestorov · Aug 21, 2024 · aff9714 · aff9714
1 parent ae01759
commit aff9714
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 11 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -2,19 +2,50 @@ body {
     background-color: #121212;
     color: #ffffff;
 }
+
 .container {
     background-color: #1e1e1e;
     padding: 20px;
     border-radius: 8px;
 }
+
 .form-label, .form-select, .btn-primary {
     background-color: #1e1e1e;
     color: #ffffff;
 }
+
 .btn-primary {
     border-color: #007bff;
 }
+
 .btn-primary:hover {
     background-color: #007bff;
     color: #ffffff;
+}
+
+.alert-danger-custom {
+    background-color: #f8d7da;
+    color: #721c24;
+    border-color: #f5c6cb;
+}
+
+.alert-danger {
+    background-color: #f8d7da;
+    color: #721c24;
+    border-color: #f5c6cb;
+}
+
+.alert-success {
+    background-color: #d4edda;
+    color: #155724;
+    border-color: #c3e6cb;
+}
+
+/* Red border for unselected fields */
+input, select {
+    border: 1px solid #ced4da;
+}
+
+input:invalid, select:invalid {
+    border-color: red;
 }
diff --git a/assets/js/app.js b/assets/js/app.js
@@ -31,25 +31,69 @@ function updateCountriesAndLabel() {
 }
 
 function showPattern() {
-    const patternType = document.getElementById('patternType').value;
-    const country = document.getElementById('country').value;
-    const language = document.getElementById('programmingLanguage').value;
-    if (!patternType || !country || !language) {
-        document.getElementById('regexDisplay').textContent = 'Please select all fields.';
-        document.getElementById('codeExampleDisplay').innerHTML = 'Please select all fields.';
+    const patternType = document.getElementById('patternType');
+    const country = document.getElementById('country');
+    const language = document.getElementById('programmingLanguage');
+    const regexDisplay = document.getElementById('regexDisplay');
+    const codeExampleDisplay = document.getElementById('codeExampleDisplay');
+
+    let hasError = false;
+
+    // Reset borders
+    patternType.style.borderColor = '';
+    country.style.borderColor = '';
+    language.style.borderColor = '';
+
+    // Check if any fields are unselected
+    if (!patternType.value) {
+        patternType.style.borderColor = 'red';
+        hasError = true;
+    }
+    if (!country.value) {
+        country.style.borderColor = 'red';
+        hasError = true;
+    }
+    if (!language.value) {
+        language.style.borderColor = 'red';
+        hasError = true;
+    }
+
+    // If there's an error, display the message and return
+    if (hasError) {
+        regexDisplay.textContent = 'Please select all fields.';
+        regexDisplay.classList.remove('alert-success', 'alert-danger-custom');
+        regexDisplay.classList.add('alert-danger');
+        codeExampleDisplay.style.display = 'none'; // Hide code example
         return;
     }
 
+    // Fetch data and show pattern
     fetch('patterns.json')
         .then(response => response.json())
         .then(data => {
-            const regex = data.patterns[patternType][country] || 'No pattern available for this selection.';
-            document.getElementById('regexDisplay').textContent = `Regex Pattern: ${regex}`;
-            displayCodeExample(regex, language);
+            const selectedPattern = data.patterns[patternType.value][country.value];
+
+            if (typeof selectedPattern === 'string' && selectedPattern.startsWith("Not applicable")) {
+                // If it's a special message, display it directly without showing a regex pattern
+                regexDisplay.innerHTML = `<strong>Notice:</strong> ${selectedPattern}`;
+                regexDisplay.classList.remove('alert-success');
+                regexDisplay.classList.add('alert-danger-custom');
+                codeExampleDisplay.style.display = 'none'; // Hide code example
+            } else {
+                // Otherwise, display the regex pattern and code example
+                regexDisplay.textContent = `Regex Pattern: ${selectedPattern}`;
+                regexDisplay.classList.remove('alert-danger', 'alert-danger-custom');
+                regexDisplay.classList.add('alert-success');
+                displayCodeExample(selectedPattern, language.value);
+                codeExampleDisplay.style.display = 'block'; // Show code example
+            }
         })
         .catch(error => {
-            document.getElementById('regexDisplay').textContent = 'Failed to load patterns.';
+            regexDisplay.textContent = 'Failed to load patterns.';
+            regexDisplay.classList.remove('alert-success');
+            regexDisplay.classList.add('alert-danger');
             console.error('Error loading the patterns:', error);
+            codeExampleDisplay.style.display = 'none'; // Hide code example
         });
 }
 

diff --git a/patterns.json b/patterns.json
@@ -78,7 +78,7 @@
         "Andorra": "Not applicable as Andorra does not have a standard VAT number system like EU countries.",
         "Austria": "^ATU\\d{8}$",
         "Belgium": "^BE0\\d{9}$",
-        "Bosnia and Herzegovina": "Bosnia and Herzegovina does not have a VAT number system similar to that of the European Union. For business and tax purposes, companies use a national ID number system. It's essential to consult local regulations or authorities for accurate and specific requirements regarding tax identification and reporting in Bosnia and Herzegovina.",
+        "Bosnia and Herzegovina": "Not applicable as Bosnia and Herzegovina does not have a VAT number system similar to that of the European Union. For business and tax purposes, companies use a national ID number system. It's essential to consult local regulations or authorities for accurate and specific requirements regarding tax identification and reporting in Bosnia and Herzegovina.",
         "Bulgaria": "BG\\d{9,10}$",
         "Croatia": "^HR\\d{11}$",
         "Cyprus": "^CY\\d{8}L$",