Tuesday, January 29, 2019

Expandable search bar

Once again, one of those "basic" projects, but I had a few issues until I made it to work the way I imagined.

This was my first try 


Everything worked fine, except the typewritter effect that I wanted to achieve. The letters were showing up, but not the way I wanted. They were showing one by one and then disappearing, and I wanted them to show up without disappearing. After 40+ minutes of fiddling around and googleing, somehow I manage to come up with my own solution and it looks like this


So, I just dropped getAttribute and simply displayed input message as a current character that is added from placeholderMessage variable into inputMessage variable when typeWriterEffect function runs.

Also, I've used classList API add, toggle and remove methods to manipulate with CSS.

Github link

No comments:

Post a Comment