- If you haven't already, set up Git using this guide
- If you haven't alread, install NodeJS and NPM using this guide
- Fork this repository using this guide
- Install dependencies by typing 'npm install' in the command line while in the project
- Start the server with 'npm start' and open http://localhost:8090 in your browser (NOTE: if this does not work, try using 127.0.0.1 instead of localhost, you'll have to change the endpoint URI's in the client.js too)
When updating front-end code, refresh the page to see changes. I have not set up hot reloading.
This is a project to practice working with an API and GitHub. I will write down some things I think would be useful to give a go as a rough guideline, but feel free to just have a mess around with the code and come up with something yourself!
This aims to provide a basic introduction into using an API!
- Select the h1 element with 'Hello!' in it help (NOTE: use client.js, not the script tags for your JavaScript)
- Modify the exampleGETRequest in client.js to change the h1 element text to testText
- Refresh the page and boom! You have made your first API call! It's that easy!
The typical way that JavaScript is used in the browser is by handling events (such as clicking a button, or in this case, when the page loads) and calling a function (to handle the event, usually involving an API request or some form of action).
- Make a form in index.html, including one text input and a submit button
- In client.js, make it so that the submit button will console.log() (this is print() in Python) the text in the input field of the form. To view the console, use Inspect Element in your browser and click on the Console tab. help, more help
- Modify examplePOSTRequest to get the input of the form
- Modify the form submit event listener to call examplePOSTRequest instead of console.logging the text field on submit
- Check the test.json file to confirm that you have added a new message to the database!
Well done! POST and GET requests are the two main types that you will use. The next steps are a bit more vague so that you're able to do some of your own digging online. A bit of advice before going onto this section, async functions are used for calling API's. This is because the information won't be returned immediately, and await executes the code whenever the information is ready. If you want to look into this more, read up on promises.
- Now that you have the GET and POST requests working, change url in the GET request to the other GET request in app.js (the back-end). Get the last element of the array in test.json using this API endpoint.
- When the form submits, make it so that the POST request is called, then the GET request so that the h1 automatically updates to the submitted value. You may want to research anonymous or arrow functions to use as the callback to make your code a bit tidier.
Your code is saved on your local device, but to publish the changes, use the Source Control tab on the left in VSCode to submit your changes to your repo on GitHub!
This will a lot more loose and feel free to mess around! Make sure to read app.js, it's okay to not understand what every line does, but the necessary endpoints will be in there.