Skip to main content
100%

Dragon Trainer Monthly

✓ Published0🌍 Public
Aangusgrant
Last edited Nov 2, 2022
Created on Nov 2, 2022

Dragon Trainer Monthly fetches a JSON article feed from the vanillajsacademy.com API and renders each story as a static HTML card. The page displays article titles, authors, body text, and publication dates in a simple vertical list, using a template literal with a `map()` function to generate the markup. It relies on the browser’s native `fetch()` API and async/await syntax, with error handling that injects a fallback message into the DOM if the request fails. The visualization is text-focused, showing no charts or interactive graphics.

AI-generated description

Similar vizzes

Loading thumbnail…

Dragon Trainer Monthly

Dragon Trainer Monthly displays a list of dragon-themed articles with titles, authors, author bios, article text, and publication dates. It fetches article and author data from two separate JSON endpoints via the Fetch API, merges them by matching author names, and renders the combined content as HTML into the page. The visualization uses async/await functions for data loading and template literals with a map method to generate the article markup. No charting or drawing libraries are used; the presentation relies on plain HTML and CSS.

Aangusgrant
92% match
Loading thumbnail…

Dragon Trainer Monthly - XSS

This example shows a magazine-style article feed titled “Dragon Trainer Monthly,” displaying fetched articles and author bios in a clean, single-column layout. It demonstrates client-side HTML sanitization to prevent cross-site scripting (XSS) attacks. The code uses the Fetch API with `Promise.all` to load article and author JSON data from two external URLs, then renders the content via `innerHTML` after passing it through a `cleanHTML` function that strips `<script>` tags and removes dangerous attributes like `on*` handlers and `javascript:` URLs.

Aangusgrant
79% match
Loading thumbnail…

0702

This example displays a large static message reading “Hello HTML!” centered on the page, styled with a 13em font size. It fetches JSON data from a GitHub repository using the Fetch API, but the retrieved records—showing first and last names—are appended as plain text divs into a container, with no visual mapping or charting. The visualization relies solely on JavaScript’s `fetch` and DOM manipulation via `document.createElement`, with basic CSS for layout. No charting library or data-binding framework is used despite the React label in the metadata.

HHalcyonWjr
56% match
Loading thumbnail…

self-learning

This example demonstrates a simple data flow that fetches a static list of video games, filters it by year, and displays a formatted text report. It uses the Fetch API via a custom promise-based `getGames` function with a simulated two-second delay, and then processes the data with the `genReports` and `formatGames` functions. The rendered output appears in a `<pre>` element, showing only games released up to 2021. The code relies on ES modules and JSON parsing to handle the dataset locally.

Rrandylour1@gmail.com
56% match
Loading thumbnail…

HTML_Playground

This example displays a vehicle report generated from a static JSON dataset. It demonstrates asynchronous data fetching and report generation within an HTML page. The code uses JavaScript's `Promise` and `setTimeout` to simulate a two-second loading delay. The `getCars` module parses the JSON, while `generateReport` filters and formats the car entries into text lines, which are then injected into the preformatted element of the page via `document.getElementById`. The visualization is purely text-based, showing the data without any graphical charts.

Ttanvirmahdad
55% match
Loading thumbnail…

Iterate Data

This example displays a live-updating table of node and value pairs loaded from an external JSON file. It fetches the data via jQuery’s `getJSON` method, then iterates through each item to build a row object with `node` and `value` properties. The assembled rows are passed to the Bootstrap Table plugin, which renders them into an interactive table with sorting and pagination. The visualization emphasizes a simple data-to-table workflow, using jQuery for AJAX and DOM manipulation, and Bootstrap Table for structured presentation.

VVioletVivirand
55% match
Loading thumbnail…

html: load latest tweet

This example fetches and displays the user’s most recent tweet, showing the tweet text and associated metadata in a simple card layout. It uses the Fetch API to load data from a local or remote JSON endpoint, then renders the content into an unordered list with blockquotes and figure elements. The code relies on standard DOM manipulation methods to insert the tweet’s text and any embedded media or author details, though no external visualization libraries are employed. The layout is styled with minimal CSS, and the data source is assumed to be a JSON response containing the latest tweet object. The figure element is left empty, suggesting it may hold an image or avatar in a fuller implementation.

BBraMKJ
55% match
Loading thumbnail…

A simple news crawler.

This example demonstrates a news crawler that fetches headlines from four Malaysian RSS feeds, extracts the full article text, and stores each story as a JSON file organized by publication date. The crawler uses `feedparser` to parse RSS feeds, `requests` to download article pages, and the `readability` library to isolate main content from HTML. `BeautifulSoup` cleans the extracted text, while `dateutil.parser` converts publication timestamps into structured day, month, and year fields. Each JSON file, saved in a local `collection` folder, contains the article’s cleaned content, original link, and parsed date components.

Aamirothman
54% match