File tree 13 files changed +137
-0
lines changed
13 files changed +137
-0
lines changed Original file line number Diff line number Diff line change
1
+ # Codependal
2
+ This Editor Lets You Code And View The Changes In Your HTML(CSS & JS Also) At The Same Time.
3
+ It's perfect for anybody who just wants to quickly write and run some code without opening a Applicaton, Its Web Based Editor.
4
+
5
+ ## Preview
6
+ ![ 1] ( /readme/gallery/1.jpg )
7
+
8
+ ## Basic Info
9
+ 1 . ** Code Editor Version - 1.0.1**
10
+ 2 . ** No Need To Use Html Tag In Editor**
11
+ 3 . ** Supportable In Any Internet-Brower**
12
+
13
+ ## Features
14
+ 1 . Easy To Use!
15
+ 2 . This Code Editor Have Feature That Just Like CodePen Editor.
16
+ 3 . Web Based Editor.
17
+ 4 . Better Than [ Code557] ( https://autocode.com/app/abhay557/code557 )
18
+
19
+ ## Community
20
+ Do you have a question, feature request or something else on your mind?
21
+ Or you just want to follow news?
22
+ Check out these links:
23
+
24
+ * [ Support] ( https://autocode.com )
25
+ * [ Join a Discord server] ( https://discord.gg/5V68EK8AeS )
26
+ * [ Report An Issue] ( https://github.com/Abhay557/Codependal/issues/new )
27
+ * [ Contact The Author] ( https://github.com/Abhay557 )
28
+ * [ Github Repo] ( https://github.com/Abhay557/Codependal )
29
+
30
+ ⚠ Caution Some Of The Css Won't Work! Because It First Version!
Original file line number Diff line number Diff line change
1
+ @import url ('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap' );
2
+
3
+ * {
4
+ padding : 0 ;
5
+ margin : 0 ;
6
+ box-sizing : border-box;
7
+ }
8
+
9
+ body {
10
+ height : 100vh ;
11
+ display : flex;
12
+ }
13
+ .container {
14
+ background : # E7E7E7 ;
15
+ display : flex;
16
+ flex-direction : column;
17
+ width : 50% ;
18
+ height : 100vh ;
19
+ margin : 3px ;
20
+
21
+ }
22
+ .container textarea {
23
+ resize : none;
24
+ width : 100% ;
25
+ height : 33.333% ;
26
+ font-size : 1.4rem ;
27
+ padding : 10px ;
28
+ resize : vertical;
29
+ overflow-y : scroll;
30
+ }
31
+ .container textarea : focus {
32
+ outline : none;
33
+ }
34
+ .iframe-container {
35
+ background : white;
36
+ width : 50% ;
37
+ height : 100vh ;
38
+ margin : 3px ;
39
+ }
40
+ # viewer {
41
+ width : 100% ;
42
+ height : 100% ;
43
+ }
44
+ .split {
45
+ width : 100% ;
46
+ height : 100% ;
47
+ }
48
+ .gutter {
49
+ cursor : e-resize;
50
+ height : 100% ;
51
+ background : grey;
52
+ }
53
+ .gutter .gutter-horizontal {
54
+ cursor : ew-resize;
55
+ }
Original file line number Diff line number Diff line change
1
+ <!DOCTYPE html>
2
+ < html >
3
+ < head >
4
+ < title > Codependal Editor</ title >
5
+ < link rel ="shortcut icon " href ="/img/favicon.png " />
6
+ < link rel ="stylesheet " type ="text/css " href ="/css/styles.css ">
7
+ < script defer type ="text/javascript " src ="/js/app.js "> </ script >
8
+ < script src ="https://cdnjs.cloudflare.com/ajax/libs/split.js/1.0.0/split.min.js " integrity ="sha512-tTsZnBXEzNdEaqUO9Ok8fUofS73xieiBa54pD/sxOSvayIgItM9MmEM0CnUjA13LDnJT22sfwmjf20+Bo2174g== " crossorigin ="anonymous "> </ script >
9
+ </ head >
10
+ < body >
11
+ < div class ="container split ">
12
+ < textarea id ="htmlCode " placeholder ="Type HTML code here " oninput ="update() "> </ textarea >
13
+ < textarea id ="cssCode " placeholder ="Type CSS code here " oninput ="update() "> </ textarea >
14
+ < textarea id ="javascriptCode " placeholder ="Type JavaScript code here " oninput ="update() "> </ textarea >
15
+ </ div >
16
+ < div class ="iframe-container split ">
17
+ < iframe id ="viewer "> </ iframe >
18
+ </ div >
19
+ </ body >
20
+ </ html >
21
+ <!--Made By Abhay Mourya-->
Original file line number Diff line number Diff line change
1
+ function update ( ) {
2
+
3
+ let htmlCode = document . getElementById ( "htmlCode" ) . value ;
4
+ let cssCode = document . getElementById ( "cssCode" ) . value ;
5
+ let javascriptCode = document . getElementById ( "javascriptCode" ) . value ;
6
+ let text = htmlCode + "<style>" + cssCode + "</style>" + "<scri" + "pt>" + javascriptCode + "</scri" + "pt>" ;
7
+ let iframe = document . getElementById ( 'viewer' ) . contentWindow . document ;
8
+ iframe . open ( ) ;
9
+ iframe . write ( text ) ;
10
+ iframe . close ( ) ;
11
+
12
+ }
13
+
14
+ Split ( [ ".container" , ".iframe-container" ] ) ;
15
+ //Split(["#htmlCode", "#cssCode", "#javascriptCode"]);
Original file line number Diff line number Diff line change
1
+ {"dev" :{}}
Original file line number Diff line number Diff line change
1
+ {
2
+ "name" : " new-project" ,
3
+ "author" : " Abhay ᵈᵉᵛ" ,
4
+ "publish" : false ,
5
+ "dependencies" : {
6
+ "lib" : " latest"
7
+ }
8
+ }
Original file line number Diff line number Diff line change
1
+ {}
Original file line number Diff line number Diff line change
1
+ {
2
+ "name" : " abhay557/codependal" ,
3
+ "timeout" : 10000 ,
4
+ "connector" : false ,
5
+ "events" : {}
6
+ }
You can’t perform that action at this time.
0 commit comments