Scribd Logo
Upload

Welcome to Scribd!

  • Build A Cash Register

    Uploaded by

    John Kesh Mahugu
    10 views6 pages
    The document describes a cash register project that allows a user to enter the cash from a customer and calculates the change due. It includes the HTML, CSS, and JavaScript code to build the cash register interface and logic. The cash register displays the total price, accepts cash input, calculates the correct change owed to the customer based on available currency denominations (pennies, nickels, etc.), and updates the cash drawer amounts.

    Original Description:

    python and javascript codes

    Original Title

    build-a-cash-register

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document describes a cash register project that allows a user to enter the cash from a customer and calculates the change due. It includes the HTML, CSS, and JavaScript code to build the cash register interface and logic. The cash register displays the total price, accepts cash input, calculates the correct change owed to the customer based on available currency denominations (pennies, nickels, etc.), and updates the cash drawer amounts.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views6 pages

    Build A Cash Register

    Uploaded by

    John Kesh Mahugu
    The document describes a cash register project that allows a user to enter the cash from a customer and calculates the change due. It includes the HTML, CSS, and JavaScript code to build the cash register interface and logic. The cash register displays the total price, accepts cash input, calculates the correct change owed to the customer based on available currency denominations (pennies, nickels, etc.), and updates the cash drawer amounts.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    ** start of undefined **

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>The Cash Register</title>


    <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
    <main>
    <h2>The</h2>
    <h1>Cash Register Project</h1>
    <div id="change-due"></div>
    <div class="input-div">
    <label for="cash">Enter cash from customer:</label>
    <input type="number" id="cash" class="user-input" value="" />
    <button class="check-btn-styles" id="purchase-btn">Purchase</button>
    </div>
    <div class="container">
    <div class="top-display-screen-container">
    <p id="price-screen" class="price-screen"></p>
    <div class="connector"></div>
    </div>
    <div class="top-register">
    <div class="btns-container">
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    <button class="btn"></button>
    </div>
    <div id="cash-drawer-display" class="cash-drawer-display"></div>
    </div>
    <div class="bottom-register">
    <div class="circle"></div>
    </div>
    </div>
    </main>
    <script src="script.js"></script>
    </body>
    </html>

    ** end of undefined **

    ** start of undefined **

    * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }
    :root {
    --light-gray: #dfdfe2;
    --dark-blue: #0a0a23;
    }

    body {
    background-color: var(--dark-blue);
    color: var(--light-gray);
    }

    main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 40px 10px;
    }

    .freecodecamp-logo {
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    }

    h1 {
    font-size: 2.5rem;
    margin: 20px 0;
    text-align: center;
    }

    #change-due {
    text-align: left;
    font-size: 1.2rem;
    }

    .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    .input-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0 20px;
    }

    label {
    font-size: 18px;
    }

    .user-input {
    height: 30px;
    padding: 10px;
    margin: 10px;
    font-size: 15px;
    }

    .price-screen {
    border: 10px solid #99c9ff;
    background-color: black;
    height: 50px;
    width: 200px;
    margin-left: -40px;
    color: white;
    font-size: 1.2rem;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    }

    #price {
    font-size: 1.5rem;
    text-align: center;
    }

    .connector {
    margin-left: -20px;
    background-color: #99c9ff;
    height: 30px;
    width: 40px;
    }

    .top-register {
    display: flex;
    justify-content: space-around;
    border-radius: 35px 35px 0 0;
    padding-top: 20px;
    background-color: #99c9ff;
    height: 250px;
    width: 325px;
    }

    .btns-container {
    width: 25%;
    }

    .btn {
    border-radius: 10%;
    border: none;
    width: 20px;
    height: 20px;
    background-color: black;
    }

    .check-btn-styles {
    cursor: pointer;
    width: 100px;
    height: 30px;
    margin: 10px;
    color: #0a0a23;
    font-size: 18px;
    font-weight: bold;
    background-color: #feac32;
    background-image: linear-gradient(#fecc4c, #ffac33);
    border-color: #feac32;
    border-width: 3px;
    }

    .cash-drawer-display {
    font-size: 1.1rem;
    background-color: white;
    width: 55%;
    height: 95%;
    color: black;
    padding: 10px;
    }

    .bottom-register {
    background-color: #99c9ff;
    height: 50px;
    width: 325px;
    margin-top: 10px;
    }

    .circle {
    margin: 15px auto;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: black;
    }

    ** end of undefined **

    ** start of undefined **

    let price = 1.87;


    let cid = [
    ["PENNY", 1.01],
    ["NICKEL", 2.05],
    ["DIME", 3.1],
    ["QUARTER", 4.25],
    ["ONE", 90],
    ["FIVE", 55],
    ["TEN", 20],
    ["TWENTY", 60],
    ["ONE HUNDRED", 100]
    ];

    const displayChangeDue = document.getElementById('change-due');


    const cash = document.getElementById('cash');
    const purchaseBtn = document.getElementById('purchase-btn');
    const priceScreen = document.getElementById('price-screen');
    const cashDrawerDisplay = document.getElementById('cash-drawer-display');
    const formatResults = (status, change) => {
    displayChangeDue.innerHTML = `<p>Status: ${status}</p>`;
    change.map(
    money => (displayChangeDue.innerHTML += `<p>${money[0]}: $${money[1]}</p>`)
    );
    return;
    };

    const checkCashRegister = () => {


    if (Number(cash.value) < price) {
    alert('Customer does not have enough money to purchase the item');
    cash.value = '';
    return;
    }

    if (Number(cash.value) === price) {


    displayChangeDue.innerHTML =
    '<p>No change due - customer paid with exact cash</p>';
    cash.value = '';
    return;
    }

    let changeDue = Number(cash.value) - price;


    let reversedCid = [...cid].reverse();
    let denominations = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01];
    let result = { status: 'OPEN', change: [] };
    let totalCID = parseFloat(
    cid
    .map(total => total[1])
    .reduce((prev, curr) => prev + curr)
    .toFixed(2)
    );

    if (totalCID < changeDue) {


    return (displayChangeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>');
    }

    if (totalCID === changeDue) {


    result.status = 'CLOSED';
    }

    for (let i = 0; i <= reversedCid.length; i++) {


    if (changeDue > denominations[i] && changeDue > 0) {
    let count = 0;
    let total = reversedCid[i][1];
    while (total > 0 && changeDue >= denominations[i]) {
    total -= denominations[i];
    changeDue = parseFloat((changeDue -= denominations[i]).toFixed(2));
    count++;
    }
    if (count > 0) {
    result.change.push([reversedCid[i][0], count * denominations[i]]);
    }
    }
    }
    if (changeDue > 0) {
    return (displayChangeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>');
    }
    formatResults(result.status, result.change);
    updateUI(result.change);
    };

    const checkResults = () => {


    if (!cash.value) {
    return;
    }
    checkCashRegister();
    };

    const updateUI = change => {


    const currencyNameMap = {
    PENNY: 'Pennies',
    NICKEL: 'Nickels',
    DIME: 'Dimes',
    QUARTER: 'Quarters',
    ONE: 'Ones',
    FIVE: 'Fives',
    TEN: 'Tens',
    TWENTY: 'Twenties',
    'ONE HUNDRED': 'Hundreds'
    };
    // Update cid if change is passed in
    if (change) {
    change.forEach(changeArr => {
    const targetArr = cid.find(cidArr => cidArr[0] === changeArr[0]);
    targetArr[1] = parseFloat((targetArr[1] - changeArr[1]).toFixed(2));
    });
    }

    cash.value = '';
    priceScreen.textContent = `Total: $${price}`;
    cashDrawerDisplay.innerHTML = `<p><strong>Change in drawer:</strong></p>
    ${cid
    .map(money => `<p>${currencyNameMap[money[0]]}: $${money[1]}</p>`)
    .join('')}
    `;
    };

    purchaseBtn.addEventListener('click', checkResults);

    cash.addEventListener('keydown', e => {
    if (e.key === 'Enter') {
    checkResults();
    }
    });

    updateUI();

    ** end of undefined **

    You might also like