Notepad Tool

Online Notepad - WebTools Pro * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { --primary: #4361ee; --secondary: #3a0ca3; --success: #2ecc71; --danger: #e74c3c; --warning: #f39c12; --dark: #2c3e50; --light: #ecf0f1; --note-yellow: #fff9c4; --note-blue: #e3f2fd; --note-green: #e8f5e9; --note-pink: #fce4ec; } body { background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; } .container { background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); width: 100%; max-width: 800px; overflow: hidden; display: flex; flex-direction: column; height: 90vh; } .header { background: var(--dark); color: white; padding: 25px 30px; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } .header h1 { font-size: 2rem; } .stats { display: flex; gap: 20px; } .stat-item { text-align: center; } .stat-value { font-size: 1.5rem; font-weight: 700; color: var(--primary); } .stat-label { font-size: 0.8rem; opacity: 0.8; } .main-container { display: flex; flex: 1; overflow: hidden; } .sidebar { width: 250px; background: #f8f9fa; border-right: 1px solid #eaeaea; padding: 20px; display: flex; flex-direction: column; overflow-y: auto; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .new-note-btn { background: var(--primary); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .new-note-btn:hover { background: var(--secondary); transform: rotate(90deg); } .notes-list { flex: 1; overflow-y: auto; } .note-item { background: white; padding: 15px; border-radius: 10px; margin-bottom: 10px; cursor: pointer; transition: all 0.3s ease; border-left: 4px solid var(--primary); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); } .note-item:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .note-item.active { background: #f0f7ff; border-left-color: var(--secondary); } .note-title { font-weight: 600; margin-bottom: 5px; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note-preview { font-size: 0.9rem; color: #7f8c8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; } .note-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #95a5a6; } .editor-container { flex: 1; display: flex; flex-direction: column; overflow: hidden; } .editor-toolbar { background: #f8f9fa; padding: 15px 20px; display: flex; gap: 10px; border-bottom: 1px solid #eaeaea; flex-wrap: wrap; } .toolbar-btn { width: 40px; height: 40px; border: 1px solid #ddd; background: white; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .toolbar-btn:hover { background: var(--primary); color: white; border-color: var(--primary); } .note-title-input { flex: 1; padding: 10px 15px; border: 2px solid #ddd; border-radius: 8px; font-size: 1.1rem; font-weight: 600; outline: none; } .note-title-input:focus { border-color: var(--primary); } .color-options { display: flex; gap: 5px; } .color-option { width: 25px; height: 25px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: all 0.3s ease; } .color-option.active { border-color: var(--dark); transform: scale(1.1); } .color-yellow { background: var(--note-yellow); } .color-blue { background: var(--note-blue); } .color-green { background: var(--note-green); } .color-pink { background: var(--note-pink); } .color-white { background: white; } .note-editor { flex: 1; padding: 25px; border: none; outline: none; resize: none; font-size: 16px; line-height: 1.6; overflow-y: auto; background: var(--note-yellow); min-height: 300px; transition: background-color 0.3s ease; } .note-editor:focus { box-shadow: inset 0 0 0 2px var(--primary); } .editor-footer { background: #f8f9fa; padding: 15px 25px; display: flex; justify-content: space-between; border-top: 1px solid #eaeaea; color: #7f8c8d; font-size: 0.9rem; flex-shrink: 0; } .action-buttons { display: flex; gap: 10px; } .action-btn { padding: 8px 16px; border: none; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 5px; } .save-btn { background: var(--success); color: white; } .delete-btn { background: var(--danger); color: white; } .export-btn { background: var(--primary); color: white; } .action-btn:hover { transform: translateY(-2px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } .notification { position: fixed; top: 20px; right: 20px; background: var(--success); color: white; padding: 15px 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); transform: translateX(150%); transition: transform 0.3s ease; z-index: 1000; } .notification.show { transform: translateX(0); } .empty-notes { text-align: center; padding: 40px 20px; color: #95a5a6; } .empty-notes i { font-size: 3rem; margin-bottom: 15px; opacity: 0.3; } @media (max-width: 768px) { .container { height: 95vh; } .main-container { flex-direction: column; } .sidebar { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid #eaeaea; } .header { flex-direction: column; gap: 15px; text-align: center; } .stats { width: 100%; justify-content: space-around; } } @media (max-width: 480px) { .editor-toolbar { justify-content: center; } .note-title-input { width: 100%; margin-bottom: 10px; } .action-buttons { flex-direction: column; width: 100%; } .action-btn { width: 100%; justify-content: center; } } Online Notepad 0 Notes 0 Words 0 Characters Your Notes No notes yet Create your first note! 0 words • 0 characters • Not saved yet Save Delete Export Note saved successfully! let notes = JSON.parse(localStorage.getItem('notes')) || []; let currentNoteId = null; let autoSaveInterval; // Initialize document.addEventListener('DOMContentLoaded', function() { // Load notes loadNotes(); // Set up event listeners setupEventListeners(); // Create first note if none exist if (notes.length === 0) { createNewNote(); } else { // Load first note loadNote(notes[0].id); } // Start auto-save startAutoSave(); // Update stats updateStats(); }); function setupEventListeners() { // New note button document.getElementById('newNoteBtn').addEventListener('click', createNewNote); // Save button document.getElementById('saveBtn').addEventListener('click', saveNote); // Delete button document.getElementById('deleteBtn').addEventListener('click', deleteNote); // Export button document.getElementById('exportBtn').addEventListener('click', exportNote); // Formatting buttons document.getElementById('boldBtn').addEventListener('click', () => formatText('bold')); document.getElementById('italicBtn').addEventListener('click', () => formatText('italic')); document.getElementById('underlineBtn').addEventListener('click', () => formatText('underline')); // Color options document.querySelectorAll('.color-option').forEach(option => { option.addEventListener('click', function() { // Remove active class from all document.querySelectorAll('.color-option').forEach(opt => { opt.classList.remove('active'); }); // Add active class to clicked this.classList.add('active'); // Change note background const color = this.getAttribute('data-color'); changeNoteColor(color); }); }); // Note title and content events document.getElementById('noteTitle').addEventListener('input', updateNotePreview); document.getElementById('noteContent').addEventListener('input', updateStats); // Keyboard shortcuts document.addEventListener('keydown', function(e) { // Save: Ctrl+S if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveNote(); } // New note: Ctrl+N else if (e.ctrlKey && e.key === 'n') { e.preventDefault(); createNewNote(); } // Delete: Ctrl+D else if (e.ctrlKey && e.key === 'd') { e.preventDefault(); deleteNote(); } }); } function createNewNote() { const noteId = Date.now(); const newNote = { id: noteId, title: 'Untitled Note', content: '', color: 'yellow', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() }; notes.unshift(newNote); saveNotes(); loadNotesList(); loadNote(noteId); showNotification('New note created!', 'success'); } function loadNotes() { // Sort notes by updatedAt (newest first) notes.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt)); loadNotesList(); } function loadNotesList() { const notesList = document.getElementById('notesList'); if (notes.length === 0) { notesList.innerHTML = ` No notes yet Create your first note! `; return; } let notesHTML = ''; notes.forEach(note => { const updated = new Date(note.updatedAt); const timeString = updated.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); const dateString = updated.toLocaleDateString(); // Create preview (first 50 characters) const preview = note.content.length > 50 ? note.content.substring(0, 50) + '...' : note.content; notesHTML += ` ${note.title || 'Untitled Note'} ${preview || 'No content'} ${dateString} ${timeString} `; }); notesList.innerHTML = notesHTML; // Add click event listeners to note items document.querySelectorAll('.note-item').forEach(item => { item.addEventListener('click', function() { const noteId = parseInt(this.getAttribute('data-id')); loadNote(noteId); }); }); // Update notes count document.getElementById('notesCount').textContent = notes.length; } function loadNote(noteId) { const note = notes.find(n => n.id === noteId); if (!note) return; currentNoteId = noteId; // Load note data into editor document.getElementById('noteTitle').value = note.title; document.getElementById('noteContent').value = note.content; // Set note color changeNoteColor(note.color); // Update color selector document.querySelectorAll('.color-option').forEach(opt => { opt.classList.remove('active'); if (opt.getAttribute('data-color') === note.color) { opt.classList.add('active'); } }); // Update last saved time const updated = new Date(note.updatedAt); document.getElementById('lastSaved').textContent = `Last saved: ${updated.toLocaleTimeString()}`; // Update stats updateStats(); // Update notes list to show active note loadNotesList(); } function saveNote() { if (!currentNoteId) return; const note = notes.find(n => n.id === currentNoteId); if (!note) return; // Update note data note.title = document.getElementById('noteTitle').value.trim() || 'Untitled Note'; note.content = document.getElementById('noteContent').value; note.updatedAt = new Date().toISOString(); // Save to localStorage saveNotes(); // Update notes list loadNotesList(); // Update last saved time const now = new Date(); document.getElementById('lastSaved').textContent = `Last saved: ${now.toLocaleTimeString()}`; showNotification('Note saved!', 'success'); } function saveNotes() { localStorage.setItem('notes', JSON.stringify(notes)); } function deleteNote() { if (!currentNoteId) return; if (confirm('Are you sure you want to delete this note? This cannot be undone.')) { // Remove note from array notes = notes.filter(n => n.id !== currentNoteId); // Save to localStorage saveNotes(); // Load next note or create new one if (notes.length > 0) { loadNote(notes[0].id); } else { createNewNote(); } // Update notes list loadNotesList(); showNotification('Note deleted!', 'success'); } } function exportNote() { if (!currentNoteId) return; const note = notes.find(n => n.id === currentNoteId); if (!note) return; const content = `${note.title}\n\n${note.content}`; const fileName = `${note.title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.txt`; const blob = new Blob([content], { type: 'text/plain' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showNotification(`Note exported as "${fileName}"`, 'success'); } function changeNoteColor(color) { const noteEditor = document.getElementById('noteContent'); const colorMap = { 'yellow': 'var(--note-yellow)', 'blue': 'var(--note-blue)', 'green': 'var(--note-green)', 'pink': 'var(--note-pink)', 'white': 'white' }; noteEditor.style.backgroundColor = colorMap[color]; // Update current note color if (currentNoteId) { const note = notes.find(n => n.id === currentNoteId); if (note) { note.color = color; saveNotes(); } } } function formatText(command) { const textarea = document.getElementById('noteContent'); const start = textarea.selectionStart; const end = textarea.selectionEnd; const selectedText = textarea.value.substring(start, end); let formattedText = selectedText; switch (command) { case 'bold': formattedText = `**${selectedText}**`; break; case 'italic': formattedText = `*${selectedText}*`; break; case 'underline': formattedText = `__${selectedText}__`; break; } // Replace selected text with formatted text textarea.value = textarea.value.substring(0, start) + formattedText + textarea.value.substring(end); // Restore cursor position textarea.selectionStart = start + formattedText.length; textarea.selectionEnd = start + formattedText.length; // Focus textarea textarea.focus(); // Update stats updateStats(); } function updateStats() { const content = document.getElementById('noteContent').value; const words = content.trim().split(/\s+/).filter(word => word.length > 0); const characters = content.length; // Update displays document.getElementById('wordsCount').textContent = words.length; document.getElementById('charsCount').textContent = characters; document.getElementById('wordCount').textContent = `${words.length} words`; document.getElementById('charCount').textContent = `${characters} characters`; } function updateNotePreview() { if (!currentNoteId) return; const note = notes.find(n => n.id === currentNoteId); if (note) { note.title = document.getElementById('noteTitle').value.trim() || 'Untitled Note'; saveNotes(); loadNotesList(); } } function startAutoSave() { autoSaveInterval = setInterval(() => { if (currentNoteId) { saveNote(); } }, 30000); // Auto-save every 30 seconds } function showNotification(message, type = 'success') { const notification = document.getElementById('notification'); notification.innerHTML = ` ${message}`; notification.style.background = { 'success': '#2ecc71', 'danger': '#e74c3c', 'warning': '#f39c12' }[type]; notification.classList.add('show'); setTimeout(() => { notification.classList.remove('show'); }, 3000); } // Update stats initially updateStats();

Online Notepad

Your Notes

Tools

Leave a Reply Cancel reply

One swallow does not make the spring

Persuasion is often more effectual than force

Spieth in danger of missing cut

Hibs and Ross County fans on final

Tip of the day: That man again

One swallow does not make the spring

After all is said and done, more is said than done

Knowledge is power

The Future Of Possible

Xbox boss talks Project Scorpio price

Hibs and Ross County fans on final

Online Notepad

Your Notes

Subscribe to our mailing list to get the new updates!

Random Number Generator Tool

After all is said and done, more is said than done

Related Articles

Leave a Reply Cancel reply

One swallow does not make the spring

After all is said and done, more is said than done

Knowledge is power

The Future Of Possible

Xbox boss talks Project Scorpio price

Hibs and Ross County fans on final