+
+
+
+
+
Copied!
+
+
Code Input :
+
Output :
diff --git a/script.js b/script.js
index 55153d3..9c7efcd 100644
--- 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();
-});
\ No newline at end of file
+});
+
diff --git a/styles.css b/styles.css
index d6c18fb..2007298 100644
--- 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 {