Develop a pseudo Front End Editor in React or Vue (Vanilla or Angular not allowed) which would let the users code on the left and output the result on the right. This will be a HTML, CSS, JS Editor
Open the online demo here
- Embed ACE Editor on the left part of the screen.
- Display an IFrame on the right part of the screen.
- Implement a Run button clicking which the HTML, CSS, JS code on the left (user submitted code in the Editor) gets executed a similar to a browser in the IFrame on the right.
- Implement proper error handling. There must be no frame distortion/mirroring.
- Responsive for Mobile Screens. Editor on top, IFrame on the bottom.
- A feature to Save the Code written in a file called ‘download.txt'.
- Implement a Dark Mode.
-
W3Schools Try it Editor - https://www.w3schools.com/tryit/tryit.asp?filename=tryhtml_default
Note: Implement an Editor similar to this.
The project uses Node.js >= 6.x and the Create-React-App starter code.
After Node is installed in your system, follow the below steps.
- Navigate to the directory where you want to store the app.
- Clone the repo
git clone https://github.com/manish-dalal/playment-frontend.git
- Now install all modules listed as dependencies in
package.json
by running the commandnpm install
- Launch the app with this command
npm start
A new browser window open automatically displaying the app. If it doesn't, navigate to http://localhost:3000/ in your browser
NOTE: The service workers for this app will only cache the site when it is in production mode.
- Build the production ready optimised code.
npm run build
- Deploy it to
gh-pages
branch bynpm run deploy
- Check the online demo here