https://github.com/josejefferson/trend-grid

This project allows you to create an animated trending grid similar to Google Trends
https://github.com/josejefferson/trend-grid

animated animation css front-end frontend grid html iframe iframe-embeds javascript trending trends words

Last synced: 12 days ago
JSON representation

This project allows you to create an animated trending grid similar to Google Trends

• Host: GitHub
• URL: https://github.com/josejefferson/trend-grid
• Owner: josejefferson
• Created: 2023-01-02T20:47:08.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2023-01-04T12:27:44.000Z (about 2 years ago)
• Last Synced: 2024-01-26T08:46:02.403Z (about 1 year ago)
• Topics: animated, animation, css, front-end, frontend, grid, html, iframe, iframe-embeds, javascript, trending, trends, words
• Language: JavaScript
• Homepage: https://trend-grid.vercel.app
• Size: 534 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Trend Grid

This project allows you to create an animated trending grid similar to [Google Trends](https://trends.google.com/trends/hottrends/visualize?nrow=5&ncol=5).



    





## [Demo](https://trend-grid.vercel.app/trends/?trends=C|C%23|C%2B%2B|CoffeeScript|CSS|Dart|DM|Elixir|Go|Groovy|HTML|Java|JavaScript|Kotlin|Objective-C|Perl|PHP|PowerShell|Python|Ruby|Rust|Scala|Shell|Swift|TypeScript)

[![Demo](demo.gif)](https://trend-grid.vercel.app/trends/?trends=C|C%23|C%2B%2B|CoffeeScript|CSS|Dart|DM|Elixir|Go|Groovy|HTML|Java|JavaScript|Kotlin|Objective-C|Perl|PHP|PowerShell|Python|Ruby|Rust|Scala|Shell|Swift|TypeScript)

## Example

Put this code in your website

```html

  const trends = document.getElementById('trends')

  window.addEventListener('message', async ({ data }) => {

    if (!Array.isArray(data)) return

    const [command, content] = data

    if (command !== 'fetch-trends') return

    trends.contentWindow.postMessage(['data', await fetchData()], '*')

  })

  async function fetchData() {

    // TODO: Implement this

    // const data = await fetch('/api...').then((response) => response.json())

    // return data

    return ['Trends', 'Hello', 'World', '...']

  }

```

## API

```

https://trend-grid.vercel.app/trends/

https://trend-grid.vercel.app/trends/?trends=Example|Test

```

### Params

`trends` - Trends separated by `|`

`colors` - CSS colors separated by `|`

`animations` - Multiple of these: `left`, `right`, `top`, `bottom`, `back` (separated by comma)

`minTime` - Minimum time the trend will displayed (milisseconds)

`maxTime` - Maximum time the trend will displayed (milisseconds)

`maxFontSize` - Maximum font size of text

`gridColumns` - Amount of grid columns

`gridRows` - Amount of grid rows

`refreshTime` - API data refresh time

`showBorder` - Set to `1` to show borders on cards

`dontShrinkText` - Set to `1` to disable font size shrink (may improve performance)

`allowUnsafeHTML` - Allow unsafe HTML inside trends