Bloco de Notas:
Aprenda a criar um bloco de notas funcional com este tutorial passo a passo utilizando HTML, CSS e JavaScript.
Este projeto consiste em um bloco de notas simples e eficaz. As notas ficam salvas automaticamente, também tem as opções de nova nota e remover nota.
Veja o Bloco de Notas em funcionamento neste link. Bloco de Notas.
Veja o vídeo no YouTube:
Começando o Tutorial:
1° Passo: Abra seu VS Code, ou qualquer IDE da sua preferência e crie três pastas com os nomes... index.html, style.css e script.js.
Logo em seguida copie o código html abaixo e cole na pasta "index.html".
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Bloco de Notas</title>
</head>
<body>
<div id="notepad-container">
<div id="buttons">
<div id="buttons-left">
<select id="note-select"></select>
</div>
<div id="buttons-right">
<button id="new-note">Nova Nota</button>
<button id="delete-note">Remover Nota</button>
</div>
</div>
<div id="notepad">
<textarea id="note" placeholder="Escreva suas notas aqui..."></textarea>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
2° Passo: Copie o código abaixo e cole na pasta "style.css".
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f4f4f4;
}
#notepad-container {
width: 88%;
max-width: 360px;
margin-top: 20px;
}
#buttons {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
#buttons-left, #buttons-right {
display: flex;
align-items: center;
}
#buttons button, #note-select {
padding: 10px 15px;
font-size: 16px;
cursor: pointer;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
transition: background-color 0.3s;
margin-right: 5px;
}
#buttons button:hover, #note-select:hover {
background-color: #0056b3;
}
#note-select {
width: 88%;
max-width: 300px;
background-color: white;
color: black;
border: 1px solid #007BFF;
}
#notepad {
width: 88%;
height: 300px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
background-color: #fff;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
#notepad textarea {
width: 88%;
height: 100%;
border: none;
outline: none;
resize: none;
font-size: 16px;
line-height: 1.5;
border-radius: 8px;
padding: 10px;
box-sizing: border-box;
}
3° Passo: Copie o código abaixo e cole na pasta "script.js".
const noteArea = document.getElementById('note');
const newNoteBtn = document.getElementById('new-note');
const deleteNoteBtn = document.getElementById('delete-note');
const noteSelect = document.getElementById('note-select');
// Função para gerar um ID único
function generateNoteId() {
return `note-${Date.now()}`;
}
// Carregar lista de notas
function loadNoteList() {
const notes = JSON.parse(localStorage.getItem('notes')) || [];
noteSelect.innerHTML = '';
notes.forEach(note => {
const option = document.createElement('option');
option.value = note.id;
option.textContent = note.title || 'Nota sem título';
noteSelect.appendChild(option);
});
}
// Carregar uma nota específica
function loadNote(noteId) {
const notes = JSON.parse(localStorage.getItem('notes')) || [];
const note = notes.find(note => note.id === noteId);
if (note) {
noteArea.value = note.content;
noteSelect.value = note.id;
} else {
noteArea.value = '';
}
}
// Salvar ou atualizar a nota atual
function saveNote() {
const notes = JSON.parse(localStorage.getItem('notes')) || [];
const noteId = noteSelect.value || generateNoteId();
const existingNoteIndex = notes.findIndex(note => note.id === noteId);
if (existingNoteIndex >= 0) {
// Atualizar nota existente
notes[existingNoteIndex].content = noteArea.value;
} else {
// Criar nova nota
const newNote = {
id: noteId,
title: `Nota ${notes.length + 1}`,
content: noteArea.value
};
notes.push(newNote);
noteSelect.value = newNote.id;
}
localStorage.setItem('notes', JSON.stringify(notes));
loadNoteList();
}
// Criar nova nota
newNoteBtn.addEventListener('click', () => {
saveNote(); // Salva a nota atual antes de criar uma nova
noteArea.value = '';
noteSelect.value = '';
});
// Remover a nota atual
deleteNoteBtn.addEventListener('click', () => {
const noteId = noteSelect.value;
if (!noteId) return;
const confirmDelete = confirm("Tem a certeza que deseja remover a nota atual?");
if (confirmDelete) {
let notes = JSON.parse(localStorage.getItem('notes')) || [];
notes = notes.filter(note => note.id !== noteId);
localStorage.setItem('notes', JSON.stringify(notes));
noteArea.value = '';
loadNoteList();
}
});
// Carregar a nota selecionada
noteSelect.addEventListener('change', () => {
const noteId = noteSelect.value;
if (noteId) {
loadNote(noteId);
} else {
noteArea.value = '';
}
});
// Carregar as notas ao iniciar
loadNoteList();
4° Passo: Testar o Projeto!
Agora, com os três arquivos (index.html, style.css, e script.js) criados, você pode abrir o index.html no seu navegador e ver seu projeto funcionando perfeitamente!
Se preferir os códigos estão no meu Repositório no GitHub.
Resultado vai ser igual o da imagem abaixo:
As postagens do nosso blog te ajudaram?
Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando!
60% das doações são no valor de R$ 7,00
Antônio José do Carmo Nascimento
Comentários
Postar um comentário
Obrigado pelo seu feedback!