Add : API for Linking code samples from Fortran-lang.org and FortranTipBrowser (Resolves #51 and webpage #161)

README.md

@@ -142,6 +142,15 @@ mode, set `REACT_APP_PLAYGROUND_API_URL` to `http://localhost:5000`.
 If deploying to production, `REACT_APP_PLAYGROUND_API_URL` should be set to
 `https://play-api.fortran-lang.org`.
 
+### Loading Fortran code from your website in the playground
+
+The Playground can Load code from your website by adding a parameter `code` to the URL of Playground. Please **Note:** that the value of the parameter code has to be fortran code which has been **URL Encoded** . This can be done by using JS function `encodeURIComponent()` with the code as its parameter. 
+
+Example: https://play.fortran-lang.org/?code=program+hello%0D%0A++%21+This+is+a+comment+line%3B+it+is+ignored+by+the+compiler%0D%0A++print+%2A%2C+%27Hello%2C+World%21%27%0D%0Aend+program+hello%0D%0A
+
+Here, the fortran program for Hello World has been URL encoded and set to parameter `code` in the URL.
+
+
 ## Deploying to production
 
 This is a guide for deploying the Python backend to production.

frontend/src/App.js

@@ -37,6 +37,8 @@ function App() {
   const [stdlibOn, setstdlibOn] = useState(false); // state to store package info
   const [exercise, setExercise] = useState(0) // Tutorial Exercise
   const [showTutorial, setshowTutorial] = useState(false)
+  const queryString = window.location.search;
+  const urlParams = new URLSearchParams(queryString);
 
   // Handle tutorial buttons
   const goRight = () => {
@@ -109,9 +111,19 @@ const tutfunc = (TutorialCode) =>{
     setText("")
   }
 
+  const loadCode = () => {
+    setText(urlParams.get('code'))
+  }
+
+  const handleKeyDown = event => {
+    if (event.key === 'Control' || event.key === 'Command') {
+      handleClick();
+    }
+  };
+
 
   return (
-    <div className="App">
+    <div className="App" onLoad={loadCode} tabIndex={0} onKeyDown={handleKeyDown}>
       {/*Navbar*/}
       <div style={{paddingBottom: "0.5rem"}}><Navigationbar/></div> 
       <div className='code-wrapper'>