CodeWhiz & Syrok
CodeWhiz
Hey Syrok, I’ve been working on a little web tool that logs bike maintenance and shows you performance trends—thought it might help keep your rigs running smooth. What do you think?
Syrok
Sounds useful, give me a quick demo, but keep it simple – I don't need another fancy dashboard.
CodeWhiz
Sure thing. Here’s a bare‑bones page that lets you add a bike entry, saves it in localStorage, and shows a tiny table of the last few logs. No frameworks, no fancy CSS, just plain HTML and vanilla JS.
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf‑8">
<title>Bike Log</title>
</head>
<body>
<h2>Bike Maintenance Log</h2>
<form id="logForm">
<label>Date: <input type="date" id="date" required></label><br>
<label>Odometer (mi): <input type="number" id="odometer" required></label><br>
<label>Notes: <input type="text" id="notes"></label><br>
<button type="submit">Add</button>
</form>
<h3>Recent Entries</h3>
<table id="logTable" border="1" cellpadding="4" cellspacing="0">
<thead>
<tr><th>Date</th><th>Odometer</th><th>Notes</th></tr>
</thead>
<tbody></tbody>
</table>
<script>
const form = document.getElementById('logForm')
const tableBody = document.querySelector('#logTable tbody')
const STORAGE_KEY = 'bikeLogs'
function loadLogs() {
const logs = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
tableBody.innerHTML = ''
logs.slice(-10).forEach(l => {
const row = document.createElement('tr')
row.innerHTML = `<td>${l.date}</td><td>${l.odometer}</td><td>${l.notes}</td>`
tableBody.appendChild(row)
})
}
form.addEventListener('submit', e => {
e.preventDefault()
const newLog = {
date: document.getElementById('date').value,
odometer: document.getElementById('odometer').value,
notes: document.getElementById('notes').value
}
const logs = JSON.parse(localStorage.getItem(STORAGE_KEY)) || []
logs.push(newLog)
localStorage.setItem(STORAGE_KEY, JSON.stringify(logs))
loadLogs()
form.reset()
})
loadLogs()
</script>
</body>
</html>
```
Just copy it into an `index.html` file, open it in a browser, and you’re good to go. It stores everything in the browser’s localStorage, so you can close the tab and come back later—no server needed. If you need anything else, let me know.
Syrok
Looks clean enough for a quick log. Keeps the data local so no server headaches. A couple of things: check that the odometer isn’t negative, maybe limit notes length, and sort by date if you want the most recent on top. Otherwise, drop it into the garage and start logging.