From 053bb4cea42f515f42eac0d58e62c576615a0344 Mon Sep 17 00:00:00 2001 From: Martin Nestorov Date: Wed, 21 Aug 2024 22:55:59 +0300 Subject: [PATCH] Added code mirror for code visualization and improvement of UI/UX --- assets/css/app.css | 4 +++ assets/js/app.js | 79 +++++++++++++++++++++++++++++++++++++++------- index.html | 16 +++++++++- 3 files changed, 86 insertions(+), 13 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 47fd7b6..5528bea 100644 --- 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 index de1b490..3e79b4b 100644 --- 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': ``, + '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 = `Code Example in ${language}: ${codeExample}`; + const codeExampleDisplay = document.getElementById('codeExampleDisplay'); + + // Create a textarea to host the code example + codeExampleDisplay.innerHTML = ``; + + // 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); -} \ No newline at end of file +} + +function resetForm() { + // Reset the form fields + document.getElementById('patternType').value = ''; + document.getElementById('country').innerHTML = ''; + 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 index 31b85b5..f1ae687 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,8 @@ + + + + + + + + + +