--- /dev/null
+*,
+::before,
+::after {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+}
+html {
+ font-size: 62.5%;
+}
+body {
+ font-size: 2rem;
+}
+.cash-register-screen {
+ padding: 1rem;
+ border: 1px solid black;
+}
+.product-list {
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ padding: 1rem;
+ border: 1px solid black;
+}
+.product-wrapper {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 1rem;
+ border: 1px solid black;
+}
+.quantity-controls {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 0.5rem;
+}
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Digital Cash Register</title>
+ <link rel="stylesheet" href="./styles.css">
+ </head>
+ <body>
+ <div class="customer-input-ctn">
+ <label for="cash">Enter your cash here:</label>
+ <input type="number" id="cash" min="0">
+ <button id="purchase-btn">Purchase</button>
+ </div>
+
+ <div class="cash-register">
+ <div class="cash-register-screen">
+ <div class="price-indicator">Total: <span id="total-price">$0.00</span></div>
+ <div id="change-due"></div>
+ </div>
+
+ <div class="product-list">
+ <div class="product-wrapper">
+ <p class="product-name">Water <span id="price-tag">$1.00</span></p>
+ <div class="quantity-controls">
+ <button class="minus-btn">-</button>
+ <p class="product-quantity">0</p>
+ <button class="plus-btn">+</button>
+ </div>
+ </div>
+ <div class="product-wrapper">
+ <p class="product-name">Bread <span id="price-tag">$2.50</span></p>
+ <div class="quantity-controls">
+ <button class="minus-btn">-</button>
+ <p class="product-quantity">0</p>
+ <button class="plus-btn">+</button>
+ </div>
+ </div>
+ </div>
+
+ <div id="change-drawer"></div>
+ </div>
+
+ <script src="./script.js"></script>
+ </body>
+</html>
\ No newline at end of file
repos / simple-cash-register.git / commitdiff