To run this application in your system:
> open the folder in vs code
> In the terminal, run the command npm install and npm start.
Packages Used :
Axios - allows us to make all kinds of API request
bootstrap - for styling different things in our application
pretty-bytes- Convert bytes to a human-readable string
CodeMirror - Package used for the Editor View in the Response and the Request Parts of the project.(npm i @codemirror/basic-setup @codemirror/view @codemirror/commands @codemirror/lang-JSON)
"index.html" is the file containing all the forms to get the user input. There is a select method to select the type of request made by the user, alongside there is input field of type URL having to get the URL from the user. Then there is an unordered list for the tabs such as "Query Parameters", "Request Headers" and "JSON" tab. Both the "Query Parameters" and "Request Headers" tab have the template to attach the key-value pair along with the request made. In the template, there are 2 input fields one for key and the other for value.
There are 3 Buttons on the Home Page :
1. SEND - To send the request with the given methods, URL, parameters.
2. ADD - To add a Key-value pair in any of the two mentioned tabs.
3. REMOVE - To Delete the Key-Value Pair.
So, the index.html contains all the UI logic and the input fields but all the logic to implement it is contained in the file "script.js".
The file "setupEditor.js" contains the initialization of the JSON editors we are using while Requesting and getting a response from a URL. These editors are made using "@codemirror" basic editors. They are being used along with some extensions that they need. Each editor view needs 2 things one is the state and the other is the parent. There is a function updateResponseEditor() which populates or updates the Response Editor's content when we get a response from a URL and puts it on the screen.