-
Notifications
You must be signed in to change notification settings - Fork 6
/
Copy pathindex.html
83 lines (66 loc) · 3.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CodePlayer</title>
<script src="jQuery-3.6.0.min.js"></script>
<script src="jquery-ui-1.13.1/jquery-ui.js"></script>
<link href="jquery-ui-1.13.1/jquery-ui.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="navBar">
<div id="titleName">
<h1>ASCodePlayer</h1>
</div>
<div id="buttonContainer">
<button class="Btn" id="html" value="htmlValue">HTML</button>
<button class="Btn" id="css" value="cssValue">CSS</button>
<button class="Btn" id="js" value="jsValue">Javascript</button>
<button class="Btn" id="output" value="outputValue">Output</button>
<br>
<div>To help you get started, here are the Documentation on : <span><a href="https://www.w3schools.com/html/default.asp">HTML5</a><a href="https://www.w3schools.com/css/default.asp">CSS3</a>
<a href="https://www.w3schools.com/js/default.asp">JS</a><a href="https://github.com/AyushSahu77/CodePlayer">GitHub Repo Link</a></span> </div>
</div>
</div>
</div>
<div id="bodyContainer">
<textarea id="htmlContent" class="panel" cols="30" rows="10">
<p id="textAreaPara">Hello there!</p>
</textarea>
<textarea id="cssContent" class="panel hidden" cols="30" rows="10">
p { color : blue; }
</textarea>
<textarea id="jsContent" class="panel hidden" cols="30" rows="10">
document.getElementById("textAreaPara").innerHTML = "Hello Ayush!";
</textarea>
<iframe id="outputContent" class="panel">
</iframe>
</div>
<footer>
<div>Made with ❤️ by Ayush Sahu. All rights reserved © 2022. Connect with me on <a href="http://www.linkedin.com/in/ayushsahu77" target="_blank">Linkedin</a></div>
</footer>
<script>
function outputUpdate() {
$("#outputContent").contents().find("html").html("<html><head><style type='text/css'>" + $("#cssContent").val() + "</style></head><body>" + $("#htmlContent").val() + "</body></html>");
document.getElementById("outputContent").contentWindow.eval($("#jsContent").val());
}
$(".Btn").click(function () {
var panelId = $(this).attr("id") + "Content";
$("#" + panelId).toggleClass("hidden");
var panelsActive = 4 - $(".hidden").length;
$(".panel").width(($(window).width() / panelsActive) - 21);
});
// On Page load
$(".panel").height($(window).height() - $("#navBar").height() - 48);
$(".panel").width(($(window).width() / 2) - 21);
outputUpdate();
// on change on any textarea
$("textarea").on('change keyup paste', function () {
outputUpdate();
});
</script>
</body>
</html>