-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
27 lines (27 loc) · 2.85 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
<html>
<title>HTML Previewer - Vismaya Atreya</title>
<link rel="shortcut icon" href="https://avatars2.githubusercontent.com/u/62926183?s=460&u=e560f6297c81982fc2b554f3c997ec878421fa80&v=4" type="image/x-icon">
<h1 style="font-family: Arial, Helvetica, sans-serif;">HTML Editor and Previewer</h1>
<h3 style="font-family: Arial, Helvetica, sans-serif;">Created by <a href="https://vismodo.github.io/Website/Homepage/index.html">Vismaya Atreya</a></h3>
<h3 style="font-family: Arial, Helvetica, sans-serif;">GitHub Repository: <a href="https://github.com/vismodo/htmlpreviewer/">Click Here</a></h3>
<h3 style="font-family: Arial, Helvetica, sans-serif;">Text Editor</h3>
<textarea style="border: 3px solid red; border-radius: 5px; width: 600; height: 400" name="name" id="field">Your Code Goes Here</textarea><br><br><br>
<script>var count = 0;</script>
<script>
function preview(){
count = count+1
var html_code = document.getElementById("field").value;
var editor = '<title>HTML Previewer - Vismaya Atreya</title><link rel="shortcut icon" href="https://avatars2.githubusercontent.com/u/62926183?s=460&u=e560f6297c81982fc2b554f3c997ec878421fa80&v=4" type="image/x-icon"><h1 style="font-family: Arial, Helvetica, sans-serif;">HTML Editor and Previewer</h1><h3 style="font-family: Arial, Helvetica, sans-serif;">Created by <a href="https://vismodo.github.io/Website/Homepage/index.html">Vismaya Atreya</a></h3><h3 style="font-family: Arial, Helvetica, sans-serif;">GitHub Repository: <a href="https://github.com/vismodo/htmlpreviewer/">Click Here</a></h3><h3 style="font-family: Arial, Helvetica, sans-serif;">Text Editor</h3><textarea style="border: 3px solid red; border-radius: 5px; width: 600; height: 400" name="name" id="field" value="<!DOCTYPE html>">'+html_code+'</textarea><br><br><br><input style="border: 2px solid blue; border-radius: 5px; width: 200; height: 30" type="button" value="Preview Webpage" onclick="preview()"><hr style="height:2px;border-width:0;color:gray;background-color:gray">'
var resizable = '<div id="unnec2" style="resize: both;overflow: scroll;border: 1px solid black; width: 600"; height: 400;>'+html_code+'</div>'
if (count < 2){
var resizable = editor+'<h3 style="font-family: Arial, Helvetica, sans-serif;">Preview</h3><br><div id="unnec2" style="resize: both;overflow: scroll;border: 1px solid black; width: 600"; height: 400;>'+html_code+'</div>'
} else{
var var2 = document.getElementById("unnec2")
var2.remove()
}
document.write(resizable)
}
</script>
<input style="border: 2px solid blue; border-radius: 5px; width: 200; height: 30" type="button" value="Preview Webpage" onclick="preview()">
<hr style="height:2px;border-width:0;color:gray;background-color:gray">
</html>