diff --git a/index.html b/index.html new file mode 100644 index 0000000..1e813a7 --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Online Notepad + + + + +
+

Online Notepad

+
+ + + + + + + + + +
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..d2c742c --- /dev/null +++ b/script.js @@ -0,0 +1,39 @@ +document.addEventListener("DOMContentLoaded", (event) => { + const notepad = document.getElementById("notepad"); + + // Load saved content from localStorage + if (localStorage.getItem("notepadContent")) { + notepad.innerHTML = localStorage.getItem("notepadContent"); + } + + // Save content to localStorage on input + notepad.addEventListener("input", () => { + localStorage.setItem("notepadContent", notepad.innerHTML); + }); +}); + +// Function to format the selected text +function formatText(command) { + document.execCommand(command, false, null); +} + +// Function to insert a checkbox at the caret position +function insertCheckbox() { + const checkbox = document.createElement("input"); + checkbox.type = "checkbox"; + checkbox.style.marginRight = "5px"; + insertNodeAtCaret(checkbox); +} + +// Helper function to insert a node at the caret position +function insertNodeAtCaret(node) { + let sel = window.getSelection(); + if (sel.rangeCount) { + let range = sel.getRangeAt(0); + range.deleteContents(); + range.insertNode(node); + range.collapse(false); + sel.removeAllRanges(); + sel.addRange(range); + } +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..7b7118d --- /dev/null +++ b/server.js @@ -0,0 +1,13 @@ +document.addEventListener('DOMContentLoaded', (event) => { + const notepad = document.getElementById('notepad'); + + // Load saved content from localStorage + if (localStorage.getItem('notepadContent')) { + notepad.value = localStorage.getItem('notepadContent'); + } + + // Save content to localStorage on input + notepad.addEventListener('input', () => { + localStorage.setItem('notepadContent', notepad.value); + }); +}); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..8e8a14c --- /dev/null +++ b/styles.css @@ -0,0 +1,72 @@ +body { + font-family: "Helvetica Neue", Arial, sans-serif; + background-color: #f0f4f8; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +.container { + width: 80%; + max-width: 900px; + margin: 20px auto; + padding: 20px; + background: #ffffff; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + border-radius: 10px; +} + +h1 { + text-align: center; + color: #333; + margin-bottom: 20px; + font-size: 2em; +} + +.toolbar { + display: flex; + justify-content: center; + margin-bottom: 10px; +} + +.toolbar button { + margin: 0 5px; + padding: 10px; + font-size: 16px; + cursor: pointer; + background: #007bff; + color: white; + border: none; + border-radius: 4px; + transition: background-color 0.3s ease; +} + +.toolbar button:hover { + background-color: #0056b3; +} + +.toolbar button i { + pointer-events: none; +} + +#notepad { + width: 100%; + height: 600px; + padding: 20px; + font-size: 16px; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; + overflow-y: auto; + white-space: pre-wrap; + background-color: #fdfdfd; + color: #333; +} + +#notepad:empty:before { + content: attr(placeholder); + color: #999; +}