/alurachallenge_frontend

Projeto desenvolvido durante Challenge de Front-end da Alura. Trata-se de um editor de código que possibilita salvar trechos de código em uma página de comunidade, onde há algumas opções para interação (em fase de implementação)

Primary LanguageJavaScript

Alura-DEV Code Editor

Editor e Comunidade de trechos de códigos desenvolvido durante Challenge de Front-End da Alura

Explore o projeto »

Visualizar o projeto · Reportar Bug

Sobre o projeto

Este projeto foi desenvolvido com fins acadêmicos, buscando fixar conhecimentos recém-adquiridos em HTML, CSS e JavaScript, não sendo utilizado, até este momento, nenhum framework para seu desenvolvimento.
A ideia do projeto, bem como seu design, foram fornecidos pela Alura.

Utilizando o editor

Você pode testar o editor através deste link. Os dados do projeto adicionados e salvos a partir da página principal da aplicação ficam salvos localmente em seu navegador, através do local Storage, e você poderá visualizá-los na página comunidade.

Funcionalidades implementadas

Na página principal da aplicação (editor de código) é possivel adicionar um trecho de código, título, descrição e linguagem utilizada no projeto, além de ser possivel personalizá-lo através da aplicação de highlight e da escolha de uma cor de fundo. Ao clicar em salvar projeto, é dado um feedback de que o cartão foi salvo na página de comunidades. Caso o código e o título não tenham sido digitados, será dado feedback no sentido de preencher esses campos antes de salvar o projeto.
Na página comunidade, são carregados os projetos cujas informações estejam salvas no Local Storage. É possível interagir com esses cartões curtindo-os ou excluindo-os (o botão para tanto aparece ao passar o mouse sobre o cartão do projeto que se deseja interagir). A "curtida" ficará salva no local storage, podendo ser curtido uma única vez (ao clicar uma segunda vez, a curtida será desmarcada e tal opção permanecerá salva). Quando excluído o cartão, o Local Storage é atualizado com essa informação.
O campo de pesquisa realiza uma busca nos campos de título e descrição dos projetos da página comunidade, não sendo case-sensitive.

Funcionalidades em desenvolvimento


Implementações que requerem mais estudos

  • Criar opção de exportar o código na extensão escolhida
  • Exportação do código em png, svg ou jpg
  • Alteração de usuários
  • Botão de comentários na página comunidade
  • Utilizar um framework SPA para montar o editor de código
  • Botão de edição dos projetos salvos na página Comunidade, devolvendo seu conteúdo à página principal
  • Viabilizar utilização por mais de um usuário