O GitHub é uma ferramenta muita versátil. Além de poder versionar códigos, é possível testar site estáticos com Git Pages. Alguns projetos e sites acabando tendo as mesmas informações em elementos como, _imagem de perfil, descrição, links contatos._ Uma solução bacana e gratuita para compartilhar todos esses dados em comum é criar uma API utilizando o JSON placeholder.

↓ ↓ ↓ ↓ ✔️ Crie um novo repositório, público, no GitHub. ✔️ Crie um arquivo com nome `db.js`. ✔️ Acesse `https://my-json-server.typicode.com/seu-userNameGitHub/nome-do-repositorio` ## Exemplo - Consumindo Dados da API: Em https://github.com/wend3ll-souza/productsApi Criei um arquivo `db.json` com informações que iram alimentar alguns Cards de Produtos ```json { "products": [ { "id": "product1", "name": "Box Roberto Carlos", "price": 25, "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5099751568599.jpg?raw=true" }, { "id": "product2", "name": "Micro SD", "price": 20, "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5390800083439.jpg?raw=true" }, { "id": "product3", "name": "Waffle", "price": 2, "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5906747172459.jpg?raw=true" }, { "id": "product4", "name": "Castania", "price": 10, "imagePath": "https://github.com/wend3ll-souza/marketProductsImages/blob/master/img/5281009276329.jpg?raw=true" } ] } ``` O link do JSON placeholder irá te direcionar para configurações do seu servidor json. → _example:_ http://my-json-server.typicode.com/wend3ll-souza/productsApi/ ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cs3xepkgcr7ndvbt2mgl.png) → _example:_ Array Products http://my-json-server.typicode.com/wend3ll-souza/productsApi/products ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ha5c50rkvyosiluwr93.png) ### Fetch API Agora em um novo repositório vou criar um arquivo `index.html` e um `script.js`. Também irei usar `Booststrap`para montar o estilo dos elementos. Esse projeto irá ao ar fazendo uso do **GitPages** e Consumindo a API criada com JSON Placeholder. **HTML** Criei um `section` com o `id="anchor"` que renderizará os Cards: ```html

``` **Java Script** Função que criará os Cards: ```javascript const createCards = (products) => { const anchor = document.getElementById('anchor'); products.map(item => { const card = document.createElement('section'); const container = document.createElement('div'); const describe = document.createElement('div'); const img = document.createElement('img'); const h3 = document.createElement('h3'); const p = document.createElement('p'); const btn = document.createElement('button'); img.setAttribute('src', item.imagePath); img.setAttribute('alt', 'product image') h3.innerText = item.name; p.innerText = `R$ ${item.price.toFixed(2)}`; btn. innerText = "comprar"; img.className = "card-img-top w-75"; h3.className = "card-title"; p.className = "card-text text-danger"; btn.className = "btn btn-success text-uppercase"; container.className ="m-auto" describe.className = "card-body"; card.className = "card my-5 text-center shadow"; card.style = "width: 10rem;"; container.appendChild(img); describe.appendChild(h3); describe.appendChild(p); describe.appendChild(btn); container.appendChild(describe); card.appendChild(container); anchor.appendChild(card); }) } ``` Função Assincrona que faz o Fetch a API: ```javascript const FETCH = async () => { await fetch('https://my-json-server.typicode.com/wend3ll-souza/productsApi/products') .then((response) => { response.json() .then(data => { createCards(data); }) .catch((error) => { console.log(error); }); }) .catch((erro) => { console.log(erro); }); }; FETCH(); ``` :rocket: **Pronto !** :v: ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c51v6xi3j67e7q4hxqjo.png) ###Exemplo: ↓ ↓ ↓ ↓

### JSON Placeholder ↓ ↓ ↓ ↓

wend3llsouza

Crie sua própria API de Graça !

Join Our Newsletter. No Spam, Only the good stuff.