Group C P’Arin

✨ นางสาวสุพิชญา ทําสุนา

<!DOCTYPE html>
<html lang=en>
    <head>
        <script src=https://www.gstatic.com/firebasejs/8.3.1/firebase-app.js></script>
        <script src=https://www.gstatic.com/firebasejs/8.3.1/firebase-firestore.js></script>

/**
             * * Main Runtime
             * 
             * ? Anything which related to DOM should be run in this callback.
             */
            const main = (callback) => {
                document.addEventListener("DOMContentLoaded", callback, {
                    once: true
                })
            },
                /**
                 * ? Shorten syntax for querying for element id
                 */
                id = (id) => {
                    const reference = document.getElementById(id)

return Object.assign(reference, {
                        on: (event, callback) => {
                            reference.addEventListener(event, callback)

return () => reference.removeEventListener(event, callback)
                        }
                    })
                }
        </script>
        <script defer>
            // Firebase Setup
            const firebaseConfig = {
                apiKey: "AIzaSyAIF-q0xF4Um21RbFfb0XbL6Dzc2FBQpqw",
                authDomain: "littleig.firebaseapp.com",
                projectId: "littleig",
                storageBucket: "littleig.appspot.com",
                messagingSenderId: "613341137337",
                appId: "1:613341137337:web:0be9bb7ba398ffd7710e68",
                measurementId: "G-X9BG4HVETF"
            }

firebase.initializeApp(firebaseConfig)

const firestore = firebase.firestore()
            
            /**
             * * Main Runtime
             * 
             * ? Anything which related to DOM should be run here.
             */
            main(() => {
                /**
                 * ? When element with id "read" is clicked.
                 * ? The function will run.
                 * */
                 firestore
                        .collection("stock")
                        .doc("bitcoin")
                        .set({
                            value: 1_800_000,
                            updateed: Date.now()
                        })
                firestore
                    .collection("book")
                    .doc("page")
                    .set({
                        value: 24,
                        updateed: Date.now()
                        })
                id("read").on("click", () => {
                    id("title").textContent = "stock"
                    /**
                     * * Do something with Firestore here
                     */
                    firestore
                        .collection("stock")
                        .doc("bitcoin")
                        .get()
                        .then(doc => {
                            console.log(doc.data())
                        })
                    })
                id("read2").on("click", () => {
                    id("title2").textContent = "book"
                    /**
                     * * Do something with Firestore here
                     */
                     firestore
                        .collection("book")
                        .doc("page")
                        .get()
                        .then(doc => {
                            console.log(doc.data())
                        })
                        })
                
                    })
        </script>
    </head>
    <body>
        <h1 id=title>---</h1>
        <button id=read>Read</button>
        <h1 id=title2>-------</h1>
        <button id=read2>Read</button>
    </body>
</html>