I replaced our warehouse paper inventory with one HTML file
At work, inventory day looks the same every time. We walk around the warehouse with printed sheets and pens: wood panels, aluminium profiles, glass and laminates, hundreds of entries. We write numbers in the margins and cross things out. A few weeks later at least one sheet has gone missing. I'm not a professional app developer. I build a 2D game engine in JavaScript as a hobby. One evening I…
At my workplace, the inventory process remains consistent each day. We navigate the warehouse carrying printed sheets and pens, jotting down wood panels, aluminum profiles, glass, and laminates in the margins. Despite this routine, at least one sheet goes missing every few weeks. I don't possess professional app development skills.
Instead, I create 2D game engines using JavaScript as a hobby. One evening, I contemplated, "I cannot construct an inventory system for the company, but I can create one for myself." This article outlines the system I developed, its functionality, and areas for improvement. Essentially, the inventory system consists of a single HTML file containing inline CSS and JavaScript.
The catalogue, comprising item codes and descriptions, is embedded as a JavaScript array within the file. Quantities are stored in the phone's localStorage. The website is hosted on a folder with a random name on an existing site, with a noindex meta tag to prevent search engine indexing. Though someone might discover the URL, they would only encounter an empty app.
The counts are saved on my phone, not on the server. Gathering the data involved several pages of printed tables, some photographed upside down, and a scanned PDF. I provided photographs to an AI assistant, which transcribed them into plain text, with one line per item: "2|Line A|AL-001|White Matt" and "2|Line A|AL-002|Light Grey."
A small script transformed this text into the array that is incorporated into the HTML: "const CATALOGUE = [{c: 2, l: "Line A", k: "AL-001", d: "White Matt"}, {c: 2, l: "Line A", k: "AL-002", d: "Light Grey"}, ...];" The core functionality includes search and counters. Typing in "grey matt" yields "Light Grey Matt" regardless of the word order.
Each row contains a minus button, a number field, and a plus button. A click listener on the list manages all actions. Pressing the minus button decreases the quantity by one, while the plus button increases it by one. The vibration feature provides a small buzz upon successful counting. Tapping the number field allows direct input of values, useful when counting multiple items at once.
Some panels come in various sizes, such as "200×200" and "270×120" for oak natural panels, necessitating a list of sizes with their respective counters. The total quantity is calculated by combining the phone's quantity with the sizes' counters.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
