CodePlayer/index.html at master · harsh570/CodePlayer · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodePlayer</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="header">
    <div id="logo">
        CodePlayer
    </div>
    <div class="buttonContainer">
        <button type="button" class="btn btn-default btn-sm active" id="html">HTML</button>
        <button type="button" class="btn btn-default btn-sm" id="css">CSS</button>
        <button type="button" class="btn btn-default btn-sm" id="javascript">JavaScript</button>
        <button type="button" class="btn btn-default btn-sm active" id="output">Output</button>

    </div>
</div>
<div id="bodyContainer">
    <textarea id="htmlPanel" class="panel"><p id="heading">Hello World!</p></textarea>

    <textarea id="cssPanel" class="panel hidden">#heading { color: blue; }</textarea>

    <textarea id="javascriptPanel" class="panel hidden">document.getElementById("heading").innerHTML = "Hello AryanK!";</textarea>

    <iframe id="outputPanel" class="panel"></iframe>
</div>
<script type="text/javascript" src="index.js">
</script>
</body>
</html>