diff --git a/src/routes/list/+layout.svelte b/src/routes/list/+layout.svelte index d6bef3e0..ffe632ef 100644 --- a/src/routes/list/+layout.svelte +++ b/src/routes/list/+layout.svelte @@ -149,6 +149,14 @@ let navigation = [ title: 'Magnificent Seven Stocks', link: '/list/magnificent-seven' }, + { + title: 'Dividend Kings', + link: '/list/dividend-kings' + }, + { + title: 'Dividend Aristocrats', + link: '/list/dividend-aristocrats' + }, ]; @@ -173,7 +181,6 @@ const combinedNavigation = navigation?.concat(updatedNavigation); - @@ -181,7 +188,6 @@ const combinedNavigation = navigation?.concat(updatedNavigation); - diff --git a/src/routes/list/+page.svelte b/src/routes/list/+page.svelte index ecf9ba21..41d24f56 100644 --- a/src/routes/list/+page.svelte +++ b/src/routes/list/+page.svelte @@ -378,6 +378,16 @@ Magnificent Seven +
  • + + Dividend Kings + +
    • +
  • + + Dividend Aristocrats + +
  • Delisted Companies diff --git a/src/routes/list/dividend-aristocrats/+page.svelte b/src/routes/list/dividend-aristocrats/+page.svelte new file mode 100644 index 00000000..ca3c9184 --- /dev/null +++ b/src/routes/list/dividend-aristocrats/+page.svelte @@ -0,0 +1,132 @@ + + +
    + + +
    + + + Dividend Aristocrats are companies in the S&P500 index that have been raising their dividends every year for 25 or more years. This is a list of all the dividend aristocrats. +
    + + + +
    + + + + +
    + + + + + + + + + + + + + + + + + + {#each displayList as item,index} + + goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> + + + + + + + + + + + + + + + + + + + + + + + + + {/each} + +
    No.CompanyStock Price% ChangeDiv. YieldYears
    + {index+1} + + +
    +
    + {item?.symbol} + {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} +
    +
    +     		+ {item?.price} + + {#if item?.changesPercentage >=0} + +{item.changesPercentage?.toFixed(2)}% + {:else} + {item.changesPercentage?.toFixed(2)}% + {/if} + + {item?.dividiendYield}% + + {item?.years} +
    + + + + +
    + + + +
    + + diff --git a/src/routes/list/dividend-aristocrats/+page.ts b/src/routes/list/dividend-aristocrats/+page.ts new file mode 100644 index 00000000..44b5f992 --- /dev/null +++ b/src/routes/list/dividend-aristocrats/+page.ts @@ -0,0 +1,37 @@ +import { getCache, setCache } from '$lib/store'; + + + +export const load = async ({parent}) => { + const getDividendAristocrats = async () => { + + // Get cached data for the specific tickerID + const cachedData = getCache('', 'getDividendAristocrats'); + if (cachedData) { + return cachedData; + } else { + + const { apiKey, apiURL} = await parent(); + + const response = await fetch(apiURL + '/dividend-aristocrats', { + method: 'GET', + headers: { + "Content-Type": "application/json", "X-API-KEY": apiKey + }, + }); + + + const output = await response.json(); + + // Cache the data for this specific tickerID with a specific name 'getDividendAristocrats' + setCache('', output, 'getDividendAristocrats'); + + return output; + } + }; + + // Make sure to return a promise + return { + getDividendAristocrats: await getDividendAristocrats() + }; +}; \ No newline at end of file diff --git a/src/routes/list/dividend-kings/+page.svelte b/src/routes/list/dividend-kings/+page.svelte new file mode 100644 index 00000000..3733d927 --- /dev/null +++ b/src/routes/list/dividend-kings/+page.svelte @@ -0,0 +1,132 @@ + + +
    + + +
    + + + Dividend Kings are companies that have been raising their dividend payments every year for 50 or more years. This is a list of all the dividend kings on the US stock market. +
    + + + +
    + + + + +
    + + + + + + + + + + + + + + + + + + {#each displayList as item,index} + + goto("/stocks/"+item?.symbol)} class="sm:hover:bg-[#245073] sm:hover:bg-opacity-[0.2] odd:bg-[#27272A] border-b-[#09090B] shake-ticker cursor-pointer"> + + + + + + + + + + + + + + + + + + + + + + + + + {/each} + +
    No.CompanyStock Price% ChangeDiv. YieldYears
    + {index+1} + + +
    +
    + {item?.symbol} + {item?.name?.length > charNumber ? item?.name?.slice(0,charNumber) + "..." : item?.name} +
    +
    +     		+ {item?.price} + + {#if item?.changesPercentage >=0} + +{item.changesPercentage?.toFixed(2)}% + {:else} + {item.changesPercentage?.toFixed(2)}% + {/if} + + {item?.dividiendYield}% + + {item?.years} +
    + + + + +
    + + + +
    + + diff --git a/src/routes/list/dividend-kings/+page.ts b/src/routes/list/dividend-kings/+page.ts new file mode 100644 index 00000000..de7a0543 --- /dev/null +++ b/src/routes/list/dividend-kings/+page.ts @@ -0,0 +1,37 @@ +import { getCache, setCache } from '$lib/store'; + + + +export const load = async ({parent}) => { + const getDividendKings = async () => { + + // Get cached data for the specific tickerID + const cachedData = getCache('', 'getDividendKings'); + if (cachedData) { + return cachedData; + } else { + + const { apiKey, apiURL} = await parent(); + + const response = await fetch(apiURL + '/dividend-kings', { + method: 'GET', + headers: { + "Content-Type": "application/json", "X-API-KEY": apiKey + }, + }); + + + const output = await response.json(); + + // Cache the data for this specific tickerID with a specific name 'getDividendKings' + setCache('', output, 'getDividendKings'); + + return output; + } + }; + + // Make sure to return a promise + return { + getDividendKings: await getDividendKings() + }; +}; \ No newline at end of file