Hello World! (Copy 7325)

✨ CHATCHANON KEAWSUKKHO

<!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>
        <style>
            body{
                background-color: lightblue;
            }
            h1{
                position: relative;
                margin-top: 50px;
                color: white;
                text-align: center;
            }
            .button{
                position: relative;
                margin-top: 50px;
                margin-left: 45%;
                background-color: white;
                color: black;
                border: 2px solid #555555;
                padding: 16px 32px;
                text-align: center;
                text-decoration: none;
                display: inline-block;
                font-size: 16px;
                transition-duration: 0.4s;
                cursor: pointer;
            }
            .button:hover {
                background-color: #555555;
                color: white;
            }
        </style>
        <script>
            // Helper 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>
            const firebaseConfig = {
                apiKey: "AIzaSyDo2Afaf-1xgoQMAD3cWVmfmtaS1ZPJi38",
                authDomain: "markmulti-688cb.firebaseapp.com",
                projectId: "markmulti-688cb",
                storageBucket: "markmulti-688cb.appspot.com",
                messagingSenderId: "17583083569",
                appId: "1:17583083569:web:bb1a162ee9f214e2368510",
                measurementId: "G-E4NL986EDB"
            }

firebase.initializeApp(firebaseConfig)
            const firestore = firebase.firestore()

main(() => {
                id("read").on("click", () => {
                    id("text").textContent = "wait..."

firestore
                        .collection("coin")
                        .doc("share")
                        .get()
                        .then(doc => {
                            const data = doc.data()
                            console.log(data)
                            text.textContent = data.value1
                            text2.textContent = data.value2
                            text3.textContent = data.value3
                            text4.textContent = data.value4
                            text5.textContent = data.value5
                            text6.textContent = data.value6
                            text7.textContent = data.value7
                            text8.textContent = data.value8
                            text9.textContent = data.value9
                            text10.textContent = data.value10
                        })
                })
            })
        </script>
    </head>
    <body>
        <h1>10 อันดับค่ายรถยนต์ยอดขายสูงสุดประจำไตรมาสแรกปี63</h1>
        <button class="button" id=read>click for read</button>
        <h1>............................................................................................................................................................................................</h1>
        <h1>brand, Number sold out</h1>
        <h1 id = "text" h1>....</h1>
        <h1 id = "text2" h1></h1>
        <h1 id = "text3" h1></h1>
        <h1 id = "text4" h1></h1>
        <h1 id = "text5" h1></h1>
        <h1 id = "text6" h1></h1>
        <h1 id = "text7" h1></h1>
        <h1 id = "text8" h1></h1>
        <h1 id = "text9" h1></h1>
        <h1 id = "text10" h1></h1>
    </body>
</html>