Skip to content

Commit d36ca22

Browse files
RohitSharma50RohitSharma50
authored
Add files via upload
completed project
0 parents  commit d36ca22

File tree

3 files changed

+220
-0
lines changed

3 files changed

+220
-0
lines changed

‎app.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
function initialize(){
2+
var html=document.getElementById("html");
3+
var css=document.getElementById("css");
4+
5+
var JavaScript=document.getElementById("JavaScript");
6+
var code=document.getElementById("code").contentWindow.document;
7+
8+
document.body.onkeyup= function(){
9+
code.open();
10+
11+
code.writeln(
12+
html.value +
13+
"<style>" + css.value + "</style>" +
14+
"<script>" + JavaScript.value + "</script>"
15+
);
16+
code.close();
17+
18+
19+
20+
}
21+
22+
}
23+
initialize();
24+
25+
26+
27+
28+
29+
30+
31+
32+
33+
/*
34+
35+
<h2>rohit i love u</h2>
36+
<h2 onclick="test()"> ClickMe </h2>
37+
38+
39+
body{background-color:red;}
40+
41+
function test(){
42+
alert("hi... love you");
43+
}
44+
45+
*/

‎index.html

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Code Editor</title>
8+
<h1 class="head">Code Editor</h1>
9+
</head>
10+
<link rel="stylesheet" href="style.css" />
11+
12+
<body>
13+
14+
<div class="main">
15+
16+
<div class="codePart">
17+
18+
<h6 class="h1"><img width="24" height="24" src="https://img.icons8.com/color/48/html-5--v1.png"
19+
alt="html-5--v1" />HTML</h6>
20+
<button class="btn" onclick="myFunctionHtml()">Copy text</button>
21+
22+
23+
<textarea id="html" placeholder="HTML"></textarea>
24+
<script> function myFunctionHtml() {
25+
// Get the text field
26+
27+
var copyText = document.getElementById("html");
28+
29+
// Select the text field
30+
copyText.select();
31+
32+
// Copy the text inside the text field
33+
navigator.clipboard.writeText(copyText.value);
34+
35+
// Alert the copied text
36+
37+
} </script>
38+
39+
</div>
40+
<div class="codePart">
41+
42+
<h6 class="h1"><img width="24" height="24" src="https://img.icons8.com/color/24/css3.png" alt="css3" />CSS
43+
</h6>
44+
<button class="btn" onclick="myFunctionCss()">Copy text</button>
45+
46+
<textarea id="css" placeholder="CSS"></textarea>
47+
48+
49+
<script> function myFunctionCss() {
50+
// Get the text field
51+
52+
var copyText = document.getElementById("css");
53+
54+
// Select the text field
55+
copyText.select();
56+
57+
// Copy the text inside the text field
58+
navigator.clipboard.writeText(copyText.value);
59+
60+
// Alert the copied text
61+
62+
} </script>
63+
</div>
64+
<div class="codePart">
65+
<h6 class="h1"> <img width="24" height="24" src="https://img.icons8.com/color/24/javascript--v1.png"
66+
alt="javascript--v1" />JavaScript</h6>
67+
<button class="btn" onclick="myFunctionJs()">Copy text</button>
68+
<textarea id="JavaScript" placeholder="JavaScript"></textarea>
69+
70+
<script> function myFunctionJs() {
71+
// Get the text field
72+
73+
var copyText = document.getElementById("JavaScript");
74+
75+
// Select the text field
76+
copyText.select();
77+
78+
79+
// Copy the text inside the text field
80+
navigator.clipboard.writeText(copyText.value);
81+
82+
// Alert the copied text
83+
84+
} </script>
85+
86+
</div>
87+
</div>
88+
89+
90+
<div class="output">
91+
<h1 class="h2">OUTPUT</h1>
92+
93+
<iframe id="code"></iframe>
94+
</div>
95+
<script type="text/JavaScript" src="app.js"></script>
96+
97+
98+
</body>
99+
100+
</html>

‎style.css

+75
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
.main {
2+
display: flex;
3+
justify-content: space-around;
4+
background-color: rgb(13, 216, 67);
5+
}
6+
7+
.codePart {
8+
width: 100%;
9+
background-color: rgb(13, 13, 2);
10+
color: aliceblue;
11+
12+
13+
14+
}
15+
16+
textarea {
17+
font-size: large;
18+
overflow: scroll;
19+
width: 100%;
20+
height: 300px;
21+
color: aliceblue;
22+
border-radius: 2%;
23+
box-sizing: border-box;
24+
background-color: rgb(18, 18, 34);
25+
}
26+
27+
.h1 {
28+
text-align: left;
29+
font-size: xx-large;
30+
display: inline;
31+
margin-left: 4px;
32+
font-size: larger;
33+
color: aliceblue;
34+
35+
background-color: rgb(9, 9, 11);
36+
37+
38+
}
39+
40+
iframe {
41+
width: 100%;
42+
overflow: scroll;
43+
height: 300px;
44+
font-size: xx-large;
45+
}
46+
47+
.btn {
48+
float: inline-end;
49+
background-color: rgb(56, 175, 116);
50+
margin-right: 8px;
51+
border-radius: 4px;
52+
}
53+
54+
.head {
55+
text-align: center;
56+
background-color: rgb(188, 111, 34);
57+
margin: 0cap;
58+
height: 7%;
59+
}
60+
61+
.output {
62+
text-align: center;
63+
}
64+
65+
.h2 {
66+
text-align: center;
67+
justify-self: baseline;
68+
font-size: xx-large;
69+
color: aliceblue;
70+
background-color: black;
71+
}
72+
73+
.code {
74+
font-size: xx-small;
75+
}

0 commit comments

Comments
 (0)