modified

rh-abir · Aug 15, 2022 · 6ab8a61 · 6ab8a61
1 parent 37f05d6
commit 6ab8a61
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
@@ -42,21 +42,21 @@ function CodeEditor(props) {
  {/* Your Code Starts Here */}
  <div className="code-editor-tab-button-container">
  <Button
- backgroundColor={activeButton === "html" ? "blue" : ""}
+ backgroundColor={activeButton === "html" ? "#98AFC7" : ""}
  title="HTML"
  onClick={() => {
  onTabClick("html");
  }}
  />
  <Button
- backgroundColor={activeButton === "css" ? "blue" : ""}
+ backgroundColor={activeButton === "css" ? "#98AFC7" : ""}
  title="CSS"
  onClick={() => {
  onTabClick("css");
  }}
  />
  <Button
- backgroundColor={activeButton === "js" ? "blue" : ""}
+ backgroundColor={activeButton === "js" ? "#98AFC7" : ""}
  title="JavaScript"
  onClick={() => {
  onTabClick("js");
@@ -87,6 +87,9 @@ function CodeEditor(props) {
  />
  )}
  </div> 
+ <div className="code-editor-heading-output">
+ <h1>Output</h1>
+ </div>
  <div className="code-editor-bottom-pane">
  <iframe
  id="my_iframe"

diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
@@ -49,8 +49,6 @@ const Editor = ({ language, value, setEditorState }) => {
  mode: language,
  lineNumbers: true,
  theme: theme,
- autoCloseTags: true,
- autoCloseBrackets: true, 
  }}
  />
  </div>

diff --git a/src/plays/code-editor/Readme.md b/src/plays/code-editor/Readme.md
@@ -1,6 +1,6 @@
 # Code editor 
 
-It is a code editor for html css and javascript it is like a clone of codepen !
+It is a code editor for html ,css and js inspired from codepen made using codemirror and react-codemirror2 for writing and executing the code at same time !
 
 ## Play Demographic
 

diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
@@ -21,6 +21,7 @@
  font-family: sans-serif;
  font-size: larger;
  font-weight: 200px;
+ color: black;
 }
 .code-editor-dropdown label{
  font-size: larger;
@@ -48,6 +49,21 @@
 .code-editor-bottom-pane{
  height: 50vh;
  display: flex;
+ margin-top: 20px;
+ border: 5px solid rgb(36, 129, 99);
+ border: 5px solid rgb(0, 255, 0);
+}
+.code-editor-bottom-pane:hover{
+ border: 5px solid rgb(36, 129, 99);
+}
+.code-editor-heading-output{
+ background-color: rgb(0, 0, 0);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size:x-large;
+ color: white;
+ margin-top: 10px;
 }
 @media (max-width: 764px){
  .code-editor-tab-button-container{