Since starting the development of a call-to-action (CTA) button for IST 402, I have encountered quite a few challenges while learning a lot about open web components and LitElement. My partner and I chose to develop a CTA button modeled after a circular button on an e-commerce clothing site, which would act as a building block for learning about atomic web design.
Progress
Thus far, my partner and I have created the button component itself, linked it, and have completed a lot of the responsive CSS behavior for the button itself. This includes resizing the button when different text is inserted into it, as well as changes in state when it is hovered over and focused on. We plan to also create behavior for "active" and "disabled" states, and are currently working on these. In addition, we've added optional icon support that features conditional rendering, allowing for the creation and removal of an icon in our button from the "inspect" tab of a browser. We have began working on our button's dark mode behavior as well, designing a way for dark mode to be initiated within the button's tag.
Here is the repository that exhibits our progress thus far: circle-button-ad Repository
Challenges
Building a responsive, reusable circular button is hard. As the lead developer in my partner team, I learned this very quickly and figured out my knowledge of CSS was not great almost immediately. That said, lots of browsing CSS on overly-specific sites has led to me learning a lot more about it than I assumed I would when starting this button. I can proudly say I know more about styling a button than I did when I started this assignment.
As web components are something I've never extensively worked with until now, this also presented a learning curve. LitElement seemed intuitive when I was using a hello-world boilerplate, but getting familiar with its inner workings took more time than I'd like to admit. This isn't a shortcoming of the structure so much as it is my lack of experience with it. As I've continued to work in the directory structure that our web component is set up, I've become more familiar with it and feel that my understanding of our button has gotten much better. For instance, learning how the demo folder's index.html file interacts with my JavaScript file in my src folder has allowed me to vastly improve the way I visually test the functionality of our button--and increase its customizability.
Top comments (0)