-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
132 lines (131 loc) · 4.22 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<head>
<title>Code Editor</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./index.css" />
<script
src="https://kit.fontawesome.com/086e514b71.js"
crossorigin="anonymous"
></script>
</head>
<body class="bg-gray-900">
<div class="container">
<div class="left">
<ul
class="flex flex-row text-sm text-bold font-medium text-center text-gray-500 border-gray-700"
>
<li class="mr-2">
<a
id="html-tab"
data-toggle="tab"
data-select="one"
href="#html-code"
aria-current="page"
class="active inline-block p-4 rounded-t-lg bg-gray-800 text-blue-500"
><i class="fa-brands fa-html5"></i> HTML</a
>
</li>
<li class="mr-2">
<a
id="css-tab"
data-select="two"
data-toggle="tab"
href="#css-code"
class="inline-block p-4 rounded-t-lg hover:bg-gray-800"
><i class="fa-brands fa-css3-alt"></i> CSS</a
>
</li>
<li class="mr-2">
<a
data-select="three"
id="js-tab"
data-toggle="tab"
href="#js-code"
class="inline-block p-4 rounded-t-lg hover:bg-gray-800"
><i class="fa-brands fa-square-js"></i> JS</a
>
</li>
</ul>
<div class="tab-content text-white" id="tab-content">
<div id="html-code" class="tab-pane fade">
<textarea
name="html"
id="html"
onkeyup="run()"
class="mt-5 p-3 bg-gray-800"
></textarea>
</div>
<div id="css-code" class="tab-pane fade">
<textarea
name="css"
id="css"
onkeyup="run()"
class="mt-5 p-3 bg-gray-800"
></textarea>
</div>
<div id="js-code" class="tab-pane fade">
<textarea
name="js"
id="js"
onkeyup="run()"
class="mt-5 p-3 bg-gray-800"
></textarea>
</div>
</div>
</div>
<div class="right">
<label for="output" class="mx-8 text-gray-500"
><i class="fa-solid fa-play"></i> Output</label
>
<iframe id="output" class="bg-gray-100"></iframe>
</div>
</div>
</body>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"
type="text/javascript"
></script>
<script type="text/javascript">
document.getElementById("html-tab").onclick = function () {
showTab(this);
};
document.getElementById("css-tab").onclick = function () {
showTab(this);
};
document.getElementById("js-tab").onclick = function () {
showTab(this);
};
function showTab(e) {
let selectType = $(e).attr("data-select");
if (selectType == "one") {
$("#css-code,#js-code").hide();
$("#html-code").show();
$("#html-tab").addClass("text-blue-500 bg-gray-800 active");
$("#js-tab,#css-tab").removeClass("text-blue-500 bg-gray-800 active");
} else if (selectType == "two") {
$("#html-code,#js-code").hide();
$("#css-code").show();
$("#css-tab").addClass("text-blue-500 bg-gray-800 active");
$("#js-tab,#html-tab").removeClass("text-blue-500 bg-gray-800 active");
} else {
$("#css-code,#html-code").hide();
$("#js-code").show();
$("#js-tab").addClass("text-blue-500 bg-gray-800 active");
$("#html-tab,#css-tab").removeClass("text-blue-500 bg-gray-800 active");
}
}
function run() {
let htmlCode = document.getElementById("html").value;
let cssCode = document.getElementById("css").value;
let jsCode = document.getElementById("js").value;
let output = document.getElementById("output");
output.contentDocument.body.innerHTML =
htmlCode + "<style>" + cssCode + "</style>";
output.contentWindow.eval(jsCode);
}
function setup() {
$("#css-code,#js-code").hide();
}
window.onload = setup();
</script>