🚀 Initial project setup, ready for getRandomCat

notes.md

@@ -0,0 +1,17 @@
+# API Info
+
+## TheCatAPI
+
+Thanks for signing up, welcome to the API!
+
+Your API key:
+
+4ed34816-c19f-4144-9082-b2ffc3df0e40
+
+Use it as the 'x-api-key' header when making any request to the API, or by adding as a query string paramter e.g. 'api_key=4ed34816-c19f-4144-9082-b2ffc3df0e40' More details on authentication.
+
+API Documentation | Postman Collection.
+
+If you need any example code, or have any questions then checkout the forum: https://forum.thatapiguy.com
+
+All the best, Aden.

src/components/cat/cat.stories.ts

@@ -0,0 +1,10 @@
+import "./cat.css";
+import { helloCat } from "./randomcat";
+import { createElement } from "../../utils/createElement";
+
+export default {
+  title: "Components/Hello Cat",
+  parameters: { layout: "centered" },
+};
+
+export const helloucat = () => helloCat;

src/components/cat/randomcat.ts

@@ -0,0 +1,5 @@
+import { createElement } from "../../utils/createElement";
+
+export const helloCat = createElement("p", {
+  innerText: "Hello cats!",
+});

src/pages/welcome/welcome.css

@@ -1,15 +0,0 @@
-.welcome {
-  height: 100vh;
-  width: 100vw;
-  background-color: #1fc8db;
-  background-image: linear-gradient(
-    141deg,
-    #9fb8ad 0%,
-    #1fc8db 51%,
-    #2cb5e8 75%
-  );
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}

src/pages/welcome/welcome.html

@@ -1,5 +0,0 @@
-<main class="welcome">
-  <img class="avatar" src="../../assets/dog.jpg" alt="Dog" />
-
-  <h1>Woof 🐶!</h1>
-</main>

src/utils/createElement.ts

@@ -0,0 +1,14 @@
+export function createElement<K extends keyof HTMLElementTagNameMap>(
+  tagName: K,
+  props: Partial<HTMLElementTagNameMap[K]> & {
+    childs?: HTMLElement[];
+  }
+): HTMLElementTagNameMap[K] {
+  const element = document.createElement(tagName);
+  const { childs, ...other } = props;
+  Object.assign(element, other);
+  if (childs) {
+    element.append(...childs);
+  }
+  return element;
+}