22< html lang ="en ">
33< head >
44 < meta charset ="UTF-8 " />
5- < title > Python Editor (Pyodide) </ title >
5+ < title > Python Code Editor </ title >
66 < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.10/codemirror.min.css " />
77 < style >
88 body {
3333 flex-wrap : wrap;
3434 }
3535 .draggable {
36- flex : 1 ;
36+ position : relative ;
3737 margin : 10px ;
3838 padding : 10px ;
3939 background-color : # f9f9f9
4040 border : 1px solid # ccc
4141 display : flex;
4242 flex-direction : column;
4343 justify-content : flex-start;
44- min-width : 45% ; /* This ensures the sections are at least 45% wide */
45- height : calc (100vh - 70px ); /* Adjust height to the screen */
44+ min-width : 45% ;
45+ height : calc (100vh - 70px );
46+ overflow : hidden;
47+ }
48+ .resizable {
49+ overflow : hidden;
50+ resize : both;
51+ max-width : 100% ;
52+ max-height : 100% ;
53+ background-color : # f4f4f4
54+ }
55+ .resizer {
56+ width : 10px ;
57+ background-color : # ccc
58+ cursor : se-resize;
59+ position : absolute;
60+ right : 0 ;
61+ bottom : 0 ;
62+ height : 10px ;
4663 }
4764 # editor {
4865 height : calc (50vh - 20px );
6885 }
6986 @media screen and (max-width : 768px ) {
7087 .container {
71- flex-direction : column;/* Stack vertically on small screens */
88+ flex-direction : column;
7289 }
7390 .draggable {
74- width : 100% ; /* Make sections full width on small screens */
91+ width : 100% ;
7592 }
7693 }
7794 </ style >
83100 Welcome Learner, this is an interactive web Python interpreter by Bit and Pi channel
84101 </ div >
85102
86- < h2 > Try Python in Your Browser </ h2 >
103+ < h2 > Interactive Python Code Editor </ h2 >
87104
88105 < div class ="container ">
89- < div id ="drag-editor " class ="draggable " style =" cursor: move; ">
106+ < div id ="drag-editor " class ="draggable resizable ">
90107 < h3 > Code Editor</ h3 >
91108 < textarea id ="editor "> print("Hello from Python!")</ textarea > < br >
92109 </ div >
93110
94- < div id ="drag-output " class ="draggable " style =" cursor: move; ">
111+ < div id ="drag-output " class ="draggable resizable ">
95112 < h3 > Output:</ h3 >
96113 < div id ="output "> ...</ div >
97114 </ div >
@@ -119,6 +136,7 @@ <h3>Output:</h3>
119136 let pyodideReady = false ;
120137 let pyodide = null ;
121138
139+ // Load Pyodide and required libraries
122140 async function loadPyodideAndPackages ( ) {
123141 pyodide = await loadPyodide ( ) ;
124142 pyodideReady = true ;
@@ -132,7 +150,7 @@ <h3>Output:</h3>
132150 pyodide . runPython ( `
133151 import sys
134152 import io
135- sys.stdout = io.StringIO() // Redirect stdout to capture print statements
153+ sys.stdout = io.StringIO()
136154 ` ) ;
137155 }
138156
@@ -163,38 +181,31 @@ <h3>Output:</h3>
163181 }
164182 } ) ;
165183
166- // Drag functionality (for customizability)
167- let dragging = null ;
168- let offsetX = 0 ;
169- let offsetY = 0 ;
170- 171- function makeDraggable ( element ) {
172- element . addEventListener ( 'mousedown' , ( e ) => {
173- dragging = element ;
174- offsetX = e . clientX - element . getBoundingClientRect ( ) . left ;
175- offsetY = e . clientY - element . getBoundingClientRect ( ) . top ;
176- 177- document . addEventListener ( 'mousemove' , dragElement ) ;
178- document . addEventListener ( 'mouseup' , stopDragging ) ;
184+ // Allow users to resize the editor and output areas
185+ const resizableElements = document . querySelectorAll ( '.resizable' ) ;
186+ resizableElements . forEach ( element => {
187+ const resizer = document . createElement ( 'div' ) ;
188+ resizer . classList . add ( 'resizer' ) ;
189+ element . appendChild ( resizer ) ;
190+ 191+ let isResizing = false ;
192+ 193+ resizer . addEventListener ( 'mousedown' , ( e ) => {
194+ isResizing = true ;
195+ document . addEventListener ( 'mousemove' , resizeElement ) ;
196+ document . addEventListener ( 'mouseup' , ( ) => {
197+ isResizing = false ;
198+ document . removeEventListener ( 'mousemove' , resizeElement ) ;
199+ } ) ;
179200 } ) ;
180- }
181201
182- function dragElement ( e ) {
183- if ( dragging ) {
184- dragging . style . position = 'absolute' ;
185- dragging . style . left = ( e . clientX - offsetX ) + 'px' ;
186- dragging . style . top = ( e . clientY - offsetY ) + 'px' ;
202+ function resizeElement ( e ) {
203+ if ( isResizing ) {
204+ element . style . width = ` ${ e . clientX - element . getBoundingClientRect ( ) . left } px` ;
205+ element . style . height = ` ${ e . clientY - element . getBoundingClientRect ( ) . top } px` ;
206+ }
187207 }
188- }
189- 190- function stopDragging ( ) {
191- dragging = null ;
192- document . removeEventListener ( 'mousemove' , dragElement ) ;
193- document . removeEventListener ( 'mouseup' , stopDragging ) ;
194- }
195- 196- makeDraggable ( document . getElementById ( 'drag-editor' ) ) ;
197- makeDraggable ( document . getElementById ( 'drag-output' ) ) ;
208+ } ) ;
198209 </ script >
199210
200211</ body >
0 commit comments