Last active
December 22, 2024 21:27
-
-
Save brunoamaral/a01735652794943e9f564a4018534ee8 to your computer and use it in GitHub Desktop.
listing gregory-ai articles with plain javascript - regeneration of the CNS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Articles List</title> | |
| </head> | |
| <body> | |
| <ol id="articles-list"></ol> | |
| <script> | |
| // API endpoint | |
| const apiUrl = "https://api.gregory-ms.com/teams/1/articles/subject/2/?format=json"; | |
| // Function to fetch and render articles | |
| async function fetchAndRenderArticles() { | |
| try { | |
| // Fetch the API response | |
| const response = await fetch(apiUrl); | |
| // Check if the response is OK | |
| if (!response.ok) { | |
| throw new Error(`Failed to fetch articles: ${response.status} ${response.statusText}`); | |
| } | |
| // Parse the response JSON | |
| const data = await response.json(); | |
| // Get the list container | |
| const articlesList = document.getElementById("articles-list"); | |
| // Populate the list | |
| data.results.forEach(article => { | |
| // Create a list item | |
| const listItem = document.createElement("li"); | |
| // Create a link | |
| const link = document.createElement("a"); | |
| link.href = article.link; | |
| link.textContent = article.title; | |
| link.target = "_blank"; // Opens link in a new tab | |
| // Append the link to the list item | |
| listItem.appendChild(link); | |
| // Add the published_date after the link | |
| const date = document.createElement("span"); | |
| date.textContent = ` (Published: ${new Date(article.published_date).toLocaleDateString()})`; | |
| listItem.appendChild(date); | |
| // Append the list item to the list | |
| articlesList.appendChild(listItem); | |
| }); | |
| } catch (error) { | |
| // Log errors to the console | |
| console.error(error); | |
| } | |
| } | |
| // Fetch and render articles on page load | |
| fetchAndRenderArticles(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment