diff --git a/src/components/headline/headline.stories.ts b/src/components/headline/headline.stories.ts index 0937b8d..c807736 100644 --- 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 index 1e8ad6d..b38ccdc 100644 --- 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 index a5cb5f1..f17300f 100644 --- a/src/utils/api.ts +++ b/src/utils/api.ts @@ -56,6 +56,7 @@ export type News = { // Was ich brauch von currentsAPI export type Headline = { headline: string; + link: string; }; const randomHeadline = Math.floor(Math.random() * 30); @@ -63,6 +64,7 @@ const randomHeadline = Math.floor(Math.random() * 30); function convertToText(headline: News): Headline { return { headline: headline.news[randomHeadline].title, + link: headline.news[randomHeadline].url, }; }