Merge pull request #5 from fre-ben/englishheadline

✨ Add getRandomHeadlineEnglish button

notes.md

@@ -52,7 +52,3 @@ return test;
 dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX
 
 https://api.currentsapi.services/v1/latest-news?language=de&apiKey=dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX
-
-## Todo
-
-- Sport news rausfiltern

src/components/headline/headline.ts

@@ -17,3 +17,21 @@ export function displayGermanHeadline({ headline, link }) {
     ],
   });
 }
+
+export function displayEnglishHeadline({ headline, link }) {
+  return createElement("div", {
+    className: "headline__container",
+    childs: [
+      createElement("p", {
+        className: "headline",
+        innerText: headline,
+      }),
+      createElement("a", {
+        className: "headline__link",
+        href: link,
+        innerText: "Read article",
+        target: "_blank",
+      }),
+    ],
+  });
+}

src/pages/catlinez/catlinez.css

@@ -2,3 +2,9 @@
   display: grid;
   justify-items: center;
 }
+
+.button__container {
+  display: grid;
+  grid-auto-flow: column;
+  gap: 0.5em;
+}

src/pages/catlinez/catlinez.stories.ts

@@ -3,11 +3,14 @@ import { displayHeader } from "../../components/header/header";
 import { createElement } from "../../utils/createElement";
 import {
   getRandomCat,
+  getRandomHeadlineEnglish,
   getRandomHeadlineGerman,
-  randomNumber,
 } from "../../utils/api";
 import { displayCat } from "../../components/cat/randomcat";
-import { displayGermanHeadline } from "../../components/headline/headline";
+import {
+  displayGermanHeadline,
+  displayEnglishHeadline,
+} from "../../components/headline/headline";
 
 export default {
   title: "Pages/Catlinez",
@@ -18,9 +21,9 @@ export const catlinez = (args, { loaded: { cat, headline } }) => {
   const catElement = displayCat(cat);
   const headlineElement = displayGermanHeadline(headline);
 
-  const randomButton = createElement("button", {
-    className: "randomButton",
-    innerText: "Refresh",
+  const randomButtonGer = createElement("button", {
+    className: "randomButtonGer",
+    innerText: "German Catline",
     onclick: async () => {
       const cat = await getRandomCat();
       const headline = await getRandomHeadlineGerman();
@@ -30,10 +33,27 @@ export const catlinez = (args, { loaded: { cat, headline } }) => {
       buildCatlinez.replaceChild(headlineElement, buildCatlinez.childNodes[2]);
     },
   });
+  const randomButtonEng = createElement("button", {
+    className: "randomButtonEng",
+    innerText: "English Catline",
+    onclick: async () => {
+      const cat = await getRandomCat();
+      const headline = await getRandomHeadlineEnglish();
+      const catElement = displayCat(cat);
+      const headlineElement = displayEnglishHeadline(headline);
+      buildCatlinez.replaceChild(catElement, buildCatlinez.childNodes[1]);
+      buildCatlinez.replaceChild(headlineElement, buildCatlinez.childNodes[2]);
+    },
+  });
+
+  const buttons = createElement("div", {
+    className: "button__container",
+    childs: [randomButtonGer, randomButtonEng],
+  });
 
   const buildCatlinez = createElement("div", {
     className: "catlinez__container",
-    childs: [displayHeader(), catElement, headlineElement, randomButton],
+    childs: [displayHeader(), catElement, headlineElement, buttons],
   });
 
   return buildCatlinez;

src/utils/api.ts

@@ -80,3 +80,12 @@ export async function getRandomHeadlineGerman() {
   const headline = convertToText(result);
   return headline;
 }
+
+export async function getRandomHeadlineEnglish() {
+  const response = await fetch(
+    `https://api.currentsapi.services/v1/latest-news?category=general&apiKey=dRj7MBwlYafKn4RJFGHIM--anhE1w_bpXLYKo7hdZIKJW0eX`
+  );
+  const result = (await response.json()) as News;
+  const headline = convertToText(result);
+  return headline;
+}