Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/emmanuelmarcosdeoliveira/animais-fantasticos
Animais Fantásticos ES6
https://github.com/emmanuelmarcosdeoliveira/animais-fantasticos
babel es6 javascript webpack
Last synced: 4 months ago
JSON representation
Animais Fantásticos ES6
- Host: GitHub
- URL: https://github.com/emmanuelmarcosdeoliveira/animais-fantasticos
- Owner: emmanuelmarcosdeoliveira
- License: mit
- Created: 2024-03-22T23:12:22.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-08-18T16:05:40.000Z (5 months ago)
- Last Synced: 2024-09-28T02:40:57.912Z (4 months ago)
- Topics: babel, es6, javascript, webpack
- Language: JavaScript
- Homepage: https://emmanuelmarcosdeoliveira.github.io/animais-fantasticos/
- Size: 5.98 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: LICENSE
Awesome Lists containing this project
README
![Banner](https://github.com/emmanuelmarcosdeoliveira/servidor-estatico/blob/main/github/emmanuelOliveira.gif)
# ✨Animais Fantásticos - JavaScript ES6
![Static Badge](https://img.shields.io/badge/--path?style=plastic&logo=JavaScript&logoColor=efd81d&logoSize=auto&label=JavaScript%20ES6%2B&labelColor=black&color=%23efd81d&link=https%3A%2F%2Fdeveloper.mozilla.org%2Fpt-BR%2Fdocs%2FLearn%2FJavaScript)
![GitHub top language](https://img.shields.io/github/languages/top/emmanuelmarcosdeoliveira/animais-fantasticos?style=plastic&labelColor=%23000)
![GitHub forks](https://img.shields.io/github/forks/emmanuelmarcosdeoliveira/js-slide-origamid?style=plastic&labelColor=%23000)## Table of Contents
- [Project description](#project-description)
- [Setup](#setup)
- [Prerequisites](#prerequisites)
- [technologies and tools](#technologies-and-tools)
- [Instalation](#instalation)
- [Usage](#usage)
- [References](#references)
- [Contributors or owners](#contributors-or-owners)
- [Contact](#contact)
- [License](#license)## Project Description
Esse Projeto faz parte do curso de JavaScript ES6 Completo da [Origamid](https://www.origamid.com). É um site que descreve as caracteristicas de 06 animais Fantásticos durante o curso foi abordado alguns dos assuntos como:
`Variaveis` `Tipos de Dados` `Funções` `Escopo` `Objetos` `Efeitos no Dom` `JavaScript Assíncrono` `Promises` `Fetch` `Classes` `Rest e Spread` `Destructuring` `Async&Await` `Regular Expression` `entre outros assuntos`
Também foram abordados temas como **Git** ,**Automação de processos** **Webpack e Babel**`Task`
- Desenvolver o Projeto do Zero, criando elementos de animação praticando a Linguagem **JavaScript**
`Charlenge`
Os Maiores desafios foram:
Colocar em pratíca o que foi aprendido no curso, criando animações, sem nenhum uso de plugin externo:- [x] **Navegação por Tabs**
- [x] **Accordion List**
- [x] **Scroll Suave**
- [x] **Animaçào ao Fazer o Scroll**
- [x] **Modal**
- [x] **Dropdown Menu**
- [x] **Menu Mobile**
- [x] **Tooltips**
- [x] **Animação de Números**
- [x] **Fetch API com 02 API's distintas**
- [x] **Criaçào de Carrousel de Imagens**> [!Tip]
> Caso queira ver como ficou siga os passos abaixo.## Setup
Requisitos necessários para rodar o projeto:
### Prerequisites
>
`Node.js` `VSCode` `Git` `Live Server`
> [!Important]
>
> - Run Time [Node.js](https://nodejs.org/en/) com a versão _16 ou superior_.
> - Um editor de códigos onde eu recomendo o [VCode](https://code.visualstudio.com/)
> - E o [git](https://git-scm.com/downloads) uma aplicação de versionamento de código.
> - Extensão do VSCode [**Live Server**](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)### technologies and tools
`Webpack` `Babel` `ESLint` `Git`
## Instalation
Para rodar o projeto em seu computador você tera que fazer o [fork](https://docs.github.com/pt/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo) do repositório. Caso você não saiba como fazer, estou deixando um **link** da documentação oficial do gitHub, onde é esclarecido como fazer essse processo.
Fazendo esse processo você tera uma copia desse Repositório no seu GitHub.
Depois de ter feito o **fork** vamos fazer o [clone](https://docs.github.com/pt/repositories/creating-and-managing-repositories/cloning-a-repository) desse Repositório atráves do **VSCode**.
Caso você não saiba como fazer, estou deixando um link para a documentação oficial do gitHub onde é esclarecido como fazer essse processo.
Command Line```bash
git clone https://github.com/emmanuelmarcosdeoliveira/animais-fantasticos
```Dentro do nosso **VSCode** vamos abrir o nosso **terminal**. Temos que baixar as dependências do Projeto para o nosso computador para que ele consiga ser Executado:
**1. Instalando as dependências**
Gerenciador de pacotes usado
**npm**
Command Line
```npm
npm install
```
## Usage
**2. Inicie o processo de compilação do JavaScript com o seguinte comando dentro do Terminal**
Command Line```npm
npm run dev
```
**3 Iniciar o LiveServer clicando com o botão Direito do Mouse no arquivo `index.html` em `Open with Live Server`**
Imagem de demostração do Projeto
📽️project demonstration video
Video de Demostraçào
https://github.com/emmanuelmarcosdeoliveira/animais-fantasticos/assets/116108389/660fb676-c9a6-4083-b28c-8e952eaa6345
## References
**Acesse:** [Origamid](https://origamid.com/)
## Contributors or owners
| owner |
| :---------------------------------------------------------------------------: |
| |
| Emmanuel Oliveira |Designed by Origamid and developed by [Emmanuel Oliveira](https://www.linkedin.com/feed/?trk=homepage-basic_sign-in-submit)
© Todos os Direitos Reservados## Contact
😁Obrigado por chegar até aqui!## License
![Static Badge](https://img.shields.io/badge/--path?style=plastic&logo=mit&logoSize=auto&label=license%20MIT&labelColor=%23555555&color=%2397CA00)
Released in 2024 This project is under the **MIT license**
[`voltar ao topo`](#-portfólio-github)