URL:https://ryoworks.com/estimateapp/
実務での見積作成業務を想定して制作した、ローカル完結型の見積作成Webアプリです。
HTML・CSS・JavaScriptのみで構築し、明細の追加・削除、金額の自動計算、自動保存、履歴管理、印刷対応までを実装しました。
入力中のデータはローカルストレージへ自動保存され、保存済みの見積は履歴一覧から再読み込みできます。印刷時には未入力の備考や振込先情報を自動で非表示にするなど、実際の見積書として使いやすい見え方にも配慮しました。
UI面では、見積情報、明細、合計金額を整理して配置し、スマートフォンでも操作しやすいレスポンシブデザインを意識しています。バックエンドを使わずに、フロントエンドのみでどこまで実用性を高められるかを意識して制作しました。
主な機能
・見積明細の追加・削除
・小計・消費税・合計金額の自動計算
・ローカルストレージによる自動保存・復元
・保存履歴の管理と再読込
・印刷 / PDF出力対応
・印刷時の不要項目自動非表示
制作時間：3時間