Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

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.


Static Badge

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
```

Static Badge

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

Print do Projeto

📽️project demonstration video




Video de Demostraçào

https://github.com/emmanuelmarcosdeoliveira/animais-fantasticos/assets/116108389/660fb676-c9a6-4083-b28c-8e952eaa6345




Acesse a versão on-line Projeto clicando no Link Abaixo







## 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)