DOM Manipulation Lab
Easy
52
64.6% Acceptance
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:
- An input field with the id
input-text
- A button with the id
uppercase-btn
that capitalizes the text in the input field when clicked - A button with the id
lowercase-btn
that converts the text in the input field to lowercase when clicked - A button with the id
reset-btn
that clears the input field when clicked - A
span
element with the idoutput
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