https://github.com/grandemayta/gm-football-standings

Football Standings Widget shows the standings of the most important football leagues. You can integrate this widget in your Web Application using NPM or using the CDN. The widget works with Angular, React and others modern frontend Frameworks or libraries. The widget was created using Mobile first approach and is also customizable.
https://github.com/grandemayta/gm-football-standings

cssvariables football standings stenciljs webcomponents

Last synced: 14 days ago
JSON representation

Football Standings Widget shows the standings of the most important football leagues. You can integrate this widget in your Web Application using NPM or using the CDN. The widget works with Angular, React and others modern frontend Frameworks or libraries. The widget was created using Mobile first approach and is also customizable.

• Host: GitHub
• URL: https://github.com/grandemayta/gm-football-standings
• Owner: grandemayta
• License: mit
• Created: 2020-09-24T17:35:31.000Z (over 4 years ago)
• Default Branch: develop
• Last Pushed: 2020-10-10T16:39:55.000Z (about 4 years ago)
• Last Synced: 2024-04-14T04:07:18.000Z (9 months ago)
• Topics: cssvariables, football, standings, stenciljs, webcomponents
• Language: TypeScript
• Homepage:
• Size: 36.1 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Football Standings Widget

[![Npm Version](https://img.shields.io/npm/v/gm-football-standings.svg)](https://www.npmjs.com/package/gm-football-standings)

![Publish NPM](https://github.com/grandemayta/gm-football-standings/workflows/Publish%20NPM/badge.svg)

[![Open Source Love](https://badges.frapsoft.com/os/mit/mit.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)

[![made-with-javascript-doc](https://img.shields.io/badge/Made%20with-Javascript-1f425f.svg)](https://www.sphinx-doc.org/)



Football Standings Widget shows the standings of the most important football leagues.

You can integrate this widget in your Web Application using NPM or using the CDN. The widget works with Angular, React and others modern frontend Frameworks or libraries.

The widget was created using Mobile first approach and is also customizable.

**THE PROJECT IS CURRENTLY WORK IN PROGRESS**

## Summary

- [Getting started](#getting-started)

- [Available competitions](#available-competitions)

- [Integration](#integration)

- [Browsers support](#browsers-support)

- [Tech stack](#tech-stack)

## Getting started

To use our widget you need to enable a public key from [football-data](https://www.football-data.org/).

## Available competitions

| Key | Competition |

| ------ | ------ |

| SA | Serie A |

| PL | Premier League |

| PD | Liga |

| BL1 | Bundesliga |

| FL1 | Ligue |

| DED | Eredivise |

## Integration

## NPM

```sh

npm i --save gm-football-standings

```

### Angular

```javascript

// APP.MODULE.TS

import { BrowserModule } from '@angular/platform-browser';

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [BrowserModule],

  bootstrap: [AppComponent],

  schemas: [CUSTOM_ELEMENTS_SCHEMA],

})

export class AppModule {}

// MAIN.TS

import { enableProdMode } from '@angular/core';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';

import { environment } from './environments/environment';

import { defineCustomElements } from 'gm-football-standings/loader';

if (environment.production) {

  enableProdMode();

}

platformBrowserDynamic().bootstrapModule(AppModule)

  .catch(err => console.log(err));

defineCustomElements();

// APP.COMPONENT.HTML

```

### React

```javascript

import React from 'react';

import ReactDOM from 'react-dom';

import { defineCustomElements } from 'gm-football-standings/loader';

ReactDOM.render(

    


      

      

    
,

    document.getElementById('root'));


defineCustomElements();

```

## CDN

```html

    

    

    

    

```

## Browsers support

:white_check_mark: Chrome




:white_check_mark: Firefox




:white_check_mark: Safari




:white_check_mark: Edge (New Version)

## Tech stack:

- WebComponents

- Typescript

- StencilJS

- Sass

- Css Variables

Keep calm and code!




[![Open Source Love](https://badges.frapsoft.com/os/v3/open-source.svg?v=102)](https://github.com/ellerbrock/open-source-badge/)