66 < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.css " />
77 < style >
88 body { font-family : Arial, sans-serif; margin : 20px ; }
9- # editor { height : 300px ; border : 1px solid # ccc
10- # output { border : 1px solid # cccpadding : 10px ; white-space : pre-wrap; margin-top : 10px ; background : # f9f9f9
9+ .container { display : flex; justify-content : space-between; flex-wrap : wrap; }
10+ .draggable { border : 1px solid # cccmargin : 10px ; padding : 10px ; background-color : # f9f9f9
11+ # editor { height : 300px ; width : 45% ; }
12+ # output { height : 300px ; width : 45% ; }
13+ # runBtn { margin-top : 10px ; padding : 8px 16px ; cursor : pointer; }
14+ # output { white-space : pre-wrap; }
15+ # drag-editor , # drag-output { cursor : move; }
1116 button { margin-top : 10px ; padding : 8px 16px ; }
1217 </ style >
1318</ head >
1419< body >
1520
1621< h2 > Try Python in Your Browser</ h2 >
17- < textarea id ="editor "> print("Hello from Python!")</ textarea > < br >
18- < button id ="runBtn "> ▶ Run Code</ button >
22+ < div class ="container ">
23+ < div id ="drag-editor " class ="draggable " style ="width:45%; cursor: move; ">
24+ < h3 > Code Editor</ h3 >
25+ < textarea id ="editor "> print("Hello from Python!")</ textarea > < br >
26+ </ div >
27+ 28+ < div id ="drag-output " class ="draggable " style ="width:45%; cursor: move; ">
29+ < h3 > Output:</ h3 >
30+ < div id ="output "> ...</ div >
31+ </ div >
32+ </ div >
1933
20- < h3 > Output:</ h3 >
21- < div id ="output "> ...</ div >
34+ < button id ="runBtn "> ▶ Run Code</ button >
2235
2336<!-- CodeMirror -->
2437< script src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.js "> </ script >
@@ -40,7 +53,6 @@ <h3>Output:</h3>
4053 let pyodideReady = false ;
4154 let pyodide = null ;
4255
43- // Function to load Pyodide
4456 async function loadPyodideAndPackages ( ) {
4557 pyodide = await loadPyodide ( ) ;
4658 pyodideReady = true ;
@@ -62,4 +74,62 @@ <h3>Output:</h3>
6274 document . getElementById ( "runBtn" ) . addEventListener ( "click" , async ( ) => {
6375 const output = document . getElementById ( "output" ) ;
6476
65- if (!pyodideReady
77+ if ( ! pyodideReady ) {
78+ output . textContent = "⏳ Please wait, Pyodide is still loading..." ;
79+ return ;
80+ }
81+ 82+ output . textContent = "" ; // clear old output
83+ try {
84+ const code = cm . getValue ( ) ; // Get code from editor
85+ redirectOutput ( ) ; // Redirect stdout before running the code
86+ await pyodide . runPythonAsync ( code ) ;
87+ 88+ // Get the output and display it
89+ const result = pyodide . runPython ( 'sys.stdout.getvalue()' ) ; // Capture the stdout
90+ if ( result !== undefined && result !== null ) {
91+ output . textContent = result . toString ( ) ;
92+ } else {
93+ output . textContent = "✅ Code executed successfully." ;
94+ }
95+ } catch ( err ) {
96+ output . textContent = `❌ Error:\n${ err . message || err } ;
97+ }
98+ } ) ;
99+ 100+ // Drag functionality (for customizability)
101+ let dragging = null ;
102+ let offsetX = 0 ;
103+ let offsetY = 0 ;
104+ 105+ function makeDraggable ( element ) {
106+ element . addEventListener ( 'mousedown' , ( e ) => {
107+ dragging = element ;
108+ offsetX = e . clientX - element . getBoundingClientRect ( ) . left ;
109+ offsetY = e . clientY - element . getBoundingClientRect ( ) . top ;
110+ 111+ document . addEventListener ( 'mousemove' , dragElement ) ;
112+ document . addEventListener ( 'mouseup' , stopDragging ) ;
113+ } ) ;
114+ }
115+ 116+ function dragElement ( e ) {
117+ if ( dragging ) {
118+ dragging . style . position = 'absolute' ;
119+ dragging . style . left = ( e . clientX - offsetX ) + 'px' ;
120+ dragging . style . top = ( e . clientY - offsetY ) + 'px' ;
121+ }
122+ }
123+ 124+ function stopDragging ( ) {
125+ dragging = null ;
126+ document . removeEventListener ( 'mousemove' , dragElement ) ;
127+ document . removeEventListener ( 'mouseup' , stopDragging ) ;
128+ }
129+ 130+ makeDraggable ( document . getElementById ( 'drag-editor' ) ) ;
131+ makeDraggable ( document . getElementById ( 'drag-output' ) ) ;
132+ </ script >
133+ 134+ </ body >
135+ </ html >
0 commit comments