* Add styles-loader into webpack

* Fix eventListner capitalisation

lib/createElement.js

@@ -16,7 +16,10 @@ export const createElement = (element, props = {}, ...children) => {
     Object.keys(props)?.map((propName) => {
       if (propName.includes("on")) {
         // if prop is of event type then add event listener
-        _htmlElement.addEventListener(propName.slice(2), props[propName]);
+        _htmlElement.addEventListener(
+          propName.slice(2).toLowerCase(),
+          props[propName]
+        );
       } else if (propName.toLowerCase() === "classname") {
         // if prop is className
         _htmlElement.setAttribute("class", props[propName]);

src/components/button/button.css

@@ -0,0 +1,20 @@
+.__btn {
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 1.25rem;
+  outline-offset: 1px;
+  padding: 1.25rem 3rem;
+  border-radius: 0.5rem;
+  border: 1px solid #1a1a1a;
+  outline: 1px solid transparent;
+  transition: all 0.375s ease-in-out;
+}
+
+.__btn:hover,
+.__btn:focus {
+  color: #fafafa;
+  outline-offset: 1px;
+  border: 1px solid #fafafa;
+  background-color: #1a1a1a;
+  outline: 1px solid #1a1a1a;
+}

src/components/button/button.js

@@ -1,7 +1,11 @@
 import OwnReact from "../../../lib/index";
+import "./button.css";
 
 const Button = (children) => {
-  return <button>{children}</button>;
+  const handleClick = () => {
+    alert("Button clicked");
+  };
+  return <button className="__btn" onClick={() => handleClick()}>{children}</button>;
 };
 
 export default Button;

webpack.config.js

@@ -9,6 +9,10 @@ module.exports = {
         exclude: /node_modules/,
         use: ["babel-loader"],
       },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
     ],
   },
   resolve: {