From 0e683791114b0af1fb9aded2ae8bc7767c892be6 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Sat, 6 Aug 2022 00:42:26 +0530
Subject: [PATCH 01/24] package update

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index aff0a593b..abda69227 100644
--- a/package.json
+++ b/package.json
@@ -33,8 +33,8 @@
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.0",
     "react-shimmer-effect": "^1.0.9",
-    "react-twitter-widgets": "^1.11.0",
     "react-simple-maps": "^2.3.0",
+    "react-twitter-widgets": "^1.11.0",
     "redux": "^4.2.0",
     "redux-persist": "^6.0.0",
     "reselect": "^4.1.5",

From 16c29b80703ce958296a5c8e42c13a5e78a7ff32 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Sun, 7 Aug 2022 13:55:11 +0530
Subject: [PATCH 02/24] some new packages

---
 package.json                        |  6 ++++++
 src/plays/code-editor/CodeEditor.js | 31 +++++++++++++++++++++++++++++
 src/plays/code-editor/Readme.md     | 27 +++++++++++++++++++++++++
 src/plays/code-editor/styles.css    |  1 +
 4 files changed, 65 insertions(+)
 create mode 100644 src/plays/code-editor/CodeEditor.js
 create mode 100644 src/plays/code-editor/Readme.md
 create mode 100644 src/plays/code-editor/styles.css

diff --git a/package.json b/package.json
index 26aca71ae..d70640486 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,9 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@fortawesome/fontawesome-svg-core": "^6.1.2",
+    "@fortawesome/free-solid-svg-icons": "^6.1.2",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@giscus/react": "^2.0.3",
     "@mui/material": "^5.9.1",
     "@nhost/react": "^0.9.0",
@@ -13,6 +16,8 @@
     "@types/react-dom": "^18.0.2",
     "add": "^2.0.6",
     "axios": "^0.27.2",
+    "codemirror": "^6.0.1",
+    "create-react-play": "^0.0.10",
     "date-fns": "^2.28.0",
     "downloadjs": "^1.4.7",
     "firebase": "^9.8.2",
@@ -23,6 +28,7 @@
     "lodash": "^4.17.21",
     "node-sass": "^7.0.1",
     "react": "^18.0.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
new file mode 100644
index 000000000..5f181276a
--- /dev/null
+++ b/src/plays/code-editor/CodeEditor.js
@@ -0,0 +1,31 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import './styles.css';
+
+// WARNING: Do not change the entry componenet name
+function CodeEditor(props) {
+
+  // Your Code Start below.
+
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={props} />
+        <div className="play-details-body">
+        {/* Your Code Starts Here */}
+          <div>
+            <h1>Play Details -  Code Editor </h1>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Pellentesque euismod, urna eu tincidunt consectetur,
+              nisi nunc ultricies nisi, eget consectetur nunc nisi
+              euismod nunc.
+            </p>
+          </div>
+        {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default CodeEditor;
\ No newline at end of file
diff --git a/src/plays/code-editor/Readme.md b/src/plays/code-editor/Readme.md
new file mode 100644
index 000000000..d2f2d6d20
--- /dev/null
+++ b/src/plays/code-editor/Readme.md
@@ -0,0 +1,27 @@
+# Code editor 
+
+It is a code editor for html css and javascript it is like a clone of codepen !
+
+## Play Demographic
+
+- Language: js
+- Level: Intermediate
+
+## Creator Information
+
+- User: yung-coder
+- Gihub Link: https://github.com/yung-coder
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+Update your implementation idea and details here
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
new file mode 100644
index 000000000..5fd508fa9
--- /dev/null
+++ b/src/plays/code-editor/styles.css
@@ -0,0 +1 @@
+/* enter stlyes here */

From 552f1a4680e9d0938dbebc9b63afcf8e53f4a367 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Sun, 7 Aug 2022 15:45:37 +0530
Subject: [PATCH 03/24] initial

---
 package.json                             |  2 +-
 src/plays/code-editor/CodeEditor.js      | 70 ++++++++++++++++++++----
 src/plays/code-editor/Editor.jsx         | 50 +++++++++++++++++
 src/plays/code-editor/styles.css         | 66 ++++++++++++++++++++++
 src/plays/code-editor/useLocalstorage.js | 24 ++++++++
 5 files changed, 200 insertions(+), 12 deletions(-)
 create mode 100644 src/plays/code-editor/Editor.jsx
 create mode 100644 src/plays/code-editor/useLocalstorage.js

diff --git a/package.json b/package.json
index d70640486..b78c2fb75 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@types/react-dom": "^18.0.2",
     "add": "^2.0.6",
     "axios": "^0.27.2",
-    "codemirror": "^6.0.1",
+    "codemirror": "^5.65.7",
     "create-react-play": "^0.0.10",
     "date-fns": "^2.28.0",
     "downloadjs": "^1.4.7",
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 5f181276a..01fc053ac 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -1,18 +1,66 @@
-import PlayHeader from 'common/playlists/PlayHeader';
-import './styles.css';
-
+import PlayHeader from "common/playlists/PlayHeader";
+import "./styles.css";
+import React, { useState, useEffect } from 'react';
+import Editor from './Editor'
+// import useLocalStorage from './useLocalstorage'
 // WARNING: Do not change the entry componenet name
 function CodeEditor(props) {
-
   // Your Code Start below.
+  const [html, setHtml] = useState('')
+  const [css, setCss] = useState('')
+  const [js, setJs] = useState('')
+  const [srcDoc, setSrcDoc] = useState('')
+
+  useEffect(() => {
+    const timeout = setTimeout(() => {
+      setSrcDoc(`
+        <html>
+          <body>${html}</body>
+          <style>${css}</style>
+          <script>${js}</script>
+        </html>
+      `)
+    },250)
 
+    return () => clearTimeout(timeout)
+  }, [html, css, js])
   return (
-    <>
-      <div className="play-details">
+  <>
+    <div className="play-details">
         <PlayHeader play={props} />
         <div className="play-details-body">
-        {/* Your Code Starts Here */}
-          <div>
+          {/* Your Code Starts Here */}
+          <div className="pane top-pane">
+            <Editor
+              language="xml"
+              displayName="HTML"
+              value={html}
+              onChange={setHtml}
+            />
+            <Editor
+              language="css"
+              displayName="CSS"
+              value={css}
+              onChange={setCss}
+            />
+            <Editor
+              language="javascript"
+              displayName="JS"
+              value={js}
+              onChange={setJs}
+            />
+          </div>
+          <div className="pane">
+            <iframe
+              srcDoc={srcDoc}
+              title="output"
+              sandbox="allow-scripts"
+              frameBorder="0"
+              width="100%"
+              height="100%"
+            />
+          </div>
+          {/* <div>
             <h1>Play Details -  Code Editor </h1>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -20,12 +68,12 @@ function CodeEditor(props) {
               nisi nunc ultricies nisi, eget consectetur nunc nisi
               euismod nunc.
             </p>
-          </div>
-        {/* Your Code Ends Here */}
+          </div> */}
+          {/* Your Code Ends Here */}
         </div>
       </div>
     </>
   );
 }
 
-export default CodeEditor;
\ No newline at end of file
+export default CodeEditor;
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
new file mode 100644
index 000000000..a471c9b3d
--- /dev/null
+++ b/src/plays/code-editor/Editor.jsx
@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/seti.css'
+import 'codemirror/mode/xml/xml'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/css/css'
+import { Controlled as ControlledEditor } from 'react-codemirror2'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons'
+
+export default function Editor(props) {
+  const {
+    language,
+    displayName,
+    value,
+    onChange
+  } = props
+  const [open, setOpen] = useState(true)
+
+  function handleChange(editor, data, value) {
+    onChange(value)
+  }
+
+  return (
+    <div className={`editor-container ${open ? '' : 'collapsed'}`}>
+      <div className="editor-title">
+        {displayName}
+        <button
+          type="button"
+          className="expand-collapse-btn"
+          onClick={() => setOpen(prevOpen => !prevOpen)}
+        >
+          <FontAwesomeIcon icon={open ? faCompressAlt : faExpandAlt} />
+        </button>
+      </div>
+      <ControlledEditor
+        onBeforeChange={handleChange}
+        value={value}
+        className="code-mirror-wrapper"
+        options={{
+          lineWrapping: true,
+          lint: true,
+          mode: language,
+          theme: 'seti',
+          lineNumbers: true
+        }}
+      />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index 5fd508fa9..6136d7eff 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -1 +1,67 @@
 /* enter stlyes here */
+.top-pane {
+    background-color: hsl(225, 6%, 25%);;
+  }
+  
+  .pane {
+    height: 50vh;
+    display: flex;
+  }
+  
+  .editor-container {
+    flex-grow: 1;
+    flex-basis: 0;
+    display: flex;
+    flex-direction: column;
+    padding: .5rem;
+    background-color: hsl(225, 6%, 25%);
+  }
+  
+  .editor-container.collapsed {
+    flex-grow: 0;
+  }
+  
+  .editor-container.collapsed .CodeMirror-scroll {
+    position: absolute;
+    overflow: hidden !important;
+  }
+  
+  .expand-collapse-btn {
+    margin-left: .5rem;
+    background: none;
+    border: none;
+    color: white;
+    cursor: pointer;
+  }
+  
+  .editor-title {
+    display: flex;
+    justify-content: space-between;
+    background-color: hsl(225, 87%, 44%);
+    color: white;
+    padding: .5rem .5rem .5rem 1rem;
+    border-top-right-radius: .5rem;
+    border-top-left-radius: .5rem;
+  }
+  
+  .CodeMirror {
+    height: 100% !important;
+  }
+  
+  .code-mirror-wrapper {
+    flex-grow: 1;
+    border-bottom-right-radius: .5rem;
+    border-bottom-left-radius: .5rem;
+    overflow: hidden;
+    
+  }
+  @media  (max-width:764px) {
+    .top-pane{
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+    .pane{
+       height: 100vh;
+    }
+  }
\ No newline at end of file
diff --git a/src/plays/code-editor/useLocalstorage.js b/src/plays/code-editor/useLocalstorage.js
new file mode 100644
index 000000000..82f3bfb2e
--- /dev/null
+++ b/src/plays/code-editor/useLocalstorage.js
@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+const PREFIX = 'codepen-editor'
+
+export default function useLocalStorage(key, initialValue) {
+  const prefixedKey = PREFIX + key
+
+  const [value, setValue] = useState(() => {
+    const jsonValue = localStorage.getItem(prefixedKey)
+    if (jsonValue != null) return JSON.parse(jsonValue)
+
+    if (typeof initialValue === 'function') {
+      return initialValue()
+    } else {
+      return initialValue
+    }
+  })
+
+  useEffect(() => {
+    localStorage.setItem(prefixedKey, JSON.stringify(value))
+  }, [prefixedKey, value])
+
+  return [value, setValue]
+}

From 42dd2374b2c36d83db985da21f26ef0fa622185c Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Wed, 10 Aug 2022 16:19:47 +0530
Subject: [PATCH 04/24] modification

---
 package.json                        |   4 +-
 src/plays/code-editor/Button.jsx    |  23 +++++
 src/plays/code-editor/CodeEditor.js | 124 ++++++++++++++++----------
 src/plays/code-editor/Editor.jsx    |  99 +++++++++++++--------
 src/plays/code-editor/styles.css    | 132 +++++++++++++++-------------
 5 files changed, 233 insertions(+), 149 deletions(-)
 create mode 100644 src/plays/code-editor/Button.jsx

diff --git a/package.json b/package.json
index b78c2fb75..616c7cf11 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@types/react-dom": "^18.0.2",
     "add": "^2.0.6",
     "axios": "^0.27.2",
-    "codemirror": "^5.65.7",
+    "codemirror": "^5.59.1",
     "create-react-play": "^0.0.10",
     "date-fns": "^2.28.0",
     "downloadjs": "^1.4.7",
@@ -28,7 +28,7 @@
     "lodash": "^4.17.21",
     "node-sass": "^7.0.1",
     "react": "^18.0.0",
-    "react-codemirror2": "^7.2.1",
+    "react-codemirror2": "^7.1.0",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
diff --git a/src/plays/code-editor/Button.jsx b/src/plays/code-editor/Button.jsx
new file mode 100644
index 000000000..88839a4ef
--- /dev/null
+++ b/src/plays/code-editor/Button.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+const Button = ({ title, backgroundColor, border, onClick }) => {
+  return (
+    <div>
+      <button
+        style={{
+          maxWidth: "140px",
+          minWidth: "80px",
+          height: "30px",
+          marginRight: "5px",
+          backgroundColor: backgroundColor,
+          border: border
+        }}
+        onClick={onClick}
+      >
+        {title}
+      </button>
+    </div>
+  );
+};
+
+export default Button;
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 01fc053ac..ca113b0a8 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -1,74 +1,104 @@
 import PlayHeader from "common/playlists/PlayHeader";
 import "./styles.css";
-import React, { useState, useEffect } from 'react';
-import Editor from './Editor'
-// import useLocalStorage from './useLocalstorage'
+import React, { useState, useEffect } from "react";
+import Editor from "./Editor";
+import Button from './Button'
+// import useLocalStorage from "./useLocalstorage";
 // WARNING: Do not change the entry componenet name
 function CodeEditor(props) {
   // Your Code Start below.
-  const [html, setHtml] = useState('')
-  const [css, setCss] = useState('')
-  const [js, setJs] = useState('')
-  const [srcDoc, setSrcDoc] = useState('')
+  const [openedEditor, setOpenedEditor] = useState("html");
+  const [activeButton, setActiveButton] = useState("html");
+
+  const [html, setHtml] = useState("");
+  const [css, setCss] = useState("");
+  const [js, setJs] = useState("");
+  const [srcDoc, setSrcDoc] = useState(``);
+
+  const onTabClick = (editorName) => {
+    setOpenedEditor(editorName);
+    setActiveButton(editorName);
+  };
 
   useEffect(() => {
-    const timeout = setTimeout(() => {
-      setSrcDoc(`
-        <html>
-          <body>${html}</body>
-          <style>${css}</style>
-          <script>${js}</script>
-        </html>
-      `)
-    },250)
+    const timeOut = setTimeout(() => {
+      setSrcDoc(
+        `
+          <html>
+            <body>${html}</body>
+            <style>${css}</style>
+            <script>${js}</script>
+          </html>
+        `
+      );
+    }, 250);
 
-    return () => clearTimeout(timeout)
-  }, [html, css, js])
+    return () => clearTimeout(timeOut);
+  }, [html, css, js]);
   return (
-  <>
-    <div className="play-details">
+    <>
+      <div className="play-details">
         <PlayHeader play={props} />
         <div className="play-details-body">
           {/* Your Code Starts Here */}
-          <div className="pane top-pane">
-            <Editor
-              language="xml"
-              displayName="HTML"
-              value={html}
-              onChange={setHtml}
+          <div className="tab-button-container">
+            <Button
+              backgroundColor={activeButton === "html" ? "blue" : ""}
+              title="HTML"
+              onClick={() => {
+                onTabClick("html");
+              }}
             />
-            <Editor
-              language="css"
-              displayName="CSS"
-              value={css}
-              onChange={setCss}
+            <Button
+              backgroundColor={activeButton === "css" ? "blue" : ""}
+              title="CSS"
+              onClick={() => {
+                onTabClick("css");
+              }}
             />
-            <Editor
-              language="javascript"
-              displayName="JS"
-              value={js}
-              onChange={setJs}
+            <Button
+              backgroundColor={activeButton === "js" ? "blue" : ""}
+              title="JavaScript"
+              onClick={() => {
+                onTabClick("js");
+              }}
             />
           </div>
-          <div className="pane">
+          <div className="editor-container">
+            {openedEditor === "html" ? (
+              <Editor
+                language="xml"
+                displayName="HTML"
+                value={html}
+                setEditorState={setHtml}
+              />
+            ) : openedEditor === "css" ? (
+              <Editor
+                language="css"
+                displayName="CSS"
+                value={css}
+                setEditorState={setCss}
+              />
+            ) : (
+              <Editor
+                language="javascript"
+                displayName="JS"
+                value={js}
+                setEditorState={setJs}
+              />
+            )}
+          </div>
+          <div>
             <iframe
+              id="my_iframe"
               srcDoc={srcDoc}
               title="output"
               sandbox="allow-scripts"
-              frameBorder="0"
+              frameBorder="1"
               width="100%"
               height="100%"
             />
           </div>
-          {/* <div>
-            <h1>Play Details -  Code Editor </h1>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-              Pellentesque euismod, urna eu tincidunt consectetur,
-              nisi nunc ultricies nisi, eget consectetur nunc nisi
-              euismod nunc.
-            </p>
-          </div> */}
           {/* Your Code Ends Here */}
         </div>
       </div>
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
index a471c9b3d..55719c268 100644
--- a/src/plays/code-editor/Editor.jsx
+++ b/src/plays/code-editor/Editor.jsx
@@ -1,50 +1,71 @@
-import React, { useState } from 'react'
-import 'codemirror/lib/codemirror.css'
-import 'codemirror/theme/seti.css'
-import 'codemirror/mode/xml/xml'
-import 'codemirror/mode/javascript/javascript'
-import 'codemirror/mode/css/css'
-import { Controlled as ControlledEditor } from 'react-codemirror2'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCompressAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons'
-
-export default function Editor(props) {
-  const {
-    language,
-    displayName,
-    value,
-    onChange
-  } = props
-  const [open, setOpen] = useState(true)
-
-  function handleChange(editor, data, value) {
-    onChange(value)
-  }
+import React, { useState,useEffect } from 'react';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/dracula.css';
+import 'codemirror/theme/material.css';
+
+import 'codemirror/theme/mdn-like.css';
+import 'codemirror/theme/the-matrix.css';
+import 'codemirror/theme/night.css';
+
+import 'codemirror/mode/xml/xml';
+import 'codemirror/mode/javascript/javascript';
+import 'codemirror/mode/css/css';
+
+import 'codemirror/addon/edit/closebrackets';
+import 'codemirror/addon/edit/closetag';
+
+import { Controlled as ControlledEditorComponent } from 'react-codemirror2';
+
 
+
+const Editor = ({ language, value, setEditorState }) => {
+
+  const [theme, setTheme] = useState("dracula")
+  const handleChange = (editor, data, value) => {
+    setEditorState(value);
+  }
+  
+  const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
+  
+  // const remover=function(){
+  //   const editors = document.getElementsByClassName('CodeMirror');
+  //   for(let i=1;i<editors.length;i++){
+  //     editors[i].remove;
+  //   }
+  // };
+  // useEffect(()=>{
+  //   remover;
+  // },[])
   return (
-    <div className={`editor-container ${open ? '' : 'collapsed'}`}>
-      <div className="editor-title">
-        {displayName}
-        <button
-          type="button"
-          className="expand-collapse-btn"
-          onClick={() => setOpen(prevOpen => !prevOpen)}
-        >
-          <FontAwesomeIcon icon={open ? faCompressAlt : faExpandAlt} />
-        </button>
+    <div className="editor-container">
+      <div style={{marginBottom: "10px"}}>
+        <label for="cars">Choose a theme: </label>
+        <select name="theme" onChange={(el) => {
+          setTheme(el.target.value)
+        }}>
+          {
+            themeArray.map( theme => (
+              <option value={theme}>{theme}</option>
+            ))
+          }
+        </select>
       </div>
-      <ControlledEditor
+      <ControlledEditorComponent
         onBeforeChange={handleChange}
-        value={value}
-        className="code-mirror-wrapper"
+        value= {value}
+        className="Codemirror-wrapper"
         options={{
           lineWrapping: true,
           lint: true,
           mode: language,
-          theme: 'seti',
-          lineNumbers: true
+          lineNumbers: true,
+          theme: theme,
+          autoCloseTags: true,
+          autoCloseBrackets: true, 
         }}
       />
-    </div>
+      </div>
   )
-}
\ No newline at end of file
+}
+
+export default Editor
\ No newline at end of file
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index 6136d7eff..51804080e 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -1,67 +1,77 @@
 /* enter stlyes here */
-.top-pane {
-    background-color: hsl(225, 6%, 25%);;
-  }
-  
-  .pane {
-    height: 50vh;
-    display: flex;
-  }
+body {
+  margin: 0;
+}
+
+/* .top-pane {
+  background-color: hsl(225, 6%, 25%);;
+}
+
+.pane {
+  height: 50vh;
+  display: flex;
+}
+
+.editor-container {
+  flex-grow: 1;
+  flex-basis: 0;
+  display: flex;
+  flex-direction: column;
+  padding: .5rem;
+  background-color: hsl(225, 6%, 25%);
+}
+
+.editor-container.collapsed {
+  flex-grow: 0;
+}
+
+.editor-container.collapsed .CodeMirror-scroll {
+  position: absolute;
+  overflow: hidden !important;
+}
+
+.expand-collapse-btn {
+  margin-left: .5rem;
+  background: none;
+  border: none;
+  color: white;
+  cursor: pointer;
+}
+
+.editor-title {
+  display: flex;
+  justify-content: space-between;
+  background-color: hsl(225, 87%, 44%);
+  color: white;
+  padding: .5rem .5rem .5rem 1rem;
+  border-top-right-radius: .5rem;
+  border-top-left-radius: .5rem;
+}
+
+.CodeMirror {
+  height: 100% !important;
+}
+
+.code-mirror-wrapper {
+  flex-grow: 1;
+  border-bottom-right-radius: .5rem;
+  border-bottom-left-radius: .5rem;
+  overflow: hidden;
   
-  .editor-container {
-    flex-grow: 1;
-    flex-basis: 0;
+}
+@media  (max-width:764px) {
+  .top-pane{
     display: flex;
     flex-direction: column;
-    padding: .5rem;
-    background-color: hsl(225, 6%, 25%);
-  }
-  
-  .editor-container.collapsed {
-    flex-grow: 0;
-  }
-  
-  .editor-container.collapsed .CodeMirror-scroll {
-    position: absolute;
-    overflow: hidden !important;
+    height: 100%;
   }
-  
-  .expand-collapse-btn {
-    margin-left: .5rem;
-    background: none;
-    border: none;
-    color: white;
-    cursor: pointer;
-  }
-  
-  .editor-title {
-    display: flex;
-    justify-content: space-between;
-    background-color: hsl(225, 87%, 44%);
-    color: white;
-    padding: .5rem .5rem .5rem 1rem;
-    border-top-right-radius: .5rem;
-    border-top-left-radius: .5rem;
-  }
-  
-  .CodeMirror {
-    height: 100% !important;
-  }
-  
-  .code-mirror-wrapper {
-    flex-grow: 1;
-    border-bottom-right-radius: .5rem;
-    border-bottom-left-radius: .5rem;
-    overflow: hidden;
-    
+  .pane{
+     height: 100vh;
   }
-  @media  (max-width:764px) {
-    .top-pane{
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    }
-    .pane{
-       height: 100vh;
-    }
-  }
\ No newline at end of file
+} */
+.ab-button-container{
+  display: flex;
+}
+.editor-container{
+  padding-top: 0.5%;
+}
\ No newline at end of file

From 93b8496a0e1b5ffd7e4b8c7f699a210a8e1e0722 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Wed, 10 Aug 2022 20:02:56 +0530
Subject: [PATCH 05/24] init

---
 package.json                        |   4 +-
 src/plays/code-editor/Button.jsx    |   5 +-
 src/plays/code-editor/CodeEditor.js |   4 +-
 src/plays/code-editor/Editor.jsx    |   6 +-
 src/plays/code-editor/styles.css    | 111 +++++++++++++---------------
 5 files changed, 59 insertions(+), 71 deletions(-)

diff --git a/package.json b/package.json
index 616c7cf11..b78c2fb75 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "@types/react-dom": "^18.0.2",
     "add": "^2.0.6",
     "axios": "^0.27.2",
-    "codemirror": "^5.59.1",
+    "codemirror": "^5.65.7",
     "create-react-play": "^0.0.10",
     "date-fns": "^2.28.0",
     "downloadjs": "^1.4.7",
@@ -28,7 +28,7 @@
     "lodash": "^4.17.21",
     "node-sass": "^7.0.1",
     "react": "^18.0.0",
-    "react-codemirror2": "^7.1.0",
+    "react-codemirror2": "^7.2.1",
     "react-dom": "^18.0.0",
     "react-helmet": "^6.1.0",
     "react-icons": "^4.3.1",
diff --git a/src/plays/code-editor/Button.jsx b/src/plays/code-editor/Button.jsx
index 88839a4ef..41f04b961 100644
--- a/src/plays/code-editor/Button.jsx
+++ b/src/plays/code-editor/Button.jsx
@@ -4,11 +4,8 @@ const Button = ({ title, backgroundColor, border, onClick }) => {
   return (
     <div>
       <button
+        className="btn-editor"
         style={{
-          maxWidth: "140px",
-          minWidth: "80px",
-          height: "30px",
-          marginRight: "5px",
           backgroundColor: backgroundColor,
           border: border
         }}
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index ca113b0a8..35ba3ed2e 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -87,8 +87,8 @@ function CodeEditor(props) {
                 setEditorState={setJs}
               />
             )}
-          </div>
-          <div>
+          </div> 
+          <div className="bottom-pane">
             <iframe
               id="my_iframe"
               srcDoc={srcDoc}
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
index 55719c268..c233b3bc1 100644
--- a/src/plays/code-editor/Editor.jsx
+++ b/src/plays/code-editor/Editor.jsx
@@ -37,8 +37,8 @@ const Editor = ({ language, value, setEditorState }) => {
   //   remover;
   // },[])
   return (
-    <div className="editor-container">
-      <div style={{marginBottom: "10px"}}>
+  <div className="editor-container">
+      <div className='dropdown'>
         <label for="cars">Choose a theme: </label>
         <select name="theme" onChange={(el) => {
           setTheme(el.target.value)
@@ -50,6 +50,7 @@ const Editor = ({ language, value, setEditorState }) => {
           }
         </select>
       </div>
+      <div className='editor-cont'>
       <ControlledEditorComponent
         onBeforeChange={handleChange}
         value= {value}
@@ -65,6 +66,7 @@ const Editor = ({ language, value, setEditorState }) => {
         }}
       />
       </div>
+      </div>
   )
 }
 
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index 51804080e..710d2ec3a 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -1,77 +1,66 @@
 /* enter stlyes here */
-body {
-  margin: 0;
-}
-
-/* .top-pane {
-  background-color: hsl(225, 6%, 25%);;
-}
-
-.pane {
-  height: 50vh;
+.tab-button-container{
   display: flex;
+  flex-direction: row;
+  margin-left: 40%;
+}
+.editor-container{
+  padding-top: 0.5%;
 }
-
-.editor-container {
-  flex-grow: 1;
-  flex-basis: 0;
+.dropdown{
+  margin-top: 15px;
   display: flex;
-  flex-direction: column;
-  padding: .5rem;
-  background-color: hsl(225, 6%, 25%);
+  margin-left: 36%;
 }
-
-.editor-container.collapsed {
-  flex-grow: 0;
+.btn-editor{
+  max-width: 240px;
+  min-width: 100px;
+  height: 50px;
+  margin-right: 5px;
+  border-radius: 12px;
+  font-family: sans-serif;
+  font-size: larger;
+  font-weight: 200px;
 }
-
-.editor-container.collapsed .CodeMirror-scroll {
-  position: absolute;
-  overflow: hidden !important;
+.dropdown label{
+   font-size: larger;
+   font-weight: 400;
+   font-family: sans-serif;
+   margin-right: 12px;
 }
-
-.expand-collapse-btn {
-  margin-left: .5rem;
-  background: none;
-  border: none;
+.dropdown select{
+  width: 300px;
+  background-color: black;
   color: white;
-  cursor: pointer;
 }
-
-.editor-title {
+.dropdown select option{
   display: flex;
-  justify-content: space-between;
-  background-color: hsl(225, 87%, 44%);
-  color: white;
-  padding: .5rem .5rem .5rem 1rem;
-  border-top-right-radius: .5rem;
-  border-top-left-radius: .5rem;
+  justify-content: center;
+  align-items: center;
 }
-
-.CodeMirror {
-  height: 100% !important;
+.editor-cont{
+  margin-top: 20px;
+  border: 5px solid white;
 }
-
-.code-mirror-wrapper {
-  flex-grow: 1;
-  border-bottom-right-radius: .5rem;
-  border-bottom-left-radius: .5rem;
-  overflow: hidden;
-  
+.editor-cont:hover{
+  border: 5px  solid rgb(0, 255, 0);
 }
-@media  (max-width:764px) {
-  .top-pane{
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-  }
-  .pane{
-     height: 100vh;
-  }
-} */
-.ab-button-container{
+.bottom-pane{
+  height: 50vh;
   display: flex;
 }
-.editor-container{
-  padding-top: 0.5%;
+@media (max-width: 764px){
+   .tab-button-container{
+    flex-direction: column;
+   }
+   .dropdown{
+    margin-left: 20%;
+   }
+   .dropdown label {
+     font-size: medium;
+     margin-right: 0px;
+   }
+   .dropdown select{
+    width: 100px;
+   }
 }
\ No newline at end of file

From 980bae27f97baa1653463721a3bcce98a4c97f43 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Wed, 10 Aug 2022 20:07:50 +0530
Subject: [PATCH 06/24] final push with one problem

---
 src/plays/code-editor/CodeEditor.js      |  1 -
 src/plays/code-editor/Editor.jsx         | 14 +-------------
 src/plays/code-editor/useLocalstorage.js | 24 ------------------------
 3 files changed, 1 insertion(+), 38 deletions(-)
 delete mode 100644 src/plays/code-editor/useLocalstorage.js

diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 35ba3ed2e..44bbb9906 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -3,7 +3,6 @@ import "./styles.css";
 import React, { useState, useEffect } from "react";
 import Editor from "./Editor";
 import Button from './Button'
-// import useLocalStorage from "./useLocalstorage";
 // WARNING: Do not change the entry componenet name
 function CodeEditor(props) {
   // Your Code Start below.
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
index c233b3bc1..7d39a6816 100644
--- a/src/plays/code-editor/Editor.jsx
+++ b/src/plays/code-editor/Editor.jsx
@@ -1,4 +1,4 @@
-import React, { useState,useEffect } from 'react';
+import React, { useState} from 'react';
 import 'codemirror/lib/codemirror.css';
 import 'codemirror/theme/dracula.css';
 import 'codemirror/theme/material.css';
@@ -16,8 +16,6 @@ import 'codemirror/addon/edit/closetag';
 
 import { Controlled as ControlledEditorComponent } from 'react-codemirror2';
 
-
-
 const Editor = ({ language, value, setEditorState }) => {
 
   const [theme, setTheme] = useState("dracula")
@@ -26,16 +24,6 @@ const Editor = ({ language, value, setEditorState }) => {
   }
   
   const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
-  
-  // const remover=function(){
-  //   const editors = document.getElementsByClassName('CodeMirror');
-  //   for(let i=1;i<editors.length;i++){
-  //     editors[i].remove;
-  //   }
-  // };
-  // useEffect(()=>{
-  //   remover;
-  // },[])
   return (
   <div className="editor-container">
       <div className='dropdown'>
diff --git a/src/plays/code-editor/useLocalstorage.js b/src/plays/code-editor/useLocalstorage.js
deleted file mode 100644
index 82f3bfb2e..000000000
--- a/src/plays/code-editor/useLocalstorage.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useEffect, useState } from 'react'
-
-const PREFIX = 'codepen-editor'
-
-export default function useLocalStorage(key, initialValue) {
-  const prefixedKey = PREFIX + key
-
-  const [value, setValue] = useState(() => {
-    const jsonValue = localStorage.getItem(prefixedKey)
-    if (jsonValue != null) return JSON.parse(jsonValue)
-
-    if (typeof initialValue === 'function') {
-      return initialValue()
-    } else {
-      return initialValue
-    }
-  })
-
-  useEffect(() => {
-    localStorage.setItem(prefixedKey, JSON.stringify(value))
-  }, [prefixedKey, value])
-
-  return [value, setValue]
-}

From 11e178ca4a9016e8cd88d5585decaa2e0b771bec Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Thu, 11 Aug 2022 01:18:05 +0530
Subject: [PATCH 07/24] final

---
 src/plays/code-editor/cover.jpg | Bin 0 -> 9171 bytes
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 src/plays/code-editor/cover.jpg

diff --git a/src/plays/code-editor/cover.jpg b/src/plays/code-editor/cover.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c2caf1edb38da7fa8517092f4ba43704bfd084e1
GIT binary patch
literal 9171
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
V%EQ<JQF&~J^!k4WOmMgOzW{vIXH5VA

literal 0
HcmV?d00001


From 45351d9e17fe256892cfcb9502912821bdcdeb89 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Mon, 15 Aug 2022 00:36:02 +0530
Subject: [PATCH 08/24] modified

---
 package.json                        |  4 ----
 src/plays/code-editor/Button.jsx    |  2 +-
 src/plays/code-editor/CodeEditor.js |  8 ++++----
 src/plays/code-editor/Editor.jsx    |  6 +++---
 src/plays/code-editor/styles.css    | 28 ++++++++++++++--------------
 5 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 235f1fe0b..7bd0116a1 100644
--- a/package.json
+++ b/package.json
@@ -5,9 +5,6 @@
   "dependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@fortawesome/fontawesome-svg-core": "^6.1.2",
-    "@fortawesome/free-solid-svg-icons": "^6.1.2",
-    "@fortawesome/react-fontawesome": "^0.2.0",
     "@giscus/react": "^2.0.3",
     "@mui/material": "^5.9.1",
     "@nhost/react": "^0.9.0",
@@ -17,7 +14,6 @@
     "add": "^2.0.6",
     "axios": "^0.27.2",
     "codemirror": "^5.65.7",
-    "create-react-play": "^0.0.10",
     "date-fns": "^2.28.0",
     "downloadjs": "^1.4.7",
     "firebase": "^9.8.2",
diff --git a/src/plays/code-editor/Button.jsx b/src/plays/code-editor/Button.jsx
index 41f04b961..6c72523a9 100644
--- a/src/plays/code-editor/Button.jsx
+++ b/src/plays/code-editor/Button.jsx
@@ -4,7 +4,7 @@ const Button = ({ title, backgroundColor, border, onClick }) => {
   return (
     <div>
       <button
-        className="btn-editor"
+        className="code-editor-btn"
         style={{
           backgroundColor: backgroundColor,
           border: border
diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 44bbb9906..9bc801b8f 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -38,9 +38,9 @@ function CodeEditor(props) {
     <>
       <div className="play-details">
         <PlayHeader play={props} />
-        <div className="play-details-body">
+        <div className="play-details-body ">
           {/* Your Code Starts Here */}
-          <div className="tab-button-container">
+          <div className="code-editor-tab-button-container">
             <Button
               backgroundColor={activeButton === "html" ? "blue" : ""}
               title="HTML"
@@ -63,7 +63,7 @@ function CodeEditor(props) {
               }}
             />
           </div>
-          <div className="editor-container">
+          <div className="code-editor-container">
             {openedEditor === "html" ? (
               <Editor
                 language="xml"
@@ -87,7 +87,7 @@ function CodeEditor(props) {
               />
             )}
           </div> 
-          <div className="bottom-pane">
+          <div className="code-editor-bottom-pane">
             <iframe
               id="my_iframe"
               srcDoc={srcDoc}
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
index 7d39a6816..50490a972 100644
--- a/src/plays/code-editor/Editor.jsx
+++ b/src/plays/code-editor/Editor.jsx
@@ -25,8 +25,8 @@ const Editor = ({ language, value, setEditorState }) => {
   
   const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
   return (
-  <div className="editor-container">
-      <div className='dropdown'>
+  <div className="code-editor-container">
+      <div className='code-editor-dropdown'>
         <label for="cars">Choose a theme: </label>
         <select name="theme" onChange={(el) => {
           setTheme(el.target.value)
@@ -38,7 +38,7 @@ const Editor = ({ language, value, setEditorState }) => {
           }
         </select>
       </div>
-      <div className='editor-cont'>
+      <div className='code-editor-cont'>
       <ControlledEditorComponent
         onBeforeChange={handleChange}
         value= {value}
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index 710d2ec3a..b995e26dc 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -1,18 +1,18 @@
 /* enter stlyes here */
-.tab-button-container{
+.code-editor-tab-button-container{
   display: flex;
   flex-direction: row;
   margin-left: 40%;
 }
-.editor-container{
+.code-editor-container{
   padding-top: 0.5%;
 }
-.dropdown{
+.code-editor-dropdown{
   margin-top: 15px;
   display: flex;
   margin-left: 36%;
 }
-.btn-editor{
+.code-editor-btn{
   max-width: 240px;
   min-width: 100px;
   height: 50px;
@@ -22,45 +22,45 @@
   font-size: larger;
   font-weight: 200px;
 }
-.dropdown label{
+.code-editor-dropdown label{
    font-size: larger;
    font-weight: 400;
    font-family: sans-serif;
    margin-right: 12px;
 }
-.dropdown select{
+.code-editor-dropdown select{
   width: 300px;
   background-color: black;
   color: white;
 }
-.dropdown select option{
+.code-editor-dropdown select option{
   display: flex;
   justify-content: center;
   align-items: center;
 }
-.editor-cont{
+.code-editor-cont{
   margin-top: 20px;
   border: 5px solid white;
 }
-.editor-cont:hover{
+.code-editor-cont:hover{
   border: 5px  solid rgb(0, 255, 0);
 }
-.bottom-pane{
+.code-editor-bottom-pane{
   height: 50vh;
   display: flex;
 }
 @media (max-width: 764px){
-   .tab-button-container{
+   .code-editor-tab-button-container{
     flex-direction: column;
    }
-   .dropdown{
+   .code-editor-dropdown {
     margin-left: 20%;
    }
-   .dropdown label {
+   .code-editor-dropdown  label {
      font-size: medium;
      margin-right: 0px;
    }
-   .dropdown select{
+   .code-editor-dropdown  select{
     width: 100px;
    }
 }
\ No newline at end of file

From 37f05d6088e1187e4e54d9b1c236b9a62c5a98c0 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Mon, 15 Aug 2022 01:11:47 +0530
Subject: [PATCH 09/24] image convert

---
 src/plays/code-editor/cover.jpg | Bin 9171 -> 0 bytes
 src/plays/code-editor/cover.png | Bin 0 -> 30458 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 src/plays/code-editor/cover.jpg
 create mode 100644 src/plays/code-editor/cover.png

diff --git a/src/plays/code-editor/cover.jpg b/src/plays/code-editor/cover.jpg
deleted file mode 100644
index c2caf1edb38da7fa8517092f4ba43704bfd084e1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 9171
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
V%EQ<JQF&~J^!k4WOmMgOzW{vIXH5VA

diff --git a/src/plays/code-editor/cover.png b/src/plays/code-editor/cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..52015ec3f6b79a787c876f1beffd696fb3a1e7d3
GIT binary patch
literal 30458
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
Bm2&_9

literal 0
HcmV?d00001


From 6ab8a61f0df0a6ae1bd9aeb7f6d0e2fb303391ae Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Tue, 16 Aug 2022 02:34:21 +0530
Subject: [PATCH 10/24] modified

---
 src/plays/code-editor/CodeEditor.js |  9 ++++++---
 src/plays/code-editor/Editor.jsx    |  2 --
 src/plays/code-editor/Readme.md     |  2 +-
 src/plays/code-editor/styles.css    | 16 ++++++++++++++++
 4 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 9bc801b8f..5a71bd2af 100644
--- 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
index 50490a972..2ab0a39d1 100644
--- 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
index d2f2d6d20..0570b2304 100644
--- 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
index b995e26dc..f0a5155b6 100644
--- 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{

From d2e508797796c2d61d16cbf1493ec0936bd81e92 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Wed, 17 Aug 2022 19:03:31 +0530
Subject: [PATCH 11/24] modified

---
 src/plays/code-editor/CodeEditor.js |  12 ++
 src/plays/code-editor/Editor.jsx    |   1 +
 src/plays/code-editor/Modal.jsx     | 110 ++++++++++++++++
 src/plays/code-editor/close.png     | Bin 0 -> 957 bytes
 src/plays/code-editor/modal.css     | 194 ++++++++++++++++++++++++++++
 src/plays/code-editor/styles.css    |   7 +
 6 files changed, 324 insertions(+)
 create mode 100644 src/plays/code-editor/Modal.jsx
 create mode 100644 src/plays/code-editor/close.png
 create mode 100644 src/plays/code-editor/modal.css

diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 5a71bd2af..9c6f87b11 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -3,6 +3,7 @@ import "./styles.css";
 import React, { useState, useEffect } from "react";
 import Editor from "./Editor";
 import Button from './Button'
+import Modal from './Modal';
 // WARNING: Do not change the entry componenet name
 function CodeEditor(props) {
   // Your Code Start below.
@@ -34,12 +35,22 @@ function CodeEditor(props) {
 
     return () => clearTimeout(timeOut);
   }, [html, css, js]);
+
+  const [showModal, setShowModal] = useState(false);
+
+  const toggle = (e) => {
+
+    setShowModal(!showModal);
+  };
   return (
     <>
       <div className="play-details">
         <PlayHeader play={props} />
         <div className="play-details-body ">
           {/* Your Code Starts Here */}
+          <div className="code-eitor-modal-toogle">
+            <button onClick={toggle}>How to play ?</button>
+          </div>
           <div className="code-editor-tab-button-container">
             <Button
               backgroundColor={activeButton === "html" ? "#98AFC7" : ""}
@@ -104,6 +115,7 @@ function CodeEditor(props) {
           {/* Your Code Ends Here */}
         </div>
       </div>
+      <Modal showModal={showModal} toggle={toggle}/>
     </>
   );
 }
diff --git a/src/plays/code-editor/Editor.jsx b/src/plays/code-editor/Editor.jsx
index 2ab0a39d1..9202459ff 100644
--- a/src/plays/code-editor/Editor.jsx
+++ b/src/plays/code-editor/Editor.jsx
@@ -24,6 +24,7 @@ const Editor = ({ language, value, setEditorState }) => {
   }
   
   const themeArray = ['dracula', 'material', 'mdn-like', 'the-matrix', 'night']
+  
   return (
   <div className="code-editor-container">
       <div className='code-editor-dropdown'>
diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
new file mode 100644
index 000000000..6ff4ede35
--- /dev/null
+++ b/src/plays/code-editor/Modal.jsx
@@ -0,0 +1,110 @@
+// import { Fragment, useState, useEffect } from "react";
+
+// import "./modal.css";
+// import close from './close.png'
+
+// const Modal = ({ showModal, toggle }) => {
+//   const [currState, setCurrentState] = useState(0);
+
+  
+
+//   useEffect(() => {
+//     setCurrentState(0);
+//   }, [showModal]);
+
+//   const buttonHandler = (val) => (e) => {
+//     if ((currState === 0 && val < 0) || (currState === 3 && val > 0)) return;
+//     setCurrentState(currState + val);
+//   };
+
+//   if (!showModal) return false;
+
+//   return (
+//     <Fragment>
+    
+//       <div className='memory-game-modal'>
+//         <img  src={close} alt="close" onClick={toggle} className="close-icon" />
+//         <div className='content'>
+//           <h1 className='text'>How to Play!</h1>
+//           <p>Yo</p>
+//           <div className='button-section'>
+//             {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
+//             <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
+//               {currState === 3 ? "Done" : "Next"}
+//             </button>
+//           </div>
+//         </div>
+//       </div>
+//       <div onClick={toggle} className='memory-game-backdrop' />
+//     </Fragment>
+//   );
+// };
+
+// export default Modal;
+
+import { Fragment, useState, useEffect } from "react";
+
+// css
+import "./modal.css";
+
+// assets
+
+import close from './close.png'
+
+const Modal = ({ showModal, toggle }) => {
+  const [currState, setCurrentState] = useState(0);
+
+  const structuringData = [
+    {
+      info: "Click any of the box to unvail the the hidden image.",
+      
+    },
+    {
+      info: "Now Click another box to unvail another image. if its not the same the both of them will be hidden again.",
+     
+    },
+    {
+      info: "If the both images are matched they will stay visible and you want to uncover other images and also find their pair",
+      
+    },
+    {
+      info: "Lastly images position will be different on every 'reset' button click any you can keep continue memorise the glimpse of the images and find their pair. ",
+      
+    },
+  ];
+
+  useEffect(() => {
+    setCurrentState(0);
+  }, [showModal]);
+
+  const buttonHandler = (val) => (e) => {
+    if ((currState === 0 && val < 0) || (currState === 3 && val > 0)) return;
+    setCurrentState(currState + val);
+  };
+  if (!showModal) return false;
+  return (
+    <Fragment>
+      <div className='memory-game-modal'>
+        <img src={close} alt="clonse" onClick={toggle} className="close-icon" />
+        <div className='content'>
+          <h1 className='text'>How to Play!</h1>
+          <p>{structuringData[currState].info}</p>
+          {/* <img
+            className='guide-image'
+            src={structuringData[currState].image}
+            alt='pic'
+          /> */}
+          <div className='button-section'>
+            {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
+            <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
+              {currState === 3 ? "Done" : "Next"}
+            </button>
+          </div>
+        </div>
+      </div>
+      <div onClick={toggle} className='memory-game-backdrop' />
+    </Fragment>
+  );
+};
+
+export default Modal;
diff --git a/src/plays/code-editor/close.png b/src/plays/code-editor/close.png
new file mode 100644
index 0000000000000000000000000000000000000000..61330d6b1b1ce00ebfc878afa5b6c1f373d00a91
GIT binary patch
literal 957
zcmV;u148_XP)<h;3K|Lk000e1NJLTq002M$002M;1^@s6s%dfF00004b3#c}2nYxW
zd<bNS00009a7bBm0005l0005l0s35~asU7T8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H113F1WK~#90)tfzQ6hRn(pF|Y=C=L|~iX=vD;>U4#l?1;<&=|EB
z{3rea?X0x4u@l5Xi4asQ#7-MYif9ay7&R(*(Gc`3=3baHcgfDqJF~M7OcB_b-RH@M
zJ7%*zw6h)<0fvDsz#Q-hcu6^_0mp#Nz$`EZeC&4cFfau)JB%@4XW)y~WFPRHl^%b9
zJD6W?8^?jg4ioG#1@wo%c5mvy0;{{c0yfEnjllF86Uq{y4tyh<%PpC7HRA*s?|^{_
zGOoDDH-RN!E5L1sNiyC8dtz8+#8qC#m0nsE9O(z10egL~T!A|91gPYg+t-WvsLR7{
zU>q3CIbQ=Gd4MkfqqyHX_V_?CcS7FVUdA%5kM?!IYmbGRzzpWIHx|C~P2jG*;1K3^
z@QtuPh;BO?@{_>!{}-+TpFJ0z#l#Fn4fyJLjg!ExZYR))Fh`gO!R3V%BSe!Iv?3hH
zYito+UeJi}3BL%1$qQN$4(2#_;qro3ghLMJOh#VNh%isK2+7F{F(M=@FK9(L++pqH
z<pqrh3&0U;&C<vVS`q4$P+ri8@S`<KCogD3D6PCuRD>kth1e02k{4n{NK#%19U*CX
zAykA?$P3yLN+mB;@!z~`Vz%9b$@hj@xV3hV!aCbX;|Y`#8eebi@e}h1zZ7W8+YwI0
z)5u3C`BFp(EpJCS8ObR#vE*emNGL*Vc{{?X2!5+llzb8qG~}lh)@T5y1G}z3a~n(J
zYjXoQ6V%uu#2%hTghe7m2)Ti&72&L^u|<sCTa5_6feR|e7BRQ3wIYmo8Cw*wZ?6$y
z3AmWc*rLdX7KKMh;fak_gi+TMrywsxkC2kQpcUcLS|>_TUeJngx!Va+mKTCWsNuhZ
zJ3*ZHimLekTkjHZP8O_Sww}u%FK9&g4)g(B_gpBpyr2=`Ccqny1&Wdvd?UPtwO^M@
zRbKFk@C(e}g6qW8p4H`zFc0w5aZ+mXLY@c@0j@brNaeQghHHfLVBQ%T&v0<+@<P@x
zOKtBARe*cI-!2C~0Cq&Vd>saX7j$-625tZwVCCcMA<S(t(E51>c#L_gtc)DRJU5U#
fcLKPN@dDr<cXa5`fOQ!%00000NkvXXu0mjfA4i}j

literal 0
HcmV?d00001

diff --git a/src/plays/code-editor/modal.css b/src/plays/code-editor/modal.css
new file mode 100644
index 000000000..92466e572
--- /dev/null
+++ b/src/plays/code-editor/modal.css
@@ -0,0 +1,194 @@
+.memory-game-backdrop {
+    position: fixed;
+    top: 10%;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+}
+.memory-game-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    width: 50vw;
+    max-width: 800px;
+    z-index: 11;
+    border-radius: 10px;
+    animation: modalApear 0.3s ease-in-out;
+}
+.memory-game-modal .close-icon {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.5rem;
+    width: 30px;
+    padding: 5px;
+    filter: brightness(0.1);
+    cursor: pointer;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .close-icon {
+        right: 1rem;
+        top: 1rem;
+        width: 30px;
+   }
+}
+.memory-game-modal .content {
+    margin: 0 2rem;
+    padding: 2rem;
+}
+.memory-game-modal .content .text {
+    text-align: center;
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.memory-game-modal .content p {
+    margin: 0.6rem 0 1rem 0;
+    text-align: center;
+}
+.memory-game-modal .content .guide-image {
+    display: block;
+    margin: 0 auto;
+    max-width: 70%;
+    height: auto;
+}
+.memory-game-modal .content .button-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 32px;
+}
+.memory-game-modal .content .button-section button {
+    padding: 0.5rem 2rem;
+    font-size: 1rem;
+    border-radius: 20px;
+    border: none;
+    background-color: rgba(81, 91, 212, 1);
+    outline: none;
+    color: #fff;
+    font-weight: bold;
+}
+.memory-game-modal .content .button-section button:disabled {
+    background-color: rgba(81, 91, 212, 0.5);
+    pointer-events: none;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .content .button-section {
+        padding: 0;
+        margin-top: 10px;
+   }
+}
+@keyframes modalApear {
+    0% {
+        opacity: 0;
+        top: 48%;
+   }
+    100% {
+        opacity: 1;
+        top: 50%;
+   }
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal {
+        width: calc(100vw - 20px);
+   }
+}
+.memory-game-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 10;
+}
+.memory-game-modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: #fff;
+    width: 50vw;
+    max-width: 800px;
+    z-index: 11;
+    border-radius: 10px;
+    animation: modalApear 0.3s ease-in-out;
+}
+.memory-game-modal .close-icon {
+    position: absolute;
+    right: 1.5rem;
+    top: 1.5rem;
+    width: 30px;
+    padding: 5px;
+    filter: brightness(0.1);
+    cursor: pointer;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .close-icon {
+        right: 1rem;
+        top: 1rem;
+        width: 30px;
+   }
+}
+.memory-game-modal .content {
+    margin: 0 2rem;
+    padding: 2rem;
+}
+.memory-game-modal .content .text {
+    text-align: center;
+    font-size: 1.6rem;
+    font-weight: bold;
+}
+.memory-game-modal .content p {
+    margin: 0.6rem 0 1rem 0;
+    text-align: center;
+}
+.memory-game-modal .content .guide-image {
+    display: block;
+    margin: 0 auto;
+    max-width: 70%;
+    height: auto;
+}
+.memory-game-modal .content .button-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 32px;
+}
+.memory-game-modal .content .button-section button {
+    padding: 0.5rem 2rem;
+    font-size: 1rem;
+    border-radius: 20px;
+    border: none;
+    background-color: rgba(81, 91, 212, 1);
+    outline: none;
+    color: #fff;
+    font-weight: bold;
+}
+.memory-game-modal .content .button-section button:disabled {
+    background-color: rgba(81, 91, 212, 0.5);
+    pointer-events: none;
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal .content .button-section {
+        padding: 0;
+        margin-top: 10px;
+   }
+}
+@keyframes modalApear {
+    0% {
+        opacity: 0;
+        top: 48%;
+   }
+    100% {
+        opacity: 1;
+        top: 50%;
+   }
+}
+@media screen and (max-width: 768px) {
+    .memory-game-modal {
+        width: calc(100vw - 20px);
+   }
+}
\ No newline at end of file
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index f0a5155b6..6bbdc0298 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -3,6 +3,7 @@
   display: flex;
   flex-direction: row;
   margin-left: 40%;
+  margin-top: 25px;
 }
 .code-editor-container{
   padding-top: 0.5%;
@@ -65,6 +66,12 @@
   color: white;
   margin-top: 10px;
 }
+.code-eitor-modal-toogle{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: xx-large;
+}
 @media (max-width: 764px){
    .code-editor-tab-button-container{
     flex-direction: column;

From 3b067112db20148657f5fb96b585aed40ca6eb24 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Thu, 18 Aug 2022 12:35:22 +0530
Subject: [PATCH 12/24] modal added

---
 src/plays/code-editor/CodeEditor.js |  2 +-
 src/plays/code-editor/Modal.jsx     | 66 +++--------------------------
 src/plays/code-editor/modal.css     | 52 +++++++++++------------
 src/plays/code-editor/styles.css    |  6 ++-
 4 files changed, 39 insertions(+), 87 deletions(-)

diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 9c6f87b11..0fb915623 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -48,7 +48,7 @@ function CodeEditor(props) {
         <PlayHeader play={props} />
         <div className="play-details-body ">
           {/* Your Code Starts Here */}
-          <div className="code-eitor-modal-toogle">
+          <div className="code-editor-modal-toogle">
             <button onClick={toggle}>How to play ?</button>
           </div>
           <div className="code-editor-tab-button-container">
diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
index 6ff4ede35..19c7fd3a6 100644
--- a/src/plays/code-editor/Modal.jsx
+++ b/src/plays/code-editor/Modal.jsx
@@ -1,54 +1,7 @@
-// import { Fragment, useState, useEffect } from "react";
-
-// import "./modal.css";
-// import close from './close.png'
-
-// const Modal = ({ showModal, toggle }) => {
-//   const [currState, setCurrentState] = useState(0);
-
-  
-
-//   useEffect(() => {
-//     setCurrentState(0);
-//   }, [showModal]);
-
-//   const buttonHandler = (val) => (e) => {
-//     if ((currState === 0 && val < 0) || (currState === 3 && val > 0)) return;
-//     setCurrentState(currState + val);
-//   };
-
-//   if (!showModal) return false;
-
-//   return (
-//     <Fragment>
-    
-//       <div className='memory-game-modal'>
-//         <img  src={close} alt="close" onClick={toggle} className="close-icon" />
-//         <div className='content'>
-//           <h1 className='text'>How to Play!</h1>
-//           <p>Yo</p>
-//           <div className='button-section'>
-//             {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
-//             <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
-//               {currState === 3 ? "Done" : "Next"}
-//             </button>
-//           </div>
-//         </div>
-//       </div>
-//       <div onClick={toggle} className='memory-game-backdrop' />
-//     </Fragment>
-//   );
-// };
-
-// export default Modal;
-
 import { Fragment, useState, useEffect } from "react";
 
-// css
 import "./modal.css";
 
-// assets
-
 import close from './close.png'
 
 const Modal = ({ showModal, toggle }) => {
@@ -56,19 +9,19 @@ const Modal = ({ showModal, toggle }) => {
 
   const structuringData = [
     {
-      info: "Click any of the box to unvail the the hidden image.",
+      info: "Its a code editor for html css and js made using codemirror your can write your code seprately from html css and js ",
       
     },
     {
-      info: "Now Click another box to unvail another image. if its not the same the both of them will be hidden again.",
+      info: "Javascript will work normally and can be used to manipulate things but their will not be shown any output for it like for console loging ",
      
     },
     {
-      info: "If the both images are matched they will stay visible and you want to uncover other images and also find their pair",
+      info: "Css output will be shown when try to make style changes using it ",
       
     },
     {
-      info: "Lastly images position will be different on every 'reset' button click any you can keep continue memorise the glimpse of the images and find their pair. ",
+      info: "Lastly all your output will be displayed in output section as you type ",
       
     },
   ];
@@ -84,16 +37,11 @@ const Modal = ({ showModal, toggle }) => {
   if (!showModal) return false;
   return (
     <Fragment>
-      <div className='memory-game-modal'>
+      <div className='code-editor-modal'>
         <img src={close} alt="clonse" onClick={toggle} className="close-icon" />
         <div className='content'>
           <h1 className='text'>How to Play!</h1>
           <p>{structuringData[currState].info}</p>
-          {/* <img
-            className='guide-image'
-            src={structuringData[currState].image}
-            alt='pic'
-          /> */}
           <div className='button-section'>
             {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
             <button onClick={currState === 3 ? toggle : buttonHandler(1)}>
@@ -102,9 +50,9 @@ const Modal = ({ showModal, toggle }) => {
           </div>
         </div>
       </div>
-      <div onClick={toggle} className='memory-game-backdrop' />
+      <div onClick={toggle} className='code-editor-backdrop' />
     </Fragment>
   );
 };
 
-export default Modal;
+export default Modal;
\ No newline at end of file
diff --git a/src/plays/code-editor/modal.css b/src/plays/code-editor/modal.css
index 92466e572..03a59ee15 100644
--- a/src/plays/code-editor/modal.css
+++ b/src/plays/code-editor/modal.css
@@ -1,4 +1,4 @@
-.memory-game-backdrop {
+.code-editor-backdrop {
     position: fixed;
     top: 10%;
     left: 0;
@@ -7,7 +7,7 @@
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 10;
 }
-.memory-game-modal {
+.code-editor-modal {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -19,7 +19,7 @@
     border-radius: 10px;
     animation: modalApear 0.3s ease-in-out;
 }
-.memory-game-modal .close-icon {
+.code-editor-modal .close-icon {
     position: absolute;
     right: 1.5rem;
     top: 1.5rem;
@@ -29,38 +29,38 @@
     cursor: pointer;
 }
 @media screen and (max-width: 768px) {
-    .memory-game-modal .close-icon {
+    .code-editor-modal .close-icon {
         right: 1rem;
         top: 1rem;
         width: 30px;
    }
 }
-.memory-game-modal .content {
+.code-editor-modal .content {
     margin: 0 2rem;
     padding: 2rem;
 }
-.memory-game-modal .content .text {
+.code-editor-modal .content .text {
     text-align: center;
     font-size: 1.6rem;
     font-weight: bold;
 }
-.memory-game-modal .content p {
+.code-editor-modal .content p {
     margin: 0.6rem 0 1rem 0;
     text-align: center;
 }
-.memory-game-modal .content .guide-image {
+.code-editor-modal .content .guide-image {
     display: block;
     margin: 0 auto;
     max-width: 70%;
     height: auto;
 }
-.memory-game-modal .content .button-section {
+.code-editor-modal .content .button-section {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 32px;
 }
-.memory-game-modal .content .button-section button {
+.code-editor-modal .content .button-section button {
     padding: 0.5rem 2rem;
     font-size: 1rem;
     border-radius: 20px;
@@ -70,12 +70,12 @@
     color: #fff;
     font-weight: bold;
 }
-.memory-game-modal .content .button-section button:disabled {
+.code-editor-modal .content .button-section button:disabled {
     background-color: rgba(81, 91, 212, 0.5);
     pointer-events: none;
 }
 @media screen and (max-width: 768px) {
-    .memory-game-modal .content .button-section {
+    .code-editor-modal .content .button-section {
         padding: 0;
         margin-top: 10px;
    }
@@ -91,11 +91,11 @@
    }
 }
 @media screen and (max-width: 768px) {
-    .memory-game-modal {
+    .code-editor-modal {
         width: calc(100vw - 20px);
    }
 }
-.memory-game-backdrop {
+.code-editor-backdrop  {
     position: fixed;
     top: 0;
     left: 0;
@@ -104,7 +104,7 @@
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 10;
 }
-.memory-game-modal {
+.code-editor-modal {
     position: absolute;
     top: 50%;
     left: 50%;
@@ -116,7 +116,7 @@
     border-radius: 10px;
     animation: modalApear 0.3s ease-in-out;
 }
-.memory-game-modal .close-icon {
+.code-editor-modal .close-icon {
     position: absolute;
     right: 1.5rem;
     top: 1.5rem;
@@ -126,38 +126,38 @@
     cursor: pointer;
 }
 @media screen and (max-width: 768px) {
-    .memory-game-modal .close-icon {
+    .code-editor-modal .close-icon {
         right: 1rem;
         top: 1rem;
         width: 30px;
    }
 }
-.memory-game-modal .content {
+.code-editor-modal .content {
     margin: 0 2rem;
     padding: 2rem;
 }
-.memory-game-modal .content .text {
+.code-editor-modal .content .text {
     text-align: center;
     font-size: 1.6rem;
     font-weight: bold;
 }
-.memory-game-modal .content p {
+.code-editor-modal .content p {
     margin: 0.6rem 0 1rem 0;
     text-align: center;
 }
-.memory-game-modal .content .guide-image {
+.code-editor-modal .content .guide-image {
     display: block;
     margin: 0 auto;
     max-width: 70%;
     height: auto;
 }
-.memory-game-modal .content .button-section {
+.code-editor-modal .content .button-section {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 32px;
 }
-.memory-game-modal .content .button-section button {
+.code-editor-modal .content .button-section button {
     padding: 0.5rem 2rem;
     font-size: 1rem;
     border-radius: 20px;
@@ -167,12 +167,12 @@
     color: #fff;
     font-weight: bold;
 }
-.memory-game-modal .content .button-section button:disabled {
+.code-editor-modal .content .button-section button:disabled {
     background-color: rgba(81, 91, 212, 0.5);
     pointer-events: none;
 }
 @media screen and (max-width: 768px) {
-    .memory-game-modal .content .button-section {
+    .code-editor-modal .content .button-section {
         padding: 0;
         margin-top: 10px;
    }
@@ -188,7 +188,7 @@
    }
 }
 @media screen and (max-width: 768px) {
-    .memory-game-modal {
+    .code-editor-modal {
         width: calc(100vw - 20px);
    }
 }
\ No newline at end of file
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index 6bbdc0298..bfa083906 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -66,7 +66,7 @@
   color: white;
   margin-top: 10px;
 }
-.code-eitor-modal-toogle{
+.code-editor-modal-toogle{
   display: flex;
   justify-content: center;
   align-items: center;
@@ -86,4 +86,8 @@
    .code-editor-dropdown  select{
     width: 100px;
    }
+   .code-editor-modal-toogle{
+     font-size: larger;
+    margin-left: 45px;
+   }
 }
\ No newline at end of file

From 83ef6e3cb0c171ebc3b088b41675b4f64d9e6871 Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Thu, 18 Aug 2022 20:09:11 +0530
Subject: [PATCH 13/24] text change

---
 src/plays/code-editor/Modal.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
index 19c7fd3a6..fccc04dd3 100644
--- a/src/plays/code-editor/Modal.jsx
+++ b/src/plays/code-editor/Modal.jsx
@@ -9,19 +9,19 @@ const Modal = ({ showModal, toggle }) => {
 
   const structuringData = [
     {
-      info: "Its a code editor for html css and js made using codemirror your can write your code seprately from html css and js ",
+      info: "Its a code editor for html css and js made using codemirror your can write your code seprately for html css and js. ",
       
     },
     {
-      info: "Javascript will work normally and can be used to manipulate things but their will not be shown any output for it like for console loging ",
+      info: "Javascript will work normally and can be used to manipulate things but their will not be shown any output for it like for console loging.",
      
     },
     {
-      info: "Css output will be shown when try to make style changes using it ",
+      info: "Css output will be shown when try to make style changes using it.",
       
     },
     {
-      info: "Lastly all your output will be displayed in output section as you type ",
+      info: "Lastly all your output will be displayed in output section as you type.",
       
     },
   ];

From 99d8f532277cf7bb1e501d9e6a6a451232c1caae Mon Sep 17 00:00:00 2001
From: Saksham chandel <94097778+yung-coder@users.noreply.github.com>
Date: Fri, 19 Aug 2022 00:24:27 +0530
Subject: [PATCH 14/24] Final push

---
 src/plays/code-editor/CodeEditor.js | 2 +-
 src/plays/code-editor/Modal.jsx     | 2 +-
 src/plays/code-editor/styles.css    | 3 +++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/plays/code-editor/CodeEditor.js b/src/plays/code-editor/CodeEditor.js
index 0fb915623..8a13a2b96 100644
--- a/src/plays/code-editor/CodeEditor.js
+++ b/src/plays/code-editor/CodeEditor.js
@@ -49,7 +49,7 @@ function CodeEditor(props) {
         <div className="play-details-body ">
           {/* Your Code Starts Here */}
           <div className="code-editor-modal-toogle">
-            <button onClick={toggle}>How to play ?</button>
+            <button onClick={toggle}>How to Use ?</button>
           </div>
           <div className="code-editor-tab-button-container">
             <Button
diff --git a/src/plays/code-editor/Modal.jsx b/src/plays/code-editor/Modal.jsx
index fccc04dd3..b4c4b9c37 100644
--- a/src/plays/code-editor/Modal.jsx
+++ b/src/plays/code-editor/Modal.jsx
@@ -40,7 +40,7 @@ const Modal = ({ showModal, toggle }) => {
       <div className='code-editor-modal'>
         <img src={close} alt="clonse" onClick={toggle} className="close-icon" />
         <div className='content'>
-          <h1 className='text'>How to Play!</h1>
+          <h1 className='text'>How to Use!</h1>
           <p>{structuringData[currState].info}</p>
           <div className='button-section'>
             {currState > 0 ? <button onClick={buttonHandler(-1)}>Prev</button> : <p></p>}
diff --git a/src/plays/code-editor/styles.css b/src/plays/code-editor/styles.css
index bfa083906..dc6ff6414 100644
--- a/src/plays/code-editor/styles.css
+++ b/src/plays/code-editor/styles.css
@@ -72,6 +72,9 @@
   align-items: center;
   font-size: xx-large;
 }
+.code-editor-modal-toogle button{
+  color: #1f6ed4;
+}
 @media (max-width: 764px){
    .code-editor-tab-button-container{
     flex-direction: column;

From e1542183cc1724b13113a5975df4404f305a3b36 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 10:52:14 +0530
Subject: [PATCH 15/24] =?UTF-8?q?=E2=9C=A8=20[Feature]:=20Add=20umami=20an?=
 =?UTF-8?q?alytics=20for=20reactplayIo=20#501?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/public/index.html b/public/index.html
index 35ae0656d..41c400482 100644
--- a/public/index.html
+++ b/public/index.html
@@ -34,6 +34,12 @@
     <title>
       ReactPlay - One app to learn, create, and share ReactJS projects.
     </title>
+    <script
+      async
+      defer
+      data-website-id="7833ad41-abd6-4ae1-953b-e00beabf299b"
+      src="https://reactplayio-analytics.herokuapp.com/umami.js"
+    ></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

From b0f690f8db4a79ba1161b6f390ed318edb124eca Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 10:58:14 +0530
Subject: [PATCH 16/24] Add click event tracking for github and create play
 button

---
 src/common/header/HeaderNav.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/common/header/HeaderNav.jsx b/src/common/header/HeaderNav.jsx
index a43906832..6e3391b8c 100644
--- a/src/common/header/HeaderNav.jsx
+++ b/src/common/header/HeaderNav.jsx
@@ -105,7 +105,7 @@ const HeaderNav = ({ showBrowse }) => {
                 href="https://github.com/reactplay/react-play/blob/main/CREATE-PLAY.md"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="app-header-btn app-header-btn--primary"
+                className="app-header-btn app-header-btn--primary umami--click--create-play"
               >
                 <IoAddSharp className="icon" />
                 <span className="btn-label">Create</span>
@@ -126,7 +126,7 @@ const HeaderNav = ({ showBrowse }) => {
               href="https://github.com/reactplay/react-play"
               target="_blank"
               rel="noopener noreferrer"
-              className="app-header-btn app-header-btn--default"
+              className="app-header-btn app-header-btn--default umami--click--github"
             >
               <BsGithub className="icon" />
               <span className="btn-label">GitHub</span>

From 37ae69cf0d83c063f9f51223ab4140b994811489 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 11:14:08 +0530
Subject: [PATCH 17/24] Add github event tracking on home page

---
 src/common/home/Home.jsx | 111 +++++++++++++++++++++------------------
 1 file changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index 3be60cd81..fc5fd4504 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -6,23 +6,22 @@ import { RiSlideshow4Line } from "react-icons/ri";
 import { BiShareAlt, BiAddToQueue } from "react-icons/bi";
 import { BsGithub } from "react-icons/bs";
 import { FiStar } from "react-icons/fi";
-import { FaLightbulb } from 'react-icons/fa';
+import { FaLightbulb } from "react-icons/fa";
 import { ReactComponent as Flower } from "images/icon-flower.svg";
 import { MdManageSearch } from "react-icons/md";
-import YoutubeVideoEmbed from 'common/components/YouTubeEmbed';
+import YoutubeVideoEmbed from "common/components/YouTubeEmbed";
 import FeaturedPlays from "common/playlists/FeaturedPlays";
 import Contributors from "./Contributors";
 import ExtendedFooter from "common/footer/ExtendedFooter";
 import { SearchContext } from "common/search/search-context";
 import { Tweet } from "react-twitter-widgets";
-import Spinner from "../spinner/spinner"
-
-
-
+import Spinner from "../spinner/spinner";
 
 const Home = () => {
   const [gitHubStars, setGitHubStars] = useState("...");
-  const { data } = useFetch("https://api.github.com/repos/reactplay/react-play");
+  const { data } = useFetch(
+    "https://api.github.com/repos/reactplay/react-play"
+  );
   const { setSearchTerm, searchTerm, setFilterQuery } =
     useContext(SearchContext);
   useEffect(() => {
@@ -32,30 +31,29 @@ const Home = () => {
       level_id: "",
       tags: [],
       owner_user_id: "",
-      language: ""
+      language: "",
     });
   }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
   // array of tweet IDs to show on the home page
-    const tweetIdArray = [
-        "1544376341172068352",  
-        "1530197614771458049",
-        "1529884210269671424",
-        "1522165831005728769",
-        "1521784126717710336",
-        "1518200201302974464",
-        "1541802575775035392",
-        "1515598358748237830",
-        "1528938773710782464",
-        "1532349503709122561"
-    ]
+  const tweetIdArray = [
+    "1544376341172068352",
+    "1530197614771458049",
+    "1529884210269671424",
+    "1522165831005728769",
+    "1521784126717710336",
+    "1518200201302974464",
+    "1541802575775035392",
+    "1515598358748237830",
+    "1528938773710782464",
+    "1532349503709122561",
+  ];
 
-    // set the state for loading
-    const [isTweetsLoading,setTweetsLoading] = useState(true)
-
-    // Function to handle the tweets loading state after tweets have been loaded.
-    const tweetLoadHandler = () => setTweetsLoading(false)
+  // set the state for loading
+  const [isTweetsLoading, setTweetsLoading] = useState(true);
 
+  // Function to handle the tweets loading state after tweets have been loaded.
+  const tweetLoadHandler = () => setTweetsLoading(false);
 
   return (
     <div>
@@ -84,7 +82,7 @@ const Home = () => {
               href="https://github.com/reactplay/react-play"
               target="_blank"
               rel="noopener noreferrer"
-              className="body-c2a-btn"
+              className="body-c2a-btn umami--click--github"
             >
               <BsGithub className="icon" />
               <span className="btn-label">
@@ -94,9 +92,12 @@ const Home = () => {
                 </div>{" "}
               </span>
             </a>
-          </div>          
+          </div>
           <div className="video">
-            <YoutubeVideoEmbed videoId="XrWonrp296w" title="🤩 Introducing ReactPlay - An Opensource Platform to Create, Learn, and Share ReactJS Projects" />
+            <YoutubeVideoEmbed
+              videoId="XrWonrp296w"
+              title="🤩 Introducing ReactPlay - An Opensource Platform to Create, Learn, and Share ReactJS Projects"
+            />
           </div>
         </div>
       </section>
@@ -143,7 +144,11 @@ const Home = () => {
           </li>
         </ul>
         <div className="home-ideas">
-          <FaLightbulb className="icon" color="var(--color-brand-primary)" size='48px'/>
+          <FaLightbulb
+            className="icon"
+            color="var(--color-brand-primary)"
+            size="48px"
+          />
           <p className="ideas-lead">Not sure how to get started?</p>
           <p className="ideas-title">We have got lot of ideas</p>
           <Link to="/ideas" className="home-anchor">
@@ -160,29 +165,33 @@ const Home = () => {
         </div>
       </section>
       <section className="home-tweets">
-              <h3 className="title-primary">
-                What Our <strong>
-                       <span>Community</span>
-                  </strong> Says!
-              </h3>
+        <h3 className="title-primary">
+          What Our{" "}
+          <strong>
+            <span>Community</span>
+          </strong>{" "}
+          Says!
+        </h3>
 
-        {isTweetsLoading && (
-          <Spinner />
-        )}
-        <div className={isTweetsLoading ? "tweets-container" : "tweets-container active"}>
-            {tweetIdArray.map((id) => (
-              <Tweet
-                key={id}
-                tweetId={id}
-                onLoad={tweetLoadHandler}
-                options={{
-                  width: "410",
-                  conversation: "none",
-                  cards: "hidden",
-                  align: "center",
-                }}
-              />
-            ))}
+        {isTweetsLoading && <Spinner />}
+        <div
+          className={
+            isTweetsLoading ? "tweets-container" : "tweets-container active"
+          }
+        >
+          {tweetIdArray.map((id) => (
+            <Tweet
+              key={id}
+              tweetId={id}
+              onLoad={tweetLoadHandler}
+              options={{
+                width: "410",
+                conversation: "none",
+                cards: "hidden",
+                align: "center",
+              }}
+            />
+          ))}
         </div>
       </section>
       <section className="home-contributors">

From 58f7fba4bf5f11a1cc93e7aadae25461145e257a Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 13:07:51 +0530
Subject: [PATCH 18/24] Change tracking script

---
 public/index.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/index.html b/public/index.html
index 41c400482..f5a509ecd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,8 +37,8 @@
     <script
       async
       defer
-      data-website-id="7833ad41-abd6-4ae1-953b-e00beabf299b"
-      src="https://reactplayio-analytics.herokuapp.com/umami.js"
+      data-website-id="e9be9998-e02c-48ee-b0e4-8456ca5c57a1"
+      src="https://reactplay-analytics.netlify.app/umami.js"
     ></script>
   </head>
   <body>

From 82148facd56e1532c32bd4cbeac8f7f36ead9eed Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 13:38:26 +0530
Subject: [PATCH 19/24] Change script

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index f5a509ecd..6f94a530b 100644
--- a/public/index.html
+++ b/public/index.html
@@ -38,7 +38,7 @@
       async
       defer
       data-website-id="e9be9998-e02c-48ee-b0e4-8456ca5c57a1"
-      src="https://reactplay-analytics.netlify.app/umami.js"
+      src="https://analytics.reactplay.io/umami.js"
     ></script>
   </head>
   <body>

From fe8370cefd640a3c0e283cebb49d35476c5b5d08 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 14:54:36 +0530
Subject: [PATCH 20/24] Change tracking script

---
 public/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 6f94a530b..a2affb692 100644
--- a/public/index.html
+++ b/public/index.html
@@ -37,7 +37,7 @@
     <script
       async
       defer
-      data-website-id="e9be9998-e02c-48ee-b0e4-8456ca5c57a1"
+      data-website-id="%REACT_APP_UMAMI_TRACK_ID%"
       src="https://analytics.reactplay.io/umami.js"
     ></script>
   </head>

From 677bf63ceed1b6d112915214bf5e36ce3c4a91e5 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 16:49:53 +0530
Subject: [PATCH 21/24] Remove formatting

---
 src/common/home/Home.jsx | 111 ++++++++++++++++++---------------------
 1 file changed, 51 insertions(+), 60 deletions(-)

diff --git a/src/common/home/Home.jsx b/src/common/home/Home.jsx
index fc5fd4504..611920618 100644
--- a/src/common/home/Home.jsx
+++ b/src/common/home/Home.jsx
@@ -6,22 +6,23 @@ import { RiSlideshow4Line } from "react-icons/ri";
 import { BiShareAlt, BiAddToQueue } from "react-icons/bi";
 import { BsGithub } from "react-icons/bs";
 import { FiStar } from "react-icons/fi";
-import { FaLightbulb } from "react-icons/fa";
+import { FaLightbulb } from 'react-icons/fa';
 import { ReactComponent as Flower } from "images/icon-flower.svg";
 import { MdManageSearch } from "react-icons/md";
-import YoutubeVideoEmbed from "common/components/YouTubeEmbed";
+import YoutubeVideoEmbed from 'common/components/YouTubeEmbed';
 import FeaturedPlays from "common/playlists/FeaturedPlays";
 import Contributors from "./Contributors";
 import ExtendedFooter from "common/footer/ExtendedFooter";
 import { SearchContext } from "common/search/search-context";
 import { Tweet } from "react-twitter-widgets";
-import Spinner from "../spinner/spinner";
+import Spinner from "../spinner/spinner"
+
+
+
 
 const Home = () => {
   const [gitHubStars, setGitHubStars] = useState("...");
-  const { data } = useFetch(
-    "https://api.github.com/repos/reactplay/react-play"
-  );
+  const { data } = useFetch("https://api.github.com/repos/reactplay/react-play");
   const { setSearchTerm, searchTerm, setFilterQuery } =
     useContext(SearchContext);
   useEffect(() => {
@@ -31,29 +32,30 @@ const Home = () => {
       level_id: "",
       tags: [],
       owner_user_id: "",
-      language: "",
+      language: ""
     });
   }, [data, setSearchTerm, searchTerm, setFilterQuery]);
 
   // array of tweet IDs to show on the home page
-  const tweetIdArray = [
-    "1544376341172068352",
-    "1530197614771458049",
-    "1529884210269671424",
-    "1522165831005728769",
-    "1521784126717710336",
-    "1518200201302974464",
-    "1541802575775035392",
-    "1515598358748237830",
-    "1528938773710782464",
-    "1532349503709122561",
-  ];
+    const tweetIdArray = [
+        "1544376341172068352",  
+        "1530197614771458049",
+        "1529884210269671424",
+        "1522165831005728769",
+        "1521784126717710336",
+        "1518200201302974464",
+        "1541802575775035392",
+        "1515598358748237830",
+        "1528938773710782464",
+        "1532349503709122561"
+    ]
 
-  // set the state for loading
-  const [isTweetsLoading, setTweetsLoading] = useState(true);
+    // set the state for loading
+    const [isTweetsLoading,setTweetsLoading] = useState(true)
+
+    // Function to handle the tweets loading state after tweets have been loaded.
+    const tweetLoadHandler = () => setTweetsLoading(false)
 
-  // Function to handle the tweets loading state after tweets have been loaded.
-  const tweetLoadHandler = () => setTweetsLoading(false);
 
   return (
     <div>
@@ -92,12 +94,9 @@ const Home = () => {
                 </div>{" "}
               </span>
             </a>
-          </div>
+          </div>          
           <div className="video">
-            <YoutubeVideoEmbed
-              videoId="XrWonrp296w"
-              title="🤩 Introducing ReactPlay - An Opensource Platform to Create, Learn, and Share ReactJS Projects"
-            />
+            <YoutubeVideoEmbed videoId="XrWonrp296w" title="🤩 Introducing ReactPlay - An Opensource Platform to Create, Learn, and Share ReactJS Projects" />
           </div>
         </div>
       </section>
@@ -144,11 +143,7 @@ const Home = () => {
           </li>
         </ul>
         <div className="home-ideas">
-          <FaLightbulb
-            className="icon"
-            color="var(--color-brand-primary)"
-            size="48px"
-          />
+          <FaLightbulb className="icon" color="var(--color-brand-primary)" size='48px'/>
           <p className="ideas-lead">Not sure how to get started?</p>
           <p className="ideas-title">We have got lot of ideas</p>
           <Link to="/ideas" className="home-anchor">
@@ -165,33 +160,29 @@ const Home = () => {
         </div>
       </section>
       <section className="home-tweets">
-        <h3 className="title-primary">
-          What Our{" "}
-          <strong>
-            <span>Community</span>
-          </strong>{" "}
-          Says!
-        </h3>
+              <h3 className="title-primary">
+                What Our <strong>
+                       <span>Community</span>
+                  </strong> Says!
+              </h3>
 
-        {isTweetsLoading && <Spinner />}
-        <div
-          className={
-            isTweetsLoading ? "tweets-container" : "tweets-container active"
-          }
-        >
-          {tweetIdArray.map((id) => (
-            <Tweet
-              key={id}
-              tweetId={id}
-              onLoad={tweetLoadHandler}
-              options={{
-                width: "410",
-                conversation: "none",
-                cards: "hidden",
-                align: "center",
-              }}
-            />
-          ))}
+        {isTweetsLoading && (
+          <Spinner />
+        )}
+        <div className={isTweetsLoading ? "tweets-container" : "tweets-container active"}>
+            {tweetIdArray.map((id) => (
+              <Tweet
+                key={id}
+                tweetId={id}
+                onLoad={tweetLoadHandler}
+                options={{
+                  width: "410",
+                  conversation: "none",
+                  cards: "hidden",
+                  align: "center",
+                }}
+              />
+            ))}
         </div>
       </section>
       <section className="home-contributors">
@@ -202,4 +193,4 @@ const Home = () => {
   );
 };
 
-export default Home;
+export default Home;
\ No newline at end of file

From 01b097918e77ef092205b8a9c21d4953fc71e1f1 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 18:10:03 +0530
Subject: [PATCH 22/24] Check tracking

---
 public/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/public/index.html b/public/index.html
index a2affb692..035d32450 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,6 +40,7 @@
       data-website-id="%REACT_APP_UMAMI_TRACK_ID%"
       src="https://analytics.reactplay.io/umami.js"
     ></script>
+    <script async defer data-website-id="ca04431e-a466-4c46-8aff-cce458ae4e24" src="https://reactplay-analytics.vercel.app/umami.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

From 9a2a31569002529df8d5e0c0cb9f71ee370be5e2 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Fri, 19 Aug 2022 18:15:48 +0530
Subject: [PATCH 23/24] Revert "Checking tracking"

---
 public/index.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 035d32450..a2affb692 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,7 +40,6 @@
       data-website-id="%REACT_APP_UMAMI_TRACK_ID%"
       src="https://analytics.reactplay.io/umami.js"
     ></script>
-    <script async defer data-website-id="ca04431e-a466-4c46-8aff-cce458ae4e24" src="https://reactplay-analytics.vercel.app/umami.js"></script>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

From c2d8f665c2b7d344ff4db8680cfba770a29e0859 Mon Sep 17 00:00:00 2001
From: Nirmal Kumar <nirmalkc@gmail.com>
Date: Sat, 20 Aug 2022 10:12:02 +0530
Subject: [PATCH 24/24] adding netlify badge

---
 src/common/footer/ExtendedFooter.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/common/footer/ExtendedFooter.jsx b/src/common/footer/ExtendedFooter.jsx
index b765d26b8..d2bd4cd40 100644
--- a/src/common/footer/ExtendedFooter.jsx
+++ b/src/common/footer/ExtendedFooter.jsx
@@ -92,6 +92,9 @@ const ExtendedFooter = () => {
               </a>
             </div>
           </p>
+          <p className="mt-8 mb-4">
+            <a href="https://www.netlify.com" className="inline-block"> <img src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" /> </a>
+          </p>
         </div>
         <div className='body-secondary'>
           <h3 className='section-title mt-3'>About</h3>