Merge pull request #53 from Adi-204/Code-Editor

Added Copy and Reset Button.
codingkatty · Oct 13, 2024 · aa57318 · aa57318
2 parents 7a3963c + 020c61c
commit aa57318
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 1 deletion.
diff --git a/learn.html b/learn.html
@@ -52,7 +52,15 @@ <h2>Python Lessons</h2>
             <div class="editor-area">
 
                 <div id="editor-container">
+
+                    <div id="editor-controls">
+                        <button id="reset-code">Reset Code</button>
+                        <button id="copy-code">Copy Code</button>
+                        <p id="copy-message" style="display: none; color: black;">Copied!</p>                  
+                    </div>  
+
                     <h2>Code Input :</h2>
+
                     <div id="editor"></div>
                     <h2>Output :</h2>
                     <div id="terminal-container">

diff --git a/script.js b/script.js
@@ -1,5 +1,6 @@
 let editor;
 let pyodide;
+let currentLesson;
 
 // Add these lines at the beginning of the file
 let userProgress = JSON.parse(localStorage.getItem('userProgress')) || {
@@ -74,6 +75,7 @@ async function initPyodide() {
 window.addEventListener('load', initPyodide);
 
 function showEditor(lesson) {
+    currentLesson = lesson;
     document.getElementById('editor-container').style.display = 'flex';
     if (!editor) {
         editor = ace.edit("editor");
@@ -476,6 +478,30 @@ document.addEventListener('DOMContentLoaded', function() {
     updateProgressBar();
 });
 
+
+// Reset button 
+document.getElementById('reset-code').addEventListener('click', () => {
+    if (currentLesson) {
+        showEditor(currentLesson); 
+    } 
+});
+
+
+document.getElementById('copy-code').addEventListener('click', () => {
+    const code = editor.getValue();
+    navigator.clipboard.writeText(code)
+        .then(() => {
+            const copyMessage = document.getElementById('copy-message');
+            copyMessage.style.display = 'block'; 
+            setTimeout(() => {
+                copyMessage.style.display = 'none'; 
+            }, 1000); 
+        })
+        .catch(err => {
+            console.error("Failed to copy text: ", err);
+        });
+});
+
 // Add this to your DOMContentLoaded event listener
 document.addEventListener('DOMContentLoaded', () => {
     // ... existing code ...
@@ -492,4 +518,5 @@ document.addEventListener('DOMContentLoaded', () => {
     }
 
     updateProgressBar();
-});
+});
+
diff --git a/styles.css b/styles.css
@@ -518,6 +518,31 @@ body.dark-theme .about-container {
     background-color: #0f3460;
 }
 
+#editor-controls {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 10px;
+    gap: 8px;
+}
+
+#editor-controls button {
+    padding: 0.8rem 1.5rem;
+    color: white;
+    border: none;
+    border-radius: 25px;
+    font-weight: 600;
+    cursor: pointer;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    background-color: #2ecc71;
+}
+
+#copy-message {
+    margin-left: 10px; 
+    font-size: 14px; 
+    font-weight: bold; 
+    color: green; 
+}
+
 /* Responsive design for challenge and FAQ pages */
 @media (max-width: 768px) {
     .challenge-container {