✨ Add article link to function

fre-ben · Feb 13, 2021 · a6b81b8 · a6b81b8
1 parent 8ea9d67
commit a6b81b8
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/headline/headline.stories.ts b/src/components/headline/headline.stories.ts
@@ -1,5 +1,5 @@
 import "./headline.css";
-import { displayHeadline } from "./headline";
+import { displayGermanHeadline } from "./headline";
 import { createElement } from "../../utils/createElement";
 import { getRandomHeadlineGerman } from "../../utils/api";
 
@@ -9,7 +9,7 @@ export default {
 };
 
 export const HeadlineFromAPI = (args, { loaded: { headline } }) => {
-  return displayHeadline(headline);
+  return displayGermanHeadline(headline);
 };
 
 HeadlineFromAPI.loaders = [

diff --git a/src/components/headline/headline.ts b/src/components/headline/headline.ts
@@ -1,8 +1,17 @@
 import { createElement } from "../../utils/createElement";
 
-export function displayHeadline({ headline }) {
-  return createElement("p", {
-    className: "headline",
-    innerText: headline,
+export function displayGermanHeadline({ headline, link }) {
+  return createElement("div", {
+    className: "headline__container",
+    childs: [
+      createElement("p", {
+        className: "headline",
+        innerText: headline,
+      }),
+      createElement("a", {
+        href: link,
+        innerText: "Artikel lesen",
+      }),
+    ],
   });
 }
diff --git a/src/utils/api.ts b/src/utils/api.ts
@@ -56,13 +56,15 @@ export type News = {
 // Was ich brauch von currentsAPI
 export type Headline = {
   headline: string;
+  link: string;
 };
 
 const randomHeadline = Math.floor(Math.random() * 30);
 
 function convertToText(headline: News): Headline {
   return {
     headline: headline.news[randomHeadline].title,
+    link: headline.news[randomHeadline].url,
   };
 }