From ce19e79893db0f3de345460081415d0afcb60206 Mon Sep 17 00:00:00 2001
From: vekaste <vekaste@stud.ntnu.no>
Date: Wed, 17 Apr 2024 08:54:08 +0200
Subject: [PATCH] feat: created news component and view
---
.../NewsComponents/NewsComponent.vue | 106 ++++++++++++++++++
src/views/NewsView.vue | 8 ++
2 files changed, 114 insertions(+)
create mode 100644 src/components/NewsComponents/NewsComponent.vue
create mode 100644 src/views/NewsView.vue
diff --git a/src/components/NewsComponents/NewsComponent.vue b/src/components/NewsComponents/NewsComponent.vue
new file mode 100644
index 0000000..4fe743f
--- /dev/null
+++ b/src/components/NewsComponents/NewsComponent.vue
@@ -0,0 +1,106 @@
+<script lang="ts">
+export default {
+ data() {
+ return {
+ articles: []
+ };
+ },
+ mounted() {
+ this.fetchFinanceNews();
+ // Call fetchFinanceNews() every 5 minutes (300,000 milliseconds)
+ // Done so the user does not need to refresh for news to be updated
+ // Might remove for consistent reading
+ setInterval(this.fetchFinanceNews, 300000);
+ },
+ methods: {
+ async fetchFinanceNews() {
+ try {
+ const response = await fetch(
+ 'https://newsapi.org/v2/everything?q=saving%20money&pageSize=10&apiKey=f092756b3b6b41369b047cb7ae980db5'
+ );
+ const data = await response.json();
+
+ //English articles, might want to translate to norwegian
+ this.articles = data.articles;
+
+
+ } catch (error) {
+ console.error('Error fetching saving money news:', error);
+ }
+ }
+ }
+};
+</script>
+
+
+<template>
+ <div class="center-box">
+ <div class="box">
+ <br>
+ <h1>Nyheter</h1>
+ <br>
+ <div v-for="(article, index) in articles" :key="index" class="article-container">
+ <div class="content">
+ <h3>{{ article.title }}</h3>
+ <p>{{ article.description }}</p>
+ <a :href="article.url" target="_blank">Read more</a>
+ </div>
+ <div class="image">
+ <img :src="article.urlToImage" alt="Article Image"/>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.center-box {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.box {
+ width:90%;
+}
+
+.article-container {
+ display: flex;
+ align-items: center;
+ margin-bottom: 30px;
+}
+
+.image {
+ flex: 1;
+ text-align: center;
+ padding: 0 20px;
+}
+
+.image img {
+ max-width: 100%;
+ border-radius: 1em;
+}
+
+.content {
+ flex: 3;
+ padding: 0 20px;
+}
+
+.content h3 {
+ margin-top: 0;
+}
+
+.content a {
+ display: inline-block;
+ padding: 10px 20px;
+ background-color: #007bff;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 5px;
+}
+
+.content a:hover {
+ background-color: #0056b3;
+}
+
+</style>
\ No newline at end of file
diff --git a/src/views/NewsView.vue b/src/views/NewsView.vue
new file mode 100644
index 0000000..bdfb7c6
--- /dev/null
+++ b/src/views/NewsView.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import NewsComponent from "@/components/NewsComponents/NewsComponent.vue";
+</script>
+
+
+<template>
+ <NewsComponent></NewsComponent>
+</template>
\ No newline at end of file
--
GitLab