DOM Manipulation Lab

In this lab, you will create an HTML page with a selection of input and buttons. You are required to use JavaScript to perform DOM manipulation based on users' actions. The primary goal is to work with the fundamentals of DOM Manipulation using JavaScript's getElementById, querySelector, and event listeners.

The final outcome of the lab should include the following elements and functionalities:

1. An input field with the id input-text
2. A button with the id uppercase-btn that capitalizes the text in the input field when clicked
3. A button with the id lowercase-btn that converts the text in the input field to lowercase when clicked
4. A button with the id reset-btn that clears the input field when clicked
5. A span element with the id output to display the transformed text

Functionalities

1. Uppercase Button

When a user clicks on the uppercase button, the text inside the input box and the output text should be made uppercase

2. Lowercase Button

Clicking on the lowercase button should make the text inside the input box and the output to lowercase.

3. Reset Button

Clicking on the reset button would clear the input box and the output text