DEV Community: Bob Wendell

Crie sua própria API de Graça !

Bob Wendell — Thu, 25 Feb 2021 16:41:20 +0000

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

{
    "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/

→ example: Array Products http://my-json-server.typicode.com/wend3ll-souza/productsApi/products

Fetch API

Agora em um novo repositório vou criar um arquivo index.html e um script.js. Também irei usar Booststrappara 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:

<section id="anchor" class="row justify-content-center justify-content-around"></section>

Java Script
Função que criará os Cards:

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:

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();

🚀 Pronto ! ✌️

Exemplo: ↓ ↓ ↓ ↓

JSON Placeholder ↓ ↓ ↓ ↓

Seção com Scroll Lateral Controlado por Botões ← →

Bob Wendell — Tue, 23 Feb 2021 02:17:31 +0000

Marcação

A sessão abaixo irá renderizar os cards que serão criados via Java Script:

HTML

<section id="scrollSection" class="scroll">

</section>

CSS

.scroll {
  background-color: black;
  padding: 50px;
  overflow-x: auto;
  scroll-behavior: smooth;
  white-space: nowrap; 
}

Dentro da sessão abaixo teremos o painel que irá renderizar os botões que controlaram o Scroll Lateral do elemento scrollSection:

HTML

  <section id="panel" class="panel">
    <button id="back" class="btn">back</button>
    <button id="next" class="btn">next</button>
  </section>

CSS

.panel {
  display: flex;
  justify-content: space-between;
}

.btn {
  border-radius: 8px;
  background-color: rgb(168, 103, 228);
  padding: 8px;
  width: 50%;
}

Java Script

Dados:

A constante data armazenará as informações dos Cards a serem criados. Aqui trabalharemos apenas com as Cores:

const data = [

  {
    color: 'red',
  },

  {
    color: 'yellow',
  },

  {
    color: 'green',
  },

  {
    color: 'blue',
  },

  {
    color: 'white',
  },

  {
    color: 'orange',
  },

  {
    color: 'gray',
  },

  {
    color: 'brown',
  },

  {
    color: 'purple',
  },

];

Criando Cards:

A função createCard Cria um elemento div com a classe cards e irá inserir o Card dentro do elemento scrollSection:

const createCard = (color) => {
  const scrollSection = document.getElementById('scrollSection');
  const div = document.createElement('div');
  div.className = 'cards';
  div.style.backgroundColor = color;
  scrollSection.appendChild(div);
};

CSS:

.cards {
    width: 200px;
    height: 200px;
    border-radius: 15px;
    margin: 30px;
    display: inline-block;
}

Podemos usar o map para mapear o array e para cada Objeto dentro dele executar a função createCard passando como parametro o valor dentro da chave color do Objeto:

data.map(object => createCard(object.color));

Painel de controle:

Agora iremos configurar o addEventListener com duas conticionais referentes aos botões do painel.

Se o elemento clicado contém o id next a scrollSection irá se mover 500px para direita →

Se o id for back se movimentará 500px para esquerda ←

addEventListener('click', (event) => {
  if (event.target.id === 'next') {
    document.getElementById('scrollSection').scrollBy(500, 0);
  };
  if (event.target.id === 'back') {
    document.getElementById('scrollSection').scrollBy(-500, 0);
  };
})

Bônus

Sessão responsiva com Media Queries:

A sessão scrollSection só terá Scroll Lateral e o Painel só será visivel em telas Menores de 500px de largura

Para isso retira o white-space: nowrap; da classe scroll e adicione visibility: hidden; à classe panel,

E crie um Media Query com as seguintes configurações:

@media screen and (max-width: 500px) {

    .scroll {
        white-space: nowrap;
    }

    .panel {
        visibility: visible;
    }

}

Saiba Mais