Dragon Trainer Monthly

100%

Dragon Trainer Monthly - XSS

✓ Published0🌍 Public

Last edited Nov 5, 2022

Created on Nov 5, 2022

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.

AI-generated description

Similar vizzes

Loading thumbnail…

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.

Aangusgrant

79% match

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

78% match

Loading thumbnail…

Gist 7232670

This example demonstrates how a single-page application skeleton is transformed from a static document into an interactive, AJAX-driven experience. The visualization shows a list of user-submitted code entries, with each entry dynamically loaded and rendered without a full page refresh. The implementation uses jQuery’s `$.ajax` method to fetch the `lucky_ajax.md` file and other resources, then updates the DOM with the retrieved content. The code also relies on JavaScript’s `Promise` API for handling asynchronous responses, and highlights the use of `XMLHttpRequest` for network communication. The data source is the downloaded application skeleton, whose structure is revealed through the fetched files. The example focuses on the interaction between client-side scripting and server responses.

EElaineYu

57% match

Loading thumbnail…

Fork of HTML Starter

This example renders a static social media feed interface with HTML and CSS, mimicking the layout of a typical news feed. It displays several posts with author names, timestamps, and content, including a text-heavy post on Buddhist philosophy. The design uses a clean, minimalist style with a white header, a container for posts, and action links like “Like,” “Comment,” and “Share.” No external JavaScript libraries or data APIs are used; the feed is entirely hard-coded in the HTML document, with styling handled by embedded CSS rules for layout, spacing, and typography.

NNita

57% match

Loading thumbnail…

Gist 442639

This HTML page presents a styled newsletter layout for June 18, 2010, featuring embedded images hosted on Facebook and Fast Company. The document uses plain HTML tables and inline CSS for typography and structure, with a dark background, white text, and Garamond/Trebuchet MS fonts. It includes a sidebar with linked section headings and a main content column containing articles about YouTube’s cloud-based video editor and social media features, though no interactive data visualization or JavaScript libraries are present in the code.

XXXX

55% match

Loading thumbnail…

HTML

This example demonstrates asynchronous data loading and text generation in a web page. It fetches a hardcoded car dataset using a Promise-based `getCars()` function, then filters and formats the results with `generateReport()` and `formatCar()` to display affordable vehicles (under $2,000) in the DOM. The visualization relies on ES6 module imports for local files (`formatCar.js`, `generateReport.js`, `getCars.js`) and renders plain text to a `<pre>` element. D3 is loaded via UNPKG, though the current code uses no D3-specific functions.

Xxychen0612.cs09@nycu.edu.tw

55% match

Loading thumbnail…

Loading Data with Fetch, Promises, Async & Await

This example demonstrates loading external data in the browser, specifically fetching a CSV file of CSS color names and values from a GitHub gist, and then displaying the raw text output in the console. The page itself is minimal, showing only a title and a message instructing the user to open the browser’s developer console to view the retrieved data. The core functionality uses JavaScript’s native `fetch` API combined with `async`/`await` constructs and Promises to handle the asynchronous request; the code also includes a commented-out alternative using nested `.then()` calls for comparison. The styling incorporates Google Fonts’ Roboto and Poppins via CSS `@import`.

NNikhil Reddy Manda

55% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates the fundamental structure of an HTML page styled with CSS and enhanced with JavaScript. It showcases two distinct code snippets: one displays a simple "Hello HTML!" message with large, centered text, while the other fetches and logs the contents of a CSV file containing named CSS colors from a remote GitHub gist. The JavaScript uses the native `fetch` API within an async function to retrieve the text data and output it to the browser’s console.

CCheng Tang

55% match