├── .gitignore ├── README.md ├── index.html ├── app.js ├── LICENSE └── styles.css /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore node_modules 2 | node_modules/ 3 | 4 | # Ignore log files 5 | npm-debug.log 6 | yarn-error.log 7 | 8 | # Ignore environment variable files 9 | .env 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # NoteKeeper 2 | 3 | NoteKeeper is a simple JavaScript-based note-taking web application. Users can add, view, and delete notes. 4 | 5 | ## Features 6 | 7 | - Add new notes. 8 | - View existing notes. 9 | - Delete notes. 10 | 11 | ## Installation 12 | 13 | 1. Clone the repository: 14 | ```bash 15 | git clone https://github.com/YOUR_USERNAME/NoteKeeper.git 16 | cd NoteKeeper 17 | ``` 18 | 19 | 2. Open `index.html` in your web browser. 20 | 21 | ## License 22 | 23 | This project is licensed under the MIT License. 24 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | NoteKeeper 7 | 8 | 9 | 10 |
11 |

NoteKeeper

12 |
13 | 14 | 15 |
16 | 17 |
18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | document.getElementById('note-form').addEventListener('submit', function(e) { 2 | e.preventDefault(); 3 | const noteInput = document.getElementById('note-input'); 4 | const noteList = document.getElementById('note-list'); 5 | 6 | // Create a new list item 7 | const li = document.createElement('li'); 8 | li.textContent = noteInput.value; 9 | 10 | // Create delete button 11 | const deleteBtn = document.createElement('button'); 12 | deleteBtn.textContent = 'Delete'; 13 | deleteBtn.addEventListener('click', function() { 14 | noteList.removeChild(li); 15 | }); 16 | 17 | li.appendChild(deleteBtn); 18 | noteList.appendChild(li); 19 | 20 | // Clear the input 21 | noteInput.value = ''; 22 | }); 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, sans-serif; 3 | background: #f4f4f4; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | .container { 9 | max-width: 600px; 10 | margin: 50px auto; 11 | padding: 20px; 12 | background: #fff; 13 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 14 | text-align: center; 15 | } 16 | 17 | h1 { 18 | margin-bottom: 20px; 19 | } 20 | 21 | form { 22 | margin-bottom: 20px; 23 | } 24 | 25 | form textarea { 26 | width: 100%; 27 | padding: 10px; 28 | font-size: 16px; 29 | margin-bottom: 10px; 30 | resize: vertical; 31 | } 32 | 33 | form button { 34 | padding: 10px 20px; 35 | font-size: 16px; 36 | background: #333; 37 | color: #fff; 38 | border: none; 39 | cursor: pointer; 40 | } 41 | 42 | ul { 43 | list-style: none; 44 | padding: 0; 45 | } 46 | 47 | ul li { 48 | display: flex; 49 | justify-content: space-between; 50 | align-items: center; 51 | padding: 10px; 52 | border-bottom: 1px solid #ddd; 53 | } 54 | 55 | ul li button { 56 | background: #ff4d4d; 57 | color: #fff; 58 | border: none; 59 | cursor: pointer; 60 | padding: 5px 10px; 61 | } 62 | --------------------------------------------------------------------------------