Hello Query Parameters

Page Elements

On the HOME page, we added 3 containers, each containing elements for one of the 3 query parameter actions.

In the first container, we added 2 text inputs: one for the query parameter key and the other for the value. We also added a button to trigger the adding or updating of query parameters. If the key doesn't already exist, a new query parameter will be added. If the key already exists, the existing query parameter's value will be updated.

In the second container, we added a text input for the key of the query parameter to remove. We also added a button to trigger the removal of the query parameter.

In the third container, we added a text box to display the current query parameters in the URL.

Page Code

On the HOME page, we added code to implement 3 query parameter actions in 3 button event handlers.

In the first event handler, we read the values from the text inputs and format them as the key and value of a property in an object. Then we call the `add()` function to add the query parameter to the URL. Note that if a query parameter with the specified key already exists in the URL, the `add()` function performs an update on the existing parameter.

In the second event handler, we read the key value from the text input. Since the `remove()` function expects an array of keys, which allows it to remove multiple query parameters at once, we wrap our key value in an array. Then we call the `remove()` function to remove the query parameter with the specified key from the URL.

In the third event handler, we read the query information from the URL using the `query` property. This gives us an object where each key:value pair represents a query parameter from the URL. We then display that object in the text box.