diff options
| author | Daniel Andreas Wang <codingforpeace@protonmail.com> | 2026-03-13 17:38:13 +0100 |
|---|---|---|
| committer | Daniel Andreas Wang <codingforpeace@protonmail.com> | 2026-03-13 17:38:13 +0100 |
| commit | f68ff92f12f8ad4bc4f157b78771d16067eaaf97 (patch) | |
| tree | 89e6eaf30d851e43d0796d808c82b55baa885d2b | |
| parent | 0608a926af3e11794f0f86e8fdff5b7a4ffd9254 (diff) | |
| -rw-r--r-- | package-lock.json | 7 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/views/HomeView.vue | 28 |
3 files changed, 34 insertions, 2 deletions
diff --git a/package-lock.json b/package-lock.json index 6625aa8..a1c923d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "news-app", "version": "0.0.0", "dependencies": { + "dayjs": "^1.11.20", "dotenv": "^16.5.0", "express": "^4.21.2", "pinia": "^3.0.4", @@ -1964,6 +1965,12 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz", "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==" }, + "node_modules/dayjs": { + "version": "1.11.20", + "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.20.tgz", + "integrity": "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ==", + "license": "MIT" + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", diff --git a/package.json b/package.json index 90d5b56..f651fa5 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "type-check": "vue-tsc --build" }, "dependencies": { + "dayjs": "^1.11.20", "dotenv": "^16.5.0", "express": "^4.21.2", "pinia": "^3.0.4", diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index a5290ec..c780410 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -1,15 +1,39 @@ <script setup lang="ts"> -import { onMounted } from 'vue' +import { ref, onMounted, onUnmounted } from 'vue' +import dayjs from 'dayjs' +import utc from 'dayjs/plugin/utc' +import timezone from 'dayjs/plugin/timezone' import { useNewsStore } from '@/stores/news' +dayjs.extend(utc) +dayjs.extend(timezone) + +const tehranTime = ref('') const store = useNewsStore() +let interval: ReturnType<typeof setInterval> + +const updateClocks = () => { + tehranTime.value = dayjs().tz('Asia/Tehran').format('HH:mm:ss') +} onMounted(() => { - store.fetchTopHeadlines({ country: 'us' }) + updateClocks() + interval = setInterval(updateClocks, 1000) + store.fetchEverything({ q: 'iran' }) +}) + +onUnmounted(() => { + clearInterval(interval) }) </script> <template> + <div class="container"> + <div class="clock"> + <div class="time">Tehran time: {{ tehranTime }}</div> + </div> + </div> + <main> <p v-if="store.loading">Loading...</p> <p v-else-if="store.error">{{ store.error }}</p> |