Created
October 1, 2021 02:55
-
-
Save starmer/e7ba9da2e75de5bdd6ea55b2884b41a1 to your computer and use it in GitHub Desktop.
Coderpad.io interview sandbox introduction
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>React Pad</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://unpkg.com/@babel/[email protected]/babel.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="root"/> | |
| </body> | |
| </html> | |
| <script> | |
| const {useState, useEffect} = React; | |
| // STEP 1 | |
| // Go to https://app.coderpad.io/sandbox | |
| // Select HTML/JS/CSS | |
| // Select "Revert to single pane" in the HTML pane | |
| // Paste this code into the pane | |
| // STEP 2 | |
| // add the code to increment and decrement the counter and update the variable in the count div | |
| const Counter = () => { | |
| const [count, setCount] = useState(0); | |
| const increment = () => { | |
| // ADD CODE HERE | |
| } | |
| const decrement = () => { | |
| // ADD CODE HERE | |
| } | |
| return ( | |
| <div className="count"> | |
| <button onClick={increment}>+</button> | |
| {count} | |
| <button onClick={decrement}>-</button> | |
| </div> | |
| ); | |
| } | |
| // STEP 3 | |
| // Add the code to retrieve a random post from the API and display it in the post div | |
| const Post = () => { | |
| const [post, setPost] = useState(""); | |
| const url = "https://jsonplaceholder.typicode.com/posts"; | |
| const fetchData = async () => { | |
| //ADD CODE HERE | |
| }; | |
| useEffect(() => { | |
| fetchData(); | |
| },[]); | |
| return ( | |
| <div className="post"> | |
| <div>{post}</div> | |
| <button onClick={fetchData}>more</button> | |
| </div> | |
| ); | |
| } | |
| const App = () => { | |
| return ( | |
| <div className="App"> | |
| <Counter /> | |
| <Post /> | |
| </div> | |
| ) | |
| } | |
| ReactDOM.render(<App />, document.getElementById('root')) | |
| </script> | |
| <style> | |
| .instructions { | |
| width:500px; | |
| border:2px solid black; | |
| border-radius:20px; | |
| background: linear-gradient(#fff 10%, #f1f1f1 98%, #ccc); | |
| padding:0 20px 20px; | |
| font-family: monospace; | |
| } | |
| body { | |
| background: #def; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3a. The function to call the API occurs is invoked both on page load (useEffect), and also onClick of the button. I am guessing we only want to call onClick?