test

✨ นายธนเดช แซ่ฉั่ว

<!DOCTYPE html>
<html lang=en>
    <head>
        <style>
            body{
                background: lightgoldenrodyellow;
            }
        </style>
        <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: "AIzaSyB2e4g28_wcpACSi0MTUOhlU4dFbgq9FGQ",
                authDomain: "test-abff9.firebaseapp.com",
                databaseURL: "https://test-abff9-default-rtdb.firebaseio.com",
                projectId: "test-abff9",
                storageBucket: "test-abff9.appspot.com",
                messagingSenderId: "962906316741",
                appId: "1:962906316741:web:bad8f18117d58a3702f5ac",
                measurementId: "G-WV39L91T2F"
            };

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.
                 * */
                id("read").on("click", () => {
                    id("title").textContent = " "

firestore
                    .collection('text')
                    .doc('message')
                    .get()
                    .then(doc =>{
                        const data = doc.data()

id("title").textContent = data.message1
                    })
                        
                })
            })
        </script>
    </head>
    <body>
        <h1 id=title>-----</h1>
        <button id=read>Show</button>
    </body>
</html>