Add files via upload

srii5477 · Dec 11, 2023 · fa6ed05 · fa6ed05
1 parent f47d77b
commit fa6ed05
Show file tree

Hide file tree

Showing 4 changed files with 167 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>~~ Online HTML,CSS & JS Code Editor ~~</title>
+    <link href="./style.css" rel="stylesheet">
+</head>
+<body>
+    <h1>Code Editor for the Big 3 - HTML, CSS & JS</h1>
+    <div class="headings">
+            <div class="one">
+                <button type="button">HTML</button>
+            </div>
+            <div class="two">
+                <button type="button">CSS</button>
+            </div>
+            <div class="three">
+                <button type="button">JS</button>
+            </div>
+            <div class="four">
+                <button type="button">Result</button>
+            </div>
+            <div class="flexrun">
+                <button class="run" type="button">Run</button>
+            </div>
+
+    </div>
+    <div class="container">
+        <div class="html">
+            <label for="html" style="color:white"></label>
+            <textarea id="html" name="html" rows="20" cols="35" spellcheck="false"><!--HTML Boilerplate-> <!DOCTYPE html>
+                <html lang="en">
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>Output</title>
+                </head>
+                <body>
+                </body>
+                </html>--></textarea>
+        </div>
+        <div class="css">
+            <label for="css" style="color:white"></label>
+            <textarea id="css" name="css" rows="20" cols="35" spellcheck="false">/*bg color defaults to black*/ body{background-color:white;}</textarea>
+        </div>
+        <div class="js">
+            <label for="js" style="color:white"></label>
+            <textarea id="js" name="js" rows="20" cols="35" spellcheck="false">alert("Hello world!");</textarea>
+        </div>
+        <div class="result">
+            <iframe id="window" src="./sampleoutput.html" height="60%" width="100%" title="Result Window"></iframe> 
+        </div>
+    </div>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="./index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,31 @@
+$("h1").addClass("big-title");
+//convert to jQuery
+//separation of concerns
+let button1 = document.querySelector(".one");
+let pane1 = document.querySelector(".html");
+let button2 = document.querySelector(".two");
+let pane2 = document.querySelector(".css");
+let button3 = document.querySelector(".three");
+let pane3 = document.querySelector(".js");
+let button4 = document.querySelector(".four");
+let pane4 = document.querySelector(".result");
+let buttons = [button1, button2, button3, button4];
+let panes = [pane1, pane2, pane3, pane4];
+for(let i = 0; i < 4; i++) {
+    buttons[i].addEventListener("click", function() {
+        panes[i].classList.toggle("open");
+    })
+}
+
+//run implementation
+// let runButton = document.querySelector(".run").addEventListener("click", function() {
+//     document.querySelector("iframe").
+// })
+$(".run").on("click", function() {
+    var c1 = document.getElementById("html").value;
+    var c2 = document.getElementById("css").value;
+    var c3 = document.getElementById("js").value;
+    var updatedC1 = c1.replace("<head>", "<head>" + "<style>" + c2 + "</style>");
+    updatedC1 = updatedC1.replace("</body>", "<script>" + c3 + "</script>" + "</body");
+    document.querySelector("#window").setAttribute("srcdoc",updatedC1);
+})
diff --git a/sampleoutput.html b/sampleoutput.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Output</title>
+</head>
+<body style="background-color:white">
+    <h3>Your output should appear here upon pressing "Run".</h3>
+</body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,67 @@
+body{
+    background-color:black;
+}
+.big-title{
+    color:white;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    text-align:center;
+}
+.margin-centered{
+    margin-left:10%;
+}
+/*add responsiveness*/
+.container{
+    margin-left:0.5%;
+    display:grid;
+    gap:15px;
+    grid-template-rows:1fr 2fr;
+    grid-template-columns:1fr 1fr 1fr;
+    height:40%;
+}
+.headings{
+    display:flex;
+    flex-direction:row;
+    width:100%;
+    height:10vh;
+    border:1.5px solid rgb(219, 219, 219);
+    justify-content:center;
+    align-items:center;
+    gap:10px;
+    margin-bottom:15px;
+}
+.one,.two,.three,.four,button{
+    height:40px;
+    width:60px;
+    background-color:white;
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.run{
+    align-self:flex-end;
+    color:white;
+    background-color:rgb(17, 109, 78);
+}
+label{
+    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+}
+.html, .css, .js, .result{
+    display:none;
+}
+.html.open, .css.open, .js.open, .result.open{
+    display:grid;
+}
+.result.open{
+    grid-column:span 3;
+}
+@media(max-width:500px){
+    .container{
+        margin-left:0.5%;
+        display:grid;
+        gap:10px;
+        grid-template-rows:1fr 1fr 1fr 3fr;
+        grid-template-columns:1fr;
+        height:40%;
+    }
+    .result.open{
+        grid-column:span 1;
+    }
+}