Skip to content

Commit 68a132b

Browse files
authored
1 parent 0cc5a5b commit 68a132b

13 files changed

+137
-0
lines changed

README.md

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
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!

Source/css/styles.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
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+
}

Source/img/favicon.png

90.3 KB
Loading

Source/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
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-->

Source/js/app.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
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"]);

env.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{"dev":{}}

package.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"name": "new-project",
3+
"author": "Abhay ᵈᵉᵛ",
4+
"publish": false,
5+
"dependencies": {
6+
"lib": "latest"
7+
}
8+
}

payloads.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

readme/gallery/1.jpg

35.5 KB
Loading

readme/gallery/2.jpg

61.3 KB
Loading

readme/gallery/3.jpg

64.7 KB
Loading

readme/thumbnail.png

90.3 KB
Loading

stdlib.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "abhay557/codependal",
3+
"timeout": 10000,
4+
"connector": false,
5+
"events": {}
6+
}

0 commit comments

Comments
 (0)