diff --git a/learn.html b/learn.html index 36cbd8e..8a9948c 100644 --- a/learn.html +++ b/learn.html @@ -52,7 +52,15 @@

Python Lessons

+ +
+ + + +
+

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 {