**Challenge**:
Your goal is to create a button that, when clicked, will either show or hide a block of text depending on its previous state. The button should be styled and have a clean transition when hovered over. On top of that, the text of the button should change depending on its feature (eg. "Show" vs "Hide"). You can use your own colors and fonts.

**Hints:**
 - Use event listeners
 - Use a variable to keep track of state
 - Remember pseudoclasses and transitions for the styling!

**Topics Covered:**
 - Transitions
 - Event listeners
 - DOM Manipulation

**Other Information**:
 - Button text color: #595959
 - Button border color: #4a4a4a;
 - Button hover text color: #9a9a9a;
 - Button hover border color: #ababab;

**Extended Challenge**:
Add a feature to add text to the page with an input.

**Challenge**:

Your goal is to create a button that, when clicked, will either show or hide a block of text

depending on its previous state. The button should be styled and have a clean transition when

hovered over. On top of that, the text of the button should change depending on its feature (eg.

"Show" vs "Hide"). You can use your own colors and fonts.

**Hints:**

- Use event listeners

- Use a variable to keep track of state

- Remember pseudoclasses and transitions for the styling!

**Topics Covered:**

- Transitions

- Event listeners

- DOM Manipulation

**Other Information**:

- Button text color: #595959

- Button border color: #4a4a4a;

- Button hover text color: #9a9a9a;

- Button hover border color: #ababab;

-2:08