Merge pull request #1 from fre-ben:randomcat

🚀 create getRandomCat function

notes.md

@@ -0,0 +1,48 @@
+# 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.
+
+## Random cat
+
+// Schema von random.cat
+export type Cat = {
+file: string;
+};
+
+export type Cats = {
+results: Cat;
+};
+
+// Infos die ich brauch von der CatAPI
+export type RandomCat = {
+imgSrc: string;
+};
+
+function convertToImage(randomCat: Cat): RandomCat {
+return {
+imgSrc: randomCat.file,
+};
+}
+
+export async function getRandomCat() {
+const response = await fetch(`https://aws.random.cat/meow`);
+const result = (await response.json()) as Cat;
+const test = convertToImage(result);
+// const test = result.map((randomCat) => convertToImage(randomCat));
+console.log(result);
+return test;
+}

src/components/cat/cat.css

@@ -0,0 +1,2 @@
+.catImg {
+}

src/components/cat/cat.stories.ts

@@ -0,0 +1,20 @@
+import "./cat.css";
+import { displayCat } from "./randomcat";
+import { createElement } from "../../utils/createElement";
+import { getRandomCat } from "../../utils/api";
+
+export default {
+  title: "Components/Hello Cat",
+  parameters: { layout: "centered" },
+};
+
+//Get Random Cat Gif from API
+export const CatFromAPI = (args, { loaded: { cat } }) => {
+  return displayCat(cat);
+};
+
+CatFromAPI.loaders = [
+  async () => ({
+    cat: await getRandomCat(),
+  }),
+];

src/components/cat/randomcat.ts

@@ -0,0 +1,9 @@
+import { createElement } from "../../utils/createElement";
+
+export function displayCat({ imgSrc }) {
+  return createElement("img", {
+    className: "catImg",
+    src: imgSrc,
+    alt: "cat",
+  });
+}

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/api.ts

@@ -0,0 +1,38 @@
+import { ClassificationType } from "typescript";
+
+//TheCatAPI
+// Schema von CatAPI
+export type Cat = {
+  breeds: string[];
+  categories: string[];
+  id: string;
+  url: string;
+};
+
+// Infos die ich brauch von der CatAPI
+export type RandomCat = {
+  imgSrc: string;
+};
+
+function convertToImage(randomCat: Cat): RandomCat {
+  return {
+    imgSrc: randomCat.url,
+  };
+}
+
+export async function getRandomCat() {
+  const response = await fetch(
+    `https://api.thecatapi.com/v1/images/search?mime_types=gif`,
+    {
+      headers: {
+        "x-api-key": "4ed34816-c19f-4144-9082-b2ffc3df0e40",
+      },
+    }
+  );
+  const result = (await response.json()) as Cat[];
+  const test = convertToImage(result[0]);
+  console.log(result[0]);
+  return test;
+}
+
+// News API

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;
+}