Blog Javascript

Como criar um aplicativo de anotações em JavaScript com recursos de edição de texto

O artigo é um tutorial sobre como criar um aplicativo de anotações em JavaScript com recursos de edição de texto. O tutorial abrange a implementação do HTML e CSS, bem como a lógica JavaScript necessária para adicionar, editar e exibir notas.

javascript

22 mar 2023

Como criar um aplicativo de anotações em JavaScript com recursos de edição de texto

Neste tutorial, você aprenderá a construir um aplicativo de anotações em JavaScript com recursos de edição de texto.

Usaremos a biblioteca ContentEditable do JavaScript para permitir que os usuários editem o conteúdo de suas anotações.

Também utilizaremos o LocalStorage para armazenar as anotações localmente no navegador do usuário.

Pré-requisitos

Para seguir este tutorial, você precisará ter conhecimentos básicos de HTML, CSS e JavaScript.

Passo 1 - Estrutura do HTML

Começaremos criando a estrutura básica do nosso aplicativo de anotações.

Precisaremos de um elemento de entrada de texto para o título da nota e um elemento ContentEditable para a descrição da nota.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>App de Anotações</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="app-container">
    <div class="note-container">
      <input type="text" id="note-title" placeholder="Título">
      <div id="note-description" contenteditable></div>
    </div>
    <div class="notes-container"></div>
  </div>
  <script src="app.js"></script>
</body>
</html>

Observe que criamos um contêiner de notas para exibir todas as anotações existentes.

Passo 2 - Estilização do CSS

Vamos estilizar o nosso aplicativo de anotações usando CSS. Usaremos o seguinte CSS para estilizar os elementos:

.app-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #F5F5F5;
}

.note-container {
  width: 50%;
  height: 80vh;
  background-color: #FFFFFF;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
}

.note-container input[type="text"] {
  font-size: 24px;
  font-weight: bold;
  width: 100%;
  margin-bottom: 20px;
  border: none;
  outline: none;
}

.note-container #note-description {
  font-size: 18px;
  line-height: 1.5;
  height: 80%;
  overflow: auto;
  border: none;
  outline: none;
}

.notes-container {
  width: 50%;
  height: 80vh;
  background-color: #FFFFFF;
  padding: 20px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.notes-container .note {
  margin-bottom: 20px;
  cursor: pointer;
}

.notes-container .note h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.notes-container .note p {
  font-size: 18px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Aqui, estilizamos os elementos necessários para nosso aplicativo, como o contêiner do aplicativo, contêineres de notas, entrada de texto e elementos ContentEditable.

Também adicionamos estilos para a exibição de notas existentes.

Passo 3 - Implementação do JavaScript

Agora, vamos implementar a lógica do nosso aplicativo de anotações.

Primeiro, vamos declarar algumas variáveis ​​e buscar elementos HTML do nosso aplicativo usando o document.querySelector:

const noteTitle = document.querySelector('#note-title');
const noteDescription = document.querySelector('#note-description');
const notesContainer = document.querySelector('.notes-container');
let notes = JSON.parse(localStorage.getItem('notes')) || [];

Aqui, criamos variáveis ​​para armazenar os elementos HTML relevantes e inicializamos a variável notes como um array vazio.

Em seguida, buscamos o valor armazenado no localStorage, que contém todas as anotações que o usuário salvou anteriormente.

Caso não haja nenhuma anotação armazenada, definimos o valor padrão como um array vazio.

Agora, vamos criar uma função para salvar as notas no localStorage sempre que o usuário criar uma nova nota ou editar uma nota existente:

function saveNotes() {
  localStorage.setItem('notes', JSON.stringify(notes));
}

Agora, vamos criar uma função para exibir as notas salvas anteriormente:

function displayNotes() {
  notesContainer.innerHTML = '';
  notes.forEach((note, index) => {
    const noteElement = document.createElement('div');
    noteElement.classList.add('note');
    noteElement.addEventListener('click', () => {
      editNote(index);
    });
    noteElement.innerHTML = `
      <h2>${note.title}</h2>
      <p>${note.description}</p>
    `;
    notesContainer.appendChild(noteElement);
  });
}

Aqui, limpamos o contêiner de notas existente e, em seguida, iteramos sobre o array notes e criamos um novo elemento HTML para cada nota, adicionando um ouvinte de eventos click para editar cada nota.

Em seguida, adicionamos o elemento HTML ao contêiner de notas.

Agora, vamos criar uma função para adicionar uma nova nota quando o usuário clicar no botão "Salvar":

function addNote() {
  const note = {
    title: noteTitle.value,
    description: noteDescription.innerHTML,
  };
  notes.push(note);
  saveNotes();
  displayNotes();
  noteTitle.value = '';
  noteDescription.innerHTML = '';
}

Aqui, criamos um objeto note com as informações do título e descrição da nota e adicionamos a nota ao array notes.

Em seguida, salvamos as notas no localStorage, exibimos as notas atualizadas e limpamos os campos de entrada de texto.

Agora, vamos criar uma função para editar uma nota existente quando o usuário clicar em uma nota no contêiner de notas:

function editNote(index) {
  const note = notes[index];
  noteTitle.value = note.title;
  noteDescription.innerHTML = note.description;
  notes.splice(index, 1);
  saveNotes();
  displayNotes();
}

Aqui, recuperamos a nota selecionada pelo usuário do array notes, preenchemos os campos de entrada de texto com as informações da nota selecionada e, em seguida, removemos a nota selecionada do array notes.

Depois, salvamos as notas atualizadas no localStorage, exibimos as notas atualizadas e permitimos que o usuário edite a nota selecionada.

Por fim, vamos adicionar um ouvinte de eventos ao botão "Salvar" para que ele chame a função addNote quando o usuário clicar no botão:

document.querySelector('#add-note-btn').addEventListener('click', addNote);

E é isso! Agora temos um aplicativo de anotações totalmente funcional com recursos de edição de texto.

Conclusão

Neste artigo, vimos como criar um aplicativo de anotações em JavaScript com recursos de edição de texto.

Implementamos a lógica do nosso aplicativo, incluindo adicionar e editar notas, exibir notas salvas e armazenar notas no localStorage.

Espero que este artigo tenha sido útil para você e que tenha inspirado você a criar seus próprios aplicativos em JavaScript!