Objetivo

O inuito deste projeto foi criar um sistema de notas utilizando HTML, CSS, um pouco de Bootstrap, e Javascript puro.
⚠️ Para visualizar a estilização da aplicação basta acessar a pasta acima intitulada "Layout do projeto".

Pontos relevantes sobre o projeto:

Neste projeto é utilizado o localStorage para armazenar as notas que o usuário criou e impedir que após a página ser atualizada ou fechada o mesmo perca as suas anotações. Armazenando-as no browser. Como o HTML é utilizado para projetar o "esqueleto" do site, em primeira instância foi projetada a estrutura, em seguida, a estilização com o CSS, e por fim, adicionamos interações ao clicar no botão, com a linguagem Javascript.

Considerações sobre a estrutura em HTML:

Para implementar o ícone de adição de nota importaremos uma URL do Font Awesome e adicionaremos ao header da seguinte forma:

<script src="https://kit.fontawesome.com/5eb2c51ffb.js" crossorigin="anonymous"></script>   

• O ícone (+) será adicionado dentro da estrutura utilizando a tag i e a classe font-awesome;
• Criaremos um formulário com a tag form que usaremos posteriormente para fazer as notas do sistema;
• Usando a tag de button criaremos um botão que será responsável por adicionar novas notas.

Estrutura CSS

Se tratando da folha de estilo foi utilizado uma estrutura de design responsivo visando o êxito e excelente visualização em qualquer dispositivo que o usuário esteja acessando. Utilizei CSS Reset com margin e padding em 0; Além de utilizar flex-box.

Interatividade com Javascript

Trabalhamos com o uso de DOM (Document Object Model) para fazer as interações entre os arquivos html e css e javascript, maioritariamente como o uso de document.querySelector.

• Para armazenar os meses do ano foi apropriado manusear arrays;
• Utilizando o método JSON.parse foi possível armazenar o valor de note dentro do browser, guardando asssim, todas as informações das notas mesmo que a página seja recarregada;
• Além disso, foi criada uma função anônima dentro da qual será criada o formulário usando o evento "click" Eventlistener, quando o usuário clicar sobre o ícone o formulário de notas irá aparecer.