Today, I wanted to mess around with building a front-end component library, so I’m calling it “fe libra” for now. It’s nothing fancy, just a little project to learn some stuff.
Getting Started
First, I created a new project folder. I’m keeping it super simple, no complicated build tools or anything yet. Just a plain HTML file, a CSS file, and a JavaScript file.
I created these file:
I opened up and typed in the basic HTML structure. You know, the <html>, <head>, and <body> tags. Then I added my with <link> tag, and with <script> tag.
The First Component: A Button
I figured I’d start with the most basic thing: a button. In my , I just added a regular <button> tag with some text, like “Click Me!”.
Then, over in , I gave the button some basic styling. I played around with the background-color, color, padding, and border to make it look decent. Nothing too crazy, just something to make it not look like a default browser button.
Making it a “Component”
Now, to make it feel a bit more like a “component”, I jumped into . I used to grab that button element.
Then added a click event listener. I made a function to change the text to be “Clicked”.
Adding More
Once I got the button working, I basically repeated the process for a couple more components. I made a simple input field and a basic card-like container. For each one, I added the HTML, styled it in the CSS, and if it needed any interactivity, I added a little bit of JavaScript.
What I Learned
This whole thing was pretty basic, but it helped me to think to add basic element and interact with them.
It’s definitely not a production-ready library or anything, but it was a fun way to spend an afternoon!
