Custom Features
Created/Implemented
Part 2
Expand Full Text Link
This client wanted to make his news page look better by limiting the number of uneven sections he had. To make sure his sections stayed a certain size, he wanted to set a limit on the amount of text showing at one time and a expand button to read the full text.
To accomplish this, I added code to go through the sections and restructure the text if it was over a specified amount of characters. The restructured code included a link for expanding the text. The customer was happy with the results.
Scroll Effects
At Twenty Over Ten, we had a shared collection of code snippets that would help us be more efficient. During a call with a client, they asked for help implementing a fade-in effect on an image they had in a scrollable modal window.
Using the code snippets, I attempted to set up a fade-in effect when scrolling to the image. However, the code that was available didn't work due to the scroll only observing the window and not the scrollable modal element.
I attempted to fix it by googling the issue, but none of the solutions seemed to match the situation. However, a class I was taking mentioned the Intersection Observer API, which worked to observe the element within the scrollable modal. Upon reading the documentation, I discovered this was a better approach than the other code snippet, so I added a new one using this new feature.
I was also able to give a presentation on the feature, which many on the front-end design team found useful.
Lakeshore Capital Group Our Fees Page
This client had a lot of information about their service fees that they needed help displaying clearly. I was able to come up with the following design and custom accordion feature that accomplished their needs.
This challenge proved to be difficult due to a large amount of data, but I was able to come up with a design that helped divide up the information without losing any. The solution included multiple headlines and expandable service levels highlights. The client was happy with the results.
