Ecosyste.ms: Awesome

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

Awesome Lists | Featured Topics | Projects

https://github.com/joaoplgaspar/animerank-js

Website para descobrir e rankear seus animes preferidos. Criado apenas com HTML5, SASS e JavaScript.
https://github.com/joaoplgaspar/animerank-js

anime animejs animerank html html5 javascript javascriptapi rank ranking sass scss vitrinedev

Last synced: 11 days ago
JSON representation

Website para descobrir e rankear seus animes preferidos. Criado apenas com HTML5, SASS e JavaScript.

Awesome Lists containing this project

README

        

AnimeRank - HTML5, JS, SASS

![Static Badge](https://img.shields.io/badge/Status-_Em%20Desenvolvimento-yellow?style=for-the-badge)

Website para descobrir e rankear seus animes preferidos. Criado apenas com HTML5, SASS e JavaScript.

| :placard: Vitrine.Dev | |
| ------------- | --- |
| :sparkles: Nome | **AnimeRank**
| :label: Tecnologias | html5, sass, javascript
| :rocket: URL | https://anime-rank-js.vercel.app


![AnimeRank Gif)](https://github.com/joaoplgaspar/animeRank-JS/assets/130015259/0f3a7950-0f15-4808-adc5-512f3e0b1e4e#vitrinedev)


## Resumo do projeto

O AnimeRank é um projeto para descobrir novos animes e rankear seus animes preferidos, utilizando apenas HTML5, Sass e JavaScript. Nele é possível ver todos os animes disponiveis na API ANILIST, podendo os classificar de várias maneiras e sendo exibido de várias formas, você pode adicionar o anime para sua lista e ver mais tarde ou avaliar um anime que você já viu e fazer um esquema de RANK. As informações são salvas de meio local com o LocalStorage, ao limpar o cache do navegador é possível que sua lista seja deletada. O AnimeRank é um desafio próprio para minha evolução pessoal, vendo meus limites nas linguagens básicas, desta maneira o projeto só foi criado para fins educativos, não pretendendo ganhos em cima dele.

# :hammer: Funcionalidades do projeto

- `Funcionalidade 1`: Ver todos os animes que existem até o momento

![image](https://github.com/joaoplgaspar/venda-frutas/assets/130015259/857bb31e-d808-4771-8195-fe2f60871e8e)
- `Funcionalidade 2`: Pesquisar por animes (Em desenvolvimento)
- `Funcionalidade 3`: Abrir card com várias informações do anime

![image](https://github.com/joaoplgaspar/venda-frutas/assets/130015259/a8d3635b-4656-45b5-b688-b0df7123577c)
- `Funcionalidade 4`: Adicionar anime a "Minha Lista" ou Rankear esse anime com uma nota e breve descrição
- `Funcionalidade 5`: Remover ou editar animes que estão na sua lista

![image](https://github.com/joaoplgaspar/animeRank-JS/assets/130015259/3d773527-26d1-47f3-8c31-43ad063fbd94)
- `Funcionalidade 6`: Ver o anime em uma página separada com mais informações ao clicar no "Ver mais"
- `Funcionalidade 7`: Compartilhar seu card de rank de animes para todos (Em desenvolvimento)

![AnimeRank Gif Tela Ver Mais](https://github.com/joaoplgaspar/animeRank-JS/assets/130015259/9d84ae99-4fdd-432e-a8ae-470ea41663c2)

## ✔️ Técnicas e tecnologias utilizadas
- ``HTML5, CSS3, JavaScript``
- ``Manipulação massiva de API (Querys)``
- ``Métodos Assincronos``
- ``Manipulação de DOM``
- ``LocalStorage``

## API por ANILIST