Skip to content

O projeto teve como objetivo recriar a interface Homebroker do Banco Santander usando para apresentar o resultado diário das ações do Mercado Financeiro.

Notifications You must be signed in to change notification settings

flaviohnm/homebroker

Repository files navigation

Projeto Santander Week | Phase: Front-End

Dashbord Stocks

🚀💻 Technologies & Tools

JavaScript Angular HTML5 CSS3 Git GitHub

📝Aula 1: Configurando Ambiente - Frontend

Links

📝Aula 3: Configurando o Projeto

💻Trecho de código para adicionar o normalize:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" />

Mais informações sobre o box-sizing: https://tableless.github.io/iniciantes/manual/css/box-model.html

Mais informações sobre o height: 100%: https://imasters.com.br/css/por-que-height-100-nao-funciona

💻Código do CSS Global da aplicação

:root {
  --background-color: #EAEAEA;
  --primary-color: #EA1D25;
  --secondary-color: #FFFFFF;
  --text-color: #5C6369;
  --text-color-light: rgba(92, 99, 105, 0.45);
  --positive-variation-color: #87D883;
  --negative-variation-color: #F55A5F;
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background-color: var(--background-color);
  font-family: 'Segoe UI', sans-serif;
}

📝Aula 4: Criação dos componentes da aplicação

Links com mais informações sobre CSS

📝Aula 5: Integração com a API

Entendo um pouco melhor sobre Javascript/Typescript

Bindings e diretivas do Angular

💻Códigos das sombras e transições CSS

header.component.css:

.header {
  width: 100%;
  padding: 1rem 1.5rem;
	...

  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

stock-card.component:

.stock-card-container {
  width: 21.375rem;
  height: 13.8125rem;
  background-color: var(--secondary-color);
	...

  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.stock-card-container:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

📝Aula 6: Publicando o Projeto no GitHub Pages

Links

💻Configuração do parametro deploy no Package.json

"scripts": {
	....
	"deploy":  "ng deploy --base-href=https://<seu-usuario>.github.io/<repositorio>/",
	...
}

Será necessário substituir o <seu-usuário> pelo seu nome de usuário do Github e o <repositorio> pelo nome do repositório criado anteriormente.

💻Comando do Angular CLI para realizar o deploy

  npm run deploy

Confira o projeto publicado

📝Comentários sobre o projeto

Esse projeto faz parte da Santander Week pelo Banco Santander e em conjunto com plataforma de ensino Digital Innovation One Inc e teve como objetivo recriar a interface do Dashboard de Apresentação de Ações Diário no Mercado Financeiro.

👨About me ☕ ✈️ 🎫

Linkedin Badge Gmail Badge

About

O projeto teve como objetivo recriar a interface Homebroker do Banco Santander usando para apresentar o resultado diário das ações do Mercado Financeiro.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published