Last active
December 8, 2023 14:47
-
-
Save gorbiz/91d988a565e04debaf28e412b6f864d4 to your computer and use it in GitHub Desktop.
Log lady minimal core
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Log App</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; } | |
| .container { width: 300px; margin: 0 auto; padding-top: 20px; } | |
| input { margin-top: 10px; width: 100%; } | |
| ul { padding: 0; } | |
| li { list-style: none; margin-top: 10px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <input type="text" id="logInput" placeholder="Enter log" onkeypress="handleKeyPress(event)"> | |
| <ul id="logList"></ul> | |
| </div> | |
| <script> | |
| const storage = { | |
| get() { | |
| return JSON.parse(localStorage.getItem('logs')) || [] | |
| }, | |
| set(logs) { | |
| localStorage.setItem('logs', JSON.stringify(logs)) | |
| }, | |
| add(log) { | |
| const logs = this.get() | |
| logs.push(log) | |
| this.set(logs) | |
| } | |
| } | |
| const renderLogItem = log => `<li>${log.id}: ${log.text}</li>` | |
| const loadLogs = () => { | |
| const logs = storage.get() | |
| document.getElementById('logList').innerHTML = logs.map(renderLogItem).reverse().join('') | |
| } | |
| const addLog = text => { | |
| const timestamp = new Date().toISOString() | |
| const id = timestamp + '' // Add user initials here when available | |
| storage.add({ id, text }) | |
| document.getElementById('logList').innerHTML = renderLogItem({ id, text }) + document.getElementById('logList').innerHTML | |
| } | |
| const handleKeyPress = event => { | |
| if (event.key !== 'Enter') return | |
| const logInput = document.getElementById('logInput') | |
| const text = logInput.value.trim() | |
| if (text) { | |
| addLog(text) | |
| logInput.value = '' | |
| } | |
| } | |
| loadLogs() | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment