Line breaks are now preserved

Author: ashirrwad

frontend/src/App.css

@@ -41,3 +41,7 @@
 
 }
 
+.output-formmating{
+  white-space: pre-wrap;
+
+}

frontend/src/App.js

@@ -12,12 +12,20 @@ import RunCode from './run.png'
 import ResetCode from './reset.png'
 import InputBox from './InputBox';
 
+
+function NewlineText(props) {
+  const text = props.text;
+  return <div className='output-formmating'>{text}</div>;
+}
+
+
 function App() {
   const [ text, setText ] = useState('') //State to store editor code
   const [output, setOutput] = useState('')//State to store output
   const [isLoading, setIsLoading] = useState(false);//Loading animations
   const [ input, setInput ] = useState('')
 
+  
   const handleInputChange = (e) => {
     e.preventDefault(); // prevent the default action
     setInput(e.target.value); // set name to e.target.value (event)
@@ -78,12 +86,14 @@ function App() {
             <Card.Body>
 
               <Card.Text>
+                {/* Spinning Animation While Request is processed */}
               {isLoading ? <p className='loading'><Spinner animation="border" size="sm" /></p> : null}
-                {output}
+                <NewlineText text={output} />
               </Card.Text>
 
             </Card.Body>
           </Card>
+          {/* Input Box to provide input for program */}
           <InputBox value={input} onChange={handleInputChange}/>
       </div>