For my Web components class at Penn State, we have been tasked with creating a Call-To-Action(CTA) button. So for my partner and I have some basic CSS applied to our button so we can visualize the changes in states: disabled, active/hover, and active/clicked. In general, our project currently is just a template of everything we need to still complete. We still need to work on the disabled state, inverted/high contrast mode, and the finalized styling to have a circular button instead of a rectangular button.
Our progress has not been without challenges though; mainly understanding the requirements for the project and understanding the Open-WC boilerplate. My partner and I midunderstood the directions since we initially did not have a tag and we tried to make a button from scratch. Once we had a chance to meet with the professor again we realized we needed to have the tag and that immediately helped solve a lot of our issues. Since I am still new to web components, I did have trouble figuring out where the tests, storybook, and styling of the component took place in the example.
So far I have learned the basics of the Open-WC framework and how powerful web components are. I now understand the directory structure of this project and how useful storybook is! Also, web components are an example of practicing DRY(Don't Repeat Yourself) in web development. Especially in large organizations having the same look, feel, and function to web components is essential. My partner and I still have work to do and I still have tons to learn from here the rest of the semester!
Link to the current element: https://github.com/3B4B/circle-button-fj
Top comments (0)