From 79735f6a81a1363b1d486cbd83f676ba27af83fe Mon Sep 17 00:00:00 2001 From: gSayak Date: Mon, 18 Sep 2023 00:12:42 +0530 Subject: [PATCH] added category filter --- assets/js/insights.js | 243 ++++++++++++++++++++++++++++-------------- assets/js/load.js | 5 +- index.html | 5 + 3 files changed, 171 insertions(+), 82 deletions(-) diff --git a/assets/js/insights.js b/assets/js/insights.js index 9e38090..958c439 100644 --- a/assets/js/insights.js +++ b/assets/js/insights.js @@ -2,108 +2,195 @@ const urlParams = {}; const url = new URL(window.location.href); const params = url.searchParams; for (const [key, value] of params) { - urlParams[key] = value; + urlParams[key] = value; } -fetch("https://vartapratikriya-api.vercel.app/articles/sentiment?filter_by=language") +fetch( + "https://vartapratikriya-api.vercel.app/articles/sentiment?filter_by=language" +) .then((response) => response.json()) .then((data) => { var chrt = document.getElementById("sentiment-chart").getContext("2d"); - var chartId = new Chart(chrt, { - type: 'bar', - data: { - labels: Object.keys(data), - datasets: [{ - label: "Sentiment Index", - data: Object.values(data), - backgroundColor: ['lightblue', 'aqua', "blue", "orange", "red", "lightgreen", "violet"], - borderColor: ['lightblue', 'aqua', "blue", "orange", "red", "lightgreen", "violet"], - borderWidth: 2, - }], - }, - options: { - responsive: true, - }, - }); - }) - - fetch("https://vartapratikriya-api.vercel.app/articles/categories") + var chartId = new Chart(chrt, { + type: "bar", + data: { + labels: Object.keys(data), + datasets: [ + { + label: "Sentiment Index", + data: Object.values(data), + backgroundColor: [ + "lightblue", + "aqua", + "blue", + "orange", + "red", + "lightgreen", + "violet", + ], + borderColor: [ + "lightblue", + "aqua", + "blue", + "orange", + "red", + "lightgreen", + "violet", + ], + borderWidth: 2, + }, + ], + }, + options: { + responsive: true, + }, + }); + }); + +fetch("https://vartapratikriya-api.vercel.app/articles/categories") .then((response) => response.json()) .then((data) => { const counts = {}; - data.articles.forEach(obj => { - const value = obj['category']; - if (counts[value]) { + data.articles.forEach((obj) => { + const value = obj["category"]; + if (counts[value]) { counts[value]++; - } else { + } else { counts[value] = 1; - } + } }); - console.log(counts) var chrt = document.getElementById("category-chart").getContext("2d"); var chartId = new Chart(chrt, { - type: 'pie', - data: { - labels: Object.keys(counts), - datasets: [{ - label: "online tutorial subjects", - data: Object.values(counts), - backgroundColor: ['lightblue', 'aqua', "blue", "orange", "red", "lightgreen", "violet"], - hoverOffset: 5 - }], - }, - options: { - responsive: false, - }, - }); - }) - - - fetch(`https://vartapratikriya-api-rumbleftw.vercel.app/articles/headlines?language=${urlParams['language']}`) + type: "pie", + data: { + labels: Object.keys(counts), + datasets: [ + { + label: "online tutorial subjects", + data: Object.values(counts), + backgroundColor: [ + "lightblue", + "aqua", + "blue", + "orange", + "red", + "lightgreen", + "violet", + ], + hoverOffset: 5, + }, + ], + }, + options: { + responsive: false, + }, + }); + }); + +fetch( + `https://vartapratikriya-api-rumbleftw.vercel.app/articles/headlines?language=${urlParams["language"]}` +) .then((response) => response.json()) .then((data) => { const container = document.getElementById("fact-check-list"); data.articles.forEach((article) => { - const listItem = document.createElement("li"); - listItem.className = "fact-check-item py-3 mb-2 flex flex-col lg:flex-row border-gray-800 border-b"; + const listItem = document.createElement("li"); + listItem.className = + "fact-check-item py-3 mb-2 flex flex-col lg:flex-row border-gray-800 border-b"; + + const image = document.createElement("img"); + image.src = article.urlToImage; + image.className = + "w-96 object-cover rounded-lg flex-grow-0 flex-shrink-0 justify-center lg:w-[20%] lg:mr-4 h-28 rounded-lg"; + image.alt = "newsmobile.in"; + + const contentContainer = document.createElement("div"); + contentContainer.className = "flex flex-col flex-grow"; + + const heading = document.createElement("h3"); + heading.className = "text-sm font-semibold my-2 hover:text-[#FF4560]"; + const anchor = document.createElement("a"); + anchor.href = article.url; + anchor.textContent = article.title; + heading.appendChild(anchor); + + const claimDate = document.createElement("p"); + claimDate.className = "text-gray-800 text-xs mb-2"; + claimDate.textContent = `Published on: ${article.publishedAt}`; + + const claimant = document.createElement("p"); + claimant.className = "text-xs lg:text-[10px] mb-2"; + claimant.textContent = `Source: ${article.source.name}`; - const image = document.createElement("img"); - image.src = article.urlToImage; - image.className = "w-96 object-cover rounded-lg flex-grow-0 flex-shrink-0 justify-center lg:w-[20%] lg:mr-4 h-28 rounded-lg"; - image.alt = "newsmobile.in"; + const rating = document.createElement("p"); + rating.className = "text-xs lg:text-sm display-font mb-2"; + rating.innerHTML = `Sentiment: ${ + article.sentiment.label.charAt(0).toUpperCase() + + article.sentiment.label.slice(1) + }`; - const contentContainer = document.createElement("div"); - contentContainer.className = "flex flex-col flex-grow"; + contentContainer.appendChild(heading); + contentContainer.appendChild(claimDate); + contentContainer.appendChild(claimant); + contentContainer.appendChild(rating); - const heading = document.createElement("h3"); - heading.className = "text-sm font-semibold my-2 hover:text-[#FF4560]"; - const anchor = document.createElement("a"); - anchor.href = article.url; - anchor.textContent = article.title; - heading.appendChild(anchor); + listItem.appendChild(image); + listItem.appendChild(contentContainer); - const claimDate = document.createElement("p"); - claimDate.className = "text-gray-800 text-xs mb-2"; - claimDate.textContent = `Published on: ${article.publishedAt}`; + container.appendChild(listItem); + }); + }); + +fetch( + `https://vartapratikriya-api-rumbleftw.vercel.app/articles/categories?category=${urlParams["category"]}` +) + .then((response) => response.json()) + .then((data) => { + const container = document.getElementById("fact-check-list"); + data.articles.forEach((article) => { + const listItem = document.createElement("li"); + listItem.className = + "fact-check-item py-3 mb-2 flex flex-col lg:flex-row border-gray-800 border-b"; + + const image = document.createElement("img"); + image.src = article.urlToImage; + image.className = + "w-96 object-cover rounded-lg flex-grow-0 flex-shrink-0 justify-center lg:w-[20%] lg:mr-4 h-28 rounded-lg"; + image.alt = "newsmobile.in"; + + const contentContainer = document.createElement("div"); + contentContainer.className = "flex flex-col flex-grow"; - const claimant = document.createElement("p"); - claimant.className = "text-xs lg:text-[10px] mb-2"; - claimant.textContent = `Source: ${article.source.name}`; + const heading = document.createElement("h3"); + heading.className = "text-sm font-semibold my-2 hover:text-[#FF4560]"; + const anchor = document.createElement("a"); + anchor.href = article.url; + anchor.textContent = article.title; + heading.appendChild(anchor); - const rating = document.createElement("p"); - rating.className = "text-xs lg:text-sm display-font mb-2"; - rating.innerHTML = `Sentiment: ${article.sentiment.label.charAt(0).toUpperCase() + - article.sentiment.label.slice(1)}`; + const claimDate = document.createElement("p"); + claimDate.className = "text-gray-800 text-xs mb-2"; + claimDate.textContent = `Published on: ${article.publishedAt}`; - contentContainer.appendChild(heading); - contentContainer.appendChild(claimDate); - contentContainer.appendChild(claimant); - contentContainer.appendChild(rating); + const claimant = document.createElement("p"); + claimant.className = "text-xs lg:text-[10px] mb-2"; + claimant.textContent = `Source: ${article.source.name}`; - listItem.appendChild(image); - listItem.appendChild(contentContainer); + const rating = document.createElement("p"); + rating.className = "text-xs lg:text-sm display-font mb-2"; + rating.innerHTML = `Sentiment: ${ + article.sentiment.label.charAt(0).toUpperCase() + + article.sentiment.label.slice(1) + }`; - container.appendChild(listItem); + contentContainer.appendChild(heading); + contentContainer.appendChild(claimDate); + contentContainer.appendChild(claimant); + contentContainer.appendChild(rating); - }) - }) \ No newline at end of file + listItem.appendChild(image); + listItem.appendChild(contentContainer); + + container.appendChild(listItem); + }); + }); diff --git a/assets/js/load.js b/assets/js/load.js index 386a1db..3de073c 100644 --- a/assets/js/load.js +++ b/assets/js/load.js @@ -1,8 +1,6 @@ fetch("https://vartapratikriya-api.vercel.app/config") .then((response) => response.json()) .then((data) => { - console.log(data); - const titleElements = document.querySelectorAll(".department .title"); titleElements.forEach((element, index) => { @@ -13,9 +11,8 @@ fetch("https://vartapratikriya-api.vercel.app/config") // Create an element with the appropriate href attribute const categoryLink = document.createElement("a"); categoryLink.textContent = capitalizedCategory; - categoryLink.href = `language.html?language=${category.toLowerCase()}`; + categoryLink.href = `language.html?category=${category.toLowerCase()}`; - // Replace the content of the title element with the element element.innerHTML = ""; // Clear the existing content element.appendChild(categoryLink); }); diff --git a/index.html b/index.html index 6083cd4..27f4790 100644 --- a/index.html +++ b/index.html @@ -194,6 +194,8 @@

+ +
@@ -214,6 +216,9 @@

+ + +