From 02c26ab72a155db316ffcc5737c6b30525be02cc Mon Sep 17 00:00:00 2001
From: MahekVanjani611 <b22ee088@iitj.ac.in>
Date: Mon, 28 Jul 2025 11:36:46 +0530
Subject: [PATCH 1/2] feat(editor): add modern clear dialog and per-language
 code saving

- Added a modern modal dialog for clearing code with improved CSS styling and user warning.
- Implemented logic to preserve and restore code for each language when switching in the editor.

Closes #175
---
 javascript-executor.html | 183 +++++++++++++++++++++++++++++++++------
 1 file changed, 157 insertions(+), 26 deletions(-)

diff --git a/javascript-executor.html b/javascript-executor.html
index 3b1cd422..fadc3d8c 100644
--- a/javascript-executor.html
+++ b/javascript-executor.html
@@ -242,6 +242,82 @@
             outline: none;
             border-color: #667eea;
         }
+/* Modern modal dialog styles */
+.modal-dialog {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(40, 44, 52, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    animation: fadeIn 0.2s;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+.modal-content {
+    background: #fff;
+    border-radius: 16px;
+    padding: 32px 28px 24px 28px;
+    box-shadow: 0 8px 32px rgba(31,38,135,0.37);
+    max-width: 350px;
+    width: 100%;
+    text-align: center;
+    border: 1px solid #eee;
+    animation: slideUp 0.25s;
+}
+@keyframes slideUp {
+    from { transform: translateY(40px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+.modal-content h3 {
+    margin-bottom: 14px;
+    color: #764ba2;
+    font-size: 1.35rem;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+}
+.modal-content p {
+    margin-bottom: 22px;
+    color: #444;
+    font-size: 1rem;
+}
+.modal-actions {
+    display: flex;
+    gap: 18px;
+    justify-content: center;
+}
+.btn-primary {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: #fff;
+    border: none;
+    font-weight: 600;
+    padding: 10px 22px;
+    border-radius: 8px;
+    font-size: 1rem;
+    box-shadow: 0 2px 8px rgba(102,126,234,0.12);
+    transition: background 0.2s, box-shadow 0.2s;
+}
+.btn-primary:hover {
+    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
+    box-shadow: 0 4px 16px rgba(102,126,234,0.18);
+}
+.btn-secondary {
+    background: #f8f9fa;
+    color: #764ba2;
+    border: 2px solid #e9ecef;
+    font-weight: 600;
+    padding: 10px 22px;
+    border-radius: 8px;
+    font-size: 1rem;
+    transition: background 0.2s, border-color 0.2s;
+}
+.btn-secondary:hover {
+    background: #e9ecef;
+    border-color: #764ba2;
+}
 
         .output-container {
             flex: 1;
@@ -619,28 +695,51 @@ <h3 class="panel-title">📊 Output Console</h3>
                 }
             }
 
-            onLanguageChange() {
-                // Clear the editor when language changes
-                // this.clearEditor();
-                
-                // Update placeholder based on language
-                const selectedOption = this.elements.languageSelect.selectedOptions[0];
-                if (selectedOption) {
-                    const langName = selectedOption.textContent.toLowerCase();
-                    if (langName.includes('python')) {
-                        this.elements.codeEditor.placeholder = '# Write your Python code here...';
-                    } else if (langName.includes('java')) {
-                        this.elements.codeEditor.placeholder = '// Write your Java code here...';
-                    } else if (langName.includes('c++') || langName.includes('cpp')) {
-                        this.elements.codeEditor.placeholder = '// Write your C++ code here...';
-                    } else if (langName.includes('javascript')) {
-                        this.elements.codeEditor.placeholder = '// Write your JavaScript code here...';
-                    } else {
-                        this.elements.codeEditor.placeholder = '// Write your code here...';
-                    }
-                }
-            }
+            // ...inside class MultiLanguageExecutor...
+
+onLanguageChange() {
+    // Save current code for previous language
+    const currentLang = this.prevLang || this.elements.languageSelect.value;
+    this.languageCodes[currentLang] = this.elements.codeEditor.value;
+
+    // Load code for new language, or starter template
+    const selectedLang = this.elements.languageSelect.value;
+    const starterTemplates = {
+        '63': '// Write your JavaScript code here...',
+        '71': '# Write your Python code here...',
+        '62': '// Write your Java code here...',
+        '54': '// Write your C++ code here...',
+        '50': '// Write your C code here...',
+        '51': '// Write your C# code here...',
+        '68': '// Write your PHP code here...',
+        '72': '# Write your Ruby code here...',
+        '60': '// Write your Go code here...',
+        '78': '// Write your Kotlin code here...',
+        '85': '# Write your Perl code here...',
+        '43': '// Write your code here...'
+    };
+    this.elements.codeEditor.value = this.languageCodes[selectedLang] || starterTemplates[selectedLang] || '';
+    this.prevLang = selectedLang;
+
+    // Update placeholder as before
+    const selectedOption = this.elements.languageSelect.selectedOptions[0];
+    if (selectedOption) {
+        const langName = selectedOption.textContent.toLowerCase();
+        if (langName.includes('python')) {
+            this.elements.codeEditor.placeholder = '# Write your Python code here...';
+        } else if (langName.includes('java')) {
+            this.elements.codeEditor.placeholder = '// Write your Java code here...';
+        } else if (langName.includes('c++') || langName.includes('cpp')) {
+            this.elements.codeEditor.placeholder = '// Write your C++ code here...';
+        } else if (langName.includes('javascript')) {
+            this.elements.codeEditor.placeholder = '// Write your JavaScript code here...';
+        } else {
+            this.elements.codeEditor.placeholder = '// Write your code here...';
+        }
+    }
+}
 
+      
             async executeCode() {
                 if (!this.apiKey) {
                     this.showError('Please enter and test your RapidAPI key first');
@@ -816,11 +915,32 @@ <h3 class="panel-title">📊 Output Console</h3>
                 }
             }
 
-            clearEditor() {
-                this.elements.codeEditor.value = '';
-                this.elements.inputData.value = '';
-                this.elements.codeEditor.focus();
-            }
+// ...inside class MultiLanguageExecutor...
+
+clearEditor() {
+    if (this.elements.codeEditor.value.trim() !== '' || this.elements.inputData.value.trim() !== '') {
+        // Show custom dialog
+        const dialog = document.getElementById('clearDialog');
+        dialog.style.display = 'flex';
+
+        const confirmBtn = document.getElementById('confirmClearBtn');
+        const cancelBtn = document.getElementById('cancelClearBtn');
+
+        const closeDialog = () => { dialog.style.display = 'none'; };
+
+        confirmBtn.onclick = () => {
+            this.elements.codeEditor.value = '';
+            this.elements.inputData.value = '';
+            this.elements.codeEditor.focus();
+            closeDialog();
+        };
+        cancelBtn.onclick = closeDialog;
+        return;
+    }
+    this.elements.codeEditor.value = '';
+    this.elements.inputData.value = '';
+    this.elements.codeEditor.focus();
+}
 
             clearOutput() {
                 this.elements.output.textContent = '';
@@ -1094,5 +1214,16 @@ <h3 class="panel-title">📊 Output Console</h3>
             console.error('Unhandled promise rejection:', event.reason);
         });
     </script>
+    <!-- Add this before </body> -->
+<div id="clearDialog" class="modal-dialog" style="display:none;">
+    <div class="modal-content">
+        <h3>Clear Code?</h3>
+        <p>This will remove all code and input. This action cannot be undone.</p>
+        <div class="modal-actions">
+            <button id="confirmClearBtn" class="btn btn-primary">Yes, Clear</button>
+            <button id="cancelClearBtn" class="btn btn-secondary">Cancel</button>
+        </div>
+    </div>
+</div>
 </body>
 </html>
\ No newline at end of file

From 7249d17c7cb2158e00185384fc3afbbc9bfd3313 Mon Sep 17 00:00:00 2001
From: MahekVanjani611 <b22ee088@iitj.ac.in>
Date: Mon, 28 Jul 2025 12:03:08 +0530
Subject: [PATCH 2/2] fixed initialisation in constructor

---
 javascript-executor.html | 88 ++++++++++++++++++++--------------------
 1 file changed, 43 insertions(+), 45 deletions(-)

diff --git a/javascript-executor.html b/javascript-executor.html
index fadc3d8c..a69d1cfa 100644
--- a/javascript-executor.html
+++ b/javascript-executor.html
@@ -561,7 +561,7 @@ <h3 class="panel-title">📊 Output Console</h3>
                 this.apiEndpoint = 'https://judge0-ce.p.rapidapi.com';
                 this.isExecuting = false;
                 this.pollInterval = null;
-                
+                this.languageCodes = {};
                 this.initializeElements();
                 this.initializeEventListeners();
                 this.setupExamples();
@@ -618,6 +618,48 @@ <h3 class="panel-title">📊 Output Console</h3>
                     });
                 });
             }
+            
+onLanguageChange() {
+    // Save current code for previous language
+    const currentLang = this.prevLang || this.elements.languageSelect.value;
+    this.languageCodes[currentLang] = this.elements.codeEditor.value;
+
+    // Load code for new language, or starter template
+    const selectedLang = this.elements.languageSelect.value;
+    const starterTemplates = {
+        '63': '// Write your JavaScript code here...',
+        '71': '# Write your Python code here...',
+        '62': '// Write your Java code here...',
+        '54': '// Write your C++ code here...',
+        '50': '// Write your C code here...',
+        '51': '// Write your C# code here...',
+        '68': '// Write your PHP code here...',
+        '72': '# Write your Ruby code here...',
+        '60': '// Write your Go code here...',
+        '78': '// Write your Kotlin code here...',
+        '85': '# Write your Perl code here...',
+        '43': '// Write your code here...'
+    };
+    this.elements.codeEditor.value = this.languageCodes[selectedLang] || starterTemplates[selectedLang] || '';
+    this.prevLang = selectedLang;
+
+    // Update placeholder as before
+    const selectedOption = this.elements.languageSelect.selectedOptions[0];
+    if (selectedOption) {
+        const langName = selectedOption.textContent.toLowerCase();
+        if (langName.includes('python')) {
+            this.elements.codeEditor.placeholder = '# Write your Python code here...';
+        } else if (langName.includes('java')) {
+            this.elements.codeEditor.placeholder = '// Write your Java code here...';
+        } else if (langName.includes('c++') || langName.includes('cpp')) {
+            this.elements.codeEditor.placeholder = '// Write your C++ code here...';
+        } else if (langName.includes('javascript')) {
+            this.elements.codeEditor.placeholder = '// Write your JavaScript code here...';
+        } else {
+            this.elements.codeEditor.placeholder = '// Write your code here...';
+        }
+    }
+}
 
             loadApiKey() {
                 const saved = localStorage.getItem('judge0_api_key');
@@ -695,50 +737,6 @@ <h3 class="panel-title">📊 Output Console</h3>
                 }
             }
 
-            // ...inside class MultiLanguageExecutor...
-
-onLanguageChange() {
-    // Save current code for previous language
-    const currentLang = this.prevLang || this.elements.languageSelect.value;
-    this.languageCodes[currentLang] = this.elements.codeEditor.value;
-
-    // Load code for new language, or starter template
-    const selectedLang = this.elements.languageSelect.value;
-    const starterTemplates = {
-        '63': '// Write your JavaScript code here...',
-        '71': '# Write your Python code here...',
-        '62': '// Write your Java code here...',
-        '54': '// Write your C++ code here...',
-        '50': '// Write your C code here...',
-        '51': '// Write your C# code here...',
-        '68': '// Write your PHP code here...',
-        '72': '# Write your Ruby code here...',
-        '60': '// Write your Go code here...',
-        '78': '// Write your Kotlin code here...',
-        '85': '# Write your Perl code here...',
-        '43': '// Write your code here...'
-    };
-    this.elements.codeEditor.value = this.languageCodes[selectedLang] || starterTemplates[selectedLang] || '';
-    this.prevLang = selectedLang;
-
-    // Update placeholder as before
-    const selectedOption = this.elements.languageSelect.selectedOptions[0];
-    if (selectedOption) {
-        const langName = selectedOption.textContent.toLowerCase();
-        if (langName.includes('python')) {
-            this.elements.codeEditor.placeholder = '# Write your Python code here...';
-        } else if (langName.includes('java')) {
-            this.elements.codeEditor.placeholder = '// Write your Java code here...';
-        } else if (langName.includes('c++') || langName.includes('cpp')) {
-            this.elements.codeEditor.placeholder = '// Write your C++ code here...';
-        } else if (langName.includes('javascript')) {
-            this.elements.codeEditor.placeholder = '// Write your JavaScript code here...';
-        } else {
-            this.elements.codeEditor.placeholder = '// Write your code here...';
-        }
-    }
-}
-
       
             async executeCode() {
                 if (!this.apiKey) {