Javascript Interaction
For this project, I was given the Show/Hide interaction as my key feature for my project. Doing research on the history of Show/Hide interaction, I found a few ideas of things I could possibly do for this assignment, from a puzzle all the way to a To-Do List.
History of Show/Hide
The Show/Hide interaction has been around for decades and first started off in the early 1990s with the DHTML (Dynamic HTML) to assist in creating user friendly web interfaces. DHTML became useful as it assisted in Dynamic manipulation using javascript, without the webpage having to constantly do full page reloads. The Show/Hide interaction today I used in a variety of web interfaces from hiding fields (Such as passwords or critical information such as a SIN/SSN Number), reducing cognitive overload by gradually having the content reveal using a scroll interaction (Can be seen on Apple’s Individual Product Pages) and lastly it can also be used to organize information. To give an example, take a look at the Finder Application on Mac. When the user wants to open a folder they click on it and the Github folder appears, which hides the Folder that was their before (Folder/Github/Project 1).
Idea
In the process of coming up with an idea for this assignment, I did research on what the interaction actually meant and how it is used in different ways. Ways to protect our information, ways to reduce cognitive overload and ways to create something interactive. First Idea is never the Final one. That’s for sure! I thought about creating a Puzzle of my dog (Yes he’s a Pomeranian) and it would have this sliding feature where as you drag a square = each square removed which reveals more of the photo. But then I released that is taking the attention away from the show/hide interaction in the first place. The next Idea I had in mind is memory card game. I thought it would be cool to use Apple iOS emoji’s (Animals) for this one as it’s most popular to date. Next I explored 2 different to-do lists. One was for mobile regarding courses and the other one was for personal use. I gained inspiration from apps like notes, notion and TODO. I went back and looked at the project sheet and realized that it has to be for the web so I came up with another Idea where once you land on the page you can press show list to display the list or hide list which hides it.
Code Application
First off, I set up a toggle button to show or hide the list container. Then, I made sure users can add items to the list using an input field and a button. I also added some cool functionality: when you press Enter in the input field, it triggers the same action as clicking the button to add an item. Plus, for each item in the list, there's a little remove button that pops up when you add a new item. The best part? You can remove items just by clicking on those buttons.
