Created
June 8, 2022 07:58
-
-
Save vingkan/fac6eb55530aa3329f3ba5a366b308e3 to your computer and use it in GitHub Desktop.
Example starter code to try out frontend development on CoderPad (React, Vue, or HTML/CSS/JS).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>App</title> | |
| <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script> | |
| <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> | |
| <script src="https://unpkg.com/@babel/[email protected]/babel.min.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@400;700&display=swap'); | |
| body { | |
| font-family: 'Libre Franklin', sans-serif; | |
| } | |
| .App { | |
| padding: 20px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- React Starter Code --> | |
| <div id="root-react"></div> | |
| <!-- Vue Starter Code --> | |
| <div id="root-vue"> | |
| <div class="App"> | |
| <h1>App</h1> | |
| <p>{{ message }}</p> | |
| </div> | |
| </div> | |
| <!-- HTML Starter Code --> | |
| <div id="root-html"> | |
| <div class="App"> | |
| <h1>App</h1> | |
| <p>TODO: Your HTML app here...</p> | |
| </div> | |
| </div> | |
| <script type="text/babel"> | |
| const { useState, useEffect } = React | |
| // React Starter Code | |
| const App = () => { | |
| return ( | |
| <div className="App"> | |
| <h1>App</h1> | |
| <p>TODO: Your React app here...</p> | |
| </div> | |
| ) | |
| } | |
| ReactDOM.render(<App />, document.getElementById('root-react')) | |
| // Vue Starter Code | |
| const app = new Vue({ | |
| el: '#root-vue', | |
| data: { | |
| message: 'TODO: Your Vue app here...' | |
| } | |
| }) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment