/angular-buzzfeed-quizz-clone

A BuzzFeed Quizz Clone about Avengers: Are you on the Iron Man or Captain America team?

Primary LanguageTypeScript

Avengers: Are you on the Iron Man or Captain America team?

Preview

Deployed URL
https://angular-buzzfeed-quizz-clone-six.vercel.app/

Português / English

📝 Índice

🎯 Sobre

  • Clone de um Quiz do BuzzFeed desenvolvido durante o bootcamp Coding The Future Banco PAN - Desenvolvimento Frontend com Angular da DIO, onde o objetivo foi usar a criatividade para aplicar os recursos aprendidos do Angular carregando dados de um arquivo JSON mockado.

⚒ Linguagens e Ferramentas

💡 Aprendizados

  • Hook de Ciclo de Vida: ngOnInit.
  • Diretivas estruturais: *ngIf e *ngFor.
  • Binding do evento de click com Angular.
  • Injeção de Componentes.
  • Configurações do tsconfig.json para uso do JSON mockado.
  • CSS Responsivo.

🖥️ Como executar localmente

Clone o projeto:

git clone https://github.com/bernard-silva/angular-buzzfeed-quizz-clone.git

Navegar até a raiz do projeto:

cd angular-buzzfeed-quizz-clone

Instale as dependências:

npm install

Inicie o servidor:

ng serve

Acesse a URL http://localhost:4200/


English

📝 Index

🎯 About

  • Clone of a BuzzFeed Quiz developed during the bootcamp Coding The Future Banco PAN - Frontend Development with Angular from DIO, where the objective was to use creativity to apply learned Angular features by loading data from a mock JSON file.

⚒ Languages and Tools

💡 Learnings

  • Lifecycle Hook: ngOnInit.
  • Structural Directives: *ngIf and *ngFor.
  • Event Binding on Angular: click.
  • Component Injection.
  • tsconfig.json settings for using mock JSON.
  • Responsive CSS.

🖥️ How to run locally

Clone the project:

git clone https://github.com/bernard-silva/angular-buzzfeed-quizz-clone.git

Navigate to the project root:

cd angular-buzzfeed-quizz-clone

Install dependencies:

npm install

Start the server:

ng serve

Access the URL http://localhost:4200/