Skip to content

Commit 771b0bc

Browse files
SanjayDevTechSanjayDevTech
committed
Placed code at right positions
Added comments
1 parent 38a961c commit 771b0bc

File tree

3 files changed

+157
-129
lines changed

3 files changed

+157
-129
lines changed

‎css/main.css

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
#main{
2+
width: 100%;
3+
height: 100%;
4+
}
5+
#output{
6+
overflow: auto;
7+
display: inline-block;
8+
position: absolute;
9+
top: 0;
10+
right: 0;
11+
bottom: 0;
12+
width: 50%;
13+
}
14+
#result{
15+
position: absolute;
16+
width: 50vw;
17+
height: 100vh;
18+
}
19+
.CodeMirror {
20+
position: absolute;
21+
top: 0;
22+
left: 0;
23+
right: 0;
24+
bottom: 0;
25+
height: 100%;
26+
width: 50%;
27+
}
28+
#info{
29+
position: fixed;
30+
width: 60px;
31+
height: 60px;
32+
bottom: 40px;
33+
right: 40px;
34+
background-color: green;
35+
border-radius: 50%;
36+
color: white;
37+
text-align: center;
38+
padding: auto;
39+
box-shadow: 2px 2px 3px #999;
40+
}
41+
.top-float{
42+
font-size: 1.5em;
43+
margin-top:18px;
44+
}
45+
@media screen and (max-width: 800px) {
46+
#info{
47+
right: 20px;
48+
bottom: 20px;
49+
width: 50px;
50+
height: 50px;
51+
}
52+
.top-float{
53+
font-size: 1.2em;
54+
margin-top: 15px;
55+
56+
}
57+
#output {
58+
top: 50%;
59+
display: block;
60+
left:0;
61+
width: 100%;
62+
}
63+
#result{
64+
width: 100vw;
65+
}
66+
.CodeMirror{
67+
height: 50%;
68+
width: 100%;
69+
}
70+
}

‎index.html

+42-129
Original file line numberDiff line numberDiff line change
@@ -1,146 +1,59 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html lang="en">
33
<head>
4-
<title></title>
5-
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
4+
<title>HTML editor</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<!-- Setting fav icon -->
9+
<link rel="icon" type="image/png" href="https://img.icons8.com/bubbles/3x/edit.png">
10+
11+
<!-- Loading css -->
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
13+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/material-darker.css"></link>
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
15+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/show-hint.css">
16+
<link rel="stylesheet" href="css/main.css"> <!-- Main css -->
17+
18+
<!-- Loading js -->
19+
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
620
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
7-
<link rel="stylesheet"
8-
href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.css">
9-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/theme/material-darker.css">
10-
</link>
11-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js"></script>
22+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.js"></script>
23+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.js"></script>
24+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/css/css.js"></script>
25+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/htmlmixed/htmlmixed.js"></script>
26+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/matchbrackets.js"></script>
27+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/show-hint.js"></script>
28+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/javascript-hint.js"></script>
29+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/html-hint.js"></script>
30+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/xml-hint.js"></script>
31+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/css-hint.js"></script>
32+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/keymap/sublime.js"></script>
33+
<script src="js/main.js"></script> <!-- Main js -->
1234

13-
<script type="text/javascript"
14-
src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/codemirror.min.js">
15-
</script>
16-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/xml/xml.js"></script>
17-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/javascript/javascript.js"></script>
18-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/css/css.js"></script>
19-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/mode/htmlmixed/htmlmixed.js"></script>
20-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/edit/matchbrackets.js"></script>
21-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/show-hint.css">
22-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/show-hint.js"></script>
23-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/javascript-hint.js"></script>
24-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/html-hint.js"></script>
25-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/xml-hint.js"></script>
26-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/addon/hint/css-hint.js"></script>
27-
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.52.2/keymap/sublime.js"></script>
28-
<script>
29-
30-
31-
$('#main').resizable({
32-
handles: 'e, w'
33-
});
34-
35-
$(document).ready(function(){
36-
37-
var validation = false;
38-
var myTimeoutId = null;
39-
40-
var config = {
41-
mode: "text/html",
42-
extraKeys: {"Ctrl-Space": "autocomplete"},
43-
lineNumbers: true,
44-
keyMap:"sublime",
45-
tabSize:4,
46-
};
47-
// initialize editor
48-
var editor = CodeMirror.fromTextArea(document.getElementById('editor'),config);
49-
editor.setOption("theme", "material-darker");
50-
51-
function loadHtml(html) {
52-
$('#result').contents().find('html').html(html);
53-
}
54-
55-
loadHtml($('#editor').val());
56-
57-
editor.on('change',function(cMirror){
58-
59-
if (myTimeoutId!==null) {
60-
clearTimeout(myTimeoutId);
61-
}
62-
myTimeoutId = setTimeout(function() {
63-
64-
try{
65-
66-
loadHtml(cMirror.getValue());
67-
68-
}catch(err){
69-
70-
console.log('err:'+err);
71-
72-
}
73-
74-
75-
}, 2000);
76-
77-
});
78-
79-
});
80-
81-
</script>
82-
<style type="text/css" media="screen">
83-
#main{
84-
width: 100%;
85-
height: 100%;
86-
}
87-
#output{
88-
overflow: auto;
89-
display: inline-block;
90-
position: absolute;
91-
top: 0;
92-
right: 0;
93-
bottom: 0;
94-
width: 50%;
95-
}
96-
#result{
97-
position: absolute;
98-
width: 50vw;
99-
height: 100vh;
100-
}
101-
.CodeMirror {
102-
position: absolute;
103-
top: 0;
104-
left: 0;
105-
right: 0;
106-
bottom: 0;
107-
height: 100%;
108-
width: 50%;
109-
}
110-
#info{
111-
position: fixed;
112-
width: 60px;
113-
height: 60px;
114-
bottom: 40px;
115-
right: 40px;
116-
background-color: green;
117-
border-radius: 50%;
118-
color: white;
119-
text-align: center;
120-
padding: auto;
121-
box-shadow: 2px 2px 3px #999;
122-
123-
}
124-
.top-float{
125-
font-size: 1.5em;
126-
margin-top:18px;
127-
}
128-
</style>
12935
</head>
13036
<body>
131-
<span id="info"><i class="fa fa-info top-float" aria-hidden="true"></i></span>
132-
<div id="main">
133-
<textarea id="editor">&lt;!DOCTYPE html&gt;
37+
<!-- FAB button -->
38+
<span id="info"><i class="fa fa-info top-float" aria-hidden="true"></i></span>
39+
40+
<!-- Main area -->
41+
<div id="main">
42+
43+
<!-- Editor -->
44+
<textarea id="editor">&lt;!DOCTYPE html&gt;
13445
&lt;html&gt;
13546
&lt;head&gt;
136-
&#x9;&lt;title&gt;&lt;/title&gt;
47+
&lt;title&gt;Editor&lt;/title&gt;
13748
&lt;/head&gt;
13849
&lt;body&gt;
13950
&lt;h1&gt;Welcome to &lt;span&gt;HTML editor&lt;/span&gt;&lt;/h1&gt;&lt;br&gt;
14051
&lt;h2&gt;Hello&lt;/h2&gt;
14152
&lt;/body&gt;
14253
&lt;/html&gt;</textarea>
143-
<div id="output"><iframe id="result"></iframe></div>
54+
55+
<!-- Iframe output -->
56+
<div id="output"><iframe id="result"></iframe></div>
14457
</div>
14558
</body>
14659
</html>

‎js/main.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
$(document).ready(function(){
2+
3+
var validation = false;
4+
var myTimeoutId = null;
5+
6+
var config = {
7+
mode: "text/html",
8+
extraKeys: {"Ctrl-Space": "autocomplete"},
9+
lineNumbers: true,
10+
keyMap:"sublime",
11+
tabSize:4,
12+
};
13+
// initialize editor
14+
var editor = CodeMirror.fromTextArea(document.getElementById('editor'),config);
15+
editor.setOption("theme", "material-darker");
16+
17+
function loadHtml(html) {
18+
$('#result').contents().find('html').html(html);
19+
}
20+
21+
loadHtml($('#editor').val());
22+
23+
editor.on('change',function(cMirror){
24+
25+
if (myTimeoutId!==null) {
26+
clearTimeout(myTimeoutId);
27+
}
28+
myTimeoutId = setTimeout(function() {
29+
30+
try{
31+
32+
loadHtml(cMirror.getValue());
33+
34+
}catch(err){
35+
36+
console.log('err:'+err);
37+
38+
}
39+
40+
41+
}, 2000);
42+
43+
});
44+
45+
});

0 commit comments

Comments
 (0)