Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cristianosantan/challenge-linx
Desafio Linx
https://github.com/cristianosantan/challenge-linx
css html5 javascript
Last synced: about 2 months ago
JSON representation
Desafio Linx
- Host: GitHub
- URL: https://github.com/cristianosantan/challenge-linx
- Owner: CristianoSantan
- Created: 2021-04-08T19:27:54.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-04-23T00:23:13.000Z (over 3 years ago)
- Last Synced: 2024-04-24T09:49:33.812Z (9 months ago)
- Topics: css, html5, javascript
- Language: CSS
- Homepage: https://challenge-linx-cristianosantan.vercel.app/
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Challenge Linx
link da aplicação:
- [challenge-linx](https://challenge-linx.vercel.app/)
------
### O Desafio da Linx
É construir uma landing page com uma grade de produtos e um formulário de newsletter. Apartir de um layout e busca de dados por uma API.
### A página deve ter o seguinte comportamento:
- foi consultada uma API de forma páginada, e cada página retorna informações de 8 produtos e um link para a próxima página;
- para cada produto retornado foi criado uma card com as respectivas informações, na grade de produtos;
- E clicando no botão "ainda mais produtos aqui!" a próxima página da API é consultada, gerando mais 8 produtos na grade, abaixo dos produtos já carregados pela primeira requisição;
- o formulário de newsletter com o título "Compartilhe a novidade" deve ter seus campos de input vallidados de acordo com o conteúdo (ex: O campo de email deve conter um email válido);
-------
### Setup
- Foi criado um repositório no GitHub
- VSCode para o desenvolvimento do código
- versionamento com git
- foi criada a aplicação usando html, css, e javascript.
- navegador chrome para acompanhar o desenvolvimento
- layout pronto fornecido pela empresa
- API pronto fornecido pela empresa
- Deploy da página na Vercel.
No primeiro momento foi adicionado o conteúdo no html com um header para o cabeçalho e o menu, no main tem três sections uma para a ajuda do algoritmo, uma para os produtos e outra para o compartilhamento para um amigo, e por fim um footer com nome da empresa e ano. depois foi estilizado as cores e espaçamentos com css começando com o design para celular(mobile first), e feito a responsividade para a web com css com metódos em css (@media), em javascript fiz a requisição da API usando o metódo fetch(), e a cada click no botão "ainda mais produtos aqui!" executa uma função para retornar outra função que monta uma div card com as informações de mais produtos da próxima página. Também em javascript foi feito a validação dos campos do formulário de newsletter de compartilhamento.
------
Foi um prazer fazer este desafio, pude colocar em prática conhecimento que tinha adquirido no curso e outros que só descobri com a mão na massa. E assim cada vez mais o conteúdo vai ficando claro.
---
Feito com ❤️ por Cristiano Santana 👋🏽 Entre em contato!
[](https://www.linkedin.com/in/cristiano-souza-santana-b3011a119/)
[](mailto:[email protected])
