Added code mirror for code visualization and improvement of UI/UX

mnestorov · Aug 21, 2024 · 053bb4c · 053bb4c
1 parent 85a129c
commit 053bb4c
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 13 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -67,6 +67,10 @@ footer .container  {
     border-color: #c3e6cb;
 }
 
+.border-success {
+    border-color: #c3e6cb;
+}
+
 /* Red border for unselected fields */
 input, select {
     border: 1px solid #ced4da;

diff --git a/assets/js/app.js b/assets/js/app.js
@@ -135,24 +135,57 @@ function showPattern() {
         });
 }
 
-// Function to return the code example string
+// Function to return the code example string and initialize CodeMirror
 function displayCodeExample(regex, language) {
     const codeExamples = {
-        'PHP': `if (preg_match('/${regex}/', $input)) { echo 'Valid'; } else { echo 'Invalid'; }`,
-        'JavaScript': `if (/${regex}/.test(input)) { console.log('Valid'); } else { console.log('Invalid'); }`,
-        'Python': `import re\nif re.match(r'${regex}', input): print('Valid') else: print('Invalid')`,
-        'C#': `using System.Text.RegularExpressions;\nif (Regex.IsMatch(input, @"${regex}")) { Console.WriteLine("Valid"); } else { Console.WriteLine("Invalid"); }`,
-        'Java': `import java.util.regex.*;\nPattern pattern = Pattern.compile("${regex}");\nMatcher matcher = pattern.matcher(input);\nif (matcher.find()) { System.out.println("Valid"); } else { System.out.println("Invalid"); }`,
-        'Ruby': `if /${regex}/.match(input) then puts 'Valid' else puts 'Invalid' end`,
-        'Go': `import "regexp"\nmatched, _ := regexp.MatchString("${regex}", input)\nif matched { fmt.Println("Valid") } else { fmt.Println("Invalid") }`,
-        'Swift': `import Foundation\nlet regex = try! NSRegularExpression(pattern: "${regex}")\nlet range = NSRange(location: 0, length: input.utf16.count)\nif regex.firstMatch(in: input, options: [], range: range) != nil { print("Valid") } else { print("Invalid") }`,
-        'Perl': `if ($input =~ /${regex}/) { print "Valid"; } else { print "Invalid"; }`
+        'PHP': `<?php\nif (preg_match('/${regex}/', $input)) {\n    echo 'Valid';\n} else {\n    echo 'Invalid';\n}\n?>`,
+        'JavaScript': `if (/${regex}/.test(input)) {\n    console.log('Valid');\n} else {\n    console.log('Invalid');\n}`,
+        'Python': `import re\n\nif re.match(r'${regex}', input):\n    print('Valid')\nelse:\n    print('Invalid')`,
+        'C#': `using System;\nusing System.Text.RegularExpressions;\n\nclass Program {\n    static void Main() {\n        string input = "...";\n        if (Regex.IsMatch(input, @"${regex}")) {\n            Console.WriteLine("Valid");\n        } else {\n            Console.WriteLine("Invalid");\n        }\n    }\n}`,
+        'Java': `import java.util.regex.*;\n\npublic class Main {\n    public static void main(String[] args) {\n        String input = "...";\n        Pattern pattern = Pattern.compile("${regex}");\n        Matcher matcher = pattern.matcher(input);\n        if (matcher.find()) {\n            System.out.println("Valid");\n        } else {\n            System.out.println("Invalid");\n        }\n    }\n}`,
+        'Ruby': `if /${regex}/.match(input)\n  puts 'Valid'\nelse\n  puts 'Invalid'\nend`,
+        'Rust': `use regex::Regex;\n\nfn main() {\n    let input = "...";\n    let re = Regex::new(r"${regex}").unwrap();\n    if re.is_match(input) {\n        println!("Valid");\n    } else {\n        println!("Invalid");\n    }\n}`,
+        'Go': `package main\n\nimport (\n    "fmt"\n    "regexp"\n)\n\nfunc main() {\n    input := "..." \n    matched, _ := regexp.MatchString("${regex}", input)\n    if matched {\n        fmt.Println("Valid")\n    } else {\n        fmt.Println("Invalid")\n    }\n}`,
+        'Swift': `import Foundation\n\nlet regex = try! NSRegularExpression(pattern: "${regex}")\nlet input = "..." \nlet range = NSRange(location: 0, length: input.utf16.count)\nif regex.firstMatch(in: input, options: [], range: range) != nil {\n    print("Valid")\n} else {\n    print("Invalid")\n}`,
+        'Perl': `if ($input =~ /${regex}/) {\n    print "Valid";\n} else {\n    print "Invalid";\n}`
     };
+
     const codeExample = codeExamples[language];
-    document.getElementById('codeExampleDisplay').innerHTML = `<strong>Code Example in ${language}:</strong> ${codeExample}`;
+    const codeExampleDisplay = document.getElementById('codeExampleDisplay');
+
+    // Create a textarea to host the code example
+    codeExampleDisplay.innerHTML = `<textarea id="codeMirrorEditor">${codeExample}</textarea>`;
+
+    // Initialize CodeMirror on the textarea
+    CodeMirror.fromTextArea(document.getElementById('codeMirrorEditor'), {
+        lineNumbers: true,
+        mode: getModeForLanguage(language),
+        theme: 'material-darker', // You can change this to any CodeMirror theme you prefer
+        readOnly: true,
+        tabSize: 4,
+        indentWithTabs: true
+    });
+
     return codeExample;
 }
 
+// Function to map languages to CodeMirror modes
+function getModeForLanguage(language) {
+    const modes = {
+        'PHP': 'application/x-httpd-php',
+        'JavaScript': 'javascript',
+        'Python': 'python',
+        'C#': 'text/x-csharp',
+        'Java': 'text/x-java',
+        'Ruby': 'ruby',
+        'Rust': 'rust',
+        'Go': 'go',
+        'Swift': 'swift',
+        'Perl': 'perl'
+    };
+    return modes[language] || 'text/plain';
+}
+
 // Function to export the pattern and code example to a file
 function exportToFile(pattern, codeExample, language) {
     const content = `Regex Pattern:\n${pattern}\n\nCode Example in ${language}:\n${codeExample}`;
@@ -203,4 +236,26 @@ function fallbackCopyToClipboard(text) {
     }
 
     document.body.removeChild(textArea);
-}
+}
+
+function resetForm() {
+    // Reset the form fields
+    document.getElementById('patternType').value = '';
+    document.getElementById('country').innerHTML = '<option value="">Please select</option>';
+    document.getElementById('programmingLanguage').value = '';
+
+    // Clear the displayed results
+    document.getElementById('regexDisplay').textContent = 'Regex pattern will be displayed here.';
+    document.getElementById('regexDisplay').classList.remove('alert-success', 'alert-danger-custom', 'alert-danger');
+    document.getElementById('regexDisplay').classList.add('alert-success');
+
+    document.getElementById('codeExampleDisplay').textContent = 'Code example will be displayed here.';
+    document.getElementById('codeExampleDisplay').innerHTML = 'Code example will be displayed here.';
+    document.getElementById('codeExampleDisplay').classList.remove('border-success', 'border-danger');
+    document.getElementById('codeExampleDisplay').classList.add('border-success');
+
+    // Hide buttons and explanation accordion
+    document.getElementById('exportButton').style.display = 'none';
+    document.getElementById('copyButton').style.display = 'none';
+    document.getElementById('explanationAccordion').style.display = 'none';
+}
diff --git a/index.html b/index.html
@@ -9,6 +9,8 @@
     <link rel="icon" href="assets/favicon.ico" type="image/x-icon">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/material-darker.min.css">
     <link rel="stylesheet" href="assets/css/app.css">
     <script type="application/ld+json">
         {
@@ -77,6 +79,7 @@ <h1 class="h3 mb-0"><a href="./" class="text-decoration-none text-white">Regex P
                         <option value="C#">C#</option>
                         <option value="Java">Java</option>
                         <option value="Ruby">Ruby</option>
+                        <option value="Rust">Rust</option>
                         <option value="Go">Go</option>
                         <option value="Swift">Swift</option>
                         <option value="Perl">Perl</option>
@@ -85,6 +88,9 @@ <h1 class="h3 mb-0"><a href="./" class="text-decoration-none text-white">Regex P
                 <button type="button" onclick="showPattern()" class="btn btn-primary">
                     <i class="bi bi-eye"></i> Show Pattern and Code
                 </button>
+                <button type="button" onclick="resetForm()" class="btn btn-outline-danger ms-2">
+                    <i class="bi bi-arrow-clockwise"></i> Reset Form
+                </button>
             </form>
             <div id="regexDisplay" class="alert alert-success mt-3">Regex pattern will be displayed here.</div>
             <div class="accordion mt-3" id="explanationAccordion" style="display: none;">
@@ -101,7 +107,7 @@ <h2 class="accordion-header" id="headingExplanation">
                     </div>
                 </div>
             </div>
-            <div id="codeExampleDisplay" class="alert alert-info mt-3">Code example will be displayed here.</div>
+            <div id="codeExampleDisplay" class="border border-3 border-success rounded p-3 mt-3">Code example will be displayed here.</div>
             <div id="actions" class="mt-3">
                 <button id="exportButton" type="button" class="btn btn-success" style="display: none;">
                     <i class="bi bi-download"></i> Export to File
@@ -120,6 +126,14 @@ <h2 class="accordion-header" id="headingExplanation">
         </footer>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/codemirror.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.5/mode/clike/clike.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/python/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/ruby/ruby.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/go/go.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/swift/swift.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/perl/perl.min.js"></script>
     <script src="assets/js/app.js"></script>
 </body>
 </html>