Scribd Logo
Upload

Welcome to Scribd!

  • App จดบันทึก

    Uploaded by

    l2665606
    0 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    0 views6 pages

    App จดบันทึก

    Uploaded by

    l2665606

    Copyright:

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

    index.

    html
    <!DOCTYPE html>
    <html lang=”th”>
    <head>
    <meta charset=”UTF-8”>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0”>

    <title>แอพพลิเคชันรายการซื้อของ</title>
    <link rel=”stylesheet” href=”styles.css”>
    </head>
    <body>
    <div class=”container”>

    <h1>รายการซื้อของ</h1>
    <input type=”date” id=”datePicker”>
    <div id=”itemContainer”></div>

    <input type=”text” id=”newItemInput” placeholder=”เพิ่มรายการใหม่...”>

    <button id=”addItemButton”>เพิ่มรายการ</button>
    <div class=”totalContainer”>

    <label>ราคารวม:</label>

    <span id=”totalPrice”>0.00</span> บาท


    </div>

    <button id=”calculateButton”>คำนวณราคารวม</button>

    <button id=”sendMessageButton”>ส่งรายละเอียดผ่าน Messenger</button>


    </div>
    <script src=”script.js”></script>
    </body>
    </html>

    Style.css

    Body {
    Font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
    Background-color: #f0f4f8;
    Display: flex;
    Justify-content: center;
    Align-items: center;
    Height: 100vh;
    Margin: 0;
    }

    .container {
    Background-color: #ffffff;
    Padding: 20px;
    Border-radius: 10px;
    Box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    Text-align: center;
    Width: 450px;
    }

    H1 {
    Color: #00897b;
    Font-size: 26px;
    Margin-bottom: 20px;
    }

    #datePicker {
    Padding: 10px;
    Margin: 10px 0;
    Font-size: 14px;
    Width: calc(100% - 20px);
    Border: 1px solid #ccc;
    Border-radius: 4px;
    }
    .item {
    Display: flex;
    Justify-content: space-between;
    Align-items: center;
    Margin: 15px 0;
    }

    .item label {
    Flex: 2;
    Text-align: left;
    Font-size: 16px;
    Color: #555;
    }

    .item input {
    Flex: 1;
    Padding: 10px;
    Margin: 0 5px;
    Font-size: 14px;
    Border: 1px solid #ccc;
    Border-radius: 4px;
    }

    #newItemInput {
    Padding: 10px;
    Margin: 15px 0;
    Font-size: 14px;
    Width: calc(100% - 20px);
    Border: 1px solid #ccc;
    Border-radius: 4px;
    }
    #addItemButton,
    #calculateButton,
    #sendMessageButton {
    Cursor: pointer;
    Background-color: #00acc1;
    Color: white;
    Border: none;
    Border-radius: 4px;
    Padding: 12px;
    Width: 100%;
    Margin-top: 10px;
    Font-size: 16px;
    }

    #addItemButton:hover,
    #calculateButton:hover,
    #sendMessageButton:hover {
    Background-color: #007c91;
    }

    .totalContainer {
    Display: flex;
    Justify-content: space-between;
    Align-items: center;
    Margin-top: 20px;
    Font-size: 18px;
    Font-weight: bold;
    Border-top: 1px solid #ddd;
    Padding-top: 10px;
    }
    #totalPrice {
    Color: #d32f2f;
    }

    Script.js
    Const items = [

    “คนอร์”, “ถุงร้อน 6×11”, “ถุงหิ้ว 7×15”, “น้ำกระเทียมดอง”, “ข้าวเหนียว”, “ปลาร้ารวม”,

    “ปลาร้าปลากระดี่”, “น้ำต้มปลาร้าใส่ส้มตำ”, “กระปิแท้”, “มะเขือเทศ”, “มะเขือเปราะ”, “มะนาว”, “ต้นหอม


    ผักชี”
    ];

    Const itemContainer = document.getElementById(‘itemContainer’);

    Items.forEach(item => {
    addItemToDOM(item);
    });

    Document.getElementById(‘addItemButton’).addEventListener(‘click’, () => {
    Const newItemInput = document.getElementById(‘newItemInput’);
    Const newItem = newItemInput.value.trim();
    If (newItem) {
    addItemToDOM(newItem);
    newItemInput.value = ‘’;
    }
    });

    Document.getElementById(‘calculateButton’).addEventListener(‘click’, () => {
    calculateTotal();
    });

    Document.getElementById(‘sendMessageButton’).addEventListener(‘click’, () => {
    sendToMessenger();
    });

    Function addItemToDOM(item) {
    Const itemDiv = document.createElement(‘div’);
    itemDiv.classList.add(‘item’);
    itemDiv.innerHTML = `
    <label>${item}</label>

    You might also like