Query Parameters

 

Page Elements

​

We added a form with 3 sections:

​

• Add query params:

  • 2 text inputs for entering the query param key and value

  • Add button

  • Text element for displaying messages

​​

• Remove query params:

  • Text input for entering the query param key to remove

  • Remove button

  • Text element for displaying messages

​​

• Get query params:

  • Text element for displaying the current query params

  • Get button

 

Code

​

Our site contains the following code:

​​

• When the Add button is clicked, do the following:

1. If the input values are valid, add the query param to the URL displayed in your browser, change the Add button text to “Add another one”, show a success message, and reset validity indicators.

2. If the input values are not valid, display an error message.

​

• When the Remove button is clicked, do the following:

1. Grab the value of the query param key to remove and reset the input.

2. If the displayed URL has a query section and the query has a key matching the input value, remove the query param and show a success message.

3. If there is no query param with the specified key, show an error message.

​

• When the Get button is clicked, do the following:

1. Check if the displayed URL has a query section. If it does, display the queries in the text element. 

2. Since the queries are part of a JSON object, we use the JSON.stringify() JavaScript function to convert the queries into a string that can be displayed in a text element.