Skip to content

Commit 8deeddc

Browse files
author
thewebfix
committed
first commit
0 parents  commit 8deeddc

File tree

3 files changed

+205
-0
lines changed

3 files changed

+205
-0
lines changed

‎index.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Code Editor</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
12+
/>
13+
</head>
14+
<body>
15+
<div class="editor-menu">
16+
<div class="logo">THE WEBFIX EDITOR</div>
17+
<button class="btn btn-dark">Dark Mode</button>
18+
<button class="btn btn-light">Light Mode</button>
19+
<button class="btn btn-run"><i class="fa fa-play"></i>Run</button>
20+
<div class="live">
21+
<label for="live">Live-</label>
22+
<input type="checkbox" id="live" />
23+
</div>
24+
</div>
25+
26+
<div class="container">
27+
<div class="left">
28+
<div class="editor" contenteditable="">Write your code...</div>
29+
</div>
30+
<div class="bar" title="click and drag"></div>
31+
<div class="right">
32+
<iframe src="" class="iframe" frameborder="0"></iframe>
33+
</div>
34+
</div>
35+
36+
<script src="script.js"></script>
37+
</body>
38+
</html>

‎script.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
const left = document.querySelector(".left"),
2+
right = document.querySelector(".right"),
3+
bar = document.querySelector(".bar"),
4+
editor = document.querySelector(".editor"),
5+
run = document.querySelector(".btn-run"),
6+
iframe = document.querySelector(".iframe"),
7+
darkMode = document.querySelector(".btn-dark"),
8+
lightMode = document.querySelector(".btn-light");
9+
10+
const drag = (e) => {
11+
e.preventDefault();
12+
document.selection
13+
? document.selection.empty()
14+
: window.getSelection().removeAllRanges();
15+
left.style.width = e.pageX - bar.offsetWidth / 3 + "px";
16+
editor.ariaSetSize();
17+
};
18+
19+
bar.addEventListener("mousedown", () => {
20+
document.addEventListener("mousemove", drag);
21+
});
22+
23+
bar.addEventListener("mouseup", () => {
24+
document.removeEventListener("mousemove", drag);
25+
});
26+
27+
//Run btn evenlistener
28+
29+
run.addEventListener("click", () => {
30+
const html = editor.textContent;
31+
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
32+
});
33+
34+
//set dark Mode
35+
darkMode.addEventListener("click", () => {
36+
editor.style.backgroundColor = "#363836";
37+
editor.style.color = "#eee";
38+
});
39+
40+
//set light Mode
41+
lightMode.addEventListener("click", () => {
42+
editor.style.backgroundColor = "";
43+
editor.style.color = "";
44+
});
45+
46+
//live code
47+
document.getElementById("live").onclick = function () {
48+
if (this.checked) {
49+
editor.addEventListener("keyup", () => {
50+
const html = editor.textContent;
51+
iframe.src = "data:text/html;charset=utf-8," + encodeURI(html);
52+
});
53+
}
54+
};

‎style.css

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
html {
8+
font-size: 62.5%;
9+
}
10+
11+
.editor-menu {
12+
width: 100%;
13+
height: 6rem;
14+
background-color: lightgrey;
15+
display: flex;
16+
justify-content: flex-start;
17+
align-items: center;
18+
padding: 5px 0 5px 10px;
19+
}
20+
21+
.btn {
22+
color: #fff;
23+
border: none;
24+
outline: none;
25+
background-color: #17c;
26+
cursor: pointer;
27+
padding: 8px 7px;
28+
border-radius: 3px;
29+
font-size: 15px;
30+
margin-right: 8px;
31+
min-width: 50px;
32+
transition: all 0.3s;
33+
}
34+
35+
.btn:hover {
36+
background-color: orangered;
37+
}
38+
39+
.live {
40+
font-size: 16px;
41+
background-color: rgb(198, 240, 179);
42+
color: #242424;
43+
font-weight: bold;
44+
border: 2px solid orangered;
45+
padding: 5px 7px;
46+
display: flex;
47+
align-items: center;
48+
border-radius: 3px;
49+
cursor: pointer;
50+
}
51+
52+
.live > * {
53+
cursor: pointer;
54+
}
55+
56+
.container {
57+
position: absolute;
58+
bottom: 0px;
59+
top: 7rem;
60+
width: 100%;
61+
display: flex;
62+
}
63+
64+
.left,
65+
.right {
66+
height: 100%;
67+
width: 50%;
68+
border: 1px solid #d5d5d5;
69+
}
70+
71+
.bar {
72+
width: 4px;
73+
height: 100%;
74+
background-color: #eee;
75+
cursor: pointer;
76+
}
77+
78+
.right {
79+
flex: 1;
80+
}
81+
82+
.logo {
83+
margin-right: 950px;
84+
font-size: 20px;
85+
margin-left: 15px;
86+
font-weight: 900;
87+
color: #17c;
88+
border-bottom: 2px dotted orangered;
89+
text-shadow: 0px 1px;
90+
}
91+
92+
.editor {
93+
font-size: 18px;
94+
width: 100%;
95+
height: 100%;
96+
outline: none;
97+
border-color: #ccc;
98+
padding: 1rem 0 0 1rem;
99+
}
100+
101+
i {
102+
margin-right: 5px;
103+
}
104+
105+
.iframe {
106+
width: 100%;
107+
height: 100%;
108+
background-color: #fff;
109+
overflow-y: auto;
110+
white-space: pre;
111+
right: 0;
112+
padding: 4px;
113+
}

0 commit comments

Comments
 (0)