Independent react site

.gitignore

@@ -1,10 +1,11 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+/ReactFrontend/node_modules
 /.pnp
 .pnp.js
 
+
 # testing
 /coverage
 
@@ -17,7 +18,9 @@
 .env.development.local
 .env.test.local
 .env.production.local
+__pychache__
 
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+node_modules

README.md

@@ -6,6 +6,7 @@
 
 **CodeCapture** is a Progressive Web App designed to bridge the gap between pen-and-paper coding and coding on a computer using mobile phones, allowing users to learn coding without typing. 
 
+
 CodeCapture has the functionality to extract JavaScript code from images of handwritten text and then allows the user to edit and compile it within their browser. We also have an hour-long lesson on the fundamentals of JavaScript to assist with students' Computer Science education especially in times like these, where the COVID-19 pandemic and enforced lockdown have kept students away from school. Having a PWA allows the user to run it on both their computer as well as mobile devices, thus increasing its accessibility significantly.
 
 ## Inspiration

package.json

@@ -9,14 +9,18 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "ace-builds": "^1.4.12",
+    "axios": "^0.20.0",
     "react": "^16.13.1",
     "react-ace": "^9.1.3",
     "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "3.4.3"
+    "react-scripts": "3.4.3",
+    "react-webcam": "^5.2.3"
   },
   "scripts": {
     "start": "react-scripts start",
+    "start-api": "cd api && venv\\Scripts\\activate &&  flask run --no-debugger",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -35,5 +39,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "proxy": "http://localhost:5000"
 }

src/App.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import Main from './components/Main';
 
+
 function App() {
   return <Main/>
 }

src/components/EditorPage/Editor.js

@@ -1,27 +1,28 @@
-import React from "react";
-import AceEditor from "react-ace";
-
+import React, { useState} from "react";
+import AceEditor from "react-ace"; 
 import "ace-builds/src-noconflict/mode-java";
 import "ace-builds/src-noconflict/theme-github";
-
-function onChange(newValue) {
-  console.log("change", newValue);
-}
-
-// Render editor
+
 function Editor() {
+    const [editorText, setEditorText] = useState(window.sessionStorage.getItem('code'));
+
+  const onEditorChange = (val) => {  
+      setEditorText(val); 
+         window.sessionStorage.setItem('code',val);  
+        }
+
   return <AceEditor
-  placeholder="Placeholder Text"
+  // placeholder="Placeholder Text"
   mode="javascript"
   theme="monokai"
-  name="blah2"
-  onChange={onChange}
+  name="blah2"    
+    onChange={(newValue)=>onEditorChange(newValue)}  
   width="100%"
   fontSize={14}
   showPrintMargin={true}
   showGutter={true}
   highlightActiveLine={true}
-  value={`console.log("Hello world!")`}
+  value={editorText}
   setOptions={{
   enableBasicAutocompletion: true,
   enableLiveAutocompletion: true,

src/components/EditorPage/EditorPage.js

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 import Editor from './Editor';
-import STDIN from './STDIN'
 import { Container,Grid,Button,Typography } from '@material-ui/core';
 import { Link } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
@@ -16,8 +15,27 @@ const useStyles = makeStyles((theme) => ({
     },
 }));
 
+
 function EditorPage() {
     const classes = useStyles();
+
+    useEffect(() => {
+        if (window.console) {
+            console = { 
+                log: function(){
+                    var output='',
+                        console=document.getElementById('console');
+                    for (var i=0;i<arguments.length;i++) {
+                        output+=arguments[i]+' ';
+                    }
+                    console.innerText+=output+"\n";
+                },
+                error : window.console.error
+            };
+        }
+    },[])
+
+
     return (
         <Container>
             <br/>
@@ -35,12 +53,20 @@ function EditorPage() {
                 </Grid>
             </Grid>   
             <br />
-            <STDIN/>
             <Grid row>
             <Grid item justify="flex-end" align="right">
                 <div className={classes.root}>
+                <Link to="/done">
+                    <Button variant="contained" color="secondary" component="span">
+                    One hour is up, finish
+                    </Button>
+                </Link>
                     <Link to="/out">
-                        <Button variant="contained" color="secondary" component="span">
+                        <Button 
+                            variant="contained" 
+                            color="secondary" 
+                            component="span"
+                            >
                             Show output
                         </Button>
                     </Link>

src/components/ExitPage/Exit.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Container, Grid, Button } from '@material-ui/core';
 import '../LandingPage/landing.css';
-
+import { Link } from 'react-router-dom';
 const Exit = () => {
 
   return (
@@ -10,21 +10,33 @@ const Exit = () => {
       <Grid row>
         <Grid item lg={12}>
           <div class="content">
-            <h2> Thank you for using Code Capture! </h2>
-              <h3>
-                {`If you have the time, please fill put a short feedback of the platform!\n
-                Then please head over to the HoC site to collect your certificate.`}
-              </h3>
-              <hr />
-
-              <Button variant="contained" color="secondary" >
+              <Grid row >
+                <Grid item xs={12}>
+                  <h2> Congrats! </h2>
+                  <h3>
+                    {`You have successfully learned the basics of programming and computer science using JavaScript!`}
+                  </h3>
+                  <hr />                  
+                </Grid>
+              </Grid>
+              <Button
+                href="https://forms.office.com/Pages/ResponsePage.aspx?id=oBzDhDusrk6tEVGdgCM-b9YMMgNwDuhOiA0KAnfv2aVUQ09VMlVEOEVIUEhJRjFUSTMxVkxVR0IxSS4u"
+                target="_blank"
+                variant="contained" color="secondary" style={{ margin: "20px" }}>
                 Give Feedback
               </Button>
-              <br />
-              <br/>
-              <Button variant="contained" color="secondary" >
+              <Button href="http://code.org/api/hour/finish" 
+                target="_blank"
+                variant="contained" color="secondary" >
                 Collect your certificate!      
               </Button>
+              <br />
+              <br />
+              <Link to="/">
+                    <Button variant="contained" color="secondary" component="span">
+                    Back to home page
+                    </Button>
+              </Link>
           </div>
         </Grid>
       </Grid>

src/components/InstructionPage/Instructions.js

@@ -23,7 +23,7 @@ export default function Instructions() {
     <Container>
       <br/>
       < Typography variant="h2" align="center">
-        Instructions for the activity
+        Instructions For The Activity
       </Typography>
       <Grid
         row
@@ -35,7 +35,7 @@ export default function Instructions() {
         >
           <iframe
             title="ppt"
-            src="https://onedrive.live.com/embed?cid=703B19A0781C4859&amp;resid=703B19A0781C4859%21148&amp;authkey=AHvfQz-RUmtl0Co&amp;em=2&amp;wdAr=1.7777777777777777"
+            src="https://onedrive.live.com/embed?cid=703B19A0781C4859&amp;resid=703B19A0781C4859%21157&amp;authkey=AGUrpqVqRZGBX_E&amp;em=2&amp;wdAr=1.7777777777777777" 
             frameborder="0"
           >
             This is an embedded
@@ -47,10 +47,15 @@ export default function Instructions() {
                 Office
             </a>.
           </iframe>
-
+        
         </Grid>
         <Grid item justify="flex-end" align="right">
         <div className={classes.root}>
+            <Link to="/done">
+              <Button variant="contained" color="secondary" component="span">
+                One hour is up, finish
+              </Button>
+            </Link>
             <Link to="/upload">
               <Button variant="contained" color="secondary" component="span">
                 Continue
@@ -59,8 +64,8 @@ export default function Instructions() {
         </div>
         </Grid>
       </Grid>
-      <br />
-
+      <br/>
+      <img alt="" src="http://code.org/api/hour/begin_codecapture.png"/>
     </Container>
   );
 }

src/components/LandingPage/Landing.js

@@ -10,8 +10,21 @@ const Landing = () => {
     <Container>
       <Grid row>
         <Grid item lg={12}>
-          <div class="content">
-            <h1>Code Capture</h1>
+          <div className="content">
+            <Grid
+                row
+                justify="center"
+                alignItems="center"
+            >
+            <Grid item align="center">           
+                  <img
+                    alt=""
+                    src="https://upload.wikimedia.org/wikipedia/commons/8/84/CodeCapture-Edit.png"
+                    height="40%"
+                    width="40%"
+                  />
+            </Grid>
+            </Grid>
             <h3>From pen and paper to editor and compiler!</h3>
             <hr />
             <Link to="/instructions">

src/components/LandingPage/landing.css

@@ -16,11 +16,11 @@ h1 {
 }
 h2 {
 	font-weight: 500;
-	font-size: 5em;
+	font-size: 4em;
 }
 
 .content{
-	padding-top: 20%;
+	padding-top: 5%;
 	text-align: center;
 }
 
@@ -31,7 +31,7 @@ h2 {
 }
 
 hr {
-    width: 400px;
+    width: 80%;
     border-top: 1px solid #f8f8f8;
     border-bottom: 1px solid rgba(0,0,0,0.2);
 }